This is a very crude recipe to introduce key events. It is a recipe that just gives you a fair idea of how the movements of objects can occur on a key press, which is very useful for gaming. The output is as follows:
The HTML code:
<html>
<head>
<title>Event Handling example</title>
<script src="CarMoves.js"></script>
</head>
<body onload=init()>
<canvas width="800" height="800" id="MyCanvasArea" style="border:2px solid blue;" tabindex="0">
Canvas tag is not supported by your browser
</canvas>
</body>
</html>The JavaScript code:
var ctx;
var can;
var xPos;
var yPos;
var rot;
var carimage;
var TO_RADIANS = Math.PI/180;
function init(){
can = document.getElementById("MyCanvasArea");
can.addEventListener('keydown', doKeyDown, true);
ctx = can.getContext("2d");
xPos=can.width/2;
yPos=can.height/2;
carimage=new Image();
carimage.src='carTopView...