Ⅰ 如何用javascript写一个网页简单的格斗游戏
<pre t="code" l="js"><script type="text/灶信javascript"历肆>
function demo()
{
this.test1 = function(){
alert('test1');
};
this.test2 = function(){
alert('test2');
}
}
var aa = new demo();
aa.test1();
aa.test2();
</script>肢辩轿结果会依次弹出test1test2
Ⅱ 如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。一个简单的tick动画看起来是这样的：<pre t="code" l="js">var stage, circle;
function init(){
stage = new createjs.Stage(document.getElementById('game'));
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(60);
circle = new createjs.Shape();
circle.graphics.f("red").dc(0,0,50);
circle.x = 0;
circle.y = 100;
stage.addChild(circle);
circle.addEventListener("click", function(event){
createjs.Ticker.setPaused(!createjs.Ticker.getPaused());
});
}
function handleTick(event){
if(!event.paused){
circle.x +=5;
if(circle.x > 1000){
circle.x = 0;
}
}
stage.update();
}
Ⅲ 求用原生js（不使用任何第三方库）实现24点游戏的程序
你给的太少了
Ⅳ js简单回合制小游戏
varboss=[
{name:"校长",energy:10000},
{name:"教务主任",energy:8000},
{name:"系主任",energy:6000},
{name:"辅导员",energy:5000},
{name:"任课老师",energy:12000}
];
varhero=[
{name:"小张",energy:7000},
{name:"小王",energy:7000},
{name:"小强",energy:7000}
];
varn=prompt("选择一个英雄(0:小张，1:小王,2:小强)","");
varh=hero[n];
varb=boss[Math.floor(Math.random()*boss.length)];
vari=1;
while(true){
varhit=Math.floor(Math.random()*800);
varbit=Math.floor(Math.random()*1000);
h.energy-=bit;
b.energy-=hit;
if(b.energy>0&&h.energy<=0){
alert("winnerisboss");
break;
}elseif(h.energy>0&&b.energy<=0){
alert("winnerishero");
break;
}elseif(h.energy<=0&&b.energy<=0){
alert("DRAWGAME");
break;
}
alert("第"+i+++"次回合,英雄:"+h.name+"的能量剩余:"+h.energy+",怪兽"+b.name+"的能量剩余:"+b.energy);
}
Ⅳ 课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
<html>
<head>
<title>贪吃蛇 Snake v2.4</title>
<style>
body{
font-size:9pt;
}
table{
border-collapse: collapse;
border:solid #333 1px;
}
td{
height: 10px;
width: 10px;
font-size: 0px;
}
.filled{
background-color:blue;
}
</style>
</head>
<script>
function $(id){return document.getElementById(id);}
/**************************************************************
* javascript贪吃蛇 v2.4 <br />
* author: sunxing007 05/14/2009<br />
* 转载请注明来自http://blog.csdn.net/sunxing007 谢谢！<br />
* v2.4修正了蛇身颜色可以随着蛇前进而移动
**************************************************************/
//贪吃蛇类
var Snake = {
tbl: null,
/**
* body: 蛇身，数组放蛇的每一节，
* 数据结构{x:x0, y:y0, color:color0},
* x,y表示坐标,color表示颜色
**/
body: [],
//当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
direction: 0,
//定时器
timer: null,
//速度
speed: 250,
//是否已经暂停
paused: true,
//行数
rowCount: 30,
//列数
colCount: 30,
//初始化
init: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//产生初始移动方向
this.direction = Math.floor(Math.random()*4);
//构造table
for(var row=0;row<this.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//产生20个松散节点
for(var i=0; i<10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
//产生蛇头
while(true){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
break;
}
}
this.paused = true;
//添加键盘事件
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
case 13: {
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
//如果没有暂停，则停止移动
Snake.pause();
Snake.paused = true;
}
break;
}
case 37:{//left
//阻止蛇倒退走
if(Snake.direction==1){
break;
}
Snake.direction = 3;
break;
}
case 38:{//up
//快捷键在这里起作用
if(event.ctrlKey){
Snake.speedUp(-20);
break;
}
if(Snake.direction==2){//阻止蛇倒退走
break;
}
Snake.direction = 0;
break;
}
case 39:{//right
if(Snake.direction==3){//阻止蛇倒退走
break;
}
Snake.direction = 1;
break;
}
case 40:{//down
if(event.ctrlKey){
Snake.speedUp(20);
break;
}
if(Snake.direction==0){//阻止蛇倒退走
break;
}
Snake.direction = 2;
break;
}
}
}
},
//移动
move: function(){
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
//移动一节身体
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Game over!\nPress Restart to continue.");
return;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//因为吃了一个食物，所以再产生一个食物
this.generateDood();
return;
}
//window.status = this.toString();
var point = this.getNextPos();
//保留第一节的颜色
var color = this.body[0].color;
//颜色向前移动
for(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//探寻下一步将走到什么地方
pause: function(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: function(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//向上
if(this.direction==0){
y--;
}
//向右
else if(this.direction==1){
x++;
}
//向下
else if(this.direction==2){
y++;
}
//向左
else{
x--;
}
//返回一个坐标
return {x:x,y:y};
},
//检查将要移动到的下一步是什么
checkNextStep: function(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//触边界，游戏结束
}
for(var i=0; i<this.body.length; i++){
if(this.body[i].x==x&&this.body[i].y==y){
return -1;//碰到自己的身体,游戏结束
}
}
if(this.isCellFilled(x,y)){
return 1;//有东西
}
return 0;//空地
},
//擦除蛇身
erase: function(){
for(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//绘制蛇身
paint: function(){
for(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//擦除一节
eraseDot: function(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: function(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
//得到一个坐标上的颜色
getColor: function(x,y){
return this.tbl.rows[y].cells[x].style.backgroundColor;
},
//用于调试
toString: function(){
var str = "";
for(var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
return str;
},
//检查一个坐标点有没有被填充
isCellFilled: function(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
return false;
}
return true;
},
//重新开始
restart: function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
},
//加速
speedUp: function(time){
if(!this.paused){
if(this.speed+time<10||this.speed+time>2000){
return;
}
this.speed +=time;
this.pause();
this.move();
}
},
//产生食物。
generateDood: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
};
</script>
<body onload="Snake.init();">
/*************************************************************<br />
* javascript贪吃蛇 v2.4<br />
* author: sunxing007 05/14/2009<br />
* 转载请注明来自 <a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a> 谢谢！<br />
**************************************************************/<br />
<table id="main" border="1" cellspacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="开始/暂停" />点左边按钮或按Enter开始/暂停游戏<br />
<input type="button" id="reset" value="重新开始" /><br />
<input type="button" id="upSpeed" value="加速" />点左边按钮或按Ctrl + ↑加速<br />
<input type="button" id="downSpeed" value="减速" />点左边按钮或按Ctrl + ↓减速
<script>
$('btn').onclick = function(){
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
Snake.pause();
Snake.paused = true;
}
};
$("reset").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
</script>
</body>
</html>
Ⅵ javascript源码移植到微信小游戏
微信小程序是运行在自身内置浏览器的一种程序语言，它对正常的html、css、js做了以下回要求：
1、html在小答程序里后缀已经改成了wxml，html中的div、p、a基本上所有的html标签都去除或者做了改动，如div可以用view，img改成了image，所以前端html标签你需要替换成wxml内置的标签
2、其次css也变成了wxss,样式定义跟原来到倒是完全以后，改下后缀即可
3、js也就是小程序的逻辑层，需要按照小程序的规定去写，具体的可以参照网页链接给的官方文档去操作
4、总体来说换了一种格式去写，移植过去也不是太复杂
Ⅶ javascript如何写16格拼图游戏
很简单的嘛，分步走：
第一步 切图 这个用background就能实现，就是把一张图，在不同的格，利用背景的位置就行了，
并记录图片的顺序，比如 01，02，03.。。16，也就是把你切好的图作一个标记
第二步：分格，做手脊把指定的区域也就是拼图区。分成17分，16格是放图片，有一格是空白。。
第三步：随机把薯伏切好的图 显示到相应的位置上
第四步：当点击纯渗非空白的格子的时候，判断上下左右是否有空格，如果有，两者替换位置。判断当前的顺序是否跟记录的顺序一样了。如果一相，图拼好了。如果不一样，重复
Ⅷ 如何用纯js代码面向对象写个简单的21点游戏
1，html写好界面，定义好class和id
2，为了模拟出扑克牌21点游戏，应先定义卡牌池中有1-10，J,Q,K每个数字和字母分别有4个
3，js中实现界面交互，如点击开始按钮，随机从卡牌池中抽取一个数字或字母存入临时变量a，并附于点数之和num其相应的点数
4，点击抽牌按钮随机从卡牌池剩余的卡牌中抽取，对应的卡牌存入变量a中，点数之和num=num+本次抽卡的点数
5，当num>21时提示玩家爆点，小于21点时可选按钮抽牌，等于21点时提示恭喜之类的话，如果点击完成抽牌则记录此玩家点数
6，同理可扩充玩家至2,3,4....个，原理相同，不同玩家存储对应的变量就可以了，最终通过所有<=21点的玩家num,num1,num2来判断输赢
7，同理可设置庄家，庄家在与其他玩家点数相同时赢得对方
8，在此基础上就能增添许多功能了，比如每个玩家默认100金币，有底注，每轮开始的时候可加注，如玩家不跟则底注输掉无法参加游戏，等等之类的各种规则随便发挥
Ⅸ 求一javascript小游戏代码。【注：不要叫我去下载，你直接给我复制过来就可以了】。thank！！
代码比较长 没有注释
脚本说明:
把如下代码加入<body>区域中
<style>
.bigcell {
background-color:#aa9966;
border:4px solid #aa9966;
text-align:center;
}
.cell {
width:40px;
height:40px;
font-family:Verdana, Arial;
font-size:10pt;
font-weight:bold;
background-color:#996633;
color:#ffff33;
border-top:2px solid #aa9966;
border-left:2px solid #aa9966;
border-right:2px solid #663300;
border-bottom:2px solid #663300;
text-align:center;
}
.hole {
width:40px;
height:40px;
background-color:#aa9966;
text-align:center;
}
body,h1,h2,h3,.msg,capt1,capt2 {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2 {font-size:16pt; margin:0px; font-weight:bold;}
h3 {font-size:8pt; margin:0px; font-weight:bold;}
.msg {font-size:8pt; font-weight:bold;}
.tab {cursor:hand;}
.capt1 {font-size:10pt; font-weight:bold;}
.capt2 {font-size:9pt; font-weight:bold;}
.capt3 {font-size:14pt; font-weight:bold; color:yellow;}
.capt4 {font-size:10pt; font-weight:bold; color:yellow;}
.but {font-size:9pt; font-weight:bold; height:30px;background-color:#aaaa99;}
</style>
<BODY onLoad="loadBoard(4)">
<script>
var gsize, ghrow, ghcol, gtime, gmoves, gintervalid=-1, gshuffling;
function toggleHelp()
{
if (butHelp.value == "Hide Help")
{
help.style.display = "none";
butHelp.value = "Show Help";
}
else
{
help.style.display = "";
butHelp.value = "Hide Help";
}
}
//random number between low and hi
function r(low,hi)
{
return Math.floor((hi-low)*Math.random()+low);
}
//random number between 1 and hi
function r1(hi)
{
return Math.floor((hi-1)*Math.random()+1);
}
//random number between 0 and hi
function r0(hi)
{
return Math.floor((hi)*Math.random());
}
function startGame()
{
shuffle();
gtime = 0;
gmoves = 0;
tickTime();
gintervalid = setInterval("tickTime()",1000);
}
function stopGame()
{
if (gintervalid==-1) return;
clearInterval(gintervalid);
fldStatus.innerHTML = "";
gintervalid=-1;
}
function tickTime()
{
showStatus();
gtime++;
}
function checkWin()
{
var i, j, s;
if (gintervalid==-1) return; //game not started!
if (!isHole(gsize-1,gsize-1)) return;
for (i=0;i<gsize;i++)
for (j=0;j<gsize;j++)
{
if (!(i==gsize-1 && j==gsize-1)) //ignore last block (ideally a hole)
{
if (getValue(i,j)!=(i*gsize+j+1).toString()) return;
}
}
stopGame();
s = "<table cellpadding=4>";
s += "<tr><td align=center class=capt3>!! CONGRATS !!</td></tr>";
s += "<tr class=capt4><td align=center>You have done it in " + gtime + " secs ";
s += "with " + gmoves + " moves!</td></tr>";
s += "<tr><td align=center class=capt4>Your speed is " + Math.round(1000*gmoves/gtime)/1000 + " moves/sec</td></tr>";
s += "</table>";
fldStatus.innerHTML = s;
// shuffle();
}
function showStatus()
{
fldStatus.innerHTML = "Time: " + gtime + " secs Moves: " + gmoves
}
function showTable()
{
var i, j, s;
stopGame();
s = "<table border=3 cellpadding=0 cellspacing=0 bgcolor='#666655'><tr><td class=bigcell>";
s = s + "<table border=0 cellpadding=0 cellspacing=0>";
for (i=0; i<gsize; i++)
{
s = s + "<tr>";
for (j=0; j<gsize; j++)
{
s = s + "<td id=a_" + i + "_" + j + " onclick='move(this)' class=cell>" + (i*gsize+j+1) + "</td>";
}
s = s + "</tr>";
}
s = s + "</table>";
s = s + "</td></tr></table>";
return s;
}
function getCell(row, col)
{
return eval("a_" + row + "_" + col);
}
function setValue(row,col,val)
{
var v = getCell(row, col);
v.innerHTML = val;
v.className = "cell";
}
function getValue(row,col)
{
// alert(row + "," + col);
var v = getCell(row, col);
return v.innerHTML;
}
function setHole(row,col)
{
var v = getCell(row, col);
v.innerHTML = "";
v.className = "hole";
ghrow = row;
ghcol = col;
}
function getRow(obj)
{
var a = obj.id.split("_");
return a[1];
}
function getCol(obj)
{
var a = obj.id.split("_");
return a[2];
}
function isHole(row, col)
{
return (row==ghrow && col==ghcol) ? true : false;
}
function getHoleInRow(row)
{
var i;
return (row==ghrow) ? ghcol : -1;
}
function getHoleInCol(col)
{
var i;
return (col==ghcol) ? ghrow : -1;
}
function shiftHoleRow(src,dest,row)
{
var i;
//conversion to integer needed in some cases!
src = parseInt(src);
dest = parseInt(dest);
if (src < dest)
{
for (i=src;i<dest;i++)
{
setValue(row,i,getValue(row,i+1));
setHole(row,i+1);
}
}
if (dest < src)
{
for (i=src;i>dest;i--)
{
setValue(row,i,getValue(row,i-1));
setHole(row,i-1);
}
}
}
function shiftHoleCol(src,dest,col)
{
var i;
//conversion to integer needed in some cases!
src = parseInt(src);
dest = parseInt(dest);
if (src < dest)
{//alert("src=" + src +" dest=" + dest + " col=" + col);
for (i=src;i<dest;i++)
{//alert(parseInt(i)+1);
setValue(i,col,getValue(i+1,col));
setHole(i+1,col);
}
}
if (dest < src)
{
for (i=src;i>dest;i--)
{
setValue(i,col,getValue(i-1,col));
setHole(i-1,col);
}
}
}
function move(obj)
{
var r, c, hr, hc;
if (gintervalid==-1 && !gshuffling)
{
alert('请点击"开始游戏"按钮')
return;
}
r = getRow(obj);
c = getCol(obj);
if (isHole(r,c)) return;
hc = getHoleInRow(r);
if (hc != -1)
{
shiftHoleRow(hc,c,r);
gmoves++;
checkWin();
return;
}
hr = getHoleInCol(c);
if (hr != -1)
{
shiftHoleCol(hr,r,c);
gmoves++;
checkWin();
return;
}
}
function shuffle()
{
var t,i,j,s,frac;
gshuffling = true;
frac = 100.0/(gsize*(gsize+10));
s = "% ";
for (i=0;i<gsize;i++)
{
s += "|";
for (j=0;j<gsize+10;j++)
{
window.status = "Loading " + Math.round((i*(gsize+10) + j)*frac) + s
if (j%2==0)
{
t = r0(gsize);
while (t == ghrow) t = r0(gsize); //skip holes
getCell(t,ghcol).click();
}
else
{
t = r0(gsize);
while (t == ghcol) t = r0(gsize); //skip holes
getCell(ghrow,t).click();
}
}
}
window.status = "";
gshuffling = false;
}
function loadBoard(size)
{
gsize = size;
board.innerHTML = showTable(gsize);
setHole(gsize-1,gsize-1);
//shuffle();
}
</script>
<div id=test></div>
<table cellpadding=4>
<tr><td align=center>
<b>请选择难度: </B>
<select id=level onchange="loadBoard(parseInt(level.value))">
<option value='3'>3</option>
<option value='4' selected>4</option>
<script>
for (var i=5;i<=10;i++)
{
document.write("<option value='" + i + "'>" + i + "</option>");
}
</script>
</select>
</td></tr>
<tr><td align=center>
<input type=button class=but value="开始游戏" onclick="startGame();">
<tr><td align=center id=fldStatus class=capt2>
</td></tr>
</table>
<div id=board></div>
Ⅹ 如何开发一个简单的html5小游戏
创建画布
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个<canvas>元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
准备图片
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。
整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。
游戏对象
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
更新对象
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
}
// 英雄与怪物碰到了么？
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
渲染物体
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// 计分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};
之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// 立即调用主函数
requestAnimationFrame(main);
};
上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「Onslaught! Arena Case Study」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
reset();
main();
总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)
Feel free to repost but keep the link to this page please!