HTML5 Game Development Series tutorial 3)

Address: http://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3/

Today we will add animations and other interesting features. Our example includes a space shuttle and a new component-dialog box. This dialog box contains two pages. The button is used to switch between the two pages, and the dialog box is hidden when you click it for the second time.

The previous article introduces the HTML5 Game Development Series tutorial 2 ).

Step 1: HTML

                                          HTML5 Game Development - Lesson 3 | Script Tutorials                                                                                                                                                                                 HTML5 Game Development - Lesson 3                        Back to original tutorial on Script Tutorials                        

Step 2: CSS

Css/main.css

Step 3: JS

Js/jquery-2.0.0.min.js (1.5.2 is used in the original article)

 iBgShiftX = 1024 bDrawDialog = ;   iDialogPage = 1.x =.y =.w =.h =.state =.imageShift = 0.image =.x =.y =.w =.h =.image =.bDrag = 0, 0 bg_gradient = ctx.createLinearGradient(0, 200, 0, 4000.0, 'rgba(160, 160, 160, 0.8)'1.0, 'rgba(250, 250, 250, 0.8)'=100, 100700, 100700, 500100, 500= 2= 'rgbs(128, 128, 128, 0.5)'= '42px MONACO'= 'center'= 'top'= '#000'= 2= 2= 2= '#fff' (iDialogPage == 1'Welcome to lesson #3', ctx.canvas.width/2, 150);                        ctx.font = '24px MONACO''After closing dialog you will able', ctx.canvas.width / 2, 250'to handle with spaceship with your mouse', ctx.canvas.width  /  2, 280  (iDialogPage == 2'Second page of dialog', ctx.canvas.width/2, 150);                        ctx.font = '24px MONACO''Any another text', ctx.canvas.width / 2, 250-= 10 (iBgShiftX <= 0= 10240 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600        ctx.drawImage(spaceShip.image, 0, 0, spaceShip.w, spaceShip.h, spaceShip.x - 128, spaceShip.y - 128        ctx.drawImage(button.image, 0        ctx.font = '22px MONACO'= '#ffffff''next/hide/show', 400, 465'dialog', 400, 500$(= document.getElementById('scene'= canvas.getContext('2d' width = height =        backgroundImage = = 'images/stars.jpg'= = 'Error loading the background image.'         oSpShipImage = = 'images/space_ship.png'= =  SpaceShip(400, 300, 256, 256         buttonImage = = 'images/button.png'= =  Button(310, 450, 180, 120, 'normal''#scene').mousedown( mouseX = e.originalEvent.layerX || 0 mouseY = e.originalEvent.layerY || 0                 (!bDrawDialog &&> (spaceShip.x - 128) && mouseX < (spaceShip.x - 128 + spaceShip.w) &&> (spaceShip.y - 128) && mouseY < (spaceShip.y - 128 += ==                 (mouseX > button.x && mouseX < (button.x + button.w) && mouseY > button.y && mouseY < (button.y += 'pressed'= 262'#scene').mousemove( mouseX = e.originalEvent.layerX || 0 mouseY = e.originalEvent.layerY || 0             (!bDrawDialog &&== (button.state != 'pressed'= 'normal'= 0 (mouseX > button.x && mouseX < button.x + button.w && mouseY > button.y && mouseY < button.y += 'hover'= 131'#scene').mouseup(=  (button.state == 'pressed' (iDialogPage == 0++= !  (iDialogPage == 2= 0= !++= 'normal'= 030

Source code: http://www.script-tutorials.com/demos/166/source.zip