HTML5游戏制作完全指南
简介
创建画布
游戏循环
Hello world
创建player
键盘控制
a:使用jQuery Hotkeys
b:移动player
添加更多游戏元素
炮弹
敌人
使用图片
碰撞检测
声音
简介
你想使用HTML5的Canvas制作一款游戏吗?跟着这个教程,你将立刻上道儿。
阅读该教程需要至少熟悉javascript相关知识。
创建画布
在画任何东西之前,我们必须创建一个画布。因为这是完全指南,并且我们将用到jQuery.
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320; var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
"' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
游戏循环
为了呈现给玩家连贯流畅的游戏动画,我们要频繁地渲染画布来欺骗玩家的眼睛。
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
现在我们先不管update和draw里面的实现,重要的是我们要知道setInterval()
会周期性的执行update和draw
Hello world
现在我们已经搭建好了一个循环的架子,我们去修改update和draw方法来写一些文字到屏幕。
function draw() {
canvas.fillStyle = "#000"; // Set color to black
canvas.fillText("Sup Bro!", 50, 50);
}
专家提醒: 当你稍微更改了一些代码的时候就执行一下程序,这样可以更快的找到程序出错地方。
静止文字正常的显示出来了。因为我们已经有了循环,所以我们可以很容易地让文字动起来~~~
var textX = 50;
var textY = 50; function update() {
textX += 1;
textY += 1;
} function draw() {
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}
执行程序。如果你一步一步照着上面做下来,可以看到文字移动。但是上一次的文字却还留在屏幕上,因为我们没有擦除画布。现在我们在draw方法中加入擦除方法。
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}
现在你可以看到文字在屏幕上移动了,它已经算是一个真正意义上的游戏,只不过是个半成品。
创建player
创建一个包含player所有信息的对象,并且要有draw方法。这里创建了一个简单的对象包含了所有的player信息。
var player = {
color: "#00A",
x: 220,
y: 270,
width: 32,
height: 32,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
};
我们现在用一个纯色的矩形来代表player.当我们把它加入游戏当中的时候,我们需要清除画布并且画上player.
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
player.draw();
}
键盘控制
使用jQuery Hotkeys
jQuery Hotkeys plugin在处理键盘行为的时候,可以更加容易的兼容不同的浏览器。让开发者不用因为不同浏览器之间的keyCode
andcharCode
不同而苦恼,我们这样绑定事件:
$(document).bind("keydown", "left", function() { ... });
移动player
function update() {
if (keydown.left) {
player.x -= 2;
} if (keydown.right) {
player.x += 2;
}
}
是不是感觉移动不够快?那么我们来提高它的移动速度。
function update() {
if (keydown.left) {
player.x -= 5;
} if (keydown.right) {
player.x += 5;
} player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
我们可以很容易的添加其他元素,比如炮弹:
function update() {
if (keydown.space) {
player.shoot();
} if (keydown.left) {
player.x -= 5;
} if (keydown.right) {
player.x += 5;
} player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
} player.shoot = function() {
console.log("Pew pew");
// :) Well at least adding the key binding was easy...
};
添加更多游戏元素
炮弹
我们开始真正意义上的添加炮弹,首先,我们需要一个集合来存储它:
var playerBullets = [];
然后,我们需要一个构造器来创建炮弹:
function Bullet(I) {
I.active = true; I.xVelocity = 0;
I.yVelocity = -I.speed;
I.width = 3;
I.height = 3;
I.color = "#000"; I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
}; I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}; I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity; I.active = I.active && I.inBounds();
}; return I;
}
当玩家开火,我们需要向集合中添加炮弹:
player.shoot = function() {
var bulletPosition = this.midpoint(); playerBullets.push(Bullet({
speed: 5,
x: bulletPosition.x,
y: bulletPosition.y
}));
}; player.midpoint = function() {
return {
x: this.x + this.width/2,
y: this.y + this.height/2
};
};
修改update和draw方法,实现开火:
function update() {
...
playerBullets.forEach(function(bullet) {
bullet.update();
}); playerBullets = playerBullets.filter(function(bullet) {
return bullet.active;
});
}
function draw() {
...
playerBullets.forEach(function(bullet) {
bullet.draw();
});
}
敌人
enemies = []; function Enemy(I) {
I = I || {}; I.active = true;
I.age = Math.floor(Math.random() * 128); I.color = "#A2B"; I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
I.y = 0;
I.xVelocity = 0
I.yVelocity = 2; I.width = 32;
I.height = 32; I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
}; I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}; I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity; I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64); I.age++; I.active = I.active && I.inBounds();
}; return I;
}; function update() {
... enemies.forEach(function(enemy) {
enemy.update();
}); enemies = enemies.filter(function(enemy) {
return enemy.active;
}); if(Math.random() < 0.1) {
enemies.push(Enemy());
}
}; function draw() {
... enemies.forEach(function(enemy) {
enemy.draw();
});
}
使用图片
player.sprite = Sprite("player"); player.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
}; function Enemy(I) {
... I.sprite = Sprite("enemy"); I.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
}; ...
}
碰撞检测
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
function handleCollisions() {
playerBullets.forEach(function(bullet) {
enemies.forEach(function(enemy) {
if (collides(bullet, enemy)) {
enemy.explode();
bullet.active = false;
}
});
}); enemies.forEach(function(enemy) {
if (collides(enemy, player)) {
enemy.explode();
player.explode();
}
});
} function update() {
...
handleCollisions();
}
function Enemy(I) {
... I.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic
}; return I;
}; player.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic and then end the game
};
加入声音
function Enemy(I) {
... I.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic
}; return I;
}; player.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic and then end the game
};
DNT砖家提醒: 跟着上面的步骤,大概让大家了解了一款游戏的各种元素的制作过程,这类游戏做一遍就够,没有必要做第二遍,没有很难的算法,全是流程和经验性质的东西,倘若想做好看,做炫一点,那就是美工拼了老命切图的事情,或者开发人员介入做一些性能优化和碰撞优化。最后重复一遍----看过就好,不要当宝。
HTML5游戏制作完全指南的更多相关文章
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5游戏开发进阶指南
<HTML5游戏开发进阶指南> 基本信息 作者: (印)香卡(Shankar,A.R.) 译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121212260 上架时间:20 ...
- HTML5游戏开发进阶指南 中文pdf扫描版
HTML5游戏开发进阶指南介绍了HTML5游戏开发的一般过程和技巧.全书共分12章,第1章介绍了本书相关的HTML5的诸多新特性,包括在canvas上绘图.播放声音等,另外还引入了子画面页的概念:第2 ...
- 用Phaser来制作一个html5游戏——flappy bird (二)
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- 用Phaser来制作一个html5游戏——flappy bird (一)
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- 怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- [译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
- Egret HTML5游戏开发指南
Egret HTML5游戏开发指南 下载地址:https://pan.baidu.com/s/1fuxllvmRhWXoWDwH4gxN9g 关注微信公众号获取提取码: 输入:egrt 获取提取码
- 2016年 最火的 15 款 HTML5 游戏引擎
HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年<传奇世界>更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽 ...
随机推荐
- JAVA变量的执行顺序
对于静态变量.静态初始化块.变量.初始化块.构造器,它们的初始化顺序以此是(静态变量.静态初始化块)>(变量.初始化块)>构造器.我们也可以通过下面的测试代码来验证这一点: package ...
- 公有/私有/保护继承、overload/overwrite/override之间的区别
一.继承 C++很重要的一个特征就是代码重用.在C语言中重用代码的方式就是拷贝代码.修改代码.C++可以用继承或组合的方式来重用.通过组合或继承现有的的类来创建新类,而不是重新创建它们. 继承是使用已 ...
- some nets were not able to be matched
原因是:PCB画好之后再次更改原理图,将更改后的原理图更新至PCB的时候会导致原理图中新生成的网络和PCB中原有的网络名不匹配 解决办法:PCB---设计----网络表---编辑网络,把PCB中不匹配 ...
- 【原创】k8s源代码分析-----kubelet(1)主要流程
本人空间链接http://user.qzone.qq.com/29185807/blog/1460015727 源代码为k8s v1.1.1稳定版本号 kubelet代码比較复杂.主要是由于其担负的任 ...
- python学习笔记(1)--遍历txt文件,正则匹配替换文字
遍历一个文件夹,把里面所有txt文件里的[]里的朗读时间删除,也就是替换为空. import os import re import shutil #os文件操作,re正则,shutil复制粘贴 pa ...
- 广义线性模型 - Andrew Ng机器学习公开课笔记1.6
在分类问题中我们如果: 他们都是广义线性模型中的一个样例,在理解广义线性模型之前须要先理解指数分布族. 指数分布族(The Exponential Family) 假设一个分布能够用例如以下公式表达, ...
- Android开发之Fragment传递參数的几种方法
Fragment在Android3.0開始提供,而且在兼容包中也提供了Fragment特性的支持. Fragment的推出让我们编写和管理用户界面更快捷更方便了. 但当我们实例化自己定义Fragmen ...
- scala,spark练习题提高
1.求每家公司有哪些产品 val arr3 = List("Apache" -> "Spark", "Apache" -> &q ...
- buildroot 修改root密码后无法登录ssh解决方法
客户说想修改root密码后再登录ssh, 研究了一下,是因为ssh登录是匹配了之前的 密码生成文件,只要把之前的密码生成文件删除就可以. 过程如下: 删除 /etc/ssh/ssh_host*. rm ...
- gpio 灯的对应关系
1 点灯验证通过: GPIO160 TX1-LED GPIO161 RX1-LED GPIO163 TX2-LED GPIO164 RX2-LED GPIO ...