Hi, I am working on and html5 javascript game, and I recently just added keyboard input. The concept is that whenever and arrow key is pressed, it updates the position of the shape in the html5 canvas. I thought it was working fine, however after testing, the shapes seem to have some velocity to them, when you hold down the arrow key they seem to pick up speed. I am still new to game development, so it may just be a stupid mistake on my part. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Making things move</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
canvas
{
border: 2px solid gray;
background-color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var x = 0;
var y = 0;
var xWidth = 30;
var yHeight = 30;
function MoveLeft(){
x -= 1;
};
function MoveUp(){
y -= 1;
};
function MoveRight(){
x += 1;
};
function MoveDown(){
y += 1;
};
function GameLoop(){
window.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37:
MoveLeft();
break;
case 38:
MoveUp();
break;
case 39:
MoveRight();
break;
case 40:
MoveDown();
break;
}
}, false);
if(x + xWidth >= canvasWidth){
x = canvasWidth - xWidth;
}else if(x <= 0){
x = 0;
}
if(y + yHeight >= canvasHeight){
y = canvasHeight - yHeight;
}else if(y <= 0){
y = 0;
}
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle="rgb(238, 64, 0)";
context.fillRect(x, y, xWidth, yHeight);
setTimeout(GameLoop, 33);
};
GameLoop();
});
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
Just to further explain what is going on, the game loop is running every 33 milliseconds and when it does that it clears the entire canvas and then draws a new one based on the x and y variables which increase or decrease based on the keyboard input.
