Buttons to move objects and characters in html5 canvas (game)

[Offensive5E8D]

I remember you could make games where something could move with buttons like wasd or any other button (in actionscript)

Can you do this in html5 canvas?

[JoãoCésar]

Hi.

Yeah. It's totally possible.

Sample (simple):

https://bit.ly/36O1O7G

Sample (advanced):

https://bit.ly/2UEa1Wu

Here are two approaches to move a character using keyboard keys:

Simple:

var root = this;
var player = root.player; // player is the instance name assigned in the Properties panel

root.main = function()
{
	root.keyForce = 5;
	window.addEventListener("keydown", root.keyDownHandler);
	window.addEventListener("keyup", root.keyUpHandler);
};

root.keyDownHandler = function(e)
{
	if (e.key === "a" || e.key === "ArrowLeft")
		player.x -= root.keyForce;
	else if (e.key === "d" || e.key === "ArrowRight")
		player.x += root.keyForce;
	
	if (e.key === "w" || e.key === "ArrowUp")
		player.y -= root.keyForce;
	else if (e.key === "s" || e.key === "ArrowDown")
		player.y += root.keyForce;
};

root.main();

Advanced:

var root = this;
var player = root.player; // player is the instance name assigned in the Properties panel

var keys = {};

root.main = function()
{
	root.friction = 0.95;
	root.keyForce = 50;
	player.vX = 0;
	player.vY = 0;
	player.minVX = 20;
	player.minVY = 20;
	window.addEventListener("keydown", root.keyDownHandler);
	window.addEventListener("keyup", root.keyUpHandler);
	root.on("tick", root.tickHandler);
};

root.keyDownHandler = function(e)
{
	keys[e.key] = true;
};

root.keyUpHandler = function(e)
{
	delete keys[e.key];
};

root.tickHandler = function(e)
{
	if (keys.a || keys.ArrowLeft)
		player.vX -= root.keyForce;
	else if (keys.d || keys.ArrowRight)
		player.vX += root.keyForce;
	
	if (keys.w || keys.ArrowUp)
		player.vY -= root.keyForce;
	else if (keys.s || keys.ArrowDown)
		player.vY += root.keyForce;
	
	player.vX *= root.friction;
	player.vY *= root.friction;
	player.x += player.vX * e.delta * 0.001;
	player.y += player.vY * e.delta * 0.001;
	
	if (Math.abs(player.vX) > 0 && Math.abs(player.vX) < player.minVX)
			player.vX = 0;
	
	if (Math.abs(player.vY) > 0 && Math.abs(player.vY) < player.minVY)
			player.vY = 0;
};

root.main();

Files / source / code / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/move_char_using_keys

I hope these help.

Regards,

JC