JavaScript仿微信打飛機游戲

更新時間：2020年07月05日 09:23:07 作者：畫一生情入顏容

這篇文章主要為大家詳細介紹了JavaScript仿微信打飛機游戲的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js微信打飛機游戲的具體代碼，供大家參考，具體內容如下

首先實現(xiàn)微信打飛機游戲，首先會有自己和敵機，采用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) ;
 //如果生成的位置出現(xiàn)在背景外，則就取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、現(xiàn)在主要是碰撞檢測。每隔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; //檢測到之后直接跳出循環(huán)，進行下一個2.2秒的碰撞檢測
 } 
 } 
 },2200);

 }
 checkCrash();

這個游戲還不太完整，沒有生成子彈。大部分功能都已經實現(xiàn)了。

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

}

更多有趣的經典小游戲實現(xiàn)專題，分享給大家：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: