首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。
context.clearRect(aligh,100,47,47);
//防止飞机移除背景外
if(aligh < 260){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,aligh,100);
}
aligh += 10 ;
}
//当飞机即将移出背景外时，让它停在最右端
if (aligh == 260){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,260,100);
}
}
}
//控制飞机向左移动的函数
function moveLeft(event){
context.clearRect(aligh,47);
//防止飞机移出最左边的边界
if(aligh > 0){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,100);
}
aligh -= 10 ;
}
//使其控制在最左侧
if (aligh == 0){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,100);
}
}
}
//判断按下的是哪个键，然后控制飞机左右移动
document.onkeydown = function(event){
if(event.keyCode == 37){
moveLeft();
}
if(event.keyCode == 39){
moveRight();
}
}
2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。
var randomleft = Math.floor(Math.random() * 300) ;
//如果生成的位置出现在背景外，则就取260
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';
leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除
main.appendChild(enemy);
enemy.style.paddingLeft = left ;
enemy.style.paddingTop = top;
var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img
//让最后一个img动起来。则就相当于为每一个img都绑定了动画
spandom.animate({"paddingTop":420},6000,function(){
//当下落到底部时移除元素
this.remove();
arrPic.splice(0,1); //从数组中移除图片
leftArr.splice(0,1); //从数组中移除距离
fallCount ++; //检测下落了多少个飞机，超过十个没被打中，游戏就结束
});
//如果落下的飞机数超过十个没有被打中，则游戏结束
if(fallCount > 10){
clearInterval(createId);
clearInterval(crashId);
alert("当前得分 ："+count+",很遗憾，游戏结束!")
}
},1000);
3、现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了
//由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。
for(var i = 0; i < leftArr.length; i++)
{
//首先将两种都转换成int型进行比较
var tempL = parseInt(leftArr[i]);
var tempA = parseInt(aligh); //表示自己距左侧的位置
//当自己的中心距离处于敌机的左右两侧范围内，则表示被击中
if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
arrPic[i].remove(); //碰撞检测，移除敌机的图片
arrPic.splice(i,1); //从图片数组中移除图片
leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离
count++;
score.innerHTML = "当前得分 "+count;
break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测
}
}
},2200);
}
checkCrash();
4、效果图如下：
最后附上源代码：
html&css
JavaScript
//生成自己，且可以左右移动
function move(event){
event = EventUtil.getEvent(event);
context.clearRect(aligh,47);
if(event.keyCode == 39 && aligh < 260 ){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,100);
}
aligh += 10 ;
}
if (aligh == 260){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,100);
}
}
}
document.onkeypress = move;
//随机生成敌机
(function(){
var createId = setInterval(function(){
var top = 0+'px';
var enemy = document.createElement("img");
enemy.src = "../images/enemy.png";
var randomleft = Math.floor(Math.random() * 300) ;
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';
leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除
main.appendChild(enemy);
enemy.style.paddingLeft = left ;
enemy.style.paddingTop = top;
var spandom = $("#main>img:last-child");//找到最后一个span
spandom.animate({"paddingTop":420},function(){
//移除元素
this.remove();
arrPic.splice(0,1); //移除图片
leftArr.splice(0,1); //从数组中移除距离
fallCount ++;
});
//如果落下的飞机数超过十个没有被打中，则游戏结束
if(fallCount >= 10){
clearInterval(createId);
clearInterval(crashId);
alert("当前得分 ："+count+",很遗憾，游戏结束!")
}
},1000);
})();
//碰撞检测
function checkCrash(){
crashId = setInterval(function(){
for(var i = 0; i < leftArr.length; i++)
{
var tempL = parseInt(leftArr[i]);
var tempA = parseInt(aligh);
if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
arrPic[i].remove(); //碰撞检测，移除敌机的图片
count++;
score.innerHTML = "当前得分 "+count;
continue;
}
}
console.log(count);
},2200);
}
checkCrash();
}
