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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
