重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊、服務(wù)器等服務(wù)
怎么用h5實(shí)現(xiàn)打火箭小游戲
本篇內(nèi)容介紹了“怎么用h5實(shí)現(xiàn)打火箭小游戲”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)技術(shù)團(tuán)隊十余年來致力于為客戶提供成都網(wǎng)站建設(shè)、做網(wǎng)站、高端網(wǎng)站設(shè)計、營銷型網(wǎng)站、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗豐富的技術(shù)團(tuán)隊，先后服務(wù)、推廣了超過千家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。
一.游戲介紹
游戲介紹：
不斷有攜帶字母炸彈的火箭撞向地面，請根據(jù)火箭身上的字母敲擊鍵盤，每一次對應(yīng)的敲擊會擊落攜帶該字母的火箭并使得分加一，每一架火箭撞到地面會使生命值減一，每擊落十架火箭，火箭數(shù)會加一，并獎勵一點(diǎn)額外生命值，生命值上限為八。
二.HTML內(nèi)容
index.html里包含canvas畫布和一個 介紹游戲規(guī)則的div，
當(dāng)鼠標(biāo)點(diǎn)擊頁面任何一個地方的時候，進(jìn)入游戲界面:
index
瀏覽器不支持canvas
1.Click space to pause or begin game.
2.Enter the letter on the rockets to hit them.
3.Number of the hearts will add one together with the rockets after ten rockets hit.
4.Failed when the number of hearts equals zero.
5.Click anywhere to start game!
二.JS內(nèi)容
1.動畫實(shí)現(xiàn)
common.js中并未使用setTimeOut()或者setInterval()作為動畫定時器，而是使用window.requestAnimationFrame，一種更為優(yōu)化的方式實(shí)現(xiàn)動畫效果。
requestAnimFrame的用法,先設(shè)置瀏覽器的兼容，并設(shè)置動畫的幀率，這里設(shè)置為每1000/60ms執(zhí)行一次回調(diào)函數(shù)
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();requestAnimFrame中的兩個參數(shù),callback為下次重畫執(zhí)行的函數(shù)，element為要重畫的節(jié)點(diǎn),即
requestAnimFrame(callback, element);
2.代碼塊及對象分析
(1) 在Game代碼塊控制游戲的開始、結(jié)束和重新開始以及動畫的運(yùn)行和鼠標(biāo)、鍵盤點(diǎn)擊事件的判定
Game.begin()，游戲開始界面，點(diǎn)擊任意位置，調(diào)用Game.run()函數(shù)進(jìn)入游戲運(yùn)行界面
Game.run()，游戲運(yùn)行界面，這里使用自定義兼容函數(shù)requestAnimFrame不斷回調(diào)Game.transform()函數(shù)對畫布重繪，并調(diào)用鍵盤點(diǎn)擊監(jiān)聽函數(shù)Game.hit(event)，判斷按鍵是否擊中火箭
Game.over()，游戲結(jié)束界面，顯示游戲得分、游戲中獎勵的生命值和最終火箭數(shù)，點(diǎn)擊任意位置會調(diào)用Game.restart()函數(shù)初始化游戲參數(shù)并調(diào)用Game.begin()進(jìn)入游戲開始界面
(2) Background代碼塊用于繪制背景,默認(rèn)樣式為垂直方向灰度加深的漸變色
(3) Hearts代碼塊，根據(jù)全局變量heartsNum設(shè)置生命值的數(shù)量，初始為5，通過迭代和設(shè)置水平偏移量offSetX創(chuàng)建hearts數(shù)組中對象的位置屬性，而Heart對象則要保存位置和半徑屬性。另外，Heart對象中設(shè)置draw()函數(shù)進(jìn)行自繪，而Hearts代碼塊中設(shè)置draw()函數(shù)控制hearts數(shù)組中所有對象的自繪 ，以此實(shí)現(xiàn)動畫運(yùn)行時生命值的狀態(tài)管理 。
(4) Rockets代碼塊負(fù)責(zé)繪制小火箭們，火箭數(shù)量由全局變量rocketsNum控制，初始為5，火箭的具體繪制由Rocket對象完成，在這里Rocket對象的狀態(tài)是隨機(jī)產(chǎn)生的，Rockets代碼塊中的rockets數(shù)組負(fù)責(zé)保存所有Rocket對象的狀態(tài)。Rockets代碼塊控制所有Rocket對象的自繪，并在鍵盤敲擊時，循環(huán)遍歷數(shù)組中的對象以判斷火箭是否被擊中。
(5) TextNodes代碼塊負(fù)責(zé)繪制文本，TextNodes.setup()函數(shù)負(fù)責(zé)設(shè)置文本的內(nèi)容、位置、字體、樣式和字符的偏移量，當(dāng)然也可以不進(jìn)行設(shè)置，這時會采用默認(rèn)值。TextNode對象保存單個字符的內(nèi)容和位置信息并負(fù)責(zé)文本的自繪，TextNodes代碼塊會負(fù)責(zé)所有nodes數(shù)組中的對象的自繪。
(6) start函數(shù)負(fù)責(zé)從介紹游戲規(guī)則的界面轉(zhuǎn)到游戲開始界面。
下面就不多說了，貼代碼common.js:
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas_width=canvas.width;
canvas_height=canvas.height;
var heartsNum=5;//生命值數(shù)
var extraHearts=0;//額外增加的生命值數(shù)
var rocketsNum=5;//火箭數(shù)
var score=0;//得分?jǐn)?shù)
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var Game={
animationID:0,//animationID,flag控制暫停和開始
flag:true,
begin:function(){
ctx.clearRect(0,0,canvas_width,canvas_height);
Background.draw("yellow");
TextNodes.setup("HitRocket",100,240,"96px 楷體,arial","#000");
TextNodes.draw();
TextNodes.setup("Click anywhere to start",150,360,"42px 楷體,arial","#000");
TextNodes.draw();
Rockets.init();
Hearts.init();
window.addEventListener("click",Game.run);
},
//緩沖，移除監(jiān)聽器
run:function(){
window.removeEventListener("click",Game.run);
Game.transform();
window.addEventListener("keyup",Game.hit);
},
transform:function(){
if(heartsNum>0){
Game.animationID=requestAnimationFrame(Game.transform);
//清空畫布
ctx.clearRect(0,0,canvas_width,canvas_height);
//背景
Background.draw();
//計分
TextNodes.setup("Score:"+score,640,50,"42px 楷體,arial","#f00",20);
TextNodes.draw();
//火箭
Rockets.transform();
Rockets.modify();
Rockets.draw();
//生命值
Hearts.modify();
Hearts.draw();
}else Game.over();
},
hit:function(event){
event = (event)?event:window.event;
if(event.keyCode==32)
//暫停開始
if(Game.flag){
Game.flag=false;
window.cancelAnimationFrame(Game.animationID);
}else{
Game.flag=true;
requestAnimationFrame(Game.transform);
}
else if(event.keyCode>=65&&event.keyCode<=90)
//打擊火箭
Rockets.loopHit(String.fromCharCode(event.keyCode));
},
over:function(){
window.removeEventListener("keyup",Game.hit);
Background.draw("#000");
TextNodes.setup("Game Over!",100,120,"96px 楷體,arial","#f00");
TextNodes.draw();
TextNodes.setup("Click anywhere to retry!",120,200,"48px 楷體,arial","#f00");
TextNodes.draw();
TextNodes.setup("Score:"+score,240,320,"90px 楷體,arial","#f00");
TextNodes.draw();
TextNodes.setup("Extra hearts:"+extraHearts,120,420,"42px 楷體,arial","#f00",25);
TextNodes.draw();
TextNodes.setup("Total rockets:"+rocketsNum,120,500,"42px 楷體,arial","#f00",25);
TextNodes.draw();
window.addEventListener("click",Game.restart);
},
restart:function(){
window.removeEventListener("click",Game.restart);
//init
heartsNum=5;
extraHearts=0;
rocketsNum=5;
score=0;
Game.begin();
}
}
//繪制背景
//有傳入繪制樣式，則使用該樣式，否則使用默認(rèn)樣式，垂直加深灰色漸變
var Background={
draw:function(fillStyle){
if(fillStyle)
ctx.fillStyle=fillStyle;
else{
var grd=ctx.createLinearGradient(0,0,0,canvas_height);
grd.addColorStop(0,"#ccc");
grd.addColorStop(1,"#777");
ctx.fillStyle=grd;
}
ctx.fillRect(0,0,canvas_width,canvas_height);
}
}
//繪制生命值
var Heart=function(x,y){
//不能初始化
var x,y,radius;
this.x=x;
this.y=y;
this.radius=20;
this.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
ctx.closePath();
var grd=ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
grd.addColorStop(1,"#f00");
grd.addColorStop(0,"#fff");
ctx.fillStyle=grd;
ctx.fill();
}
}
//管理生命值的初始化和數(shù)量變化
var Hearts={
hearts:null,
x:50,
y:40,
offSetX:50,
init:function(){
this.hearts=new Array();
for(var i=0;i=canvas_height){
this.init(this.scale);
heartsNum--;
}//即將超出屏幕范圍的時候，進(jìn)行預(yù)警，火箭體上的字母變?yōu)榧t色
else if(this.y>canvas_height/7*5)
this.fontColor="#f00";
this.y+=this.speed;
}
}
//管理火箭的初始化，數(shù)量變化，運(yùn)動
var Rockets={
rockets:null,
scale:0.4,//控制火箭的大小
init:function(){
this.rockets=new Array();
for(var i=0;i“怎么用h5實(shí)現(xiàn)打火箭小游戲”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
網(wǎng)頁名稱：怎么用h5實(shí)現(xiàn)打火箭小游戲
路徑分享：http://www.xueling.net.cn/article/jeoges.html