各位觀眾老爺大家好,歡迎收看內(nèi)褲總動(dòng)員之程序猿的IT程序大講堂,今天給大家分享一個(gè)經(jīng)典游戲.大家都應(yīng)該玩過(guò)微信中的打飛機(jī)吧.今天就簡(jiǎn)單的用canvas畫布來(lái)制作一個(gè)簡(jiǎn)單的游戲畫面.?
首先畫面布局
<canvas id = "canvas" width = "375" height = "627"></canvas>
樣式布局
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#canvas{
box-shadow: 0 0 50px gray;
display: block;
margin: 0 auto;
}
接下來(lái)呢,就是js原生代碼方式去書寫了,并且?guī)祥]包方式進(jìn)行書寫.
//創(chuàng)建鍵值對(duì)圖片路徑
var info = {
"background":"img/background.png", //背景圖片
"plane": "img/plane.png", //飛機(jī)圖片
};
//加載圖片資源
loading(info,{
done:main
});
而在這里,我聲明了一個(gè)函數(shù)loading 并用鍵值對(duì)的方式去傳送圖片路徑和我的主調(diào)用main函數(shù), 他將作為我的畫面中對(duì)飛機(jī)和背景的處理主函數(shù). 請(qǐng)往下看 loading.js文件.? 我聲明一個(gè)loading.js文件導(dǎo)入項(xiàng)目中.
function loading(info,callbock){
//圖片總個(gè)數(shù)
var allimg = 0;
for(key in info){
??? allimg++;
? }
}
我通過(guò)info傳送過(guò)來(lái)的圖片路徑進(jìn)行遍歷.
//保存已經(jīng)加載完成的圖片 用鍵值對(duì)方式保存
var loadingimg = {};
// 圖片已經(jīng)加載完成的個(gè)數(shù)
var loadingimgnumber = 0;
在這里我又聲明了加載后的圖片鍵值對(duì)和加載完成后的圖片個(gè)數(shù).
然后我將對(duì)info進(jìn)行遍歷 創(chuàng)建圖片對(duì)象. 實(shí)現(xiàn)圖片預(yù)加載.
for(key in info){
??? var obj = new Image();
?? obj.src = info[key];
//閉包方式return函數(shù)返回當(dāng)前的圖片加載完成的鍵值對(duì).
?? obj.onload = (function(key2){
????? return function(){
? ? ? ? ? ? ?? loadingimg[key2] = this;
?????????????? loadingimgnumber++;
? ? ? ? ? ? ? if(loadingimgnumber == allimg){
???????????????? if(callbock.done){
????????????????? callbock.done(loadingimg);
??????? ? ? ?? }
??????????? }
?????? }
?? })(key);
}
剩下的就是主函數(shù)代碼了.
//main主函數(shù)
function main(loadingimg){
//開始繪制畫布的飛機(jī)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//獲取canvas的寬高
canvaswidth = canvas.width;
canvasheight = canvas.height;
//飛機(jī)的起始位置
var loadX = canvaswidth/2 - 33;
var loadY = canvasheight - 82;
//飛機(jī)對(duì)象
var plane = {
w:66,
h:82,
x:canvaswidth/2 - 33,
y:canvasheight - 82,
startX:0,
startY:0,
endX:0,
endY:0,
flag:true,
draw:function(){
ctx.drawImage(loadingimg.plane,0,0,this.w,this.h,this.x,this.y,this.w,this.h);
},
move:function(){
canvas.addEventListener('touchstart',function(e){
var ev = e || window.event;
var touchs = ev.touches[0];
plane.startX = touchs.pageX;
plane.startY = touchs.pageY;
},false);
canvas.addEventListener('touchmove',function(e){
var ev = e || window.event;
var touchs = ev.touches[0];
if(plane.flag == true){
var x = touchs.pageX - plane.startX+ loadX + plane.endX;
var y = touchs.pageY - plane.startY+ loadY + plane.endY;
plane.x = x ;
plane.y = y ;
plane.draw();
}else{
var x = touchs.pageX - plane.startX + plane.endX;
var y = touchs.pageY - plane.startY + plane.endY;
plane.x = x ;
plane.y = y ;
plane.draw();
}
},false);
canvas.addEventListener('touchend',function(e){
// var ev = e || window.event;
// var touchs = ev.changedTouches[0];
plane.endX = plane.x;
plane.endY = plane.y;
plane.flag = false;
},false);
}
};
plane.draw();
plane.move();
//背景對(duì)象
var backgrounds = {
x:0,
y:0,
w:canvaswidth,
h:canvasheight,
draw:function(){
ctx.drawImage(loadingimg.background,this.x,this.y,this.w,this.h);
ctx.drawImage(loadingimg.background,this.x,this.y-this.h,this.w,this.h);
},
move:function(){
this.y+=5;
if(this.y >= this.h){
this.y=0;
}
backgrounds.draw();
}
};
backgrounds.draw();
//動(dòng)畫
function gameloop(){
backgrounds.move();
plane.draw();
window.requestAnimationFrame(gameloop);
}
window.requestAnimationFrame(gameloop);
}
???? 好啦,各位觀眾老爺,給大家一個(gè)代碼運(yùn)行的一個(gè)樣式吧.
今天因?yàn)樘砹?實(shí)在扛不住了,代碼有些地方獲取沒有解釋到位, 我先分享給大家. 后續(xù)我會(huì)更新的. 感謝各位觀眾老爺?shù)拈喿x,如有問(wèn)題請(qǐng)賜教, 內(nèi)褲感激不盡. 謝謝大家啦~~~~
