正文

原文地址：

今天我们将继续使用canvas来进行HTML5游戏开发系列的文章。这次我准备了一个新游戏，是基于第4篇的游戏，但是增加了火球，敌人和碰撞检测。故，我们的龙可以发射火球来杀死敌人，并且记录分数。这样该游戏就有更多的交互性。

之前的翻译文章可以点击这里：

第一步：HTML

首先是我们基础的html代码：

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

第二步：CSS

接着这里是CSS样式。

css/main.css

这次依然不打算显示出CSS文件的内容了，因为仅仅只是些页面布局样式。你可以在源代码包里找到该文件。

第三步：JS

js/script.js

canvas, ctx; 3 var backgroundImage; 4 var iBgShiftX = 100; dragon, enemy = balls = []; 8 var enemies = []; dragonW = 75; dragonH = 70; iSprPos = 0; iSprDir = 0; iEnemyW = 128; iEnemyH = 128; iBallSpeed = 10; iEnemySpeed = 2; dragonSound; wingsSound; explodeSound, explodeSound2; laughtSound; bMouseDown = iLastMouseX = 0; 26 var iLastMouseY = 0; 27 var iScore = 0; Dragon(x, y, w, h, image) { 32 this.x = x; 33 this.y = y; 34 this.w = w; 35 this.h = h; 36 this.image = image; 37 this.bDrag = false; 38 } Ball(x, y, w, h, speed, image) { 41 this.x = x; 42 this.y = y; 43 this.w = w; 44 this.h = h; 45 this.speed = speed; 46 this.image = image; 47 } Enemy(x, y, w, h, speed, image) { 50 this.x = x; 51 this.y = y; 52 this.w = w; 53 this.h = h; 54 this.speed = speed; 55 this.image = image; 56 } getRand(x, y) { 60 return Math.floor(Math.random() * y) + x; 61 } drawScene() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); iBgShiftX += 4; 69 if (iBgShiftX >= 1045) { 70 iBgShiftX = 0; 71 } 72 ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600); iSprPos++; 76 if (iSprPos >= 9) { 77 iSprPos = 0; 78 } (bMouseDown) { 82 if (iLastMouseX > dragon.x) { 83 dragon.x += 5; 84 } 85 if (iLastMouseY > dragon.y) { 86 dragon.y += 5; 87 } 88 if (iLastMouseX < dragon.x) { 89 dragon.x -= 5; 90 } 91 if (iLastMouseY < dragon.y) { 92 dragon.y -= 5; 93 } 94 } ctx.drawImage(dragon.image, iSprPos * dragon.w, iSprDir * dragon.h, dragon.w, dragon.h, 98 dragon.x - dragon.w / 2, dragon.y - dragon.h / 2, dragon.w, dragon.h); (balls.length > 0) { 102 for (var key in balls) { 103 if (balls[key] != undefined) { 104 ctx.drawImage(balls[key].image, balls[key].x, balls[key].y); 105 balls[key].x += balls[key].speed; (balls[key].x > canvas.width) { balls[key]; 109 } 110 } 111 } 112 } (enemies.length > 0) { 116 for (var ekey in enemies) { 117 if (enemies[ekey] != undefined) { 118 ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y); 119 enemies[ekey].x += enemies[ekey].speed; (enemies[ekey].x < - iEnemyW) { enemies[ekey]; 123 124 laughtSound.currentTime = 0; 125 laughtSound.play(); 126 } 127 } 128 } 129 } (balls.length > 0) { 133 for (var key in balls) { 134 if (balls[key] != undefined) { (enemies.length > 0) { 137 for (var ekey in enemies) { 138 if (enemies[ekey] != undefined && balls[key] != undefined) { 139 if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y 140 && balls[key].y < enemies[ekey].y + enemies[ekey].h) { 141 delete enemies[ekey]; 142 delete balls[key]; 143 iScore++; 144 145 explodeSound2.currentTime = 0; 146 explodeSound2.play(); 147 } 148 } 149 } 150 } 151 } 152 } 153 } ctx.font = '16px Verdana'; 157 ctx.fillStyle = '#fff'; 158 ctx.fillText('Score: ' + iScore * 10, 900, 580); 159 ctx.fillText('Plese click "1" to cast fireball', 100, 580); 160 161 } $(function(){ 167 canvas = document.getElementById('scene'); 168 ctx = canvas.getContext('2d'); width = canvas.width; 171 var height = canvas.height; backgroundImage = new Image(); 175 backgroundImage.src = 'images/hell.jpg'; 176 backgroundImage.onload = function() { 177 } 178 backgroundImage.onerror = function() { 179 console.log('Error loading the background image.'); 180 } dragonSound = new Audio('media/dragon.wav'); 184 dragonSound.volume = 0.9; 185 186 laughtSound = new Audio('media/laught.wav'); 187 laughtSound.volume = 0.9; 188 189 explodeSound = new Audio('media/explode1.wav'); 190 explodeSound.volume = 0.9; 191 explodeSound2 = new Audio('media/explosion.wav'); 192 explodeSound2.volume = 0.9; 193 194 wingsSound = new Audio('media/wings.wav'); 195 wingsSound.volume = 0.9; .currentTime = 0; 198 this.play(); 199 }, false); 200 wingsSound.play(); oBallImage = new Image(); 204 oBallImage.src = 'images/fireball.png'; 205 oBallImage.onload = function() { } oEnemyImage = new Image(); 208 oEnemyImage.src = 'images/enemy.png'; 209 oEnemyImage.onload = function() { } oDragonImage = new Image(); 212 oDragonImage.src = 'images/dragon.gif'; 213 oDragonImage.onload = function() { 214 dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage); 215 } mouseX = e.layerX || 0; 219 var mouseY = e.layerY || 0; mouseX = e.originalEvent.layerX; 222 mouseY = e.originalEvent.layerY; 223 } 224 225 bMouseDown = true; (mouseX > dragon.x- dragon.w/2 && mouseX < dragon.x- dragon.w/2 +dragon.w && 228 mouseY > dragon.y- dragon.h/2 && mouseY < dragon.y-dragon.h/2 +dragon.h) { 229 230 dragon.bDrag = true; 231 dragon.x = mouseX; 232 dragon.y = mouseY; 233 } 234 }); mouseX = e.layerX || 0; 238 var mouseY = e.layerY || 0; 239 if(e.originalEvent.layerX) { 240 mouseX = e.originalEvent.layerX; 241 mouseY = e.originalEvent.layerY; 242 } iLastMouseX = mouseX; 246 iLastMouseY = mouseY; (dragon.bDrag) { 250 dragon.x = mouseX; 251 dragon.y = mouseY; 252 } (mouseX > dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) { 256 iSprDir = 0; 257 } else if (mouseX < dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) { 258 iSprDir = 4; 259 } else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) { 260 iSprDir = 2; 261 } else if (mouseY < dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) { 262 iSprDir = 6; 263 } else if (mouseY < dragon.y && mouseX < dragon.x) { 264 iSprDir = 5; 265 } else if (mouseY < dragon.y && mouseX > dragon.x) { 266 iSprDir = 7; 267 } else if (mouseY > dragon.y && mouseX < dragon.x) { 268 iSprDir = 3; 269 } else if (mouseY > dragon.y && mouseX > dragon.x) { 270 iSprDir = 1; 271 } 272 }); dragon.bDrag = false; 276 bMouseDown = false; dragonSound.currentTime = 0; 280 dragonSound.play(); 281 }); (event.keyCode) { balls.push(new Ball(dragon.x, dragon.y, 32, 32, iBallSpeed, oBallImage)); explodeSound.currentTime = 0; 290 explodeSound.play(); 291 break; 292 } 293 }); enTimer = null; 299 function addEnemy() { 300 clearInterval(enTimer); randY = getRand(0, canvas.height - iEnemyH); 303 enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage)); interval = getRand(5000, 10000); } 308 addEnemy(); 309 });