April 29, 2015

html5游戏制作入门系列教程（八）

By Gideon Div / Css / XML / HTML5 / SVG 0 Comments

今天，我已经准备了一个新的游戏 – SkyWalker。基本上 – 这是用飞飞行模拟射击类游戏。我们的目标到达终点线。这个游戏还有其它一些特点，例如使用飞机运动动画和爆炸动画，多按键处理（例如同时移动和攻击），有一定的水平长度，增强了碰撞检测（现在的敌人可能会损坏我们的飞机），生命值和分数等游戏参数。你可以点击这里阅读这一系列教程的前一篇文章：html5游戏制作入门系列教程（七）。我们将基于之前的程序和代码进行开发。

这里有我们的演示和下载包：

在线演示

好吧，下载所需文件，让我们开始编码！

步骤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 href="http://html5gamedev.org/?p=348">返回原文</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
}
});

在主初始化函数里，加载所有要用到的图像（地图，介绍对话框，火箭，爆炸精灵，敌人和飞行器精灵）。接着，为了处理多个按键，我们必须使用一个数组（pressedKeys）来存储所有按下的键（然后，在主场景的渲染，我们将使用该数组来操纵我们的飞机）。想要知道如何处理多个按键，看看这段代码：

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
    }
});

这项技术使我们能够轻松处理多个按键响应。那么，在主场景的渲染过程中，我们进行背景，主平面，火箭（我们的飞机），敌人和爆炸动画等对象的绘制。一旦打中敌人，触发绘制敌人爆炸的精灵动画。最后，只要敌人接触到我们的飞机 – 他们发生爆炸的同时也会损坏我们的飞机。而且，如果我们的生命值为零甚至更低，则游戏结束。为了实现碰撞和爆炸，我用下面的代码：

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

结论
超级酷，不是吗？我会很高兴看到您的评论和意见。祝你好运！

在线演示

转载请注明：HTML5游戏开发者社区 » html5游戏制作入门系列教程（八）

关于大型网站技术演进的思考（三）--存储的瓶颈（3）
　　存储的瓶颈写到现在就要进入到深水区了，如果我们所做的网站已经到了做数据库垂直拆分和水平拆分的阶段，那么此时我们所面临的技术难度的挑战也会大大增强。这里我们先回顾下数据库的垂直拆分和水平拆分的定义：　　垂直拆分：把一个数据库中不同业务单元的数据分到不同的数据库里。　　水平拆分：是根据一定的规则把同一业务单元的数据拆分到多个数据库里。垂直拆分是一个粗粒度的拆分数据，它主要是将原来在一个数据库下的表拆分到不同的数据库里，水平拆分粒度比垂直拆分要更细点，它是将一张表拆到不同数据库里，粒度的粗细也会导致实现技术的难度的也不一样，很明显水平拆分的技术难度要远大于垂直拆分的技术难度。难度意味着投入的成本的增加以及我们需要承担的风险的加大，我们做系统开发一定要有个清晰的认识：能用简单的方案解决问题，就一定要毫不犹豫的舍弃复杂的方案，当系统需要使用高难度技术的时候，我们一定要让自己感受到这是迫不得已的。我是以…
搞定网页打印自动分页问题
设计过程出现一个困难问题,一个php生成的HTML页面有多个表格,要求必须自动分开打印到几张A4纸张上面.经过询问资深人士,结果统一回答,HTML页面无法做打印时自动分页面打印.于是乎正准备放弃这个分页面打印念头,郁闷着被笑话着被困扰着. 一个表格被分开打印到两张A4上,多难看啊.... 无意中翻阅CSS,发现里面有两语句:page-break-beforepage-break-after 分别对应的参数是: auto; always; left; right;…
使用CSS3改变文本选中的默认颜色
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1147 关于浏览器文字选中颜色以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色，不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器：…

Just Code

html5游戏制作入门系列教程（八）

About Author

Gideon

Add a Comment

Related Posts

Related Posts

About Author

Gideon

Add a Comment