您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了js微信打飛機(jī)游戲的具體代碼,供大家參考,具體內(nèi)容如下
首先實(shí)現(xiàn)微信打飛機(jī)游戲,首先會有自己和敵機(jī),采用canvas繪圖來生成自己和敵人。
1、生成自己,且可以通過左右鍵來進(jìn)行左右移動。
//生成自己,且可以左右移動 //控制飛機(jī)向右移動的函數(shù) function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飛機(jī)移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png"; img.onload = function(){ context.drawImage(img, aligh,100); } aligh += 10 ; } //當(dāng)飛機(jī)即將移出背景外時(shí),讓它停在最右端 if (aligh == 260){ var img = new Image(); img.src = "../images/self.png"; img.onload = function(){ context.drawImage(img, 260,100); } } } //控制飛機(jī)向左移動的函數(shù) function moveLeft(event){ context.clearRect(aligh,100,47,47); //防止飛機(jī)移出最左邊的邊界 if(aligh > 0){ var img = new Image(); img.src = "../images/self.png"; img.onload = function(){ context.drawImage(img, aligh,100); } aligh -= 10 ; } //使其控制在最左側(cè) if (aligh == 0){ var img = new Image(); img.src = "../images/self.png"; img.onload = function(){ context.drawImage(img, 0,100); } } } //判斷按下的是哪個鍵,然后控制飛機(jī)左右移動 document.onkeydown = function(event){ if(event.keyCode == 37){ moveLeft(); } if(event.keyCode == 39){ moveRight(); } }
2、生成敵機(jī)。敵機(jī)就是在背景上隨機(jī)生成圖片。每隔一秒使其從上面下落。
var createId = setInterval(function(){ var top = 0+'px'; var enemy = document.createElement("img"); enemy.src = "../images/enemy.png"; //生成隨機(jī)的位置 var randomleft = Math.floor(Math.random() * 300) ; //如果生成的位置出現(xiàn)在背景外,則就取260 left = randomleft > 260 ? 260 + 'px': randomleft + 'px'; leftArr.push(left); //保存每個敵機(jī)的距左邊的距離,方便碰撞檢測的計(jì)算 arrPic.push(enemy); //將每個敵機(jī)的圖片保存在數(shù)組中,方便碰撞檢測后移除 main.appendChild(enemy); enemy.style.paddingLeft = left ; enemy.style.paddingTop = top; var spandom = $("#main>img:last-child");//這兒利用jquery找到最后一個img //讓最后一個img動起來。則就相當(dāng)于為每一個img都綁定了動畫 spandom.animate({"paddingTop":420},6000,function(){ //當(dāng)下落到底部時(shí)移除元素 this.remove(); arrPic.splice(0,1); //從數(shù)組中移除圖片 leftArr.splice(0,1); //從數(shù)組中移除距離 fallCount ++; //檢測下落了多少個飛機(jī),超過十個沒被打中,游戲就結(jié)束 }); //如果落下的飛機(jī)數(shù)超過十個沒有被打中,則游戲結(jié)束 if(fallCount > 10){ clearInterval(createId); clearInterval(crashId); alert("當(dāng)前得分 :"+count+" , 很遺憾,游戲結(jié)束!") } },1000);
3、現(xiàn)在主要是碰撞檢測。每隔2.2秒進(jìn)行一次檢測,因?yàn)闄z測臺頻繁的話,直接長按向左向右鍵,都可以直接消除。就沒有意義了
function checkCrash(){ crashId = setInterval(function(){ //由于每次自由落下的飛機(jī)在上面函數(shù)中都被移除了。所以leftArr數(shù)組中保存的就是當(dāng)前頁面存在的飛機(jī)的左距離數(shù)組。 for(var i = 0; i < leftArr.length; i++) { //首先將兩種都轉(zhuǎn)換成int型進(jìn)行比較 var tempL = parseInt(leftArr[i]); var tempA = parseInt(aligh); //表示自己距左側(cè)的位置 //當(dāng)自己的中心距離處于敵機(jī)的左右兩側(cè)范圍內(nèi),則表示被擊中 if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){ arrPic[i].remove(); //碰撞檢測,移除敵機(jī)的圖片 arrPic.splice(i,1); //從圖片數(shù)組中移除圖片 leftArr.splice(i,1); //從記錄敵機(jī)左側(cè)距離數(shù)組中移除該敵機(jī)的距離 count++; score.innerHTML = "當(dāng)前得分 "+count; break; //檢測到之后直接跳出循環(huán),進(jìn)行下一個2.2秒的碰撞檢測 } } },2200); } checkCrash();
這個游戲還不太完整,沒有生成子彈。大部分功能都已經(jīng)實(shí)現(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">當(dāng)前得分: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; //記錄沒被打中的飛機(jī)數(shù),如果超過10,游戲結(jié)束 var aligh = 0 ; var count = 0; //記錄打中的飛機(jī)數(shù),即當(dāng)前得分 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; //隨機(jī)生成敵機(jī) (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); //保存每個敵機(jī)的距左邊的距離,方便碰撞檢測的計(jì)算 arrPic.push(enemy); //將每個敵機(jī)的圖片保存在數(shù)組中,方便碰撞檢測后移除 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); //從數(shù)組中移除距離 fallCount ++; }); //如果落下的飛機(jī)數(shù)超過十個沒有被打中,則游戲結(jié)束 if(fallCount >= 10){ clearInterval(createId); clearInterval(crashId); alert("當(dāng)前得分 :"+count+" , 很遺憾,游戲結(jié)束!") } },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(); //碰撞檢測,移除敵機(jī)的圖片 count++; score.innerHTML = "當(dāng)前得分 "+count; continue; } } console.log(count); },2200); } checkCrash(); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。