HTML5游戏开发系列教程9(译)
原文地址：http://www.script-tutorials.com/html5-game-development-lesson-9/
今天我们将继续使用canvas来进行HTML5游戏开发系列的文章。这次我准备了一个新游戏，是基于第4篇的游戏，但是增加了火球，敌人和碰撞检测。故，我们的龙可以发射火球来杀死敌人，并且记录分数。这样该游戏就有更多的交互性。
之前的翻译文章可以点击这里：http://www.cnblogs.com/pigzhu/p/3234255.html
第一步：HTML
首先是我们基础的html代码：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Game Development - Lesson 9 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-2.0.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header tabindex="0">
<h2>HTML5 Game Development - Lesson 9</h2>
<a href="http://www.script-tutorials.com/html5-game-development-lesson-9/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header> <div class="container">
<canvas id="scene" width="1000" height="600" tabindex="1"></canvas>
</div>
</body>
</html>
第二步：CSS
接着这里是CSS样式。
css/main.css
这次依然不打算显示出CSS文件的内容了，因为仅仅只是些页面布局样式。你可以在源代码包里找到该文件。
第三步：JS
js/script.js
// 内部变量
var canvas, ctx;
var backgroundImage;
var iBgShiftX = 100; var dragon, enemy = null; // 游戏中两个主要实体对象
var balls = [];
var enemies = []; var dragonW = 75; // 龙的宽度
var dragonH = 70; // 龙的高度
var iSprPos = 0; // 初始帧的位置
var iSprDir = 0; // 初始龙的朝向
var iEnemyW = 128; // 敌人的宽度
var iEnemyH = 128; // 敌人的高度
var iBallSpeed = 10; // 火球的速度
var iEnemySpeed = 2; // 敌人的速度 var dragonSound; // 龙的声音
var wingsSound; // 翅膀的声音
var explodeSound, explodeSound2; // 爆炸声音
var laughtSound; // 敌人从左边逃出，嘲笑的声音 var bMouseDown = false; // 鼠标是否按下
var iLastMouseX = 0;
var iLastMouseY = 0;
var iScore = 0;
// ------------------------------------------------------------- // 龙
function Dragon(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.image = image;
this.bDrag = false;
}
// 球
function Ball(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;
}
// -------------------------------------------------------------
// 获得位于x和y之间的随机数。
function getRand(x, y) {
return Math.floor(Math.random() * y) + x;
} // draw functions :
function drawScene() { // main drawScene function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 清除这个画布 // 画背景
iBgShiftX += 4;
if (iBgShiftX >= 1045) {
iBgShiftX = 0;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600); // 更新帧的位置
iSprPos++;
if (iSprPos >= 9) {
iSprPos = 0;
} // 当鼠标被按下，龙朝着鼠标移动
if (bMouseDown) {
if (iLastMouseX > dragon.x) {
dragon.x += 5;
}
if (iLastMouseY > dragon.y) {
dragon.y += 5;
}
if (iLastMouseX < dragon.x) {
dragon.x -= 5;
}
if (iLastMouseY < dragon.y) {
dragon.y -= 5;
}
} // 绘制龙
ctx.drawImage(dragon.image, iSprPos * dragon.w, iSprDir * dragon.h, dragon.w, dragon.h,
dragon.x - dragon.w / 2, dragon.y - dragon.h / 2, dragon.w, dragon.h); // 如果有火球则绘制
if (balls.length > 0) {
for (var key in balls) {
if (balls[key] != undefined) {
ctx.drawImage(balls[key].image, balls[key].x, balls[key].y);
balls[key].x += balls[key].speed; if (balls[key].x > canvas.width) { //超出屏幕，移除
delete balls[key];
}
}
}
} // 如果有敌人则绘制
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].x += enemies[ekey].speed; if (enemies[ekey].x < - iEnemyW) { //敌人没有被击中，从左边消失，并发出嘲笑声音
delete enemies[ekey]; laughtSound.currentTime = 0;
laughtSound.play();
}
}
}
} // 检测是否击中敌人
if (balls.length > 0) {
for (var key in balls) {
if (balls[key] != undefined) { if (enemies.length > 0) {
for (var ekey in enemies) {
if (enemies[ekey] != undefined && balls[key] != undefined) {
if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y
&& balls[key].y < enemies[ekey].y + enemies[ekey].h) {
delete enemies[ekey];
delete balls[key];
iScore++; explodeSound2.currentTime = 0;
explodeSound2.play();
}
}
}
}
}
}
} // 绘制分数
ctx.font = '16px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText('Score: ' + iScore * 10, 900, 580);
ctx.fillText('Plese click "1" to cast fireball', 100, 580); } // ------------------------------------------------------------- // 初始化
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d'); var width = canvas.width;
var height = canvas.height; // 加载背景图片
backgroundImage = new Image();
backgroundImage.src = 'images/hell.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
} //初始化各种声音
dragonSound = new Audio('media/dragon.wav');
dragonSound.volume = 0.9; laughtSound = new Audio('media/laught.wav');
laughtSound.volume = 0.9; explodeSound = new Audio('media/explode1.wav');
explodeSound.volume = 0.9;
explodeSound2 = new Audio('media/explosion.wav');
explodeSound2.volume = 0.9; wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // loop wings sound
this.currentTime = 0;
this.play();
}, false);
wingsSound.play(); // 加载各种图片
var oBallImage = new Image();
oBallImage.src = 'images/fireball.png';
oBallImage.onload = function() { } var oEnemyImage = new Image();
oEnemyImage.src = 'images/enemy.png';
oEnemyImage.onload = function() { } var oDragonImage = new Image();
oDragonImage.src = 'images/dragon.gif';
oDragonImage.onload = function() {
dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);
} $('#scene').mousedown(function(e) { // 处理鼠标按下
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // jquery 1.7之后用下面这种方式
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
} bMouseDown = true; if (mouseX > dragon.x- dragon.w/2 && mouseX < dragon.x- dragon.w/2 +dragon.w &&
mouseY > dragon.y- dragon.h/2 && mouseY < dragon.y-dragon.h/2 +dragon.h) { dragon.bDrag = true;
dragon.x = mouseX;
dragon.y = mouseY;
}
}); $('#scene').mousemove(function(e) { // 处理鼠标移动
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) {
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
} // 保存上次鼠标的位置
iLastMouseX = mouseX;
iLastMouseY = mouseY; // 执行龙的拖动
if (dragon.bDrag) {
dragon.x = mouseX;
dragon.y = mouseY;
} // 根据鼠标的位置，改变龙的方向
if (mouseX > dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 0;
} else if (mouseX < dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 4;
} else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 2;
} else if (mouseY < dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 6;
} else if (mouseY < dragon.y && mouseX < dragon.x) {
iSprDir = 5;
} else if (mouseY < dragon.y && mouseX > dragon.x) {
iSprDir = 7;
} else if (mouseY > dragon.y && mouseX < dragon.x) {
iSprDir = 3;
} else if (mouseY > dragon.y && mouseX > dragon.x) {
iSprDir = 1;
}
}); $('#scene').mouseup(function(e) { // 处理鼠标释放事件
dragon.bDrag = false;
bMouseDown = false; // play dragon sound
dragonSound.currentTime = 0;
dragonSound.play();
}); $(window).keydown(function(event){ // 按键1，开火
switch (event.keyCode) {
case 49: // '1' key
balls.push(new Ball(dragon.x, dragon.y, 32, 32, iBallSpeed, oBallImage)); // play explode sound #1
explodeSound.currentTime = 0;
explodeSound.play();
break;
}
}); setInterval(drawScene, 30); // loop drawScene // 随机生产出敌人
var enTimer = null;
function addEnemy() {
clearInterval(enTimer); var randY = getRand(0, canvas.height - iEnemyH);
enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage)); var interval = getRand(5000, 10000);
enTimer = setInterval(addEnemy, interval); // loop drawScene
}
addEnemy();
});
在上面代码的开始处，我增加了两个新对象，球和敌人。每个对象都有他们自己的属性集(比如位置，大小，图片，速度)，然后通过‘drawScene’方法来绘制他们，在该方法底部，你可以看到处理球和敌人的碰撞检测代码：
// 检测是否击中敌人
if (balls.length > 0) {
for (var key in balls) {
if (balls[key] != undefined) { if (enemies.length > 0) {
for (var ekey in enemies) {
if (enemies[ekey] != undefined && balls[key] != undefined) {
if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y
&& balls[key].y < enemies[ekey].y + enemies[ekey].h) {
delete enemies[ekey];
delete balls[key];
iScore++; explodeSound2.currentTime = 0;
explodeSound2.play();
}
}
}
}
}
}
}
最后，我们通过下面的代码不定时间的增加敌人：
// 随机生产出敌人
var enTimer = null;
function addEnemy() {
clearInterval(enTimer); var randY = getRand(0, canvas.height - iEnemyH);
enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage)); var interval = getRand(5000, 10000);
enTimer = setInterval(addEnemy, interval); // loop drawScene
}
addEnemy();
第四步：Custom files
images/dragon.gif, images/enemy.png, images/fireball.png, images/hell.jpg
media/dragon.wav, media/explode1.wav, media/explosion.wav, media/laught.wav, media/wings.wav
上面所有的文件都在源码包里。
HTML5游戏开发系列教程9(译)的更多相关文章
- HTML5游戏开发系列教程7(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-7/ 今天我们将完成我们第一个完整的游戏--打砖块.这次教程中,将 ...
- HTML5游戏开发系列教程6(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-6/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...
- HTML5游戏开发系列教程4(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-4/ 这篇文章是我们继续使用canvas来进行HTML5游戏开发系 ...
- HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- HTML5游戏开发系列教程10(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-10/ 最后我们将继续使用canvas来进行HTML5游戏开发系列 ...
- cocos2d-x游戏开发系列教程-前言
cocos2d-x游戏开发前景: 最近企业对于Cocos2D-X开发人才的用人需求很大,而且所提供的薪资相当可观. 为满足广大向往游戏开发行业同学的需求,特推出适合新手的Cocos2D-X手游开发教程 ...
- cocos2d-x游戏开发系列教程-超级玛丽07-CMGameMap
背景 在上一篇博客中,我们提到CMGameScene,但是CMGameScene只是个框架,实际担任游戏逻辑的是CMGameMap类,这个博文就来了解下CMGameMap 头文件 class CMGa ...
- cocos2d-x游戏开发系列教程-超级玛丽06-CMGameScene
背景 在CMMenuScene中,当用户点击开始游戏时,导演让场景进入到CMGameScene 头文件 class CMGameScene : public cocos2d::CCLayer,publ ...
随机推荐
- laravel 控制器构造方法注入request对象
IndexController: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\ ...
- 我们复习.Net的这些日子里
今天是我们复习前面学习的第三天,也是在今天我们结束了复习.之前上学时间感觉知识全是生僻的,在生活中很少用到,因此喜欢重复的记忆,而现在学习的知识全是现在乃至未来,将是每天我们使用的,所以就感觉没必要重 ...
- linux文件类型详解
*nix 有各种的文件类型 当#ls -la后,会发现在权限位前有个 - 有些是 b 有些是 d 这个位置就是文件类型的标示 普通文件regular file, 用 - (破折号)标示, 比如 ...
- 深入浅出Docker（四）：Docker的集成测试部署之道
1. 背景 敏捷开发已经流行了很长时间,如今有越来越多的企业开始践行敏捷开发所提倡的以人为中心.迭代.循序渐进的开发理念.在这样的场景下引入Docker技术,首要目的就是使用Docker提供的虚拟化方 ...
- 使用Eclipse(以及intellij IDEA)配合JDWP对服务器上部署的代码进行调试
今天遇到了一个问题:同样的代码,在服务器上跑的时候会报空指针异常,但是在本地是没有问题的,看服务器上打印的日志只能看到异常信息,不能准确地定位到出问题的代码,于是就搜索了一下远程调试.结果还真的可以在 ...
- java GC工作机制
转自:http://www.cnblogs.com/hzdtf/articles/5419987.html GC:垃圾回收站,是将java的无用的堆对象进行清理,释放内存,以免发生内存泄露.在介绍ja ...
- DFS判断正环
hdu1217 Arbitrage Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- mysql 内连接原理
- MAC OS中Eclipse无法导入（import）工程怎么办？
我用的MAC OS是10.8.4,Eclipse版本是 Eclipse IDE for Java Developers Version: Juno Service Release 2 Build id ...
- 170503、centos6.5安装mysql5.6.30
准备:虚拟机地址:192.168.0.110 安装目录/usr/local/ 首先卸载已经安装的mysql使用命令查看rpm -qa | grep mysql卸载使用 rpm -e xxx 或者 yu ...