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万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽 ...
随机推荐
- 动态修改Spring定时器
spring 的Quartz定时器的功能非常强大,可以在特定的年月日小时分秒的时间点触发时间,完成事件的调度,就像windows中得计划任务一样.下面看一个典型的Quartz定时器的实现: 1.首 ...
- [Asp.net]Calendar+JqueryUi实现日程管理(右键菜单,添加,编辑,删除,源码)
引言 出差终于回来了,这篇文章算是这个月的博客的开篇吧. 上篇文章:[Asp.net]Calendar+JqueryUi实现日程管理——添加日程 上篇文章主要贴了一些该项目的界面,这里面,将主要代码也 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览 应用程序验证
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览 应用程序验证 既然你懂得了什么是应用程序身份.而且知道怎样在SP中创建和设置 ...
- centos-7 charpter one
一.system locale 的介绍: 系统的区域设置被保存在/etc/locale.conf 这个文件中,systemd在启动的时候会去读取它:所有用户和程序的区域设置都继承自它, 当然用户&am ...
- mysql numberic types ---- mysql 数值类型详解
编程语言中大多都有数据类型一说.虽然mysql 的sql 语句与标准sql 有别.但是宏观上看还是差不多的:下面我们说一下mysql数据库中的数值类型 一.在mysql里有那些类型可以表示数值: 1. ...
- 逆向project第005篇:跨越CM4验证机制的鸿沟(下)
一.前言 本文是逆向分析CM4系列的最后一篇,我会将该游戏的序列号验证机制分析完成,进而编写出注冊码生成器. 二.分析第二个验证循环 延续上一篇文章的内容,来到例如以下代码处: 图1 上述代码并没有特 ...
- C语言的工具集
1. lint可以对c程序进行更加广泛的错误分析,lint不是缩写,它的命名是因为它像在程序中“吹毛求疵”,现在许多linux发行版都包括了它的增强版splint(Secure Programming ...
- 【Tips】【UE】总结自己常用的UltraEdit使用技巧
如果您问我每天都要打开的软件是什么,那毫无疑问是UltraEdit!作为一位DBA,每天都要写各种脚本,尤其是在对具有超多行行的大文件进行精心编辑时,没有一个好的文本编辑器是不成的.掐指一算,哇塞,自 ...
- docker容器跑tomcat遇到的坑
使用docker容器跑tomcat,由于同一个宿主机上跑了多个容器,再加上宿主机本身跑了很多进程,导致系统总的进程数达到了8000+,而容器中tomcat的启动脚本中会调用自带的setenv.sh,在 ...
- Mac环境配置好ant后提示Permission denied
1.ant环境变量配置如下 打开终端,输入vi ~/.bash_profile export ANT_HOME=/Users/administrator/Documents/software/apac ...