Skip to main content
Z
Zin27040520jl2c
Participating Frequently
December 20, 2022
Answered

Move Image on a slide with Arrow Keys

  • December 20, 2022
  • 2 replies
  • 544 views

Hey,

 

I am trying to make a simple game on captivate. the Idea is that on a slide I inserted an image object and want to move this image if an arrow key is clicked.
I inserted a klickbox and assigned it with a button. If the action was successful I run a Javascript code like below.

Js code:

var moveX = 0, moveY = 0;
const speed = 10; 
var w = document.body.clientWidth;  
var h = document.body.clientHeight;

var view_W = w - 110;  
var view_H = h - 100;

window.addEventListener("keydown", Control);
function Control() 
     {      
        let key = event.key;
        let figurePicture = document.getElementById('Image_401');
         if (key == "ArrowRight" && moveY < view_H)  
           {  
               moveY = moveY + speed;  
               figurePicture.style.bottom = moveY + "px";
               figurePicture.style.left = moveX + "px";   
           }    
    }

 

The controle function seems not to. Is there a better way to realise this ? 
Any help would be appreciated

 

This topic has been closed for replies.
Correct answer TLCMediaDesign

You have a few problems.

 

1. view_H is always a negative number.

2. You need to get the images current location to move it again

3. you need to get the "C" element

 

I don't know why you are getting clientWidth unless you are trying to keep the image on the stage, but there are other ways to do this, i.e. don't move left if the objects left is already less than or equal to your increment ro some other boundary.

 

So say that you are moving 10px at a time, you would need to increment a variable to determine how many times it's moved and how far. YOu can't use the less than sign in the code.

 

Here is an example to move left and right.

 

const speed = 10;

window.addEventListener("keydown", Control);

function Control()
{
let key = event.key;
let figurePictureC = document.getElementById('Image_1c');
let currentX = parseInt(figurePictureC.style.left);

if (key == "ArrowRight" )
{
figurePictureC.style.left = (currentX + speed) + "px";
}

if (key == "ArrowLeft" )
{
figurePictureC.style.left = (currentX - speed) + "px";
}
}

2 replies

TLCMediaDesign
TLCMediaDesignCorrect answer
Inspiring
December 21, 2022

You have a few problems.

 

1. view_H is always a negative number.

2. You need to get the images current location to move it again

3. you need to get the "C" element

 

I don't know why you are getting clientWidth unless you are trying to keep the image on the stage, but there are other ways to do this, i.e. don't move left if the objects left is already less than or equal to your increment ro some other boundary.

 

So say that you are moving 10px at a time, you would need to increment a variable to determine how many times it's moved and how far. YOu can't use the less than sign in the code.

 

Here is an example to move left and right.

 

const speed = 10;

window.addEventListener("keydown", Control);

function Control()
{
let key = event.key;
let figurePictureC = document.getElementById('Image_1c');
let currentX = parseInt(figurePictureC.style.left);

if (key == "ArrowRight" )
{
figurePictureC.style.left = (currentX + speed) + "px";
}

if (key == "ArrowLeft" )
{
figurePictureC.style.left = (currentX - speed) + "px";
}
}

    Z
    Zin27040520jl2cAuthor
    Participating Frequently
    December 27, 2022

    Thank you ^^
    the right and left buttons are working. but I just added the up and down and I couldn't get the Current Y coordinate of the figure. this is the code that I am using :

    window.addEventListener("keydown", Control);
var moveX = 0, moveY = 0; 
const speed = 10;

window.addEventListener("keydown", Control);

function Control()
{
let key = event.key;
let figurePictureC = document.getElementById('Image_417c');
let arrowPic = document.getElementById('arrow_1c');
let currentX = parseInt(figurePictureC.style.left);
let currentY = paresInt(figurePictureC.style.bottom);
alert("x:" + currentX + "|y:" + currentY);

if (key == "ArrowRight" && currentX <= 50)
{    	 
     figurePictureC.style.left = (currentX + speed) + "px";
     

}
if (key == "ArrowLeft" && currentX >= -70)
{ 
     figurePictureC.style.visibility = "hidden";
     figurePictureC.style.left = (currentX - speed) + "px";
}

if (key == "ArrowDown")  // down arrow key
{  
     figurePictureC.style.bottom = (currentY - speed) + "px";             
}
if (key == "ArrowUp")  
{ 
     figurePictureC.style.bottom = (currentY + speed) + "px";             
}
}

     

    I want also to change the visibility of figurePictureC using : 

    figurePictureC.style.visibility = "hidden";

     

    this method seems not to work. Any suggestions ?

    And thank you again for your help ^^

     

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    December 30, 2022

    There is no parameter called bottom. There is only left and top.

     

    It should be:

     

    let currentY = paresInt(figurePictureC.style.top);
    Lilybiri
    Lilybiri
    Legend
    December 20, 2022

    You want to move the 'object' 10px in the direction determined by the arrow? 

    Personally I would create a simple custom motion effect and use an advanced action triggered by the Click box Success event. But why do you use a click box (outdated object) instead of using the Arrows as buttons? Click box wouldn't even be allowed if you are in a Fluid Boxes responsive project.

    Effects are always relative to the present position, would be rather easy.

     

    Alternative: create multiple states each having a moved object, and use a State command. But that could become rather bothersome if you need a lot of possible movements in four directions. You can use the concatenation approach and good labeling for the states as in this post:

    https://blog.lilybiri.com/randomizing-in-captivate

     

    BTW It is possible to post your question in German, which I understand well but I will answer in English. 

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices