今天，我已經(jīng)準(zhǔn)備了一個新的游戲 – SkyWalker。基本上 – 這是用飛飛行模擬射擊類游戲。我們的目標(biāo)到達(dá)終點線。這個游戲還有其它一些特點，例如使用飛機(jī)運動動畫和爆炸動畫，多按鍵處理（例如同時移動和攻擊），有 一定的水平長度，增強(qiáng)了碰撞檢測（現(xiàn)在的敵人可能會損壞我們的飛機(jī)） ，生命值和分?jǐn)?shù)等游戲參數(shù)。你可以點擊這里閱讀這一系列教程的前一篇文章： html5游戲制作入門系列教程（七） 。我們將基于之前的程序和代碼進(jìn)行開發(fā)。
?
這里有我們的演示和下載包：
?
好吧，下載所需文件，讓我們開始編碼！
?
步驟1：HTML
下面是基本的HTML代碼：
這里是我演示的HTML，非常簡單，對不對？
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>html5游戲制作入門系列教程（八）</title>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<h2>html5游戲制作入門系列教程（八） (<a >返回原文</a>)</h2>
</header>
<div class="container">
<canvas id="scene" width="700" height="700" tabindex="1"></canvas>
</div>
</body>
</html>
?
步驟2：JS
// inner variables
var canvas, ctx;
// images
var backgroundImage;
var oRocketImage;
var oExplosionImage;
var introImage;
var oEnemyImage;
var iBgShiftY = 9300; //10000 (level length) - 700 (canvas height)
var bPause = true; // game pause
var plane = null; // plane object
var rockets = []; // array of rockets
var enemies = []; // array of enemies
var explosions = []; // array of explosions
var planeW = 200; // plane width
var planeH = 110; // plane height
var iSprPos = 2; // initial sprite frame for plane
var iMoveDir = 0; // move direction
var iEnemyW = 128; // enemy width
var iEnemyH = 128; // enemy height
var iRocketSpeed = 10; // initial rocket speed
var iEnemySpeed = 5; // initial enemy speed
var pressedKeys = []; // array of pressed keys
var iScore = 0; // total score
var iLife = 100; // total life of plane
var iDamage = 10; // damage per enemy plane
var enTimer = null; // random timer for a new enemy
// -------------------------------------------------------------
// objects :
function Plane(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.image = image;
this.bDrag = false;
}
function Rocket(x, y, w, h, speed, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.speed = speed;
this.image = image;
}
function Enemy(x, y, w, h, speed, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.speed = speed;
this.image = image;
}
function Explosion(x, y, w, h, sprite, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.sprite = sprite;
this.image = image;
}
// -------------------------------------------------------------
// get random number between X and Y
function getRand(x, y) {
return Math.floor(Math.random()*y)+x;
}
// Display Intro function
function displayIntro() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(introImage, 0, 0,700, 700);
}
// Draw Main scene function
function drawScene() {
if (! bPause) {
iBgShiftY -= 2; // move main ground
if (iBgShiftY < 5) { // Finish position
bPause = true;
// draw score
ctx.font = '40px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText('Finish, your score: ' + iScore * 10 + ' points', 50, 200);
return;
}
// process pressed keys (movement of plane)
processPressedKeys();
// clear canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw background
ctx.drawImage(backgroundImage, 0, 0 + iBgShiftY, 700, 700, 0, 0, 700, 700);
// draw plane
ctx.drawImage(plane.image, iSprPos*plane.w, 0, plane.w, plane.h, plane.x - plane.w/2, plane.y - plane.h/2, plane.w, plane.h);
// draw rockets
if (rockets.length > 0) {
for (var key in rockets) {
if (rockets[key] != undefined) {
ctx.drawImage(rockets[key].image, rockets[key].x, rockets[key].y);
rockets[key].y -= rockets[key].speed;
// if a rocket is out of screen - remove it
if (rockets[key].y < 0) {
delete rockets[key];
}
}
}
}
// draw explosions
if (explosions.length > 0) {
for (var key in explosions) {
if (explosions[key] != undefined) {
// display explosion sprites
ctx.drawImage(explosions[key].image, explosions[key].sprite*explosions[key].w, 0, explosions[key].w, explosions[key].h, explosions[key].x - explosions[key].w/2, explosions[key].y - explosions[key].h/2, explosions[key].w, explosions[key].h);
explosions[key].sprite++;
// remove an explosion object when it expires
if (explosions[key].sprite > 10) {
delete explosions[key];
}
}
}
}
// draw enemies
if (enemies.length > 0) {
for (var ekey in enemies) {
if (enemies[ekey] != undefined) {
ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y);
enemies[ekey].y -= enemies[ekey].speed;
// remove an enemy object if it is out of screen
if (enemies[ekey].y > canvas.height) {
delete enemies[ekey];
}
}
}
}
if (enemies.length > 0) {
for (var ekey in enemies) {
if (enemies[ekey] != undefined) {
// collisions with rockets
if (rockets.length > 0) {
for (var key in rockets) {
if (rockets[key] != undefined) {
if (rockets[key].y < enemies[ekey].y + enemies[ekey].h/2 && rockets[key].x > enemies[ekey].x && rockets[key].x + rockets[key].w < enemies[ekey].x + enemies[ekey].w) {
explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage));
// delete enemy, rocket, and add +1 to score
delete enemies[ekey];
delete rockets[key];
iScore++;
}
}
}
}
// collisions with plane
if (enemies[ekey] != undefined) {
if (plane.y - plane.h/2 < enemies[ekey].y + enemies[ekey].h/2 && plane.x - plane.w/2 < enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 > enemies[ekey].x) {
explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage));
// delete enemy and make damage
delete enemies[ekey];
iLife -= iDamage;
if (iLife <= 0) { // Game over
bPause = true;
// draw score
ctx.font = '38px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText('Game over, your score: ' + iScore * 10 + ' points', 25, 200);
return;
}
}
}
}
}
}
// display life and score
ctx.font = '14px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText('Life: ' + iLife + ' / 100', 50, 660);
ctx.fillText('Score: ' + iScore * 10, 50, 680);
}
}
// Process Pressed Keys function
function processPressedKeys() {
if (pressedKeys[37] != undefined) { // 'Left' key
if (iSprPos > 0) {
iSprPos--;
iMoveDir = -7;
}
if (plane.x - plane.w / 2 > 10) {
plane.x += iMoveDir;
}
}
else if (pressedKeys[39] != undefined) { // 'Right' key
if (iSprPos < 4) {
iSprPos++;
iMoveDir = 7;
}
if (plane.x + plane.w / 2 < canvas.width - 10) {
plane.x += iMoveDir;
}
}
}
// Add Enemy function (adds a new enemy randomly)
function addEnemy() {
clearInterval(enTimer);
var randX = getRand(0, canvas.height - iEnemyH);
enemies.push(new Enemy(randX, 0, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage));
var interval = getRand(1000, 4000);
enTimer = setInterval(addEnemy, interval); // loop
}
// Main Initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
// load background image
backgroundImage = new Image();
backgroundImage.src = 'images/levelmap.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
}
introImage = new Image();
introImage.src = 'images/intro.jpg';
// initialization of empty rocket
oRocketImage = new Image();
oRocketImage.src = 'images/rocket.png';
oRocketImage.onload = function() { }
// initialization of explosion image
oExplosionImage = new Image();
oExplosionImage.src = 'images/explosion.png';
oExplosionImage.onload = function() { }
// initialization of empty enemy
oEnemyImage = new Image();
oEnemyImage.src = 'images/enemy.png';
oEnemyImage.onload = function() { }
// initialization of plane
var oPlaneImage = new Image();
oPlaneImage.src = 'images/plane.png';
oPlaneImage.onload = function() {
plane = new Plane(canvas.width / 2, canvas.height - 100, planeW, planeH, oPlaneImage);
}
$(window).keydown(function (evt){ // onkeydown event handle
var pk = pressedKeys[evt.keyCode];
if (! pk) {
pressedKeys[evt.keyCode] = 1; // add all pressed keys into array
}
if (bPause && evt.keyCode == 13) { // in case of Enter button
bPause = false;
// start main animation
setInterval(drawScene, 30); // loop drawScene
// and add first enemy
addEnemy();
}
});
$(window).keyup(function (evt) { // onkeyup event handle
var pk = pressedKeys[evt.keyCode];
if (pk) {
delete pressedKeys[evt.keyCode]; // remove pressed key from array
}
if (evt.keyCode == 65) { // 'A' button - add a rocket
rockets.push(new Rocket(plane.x - 16, plane.y - plane.h, 32, 32, iRocketSpeed, oRocketImage));
}
if (evt.keyCode == 37 || evt.keyCode == 39) {
// revert plane sprite to default position
if (iSprPos > 2) {
for (var i = iSprPos; i >= 2; i--) {
iSprPos = i;
iMoveDir = 0;
}
} else {
for (var i = iSprPos; i <= 2; i++) {
iSprPos = i;
iMoveDir = 0;
}
}
}
});
// when intro is ready - display it
introImage.onload = function() {
displayIntro(); // Display intro once
}
});
?在主初始化函數(shù)里，加載所有要用到的圖像（地圖，介紹對話框，火箭，爆炸精靈，敵人和飛行器精靈）。接著，為了處理多個按鍵，我們必須使用一個數(shù)組 （pressedKeys）來存儲所有按下的鍵（然后，在主場景的渲染，我們將使用該數(shù)組來操縱我們的飛機(jī)）。想要知道如何處理多個按鍵，看看這段代碼：
var pressedKeys = []; // array of pressed keys
$(window).keydown(function (evt){ // onkeydown event handle
var pk = pressedKeys[evt.keyCode];
if (! pk) {
pressedKeys[evt.keyCode] = 1; // add all pressed keys into array
}
});
$(window).keyup(function (evt) { // onkeyup event handle
var pk = pressedKeys[evt.keyCode];
if (pk) {
delete pressedKeys[evt.keyCode]; // remove pressed key from array
}
});
?
這項技術(shù)使我們能夠輕松處理多個按鍵響應(yīng)。那么，在主場景的渲染過程中，我們進(jìn)行背景，主平面，火箭（我們的飛機(jī)），敵人和爆炸動畫等對象的繪制。 一旦打中敵人， 觸發(fā)繪制敵人爆炸的精靈動畫。最后，只要敵人接觸到我們的飛機(jī) – 他們發(fā)生爆炸的同時也會損壞我們的飛機(jī)。而且，如果我們的生命值為零甚至更低，則游戲結(jié)束。為了實現(xiàn)碰撞和爆炸，我用下面的代碼：
if (plane.y - plane.h/2 < enemies[ekey].y + enemies[ekey].h/2 && plane.x - plane.w/2 < enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 > enemies[ekey].x) {
explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage));
// delete enemy and make damage
delete enemies[ekey];
iLife -= iDamage;
if (iLife <= 0) { // Game over
bPause = true;
// draw score
ctx.font = '38px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText('Game over, your score: ' + iScore * 10 + ' points', 25, 200);
return;
}
}
?
步驟3：資源文件
游戲制作需要使用如下的游戲資源文件，包括圖片和聲音文件，這些你都可以在下載包中找到。
enemy.png, explosion.png, intro.jpg, levelmap.jpg, plane.png, rocket.png
?
結(jié)論
超級酷，不是嗎？我會很高興看到您的評論和意見。祝你好運！
?
轉(zhuǎn)載請注明： HTML5游戲開發(fā)者社區(qū) ? html5游戲制作入門系列教程（八）
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
