jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
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); [ 297 ] Chapter 10 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, fire = function () { if (newBulletPos[1] > 0) { context.clearRect(newBulletPos[0], newBulletPos[1], 3, 6); newBulletPos[1] = newBulletPos[1] - 2; context.fillRect(newBulletPos[0], newBulletPos[1], 3, 6); for (var x = 0; x < alienLength; x++) { if (newBulletPos[1] === aliens[x].posY || newBulletPos[1] === aliens[x].posY + aliens[x].img.height) { if (newBulletPos[0] > aliens[x].posX && newBulletPos[0] - aliens[x].posX < aliens[x].img.width + 13) { context.clearRect(aliens[x].posX, aliens[x].posY, aliens[x].img.width, aliens[x].img.height);
Canvas Animations aliens.splice(x, 1); clearInterval(bulletInt); context.clearRect(newBulletPos[0], newBulletPos[1], 3, 6); if (!aliens.length) { clearInterval(motionInt); dirCounter = 0; alienSpeed = alienSpeed - 100; addAliens(); } } } } } else { context.clearRect(newBulletPos[0], newBulletPos[1], 3, 6); clearInterval(bulletInt); } }, bulletInt = setInterval(function () { fire(); }, 1); } }); }; What just happened? We use jQuery to attach an event handler to the element that listens for keydown events. Although we're not providing support for IE and so don't need jQuery for its cross-browser normalization when attaching events, it still makes the event handling process much easier. Within the function that is executed whenever a keydown event is detected, we check for the presence of either the left or right arrow keys, which have a which property in the event object of 37 and 39, or the space bar, which has the code 32. If the code 37 or 39 is detected we then use a nested if statement to determine between the two keys. We also check that the ship hasn't reached either the left edge, or the right edge of the canvas. We then use the clearRect() function to remove the ship and draw a new one either 4 pixels to the left, or 4 pixels to the right depending on which key was pressed. This gives the ship left and right motion along the bottom of the canvas. The second branch of the outer conditional deals with the space bar being pressed, which causes a bullet to leave the ship and travel in a straight line to the top of the canvas. The bullets will be white, so we set the fillStyle property of the canvas to #fff. [ 298 ]
- Page 267 and 268: CSS3 Animations An unfortunate prob
- Page 269 and 270: CSS3 Animations The context of this
- Page 271 and 272: CSS3 Animations Time for action - i
- Page 273 and 274: CSS3 Animations The first variable
- Page 275 and 276: CSS3 Animations Time for action - a
- Page 277 and 278: Download from Wow! eBook CSS3 Anim
- Page 279 and 280: CSS3 Animations We also have to upd
- Page 281 and 282: CSS3 Animations flatMatrix[3] = fla
- Page 283 and 284: CSS3 Animations When updating the s
- Page 285 and 286: CSS3 Animations translate translate
- Page 287 and 288: Canvas Animations Subjects that we'
- Page 289 and 290: Canvas Animations We can set the co
- Page 291 and 292: Download from Wow! eBook Canvas An
- Page 293 and 294: Canvas Animations All imageData obj
- Page 295 and 296: Canvas Animations context.beginPath
- Page 297 and 298: Canvas Animations For the next part
- Page 299 and 300: Canvas Animations Time for action -
- Page 301 and 302: Canvas Animations 3. Save the new p
- Page 303 and 304: Canvas Animations Time for action -
- Page 305 and 306: Canvas Animations Once the rectangl
- Page 307 and 308: Canvas Animations We then define tw
- Page 309 and 310: Canvas Animations }, context.lineTo
- Page 311 and 312: Canvas Animations Creating a canvas
- Page 313 and 314: Canvas Animations Time for action -
- Page 315 and 316: Canvas Animations What just happene
- Page 317: Canvas Animations What just happene
- Page 321 and 322: Canvas Animations Pop quiz - creati
- Page 323 and 324: Download from Wow! eBook
- Page 325 and 326: Pop Quiz Answers Using fadeToggle()
- Page 327 and 328: Pop Quiz Answers Using slideToggle
- Page 329 and 330: Pop Quiz Answers Implementing the p
- Page 331 and 332: Pop Quiz Answers Animating the canv
- Page 333 and 334: show() or hide() method, triggering
- Page 335 and 336: cssHooks using 239 cssHooks feature
- Page 337 and 338: fading animations 20 flicker effect
- Page 339 and 340: proximity animations about 207 exte
- Page 341 and 342: scaleY 232 skew 232 skewX 232 skewY
- Page 343 and 344: jQuery 1.4 Reference Guide ISBN: 97
Time for action – adding handlers to control the ship<br />
The following block <strong>of</strong> code should be added to the onload event handler for the ship<br />
image object:<br />
ship.onload = function () {<br />
context.drawImage(ship, shipPos[0], shipPos[1]);<br />
addAliens();<br />
$(canvas).focus().bind("keydown", function (e) {<br />
if (e.which === 37 || e.which === 39) {<br />
context.clearRect(shipPos[0], shipPos[1], ship.width,<br />
ship.height);<br />
[ 297 ]<br />
Chapter 10<br />
if (e.which === 37 && shipPos[0] > 4) {<br />
shipPos[0] = shipPos[0] - 4;<br />
} else if (e.which === 39 && shipPos[0] < 896 - ship.width) {<br />
shipPos[0] = shipPos[0] + 4;<br />
}<br />
context.drawImage(ship, shipPos[0], shipPos[1]);<br />
} else if (e.which === 32) {<br />
context.fillStyle = "#fff";<br />
var bulletPos = shipPos[0] + 20,<br />
newBulletPos = [bulletPos, 596],<br />
alienLength = aliens.length,<br />
fire = function () {<br />
if (newBulletPos[1] > 0) {<br />
context.clearRect(newBulletPos[0],<br />
newBulletPos[1], 3, 6);<br />
newBulletPos[1] = newBulletPos[1] - 2;<br />
context.fillRect(newBulletPos[0], newBulletPos[1], 3, 6);<br />
for (var x = 0; x < alienLength; x++) {<br />
if (newBulletPos[1] === aliens[x].posY ||<br />
newBulletPos[1] === aliens[x].posY +<br />
aliens[x].img.height) {<br />
if (newBulletPos[0] > aliens[x].posX &&<br />
newBulletPos[0] - aliens[x].posX <<br />
aliens[x].img.width + 13) {<br />
context.clearRect(aliens[x].posX, aliens[x].posY,<br />
aliens[x].img.width, aliens[x].img.height);