首先實現微信打飛機遊戲，首先會有自己和敵機，採用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
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/ >
<title></title>
<script type="text/javascript" src = "./fightFlight.js"></script>
<script src = "../jQuery/jquery-3.2.0.min.js"></script>
<style type="text/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;
}
</style>
</head>
<body>
<div id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<div id = "score">當前得分：0</div>
</div>
</body>
</html>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();
}