欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)簡(jiǎn)單飛機(jī)大戰(zhàn)小游戲

 更新時(shí)間：2022年05月08日 09:49:26   作者：Fmm419  
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

html文件

<!DOCTYPE html>
<html lang='zh'>
<head>
? ? <meta charset='UTF-8'>
? ? <title>mm</title>
? ? <link rel="stylesheet" href="./css/index.css">
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? ? ? ? ? list-style:none;
? ? ? ? ? ? user-select:none;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <div class="wrap">
? ? ? ? <!-- 游戲等級(jí) -->
? ? ? ? <div id="level">
? ? ? ? ? ? <h1>飛機(jī)大戰(zhàn) Lv1</h1>
? ? ? ? ? ? <p>簡(jiǎn)答模式</p>
? ? ? ? ? ? <p>一般模式</p>
? ? ? ? ? ? <p>困難模式</p>
? ? ? ? ? ? <p>地獄模式</p>
? ? ? ? </div>
? ? ? ? <!-- 游戲界面 -->
? ? ? ? <div id="map">
? ? ? ? ? ? <!-- 我軍飛機(jī) -->
? ? ? ? ? ? <!-- 敵軍飛機(jī)1 -->
? ? ? ? ? ? <!-- 敵軍飛機(jī)2 -->
? ? ? ? ? ? <div class="allFire">
? ? ? ? ? ? ? ? <!-- 我軍子彈 -->
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <!-- 游戲得分 -->
? ? ? ? <div id="score">0</div>
? ? ? ? <!-- 結(jié)束游戲的界面 -->
? ? ? ? <div id="settlement">
? ? ? ? ? ? <div>最終得分:<span class="totalscore">10</span></div>
? ? ? ? ? ? <div>獲得評(píng)價(jià):<span class="appraise">青銅</span></div>
? ? ? ? ? ? <button>重新開(kāi)始</button>
? ? ? ? </div>
? ? </div>
? ? <script src="./js/index.js"></script>
</body>
</html>

css文件

.wrap{
? ? position:relative;
? ? width: 400px;
? ? height: 600px;
? ? margin:10px auto;
? ? overflow:hidden;
}
/* 游戲等級(jí) */
#level{
? ? position:absolute;
? ? top:0;
? ? left:0;
? ? z-index:1;
? ? width:100%;
? ? height:100%;
? ? font-family:"楷體";
? ? background:url(../img/bg_1.jpg)repeat 0/cover;
}
#level h1{
? ? width:100%;
? ? color:#fff;
? ? text-align:center;
? ? padding:100px 0;
}
#level p{
? ? text-align:center;
? ? padding:10px 20px;
? ? letter-spacing:5px;
? ? font-weight:bold;
? ? background-color:#fff;
? ? margin:30px 120px;
? ? border-radius:5px;
? ? box-shadow:1px 1px 10px 1px #aaa;
}
#level p:hover{
? ? cursor:pointer;
? ? background-color:#4D6BA2;
? ? color:#fff;
}
/* ?游戲界面 ?*/
#map{
? ? position:absolute;
? ? top:0;
? ? left:0;
? ? width:100%;
? ? height:100%;
? ? background:url(../img/bg_2.jpg)repeat 0/cover;
}
#map .plane,/*我軍飛機(jī)*/
? ? .enemy,/*敵軍飛機(jī)*/
? ? .boom,/*敵軍飛機(jī)爆炸*/
? ? .boom2,/*我軍飛機(jī)爆炸*/
? ? .fire{/*我軍飛機(jī)子彈*/
? ? ? ? position:absolute;
}
#map .plane,.enemy{
? ? z-index:5;
}
#map .boom{
? ? z-index:6;
? ? animation : enemyDisappear 0.8s 1;
? ? animation-fill-mode : forwards;/*顯示最后一個(gè)關(guān)鍵幀*/
}
#map .boom2{
? ? z-index:6;
? ? animation : planeDisappear 2s 1;
? ? animation-fill-mode : forwards;
}
#map .fire{
? ? z-index:7;
}
/* 敵軍消失的動(dòng)畫(huà) */
@keyframes enemyDisappear {
? ? from { opacity : 1; }
? ? to{ opacity : 0; }
}
/* 我軍消失的動(dòng)畫(huà) */
@keyframes planeDisappear {
? ? 0% { opacity : 1; }
? ? 20%{ opacity : 0; }
? ? 40%{ opacity : 1; }
? ? 60%{ opacity : 0; }
? ? 80%{ opacity : 1; }
? ? 100%{ opacity : 0; }
}
/* ?游戲得分 ?*/
#score{
? ? display:none;
? ? position:absolute;
? ? top:0;
? ? left:0;
? ? z-index:10;
? ? padding:10px 20px;
? ? color:#fff;
}
/* 結(jié)束游戲的界面 */
#settlement{
? ? display:none;
? ? position:absolute;
? ? top:30%;
? ? left:0;
? ? z-index:100;
? ? width:100%;
? ? height:35%;
? ? font-family:"楷體";
}
#settlement div{
? ? margin:20px 0;
? ? text-align:center;
? ? font-size:20px;
? ? color:#fff;
}
#settlement div span{
? ? font-size:24px;
}
#settlement div .totalscore{
? ? color:red;
}
#settlement div .appraise{
? ? color:green;
}
#settlement button{
? ? margin:30px 34% 0;
? ? padding:10px 20px;
? ? background-color:rgba(255,255,255,.8);
? ? letter-spacing : 2px;
? ? border:none;
? ? font-family:"楷體";
? ? font-size:20px;
? ? font-weight:bold;
? ? border-radius:5px;
}
#settlement button:hover{
? ? cursor:pointer;
? ? background-color:rgba(255,255,255,1);
}

