HTML5 Game Development Series tutorial 6)

Http://www.script-tutorials.com/html5-game-development-lesson-6/

This is our latest HTML5 game development series. We will continue to use canvas for HTML5 Game Development Series articles. This is a complete example of a classic computer game-tank wars. I will teach you how to use alternative array-maps and how to detect collisions between active objects (tanks) and the surrounding environment.

The previous article is introduced in the HTML5 Game Development Series tutorial 5 ).

Step 1: HTML

Index.html

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

Step 2: CSS

Css/main.css

I will not publish the content of the css file. The css file contains only some page cascading styles. You can find the file in the source code package.

Step 3: JS

Js/jquery-2.0.0.min.js

Our code uses JQuery. The JQuery file is in the source code package. The following js file is the most important for our game because it implements all the logic of our game.

Js/script. js

   canvas, context;     imgBrick, imgSteel, imgWater, imgForest, imgTank;    aMap;    oTank;     iCellSize = 24;    iXCnt = 26  iYCnt = 26              .x =     .y =     .w =     .h =     .i = 0     .image =         context.clearRect(0, 0                    context.fillStyle = '#111'     context.fillRect(0, 0              ( y = 0; y < iYCnt; y++          ( x = 0; x < iXCnt; x++                               0                                       1                     context.drawImage(imgBrick, 0, 0, iCellSize, iCellSize, x * iCellSize, y *                                       2                     context.drawImage(imgSteel, 0, 0, iCellSize, iCellSize, x * iCellSize, y *                                       3                     context.drawImage(imgForest, 0, 0, iCellSize, iCellSize, x * iCellSize, y *                                       4                     context.drawImage(imgWater, 0, 0, iCellSize, iCellSize, x * iCellSize, y *                                     context.drawImage(oTank.image, oTank.i * oTank.w, 0   $(     canvas = document.getElementById('scene'     canvas.width = iXCnt *     canvas.height = iYCnt *     context = canvas.getContext('2d'      aMap =           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0           [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [0, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0           [0, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0           [0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0           [3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0           [3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2           [3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2           [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0           [2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0           [0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0           [0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0           [0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0           [0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0           [0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0           [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0           [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0            imgBrick =      imgBrick.src = 'images/brick.png'     imgSteel =      imgSteel.src = 'images/steel.png'     imgWater =      imgWater.src = 'images/water.png'     imgForest =      imgForest.src = 'images/forest.png'           imgTank =      imgTank.src = 'images/tank.png'     oTank =  Tank(iCellSize * 9, iCellSize * 24, 48, 48      $(window).keydown(                       38:                   oTank.i = 2                                    iCurCelX = (2 * oTank.x) / 48;                    iCurCelY = (2 * oTank.y) / 48                                       iTest1 = aMap[iCurCelY - 1                      iTest2 = aMap[iCurCelY - 1][iCurCelX + 1                       ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3                         oTank.y -= 24                          (oTank.y < 0                             oTank.y = 0                                  40:                   oTank.i = 3                                   iCurCelX = (2 * oTank.x) / 48                  iCurCelY = (2 * oTank.y) / 48                  (iCurCelY + 2 <                      iTest1 = aMap[iCurCelY + 2                      iTest2 = aMap[iCurCelY + 2][iCurCelX + 1                       ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3                         oTank.y += 24                          (oTank.y > 576) {                               oTank.y = 576                                  37:                    oTank.i = 1                   iCurCelX = (2 * oTank.x) / 48                  iCurCelY = (2 * oTank.y) / 48                  iTest1 = aMap[iCurCelY][iCurCelX - 1                  iTest2 = aMap[iCurCelY + 1][iCurCelX - 1                   ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3                     oTank.x -= 24                      (oTank.x < 0                         oTank.x = 0                                 39:                   oTank.i = 0                                   iCurCelX = (2 * oTank.x) / 48                  iCurCelY = (2 * oTank.y) / 48                  iTest1 = aMap[iCurCelY][iCurCelX + 2                  iTest2 = aMap[iCurCelY + 1][iCurCelX + 2                   ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3                     oTank.x += 24                      (oTank.x > 576                         oTank.x = 576                          setInterval(drawScene, 40 });

I have added comments in many places, so I hope this code is easy to understand.

Conclusion:

This time we developed a complete HTML5 game-tank wars. I am very happy to see your thanks and comments. Good luck!