html5簡單小游戲
① 怎麼用HTML5製作一款小游戲
用HTML5製作一款小游戲首先肯定得學會HTML，然後推薦可以考慮先去學習別人的成品游戲，借鑒甚至模仿出來，再去構思自己的游戲就很簡單了，我目前就在雲創動力華中區學習游戲製作，感覺用HTML5製作游戲真的並不難。
② 如何開發一個簡單的HTML5 Canvas 小游戲
創建畫布
// 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();
③ 如何開發一個簡單的HTML5 Canvas 小游戲
canvas主要是用js在網頁上繪制圖形的，所以要想用canvas開發小游戲，就要先掌握好js。
canvas 擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。對這些你都要有一定的了解，之後就相當於有了製作游戲的零件，接下來就是組裝了。
我研究過也見到過一些別人寫的比較不錯的用canvas做的小游戲，比如酷炫的倒計時，粒子，貪吃蛇，生成文字圖案等等。
給你個別人寫的貪吃蛇小例子，在里邊我又寫了點localStorage：http://sandbox.runjs.cn/show/4aaszv8t
另外再給你個w3school的canvas的頁面：http://www.w3school.com.cn/html5/html_5_canvas.asp
④ 怎麼用html5製作簡單的大球吃小球的游戲
<html>
<head>
<title>
大球吃小球by大奔
</title>
<script type="text/javascript" src="src/jscex.js"></script>
<script type="text/javascript" src="src/jscex-parser.js"></script>
<script type="text/javascript" src="src/jscex-jit.js"></script>
<script type="text/javascript" src="src/jscex-builderbase.js"></script>
<script type="text/javascript" src="src/jscex-async.js"></script>
<script type="text/javascript" src="src/jscex-async-powerpack.js"></script>
</head>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3">
你的瀏覽器改換了
</canvas>
<script type="text/javascript">
var d=document.getElementByIdx_x("myCanvas");
var cxt=d.getContext("2d");
var balls=[];
//這里為了獲得隨機數的向量
function getRandom(a,b){
return (a+Math.floor(Math.random()*(b-a+1)))
}
//這里對向量進行賦值
var Vector2=function(a,b){
this.x=a||0;
this.y=b||0;
};
//這里需要注意，對象的默認方法在這里寫不會管用。例如sub
Vector2.prototype={//寫對象的構造函數
constructor:Vector2,
multiplyScalar:function(s){
this.x*=s;
this.y*=s;
return this;
},
divideScalar:function(s){
if(s){
this.x/=s;
this.y/=s;
}else{
this.set(0,0);
}
return this;
},
dot:function(v){
return this.x*v.x+this.y*v.y;//即兩個向量相乘
},
lengthSq:function(){
return this.x*this.x+this.y*this.y;
},
length:function(){
return Math.sqrt(this.lengthSq());
},
normalize:function(){
//這里得到的是單位向量，按照google的定義，單位的向量是， //（a,b）則a*a+b*b=1;
return this.divideScalar(this.length());
},
reflectionSelf:function(v){
//這里得到的是反射向量。公式參考這個網址。
//blog.physwf.com/?p=42
var nv=v.normalize();
this.sub(nv.multiplyScalar(2*this.dot(nv)));
},
distanceToSquared:function(v){//求出兩點之間的距離
var dx=this.x-v.x,
dy=this.y-v.y;
return dx*dx+dy*dy;
}
};
Vector2.sub=function(v1,v2){//這里重寫sub方法
return new Vector2(v1.x-v2.x,v1.y-v2.y);
};
for(var i=0;i<40;i++){//初始化40個小球
var ball={
position:new Vector2(getRandom(20,600),getRandom(20,600)),
r:getRandom(6,20),
speed:new Vector2(getRandom(-200,200),getRandom(-200,200)),
mass:1,//這是小球的質量
restitution:1//這是彈性系數
};
balls.push(ball);
}
var filterBalls=[];
for(var i=0;i<balls.length;i++){
var overlapCount=0;
for(var j=i+1;j<balls.length;j++){//兩個兩個比較防止重復，而且初始化的位置不能重 //疊，否則符合碰撞的條件。去掉這個判斷以後，效果不太顯著，可以多放些球試試。
var distance=balls[i].position.distanceToSquared(balls[j].position);
var l=balls[i].r+balls[j].r;
if(distance<=(l*l)){
overlapCount++;
}
}
if(overlapCount===0){
filterBalls.push(balls[i]);
}
}
balls=filterBalls;//這里可以去掉試試。
cxt.fillStyle="#030303";
cxt.fillRect(0,0,d.width,d.height);
function init(){
cxt.fillStyle="#fff";
for(i in balls){
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
}
init();
var cyc=20;
var moveAsync2=eval_r(Jscex.compile("async",function(){
var tag=0;
while(true){
try{
cxt.fillStyle="rgba(0,0,0,3)";
cxt.fillRect(0,0,d.width,d.height);
cxt.fillStyle="#fff";
for(var i=0;i<balls.length;i++){
//這里是為了兩個小球比較會重復所以，每次比較都是i與i+1 //開始相比較
for(var j=i+1;j<balls.length;j++){
collisionSolver(balls[i],balls[j]);
}
}
for(i in balls){
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
if(balls[i].r+balls[i].position.x>d.width){
//如果小球x軸跑出了畫布的范圍
balls[i].position.x=d.width-balls[i].r;
//小球的位置返回到畫布的邊緣位置
balls[i].speed.x*=-1;
//同時x軸的方向變為反方向
}if(balls[i].position.x<balls[i].r){
//如果小球的x坐標小於小球的半徑。肯定畫不成完整的圓了，所以要歸位
balls[i].position.x=balls[i].r;
balls[i].speed.x*=-1; }if(balls[i].r+balls[i].position.y>d.height){//同理y軸
balls[i].position.y=d.height-balls[i].r;
balls[i].speed.y*=-1;
}
if(balls[i].position.y<balls[i].r){
balls[i].position.y=balls[i].r;
balls[i].speed.y*=-1;
} balls[i].position.x+=balls[i].speed.x*cyc/1000;
//小球的x軸不斷按照速度增大
balls[i].position.y+=balls[i].speed.y*cyc/1000;
}
}catch(e){
alert(e);
}
$await(Jscex.Async.sleep(cyc));
}
}));
function collisionSolver(bodyA,bodyB){//判斷小球發生碰撞的時候的變化。
var vB=bodyB.speed;
var vA=bodyA.speed;
var l=bodyA.r+bodyB.r;
var distSqr=bodyA.position.distanceToSquared(bodyB.position);
var isTouching=distSqr<=l*l? true:false;
//判斷兩圓心之間的距離如果小於兩半徑之和的平方。則為true
var normal=Vector2.sub(bodyB.position,bodyA.position).normalize();
//請看上面的解釋,所以得到的是B相對於A的單位向量。
var ratio=bodyA.r/l;//這是一個比例
var contactPoint=new Vector2();
//根據平行線切割的三角形，兩邊的邊的比例相等，
contactPoint.x=bodyA.position.x+(bodyB.position.x-bodyA.position.x)*ratio;
contactPoint.y=bodyA.position.y+(bodyB.position.y-bodyA.position.y)*ratio;
var rA=Vector2.sub(contactPoint,bodyA.position);
//這兩個地方沒有找到是哪裡用到的？？？？？
var rB=Vector2.sub(contactPoint,bodyB.position);
var vrn=Vector2.sub(vA,vB).dot(normal);
//這里得到的是Va相對於vB的速度向量與兩球的圓心的單位向量相乘。
///a*b=|a|*|b|*cos@.所以如果vrn大於零，則夾角小於90度。
if(isTouching&&vrn>0){
//這里是沖量公式的一個部分
var normalMass=1/(1/bodyA.mass+1/bodyB.mass);
var restitution=(bodyA.restitution+bodyB.restitution)/2;
var normalImpulse=-normalMass*vrn*(1+restitution);
bodyA.speed.x+=normalImpulse*normal.x/bodyA.mass;
//這里總之是一個大球一個小球，所以速度一個增大一個減小
bodyA.speed.y+=normalImpulse*normal.y/bodyA.mass;
bodyB.speed.x-=normalImpulse*normal.x/bodyB.mass;
bodyB.speed.y-=normalImpulse*normal.y/bodyB.mass;
}
}
moveAsync2().start();
</script>
</body>
</html>
⑤ 如何開發一個簡單的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!
⑥ H5頁面小游戲怎麼做的
H5的小游戲其實就是用基於HTML5技術製作的小游戲，常見的HTML5游戲製作，如果不考慮游戲策劃，如果你關心的更多的是製作的話，
那麼按照製作方式可以分為兩種：
1、原生開發
就是自己寫HTML5代碼（HTML／CSS／Javascript），或者使用第三方引擎，例如國內常見的白鷺、Cocos2d-Js，以及國外的http://Phaser.io，這個極力推薦，雖然國內用的人不多。
2、第三工具
另外就是通過一些第三方工具來實現游戲的生成與定製。
這里也可以分為兩類
A 套模版
有簡單的直接套模版，替換素材，游戲音樂音效即可直接完成的，例如我們做的24好玩平台即是其中之一，類似的還有極點互動、微播盈趣、凡科互動等等。
B 工具編輯器
也有一些高級的工具類似於H5互動編輯器MAKA，我知道的有國外的Construct，如果你想學，不想從0開始學代碼，這個是一個略微高級的學法。
希望能夠幫到你。
作者：易良慧
鏈接：https://www.hu.com/question/23935887/answer/106508141
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
⑦ 如何開發一個簡單的HTML5 Canvas 小游戲
創建畫布
// 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 博客原版的一個簡化版本。
啟動游戲！
⑧ 如何開發一個簡單的html5小游戲
首先你要懂得html、css屬性和技術。入門html5推薦你可以學習創客學院的教程，每個知識點都有對應的案例，理解起來很容易，零基礎入門的量身教程。在線問答讓你的每天的問題可以得到及時的解答，不留尾巴。課程內容干貨多，廢話少，互動式讓枯燥的課程變得生動有趣，加強你的學習慾望。
⑨ h5小游戲開發是怎麼做的簡單嗎
這個問題還真不好回答，
H5小游戲，其實就是 html5 + css3 + javascript 等原生技術開發的小游戲。至於簡不簡單，那得看你的學習能力和理解能力了。html5+css3+javascript 是前端開發的基礎技術，但是也是最重要的技術。入門比較容易，但是要精通還真的不簡單。
小游戲主要就是結合html5，使用canvas 和 css3的各種屬性，然後結合 js來進行操作。學好這些技術，開發一個簡單的小游戲並不難。