各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家分享一个经典游戏.大家都应该玩过微信中的打飞机吧.今天就简单的用canvas画布来制作一个简单的游戏画面.
首先画面布局
<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;
}
接下来呢,就是js原生代码方式去书写了,并且带上闭包方式进行书写.
//创建键值对图片路径
var info = {
"background":"img/background.png", //背景图片
"plane": "img/plane.png", //飞机图片
};
//加载图片资源
loading(info,{
done:main
});
而在这里,我声明了一个函数loading 并用键值对的方式去传送图片路径和我的主调用main函数, 他将作为我的画面中对飞机和背景的处理主函数. 请往下看 loading.js文件. 我声明一个loading.js文件导入项目中.
function loading(info,callbock){
//图片总个数
var allimg = 0;
for(key in info){
allimg++;
}
}
我通过info传送过来的图片路径进行遍历.
//保存已经加载完成的图片 用键值对方式保存
var loadingimg = {};
// 图片已经加载完成的个数
var loadingimgnumber = 0;
在这里我又声明了加载后的图片键值对和加载完成后的图片个数.
然后我将对info进行遍历 创建图片对象. 实现图片预加载.
for(key in info){
var obj = new Image();
obj.src = info[key];
//闭包方式return函数返回当前的图片加载完成的键值对.
obj.onload = (function(key2){
return function(){
loadingimg[key2] = this;
loadingimgnumber++;
if(loadingimgnumber == allimg){
if(callbock.done){
callbock.done(loadingimg);
}
}
}
})(key);
}
剩下的就是主函数代码了.
//main主函数
function main(loadingimg){
//开始绘制画布的飞机
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//获取canvas的宽高
canvaswidth = canvas.width;
canvasheight = canvas.height;
//飞机的起始位置
var loadX = canvaswidth/2 - 33;
var loadY = canvasheight - 82;
//飞机对象
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();
//背景对象
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();
//动画
function gameloop(){
backgrounds.move();
plane.draw();
window.requestAnimationFrame(gameloop);
}
window.requestAnimationFrame(gameloop);
}
好啦,各位观众老爷,给大家一个代码运行的一个样式吧.
今天因为太晚了,实在扛不住了,代码有些地方获取没有解释到位, 我先分享给大家. 后续我会更新的. 感谢各位观众老爷的阅读,如有问题请赐教, 内裤感激不尽. 谢谢大家啦~~~~
