const b0 = document.getElementById('leftright');
const b1 = document.getElementById('updown');
const b2 = document.getElementById('stop');
//Move left/right
b0.addEventListener("click", () =>
{
if(still==1)
{
return;
}
stop=0;
still=1;
requestAnimationFrame(moveLeftRight);
});
//Move up/down
b1.addEventListener("click", () =>
{
if(still==1)
{
return;
}
stop=0;
still=1;
requestAnimationFrame(moveUpDown);
});
b2.addEventListener("click", () =>
{
stop=1;
});
b0.style.left = 0 + 'px';
b0.style.top = 300 + 'px';
b1.style.left = 100 + 'px';
b1.style.top = 300 + 'px';
b2.style.left = 200 + 'px';
b2.style.top = 300 + 'px';
const chick = document.getElementById('c0');
let x = 0;
let y = 0;
let direction = 1; // 1: Right (bottom), -1: Left (top)
let speed = 1;
let maxX = 300;
let maxY = 300;
let stop = 0; //[0] Operational [1] Stopped
let still = 0; //[0] Not yet executed [1] Running
x=100;
y=100;
chickInit();
//Chick initial position
function chickInit()
{
chick.style.left = 100 + 'px';
chick.style.top = 100 + 'px';
}
//Up and down movement
function moveUpDown()
{
if(stop==1)
{
still=0;
return;
}
// Left and right movement
y += speed * direction;
// Change direction when you reach the edge of the screen
if (y+50 >= maxY || y <= 0)
{
direction *= -1;
}
chick.style.left = x + 'px';
chick.style.top = y + 'px';
requestAnimationFrame(moveUpDown);
}
//Left and right movement
function moveLeftRight()
{
if(stop==1)
{
still=0;
return;
}
// Left and right movement
x += speed * direction;
// Change direction when you reach the edge of the screen
if (x+50 >= maxX || x <= 0)
{
direction *= -1;
}
chick.style.left = x + 'px';
chick.style.top = y + 'px';
requestAnimationFrame(moveLeftRight);
}
if(still==1) { return; }
The still variable is used to determine whether the button is currently being executed. This function prevents execution while the left/right or up/down buttons are being executed.
function moveUpDown()
This function performs up/down operations.
y += speed * direction;
Changing the y coordinate changes the up/down movement coordinate. 1: Downward -1: Upward
if (y+50 >= maxY || y <= 0)
"y+50 >= maxY" determines whether the bottom edge of the screen will be exceeded in the downward direction. "y <= 0" determines whether the top edge of the screen will be exceeded in the upward direction. This checks the following. If the check returns true, the direction will change to downward if the direction is upward, or to upward if the direction is downward.
requestAnimationFrame(moveUpDown);
The process repeats, and the specified function is executed in requestAnimationFrame to continue the movement.
function moveLeftRight()
This function executes left-right movement.
x += speed * direction;
Changing the x coordinate changes the coordinate for up-down movement. 1: Rightward -1: Leftward
if (x+50 >= maxX || x <= 0)
"x+50 >= maxX" determines whether the direction goes beyond the right border of the screen. "x <= 0" determines whether the direction goes beyond the left border of the screen. This checks whether the direction goes beyond the left border of the screen. If the check returns true, the direction changes to the right if it is left, or to the left if it is right.
requestAnimationFrame(moveLeftRight);
The process repeats, and the specified function is executed by requestAnimationFrame to continue the action.
[Acknowledgements]
images used are from "illustration by nawmin.com" Thank you very much.
