本文实例为大家分享了js微信打飞机游戏的具体代码，供大家参考，具体内容如下

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。

1、生成自己，且可以通过左右键来进行左右移动。

//生成自己，且可以左右移动

//控制飞机向右移动的函数

function moveRight(event){

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,100,47,47);

//防止飞机移出最左边的边界

if(aligh > 0){

var img = new Image();

img.src = "../images/self.png";

img.onload = function(){

context.drawImage(img, aligh,100);

}

aligh -= 10 ;

}

//使其控制在最左侧

if (aligh == 0){

var img = new Image();

img.src = "../images/self.png";

img.onload = function(){

context.drawImage(img, 0,100);

}

}

}

//判断按下的是哪个键，然后控制飞机左右移动

document.onkeydown = function(event){

if(event.keyCode == 37){

moveLeft();

}

if(event.keyCode == 39){

moveRight();

}

}

2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。

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) ;

//如果生成的位置出现在背景外，则就取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秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了

function checkCrash(){

crashId = setInterval(function(){

//由于每次自由落下的飞机在上面函数中都被移除了。所以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

*{

margin: 0px;

padding: 0px;

}

#main{

width: 300px;

height: 500px;

border:1px solid red;

margin: 0 auto;

}

#my{

position: absolute;

z-index: 2;

top:350px;

}

#background{

position: absolute;

z-index: 1;

width: 300px;

height:500px;

border: 1px solid green;

background-image: url(../images/background.jpg);

}

img{

position: absolute;

z-index: 2;

}

#enmey{

width: 50px;

height: 50px;

}

#score{

position: absolute;

margin-left: 50%;

left: 150px;

top:100px;

width: 160px;

font-size: 20px;

font-family: "微软雅黑";

font-weight: bold;

line-height: 70px;

text-align: center;

}

JavaScript

var main = document.getElementById('main');

var my = document.getElementById('my');

var score = document.getElementById("score");

var context = my.getContext('2d');

var crashId;

var fallCount = 0; //记录没被打中的飞机数，如果超过10，游戏结束

var aligh = 0 ;

var count = 0; //记录打中的飞机数，即当前得分

var leftArr = [];

var arrPic = [];

var left;

var img = new Image();

img.src = "../images/self.png";

img.onload = function(){

context.drawImage(img,aligh,100);

}

//生成自己，且可以左右移动

function move(event){

event = EventUtil.getEvent(event);

context.clearRect(aligh,100,47,47);

if(event.keyCode == 39 && 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);

}

}

}

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},6000,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();

}

更多有趣的经典小游戏实现专题，分享给大家：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。