js文件

let oWrap = document.querySelector(".wrap"),
? ? oLevel = document.getElementById("level"),//游戲等級(jí)盒子
? ? oLevelList = document.querySelectorAll("#level p"),//游戲等級(jí)
? ? oMap = document.getElementById("map"),//游戲界面
? ? oAllFire = document.querySelector(".allFire"),//子彈盒子
? ? oScore = document.getElementById("score"),//游戲得分
? ? oSettlement = document.getElementById("settlement"),//結(jié)算界面
? ? oButton = ?oSettlement.querySelector("button");//重新開(kāi)始
for(let i=0; i<oLevelList.length; i++){
? ? oLevelList[i].onclick = function(e){
? ? ? ? startGame(i,
? ? ? ? ? ? {
? ? ? ? ? ? ? ? x : e.clientX - oWrap.offsetLeft,//獲取鼠標(biāo)到游戲界面的位置
? ? ? ? ? ? ? ? y : e.clientY - oWrap.offsetTop
? ? ? ? ? ? }
? ? ? ? )
? ? };
}
?
//重新開(kāi)始
oButton.onclick = function aginGame(){
? ? //背景圖停止移動(dòng)
? ? cancelAnimationFrame(oWrap.timer);
? ? //隱藏得分界面
? ? oSettlement.style.display = "none";
? ? //顯示等級(jí)
? ? oLevel.style.display = "block";
? ? //分?jǐn)?shù)清0
? ? oScore.innerHTML = 0;
? ? //
? ? oMap.innerHTML = `<div id="allFire"></div>`;
? ? oAllFire = document.getElementById("allFire");
}
?
//開(kāi)始游戲
function startGame(level,pos){
? ? hiddenShow();
? ? bgImgMove(level);
? ? let myPlane = createPlane(level,pos);
? ? createEnemy(level,myPlane);
? ? oWrap.score = 0;
}
?
//點(diǎn)擊游戲等級(jí)的消失與隱藏
function hiddenShow(){
? ? oLevel.style.display = "none";
? ? oMap.style.display = "block";
? ? oScore.style.display = "block";
}
?
//背景圖移動(dòng)
function bgImgMove(level){
? ? oMap.style.backgroundImage = `url(./img/bg_${level+1}.jpg)`;
? ? let bgMove = 0;
? ? (function bgMoveTimer(){
? ? ? ? bgMove++;
? ? ? ? oMap.style.backgroundPositionY = bgMove + "px";
? ? ? ? oWrap.timer = requestAnimationFrame(bgMoveTimer);
? ? })();
}
?
//我軍飛機(jī)飛機(jī)
function createPlane(level,pos){
? ? //創(chuàng)建我軍飛機(jī)
? ? let oImgPlane = new Image();
? ? oImgPlane.src = "./img/plane_0.png";
? ? oImgPlane.width = 70;
? ? oImgPlane.height = 70;
? ? oImgPlane.className = "plane";
? ? oImgPlane.style.left = pos.x - oImgPlane.width / 2 ?+ "px";
? ? oImgPlane.style.top = pos.y - oImgPlane.height / 2 + "px";
? ? oMap.appendChild(oImgPlane);
? ? //鼠標(biāo)移動(dòng)是飛機(jī)不斷獲取鼠標(biāo)位置
? ? let minLeft = -oImgPlane.width/2,
? ? ? ? minTop = 0,
? ? ? ? maxLeft = oMap.clientWidth - oImgPlane.width/2,
? ? ? ? maxTop = oMap.clientHeight - oImgPlane.height/2;
? ? document.onmousemove = function(e){
? ? ? ? let left = e.clientX - oWrap.offsetLeft - oImgPlane.width / 2,
? ? ? ? ? ? top = e.clientY - oWrap.offsetTop - oImgPlane.height / 2;
? ? ? ? left = Math.min(left,maxLeft);
? ? ? ? left = Math.max(left,minLeft);
? ? ? ? top = Math.min(top,maxTop);
? ? ? ? top = Math.max(top,minTop);
? ? ? ? oImgPlane.style.left = left + "px";
? ? ? ? oImgPlane.style.top = top + "px";
? ? }
? ? fire(level,oImgPlane)
? ? return oImgPlane;
}
?
//子彈
function fire(level,oImgPlane){
?
? ? //創(chuàng)建子彈
? ? function createFires(isDouble,n){
? ? ? ? let createFire = new Image();
? ? ? ? createFire.src = "./img/fire.png";
? ? ? ? createFire.width = 30;
? ? ? ? createFire.height = 30;
? ? ? ? createFire.className = "fire"
? ? ? ? let left = oImgPlane.offsetLeft + oImgPlane.width/2 - createFire.width/2 ,
? ? ? ? ? ? top = oImgPlane.offsetTop - oImgPlane.height/2;
? ? ? ? if(isDouble){
? ? ? ? ? ? left = left + oImgPlane.width/3*n;
? ? ? ? }
? ? ? ? createFire.style.left = left + "px";
? ? ? ? createFire.style.top = top + "px";
? ? ? ? oAllFire.appendChild(createFire);
? ? ? ??
? ? ? ? // 子彈運(yùn)動(dòng)
? ? ? ? function fireMove(){
? ? ? ? ? ? if(createFire.parentNode){
? ? ? ? ? ? ? ? top -= 10;
? ? ? ? ? ? ? ? if(top< -createFire.height){
? ? ? ? ? ? ? ? ? ? oAllFire.removeChild(createFire);
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? createFire.style.top = top + "px";
? ? ? ? ? ? ? ? ? ? requestAnimationFrame(fireMove);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? setTimeout(()=>{
? ? ? ? ? ? requestAnimationFrame(fireMove);
? ? ? ? },20);
? ? }
?
? ? //定時(shí)生成子彈的頻率
? ? oWrap.fireTimer = setInterval(()=>{
? ? ? ? if(oWrap.score>=100){
? ? ? ? ? ? createFires(true,-1);
? ? ? ? ? ? createFires(true,+1);
? ? ? ? }else{
? ? ? ? ? ? createFires();
? ? ? ? }
? ? },[200,150,100,50][level])
? ??
?
}
?
//創(chuàng)建敵軍
let enemyNum = 1;
function createEnemy(level,myPlane){
? ? let speed = [4,6,8,10][level];//游戲模式相對(duì)應(yīng)的的等級(jí)飛機(jī)下落的速度
? ? ? ? MapW = oMap.clientWidth,
? ? ? ? MapH = oMap.clientHeight;
? ? oWrap.enemyTimer = setInterval(()=>{
? ? ? ? let createEnemy = new Image();
? ? ? ? createEnemy.index = enemyNum%20 ? 1:0;
? ? ? ? createEnemy.src = `./img/enemy_${["big","small"][createEnemy.index]}.png`;
? ? ? ? createEnemy.width = [100,50][createEnemy.index];
? ? ? ? createEnemy.height = [100,50][createEnemy.index];
? ? ? ? //敵軍的血量
? ? ? ? createEnemy.hp = [4,1][createEnemy.index];
? ? ? ? createEnemy.className = "enemy";?
? ? ? ? //敵軍首次出現(xiàn)的位置
? ? ? ? let enemyTop = -createEnemy.height;
? ? ? ? createEnemy.style.top = enemyTop + "px";
? ? ? ? createEnemy.style.left = Math.random()*MapW - createEnemy.width/2 + "px";
? ? ? ? oMap.appendChild(createEnemy);
? ? ? ? enemyNum++;
? ? ? ? console.log(createEnemy.offsetLeft,createEnemy.offsetTop)
? ? ? ? //判斷敵軍的下落運(yùn)動(dòng)
? ? ? ? function enemyMove(){
? ? ? ? ? ? if(createEnemy.parentNode){
? ? ? ? ? ? ? ? enemyTop += speed;
? ? ? ? ? ? ? ? if(enemyTop>=MapH){
? ? ? ? ? ? ? ? ? ? oMap.removeChild(createEnemy);
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? createEnemy.style.top = enemyTop + "px";
? ? ? ? ? ? ? ? ? ? //子彈與敵軍發(fā)生碰撞
? ? ? ? ? ? ? ? ? ? let arrAllFire = oAllFire.children;
? ? ? ? ? ? ? ? ? ? for(let i=arrAllFire.length-1; i>=0; i--){
? ? ? ? ? ? ? ? ? ? ? ? let newFire = arrAllFire[i];
? ? ? ? ? ? ? ? ? ? ? ? if(isCollide(newFire,createEnemy)){
? ? ? ? ? ? ? ? ? ? ? ? ? ? //撞上的 移出子彈
? ? ? ? ? ? ? ? ? ? ? ? ? ? oAllFire.removeChild(newFire)
? ? ? ? ? ? ? ? ? ? ? ? ? ? //血量減一
? ? ? ? ? ? ? ? ? ? ? ? ? ? createEnemy.hp--;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(createEnemy.hp === 0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? oWrap.score += [5,1][createEnemy.index];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? oScore.innerText = oWrap.score;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //敵軍發(fā)生爆炸?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? boom({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? x : createEnemy.offsetLeft,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? y : createEnemy.offsetTop,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? w : createEnemy.width,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? h : createEnemy.height,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i : createEnemy.index
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? oMap.removeChild(createEnemy);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //我軍與敵軍發(fā)生碰撞
? ? ? ? ? ? ? ? ? ? if(myPlane.parentNode&&isCollide(createEnemy,myPlane)){
? ? ? ? ? ? ? ? ? ? ? ? //敵軍產(chǎn)生爆炸
? ? ? ? ? ? ? ? ? ? ? ? boom({
? ? ? ? ? ? ? ? ? ? ? ? ? ? x:createEnemy.offsetLeft,
? ? ? ? ? ? ? ? ? ? ? ? ? ? y:createEnemy.offsetTop,
? ? ? ? ? ? ? ? ? ? ? ? ? ? w:createEnemy.width,
? ? ? ? ? ? ? ? ? ? ? ? ? ? h:createEnemy.height,
? ? ? ? ? ? ? ? ? ? ? ? ? ? i:createEnemy.index
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? //我軍發(fā)生爆炸
? ? ? ? ? ? ? ? ? ? ? ? boom({
? ? ? ? ? ? ? ? ? ? ? ? ? ? x:myPlane.offsetLeft,
? ? ? ? ? ? ? ? ? ? ? ? ? ? y:myPlane.offsetTop,
? ? ? ? ? ? ? ? ? ? ? ? ? ? w:myPlane.width,
? ? ? ? ? ? ? ? ? ? ? ? ? ? h:myPlane.height,
? ? ? ? ? ? ? ? ? ? ? ? ? ? i:2
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? oMap.removeChild(createEnemy);
? ? ? ? ? ? ? ? ? ? ? ? oMap.removeChild(myPlane)
? ? ? ? ? ? ? ? ? ? ? ? //游戲結(jié)束
? ? ? ? ? ? ? ? ? ? ? ? gameOver();
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? requestAnimationFrame(enemyMove);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? requestAnimationFrame(enemyMove);
? ? },[400,350,300,200][level])
}
?
//是否發(fā)生碰撞
function isCollide(newFirePlane,createEnemy){
? ? //子彈/我軍飛機(jī)的位置
? ? let fireTop = newFirePlane.offsetTop,
? ? ? ? fireLeft = newFirePlane.offsetLeft,
? ? ? ? fireBottom = fireTop + newFirePlane.clientHeight,
? ? ? ? fireRight = fireLeft + newFirePlane.clientWidth;?
? ? //飛機(jī)的位置
? ? let createEnemyTop = createEnemy.offsetTop,
? ? ? ? createEnemyLeft = createEnemy.offsetLeft,
? ? ? ? createEnemyRight = createEnemyLeft+createEnemy.clientWidth,
? ? ? ? createEnemyBotoom = createEnemyTop+createEnemy.clientHeight;
? ? ? ? //沒(méi)碰上的四種結(jié)果
? ? return !(fireTop>createEnemyBotoom || fireBottom<createEnemyTop || fireLeft>createEnemyRight || fireRight<createEnemyLeft)
}
?
//發(fā)生爆炸
function boom(data){
? ? let createBoom = new Image();
? ? createBoom.src = `./img/${["boom_big","boom_small","plane_0"][data.i]}.png`;
? ? createBoom.className = "boom" + ["","","2"][data.i];
? ? createBoom.width = data.w;
? ? createBoom.height = data.h;
? ? createBoom.style.top = data.y + "px";
? ? createBoom.style.left = data.x + "px";
? ? oMap.appendChild(createBoom);
? ? setTimeout(()=>{
? ? ? ? createBoom.parentNode&&oMap.removeChild(createBoom);
? ? },[1200,1200,2500][data.i])
}
?
//游戲結(jié)束
function gameOver(){
? ? clearInterval(oWrap.enemyTimer);
? ? clearInterval(oWrap.fireTimer);
? ? document.onmousemove = null;
? ? gameSettlement();
}
?
//結(jié)算游戲
function gameSettlement(){
? ? let oTotalscore = oSettlement.querySelector(".totalscore"),
? ? ? ? oAppraise = oSettlement.querySelector(".appraise");
? ? if(oWrap.score < 50){
? ? ? ? oAppraise.innerHTML = "青銅";
? ? }else if(oWrap.score <100){
? ? ? ? oAppraise.innerHTML = "黃金";
? ? }else if(oWrap.score <200){
? ? ? ? oAppraise.innerHTML = "鉆石";
? ? }else{
? ? ? ? oAppraise.innerHTML = "王者";
? ? }
? ? oTotalscore.innerHTML = oWrap.score;
? ? oScore.style.display = "none";
? ? oSettlement.style.display = "block";
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論