Time for action – adding handlers to control the ship

The following block of code should be added to the onload event handler for the ship image object:

ship.onload = function () { context.drawImage(ship, shipPos[0], shipPos[1]); addAliens(); $(canvas).focus().bind("keydown", function (e) { if (e.which === 37 || e.which === 39) { context.clearRect(shipPos[0], shipPos[1], ship.width, ship.height); if (e.which === 37 && shipPos[0] > 4) { shipPos[0] = shipPos[0] - 4; } else if (e.which === 39 && shipPos[0] < 896 - ship.width) { shipPos[0] = shipPos[0] + 4; } context.drawImage(ship, shipPos[0], shipPos[1]); } else if (e.which === 32) { context.fillStyle = "#fff"; var bulletPos = shipPos[0] + 20, newBulletPos = [bulletPos, 596], alienLength = aliens.length, ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.