Move Image on a slide with Arrow Keys

[Zin27040520jl2c]

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

[Lilybiri]

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. 

[TLCMediaDesign · Accepted solution]

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";
}
}

[Zin27040520jl2c]

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]

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

It should be:

let currentY = paresInt(figurePictureC.style.top);