小小的项目|【HTML——简易飞机大战小游戏（效果+代码）】 html|css|飞机大战|前端|JavaScri

- 效果
- 代码
- 说明

效果以下均需要通过鼠标或者上下按键操控哦！
不是单纯实现的效果。
也是包含背景音乐的，背景也可以根据实际需要去更改或者添加！

代码 plane.html

> * { margin: 0; padding: 0; }body { background: #cccccc; height: 100%; }#wrap { position: relative; width: 540px; height: 960px; margin: 20px auto; border: 1px solid transparent; background: url('img/bg.jpg') center/cover; }#wrap h1 { color: azure; text-align: center; padding: 30px; }.option { width: 200px; height: 110px; line-height: 110px; font-size: 30px; color: steelblue; background: wheat; font-weight: bold; margin: 20px auto; text-align: center; cursor: pointer; background: url(./img/fire-row.png) no-repeat center -10px/ 90% auto ; }.footer { position: absolute; right: 0; bottom: 0; font-size: 20px; color: #fff; } /* enemy 敌机定位 */.enemy { position: absolute; } /* 血条 */.blood { position: absolute; left: 0; right: 0; top: -6px; margin: 0 auto; width: 70%; height: 2px; border-radius: 2px; /* border: 1px solid red; */ }.blood p { height: 100%; /* background: red; */ } /* 小飞机 */.small { width: 50px; }img:not(.boom) { width: 100%; height: 100%; } /* 大飞机 */.big { width: 60px; }.big .blood { position: absolute; left: 0; right: 0; top: -10px; margin: 0 auto; height: 4px; border-radius: unset; }.blood p { height: 100%; /* background: red; */ } /* 我军 */.plane { position: absolute; } .plane img{ transform: rotate(270deg); } .plane.small { width: 80px; }.plane.big { width: 100px; }.biu { position: absolute; }.biu.strong1 { width: 26px; height: 26px; }.biu.strong2 { width: 20px; height: 20px; } /* 爆炸图片 */img.boom { position: absolute; animation: opa 1s; }@keyframes opa { 0% { opacity: 1; } 25% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0; } } /* prize */.prize { position: absolute; width: 50px; height: 50px; font-size: 50px; text-align: center; line-height: 50px; border: 1px dashed red; color: red; font-weight: bold; animation: prize 1s infinite; }@keyframes prize { 0% { transform: scale(1); } 50% { transform: scale(1.2); }100% { transform: scale(1); } } /* 得分板 */.score { position: absolute; top: 0; left: 0; width: 70px; height: 30px; color: #fff; font-size: 20px; } /* 记录得分 */.record { width: 60%; height: 100px; margin: 100px auto; background: #000; padding: 10px; border: 4px double #fff; color: #fff; }.record p { height: 50px; font-size: 40px; font-weight: bold; text-align: center; color: skyblue; } /* 再来一次 */.btn { position: absolute; bottom: 50px; right: 0; left: 0; margin: auto; width: 150px; height: 40px; text-align: center; line-height: 40px; color: #fff; font-size: 20px; font-weight: bold; border-radius: 10px; background: #000; cursor: pointer; } > (function() {var wrap = document.getElementById("wrap"), speedEnemy = [400, 350, 300, 200], wrapWidth = wrap.clientWidth, wrapHeight = wrap.clientHeight, enePlane = document.getElementsByClassName('enemy'), plane = document.getElementsByClassName("plane"), prize = document.getElementsByClassName('prize'), defaultEne = { big: { width: 260, height: 200, strong: 5 }, small: { width: 108, height: 80, strong: 1 } }, defaultPlane = { big: { width: 97, height: 97, filename: 'plane_1.gif' }, small: { width: 122, height: 95, filename: 'plane_0.gif' } }; init() // 初始化界面function init() { var optArr = ['简单模式', '一般模式', '困难模式', '地狱模式']; wrap.innerHTML = ""; var h1 = document.createElement('h1'); h1.innerHTML = '飞机大战进化版'; wrap.appendChild(h1)for (var i = 0, len = optArr.length; i < len; i++) { var div = document.createElement('div'); div.className = 'option'; div.innerHTML = optArr[i]; div.i = i; div.onclick = function(e) { startGame(this.i, e) } wrap.appendChild(div) } }// startGame 开始游戏 function startGame(idx, e) { var mod = ['small', 'big', 'small', 'small']; wrap.innerHTML = ""; wrap.className = 'bg.jpg'; wrap.eneTime = setInterval(function() { enemy(idx, mod[randomArea(0, 3)]) // }, speedEnemy[idx])myPlane(e, idx, 'small')wrap.prizeTime = setInterval(function() {createPrize(['爱你', '啵啵'][randomArea(0, 1)]) }, 5000); showScore(); var audio = document.createElement('audio'); audio.src = 'https://www.it610.com/article/img/game_music.mp3'; audio.autoplay = true; audio.loop = true; audio.volume = 0.5; wrap.appendChild(audio)}// 创建敌军函数 function enemy(idx, model) {var ene = document.createElement('div'), bloodBorder = document.createElement('div'), blood = document.createElement('p'), img = document.createElement('img'); ene.className = 'enemy ' + model; ene.model = model; bloodBorder.className = 'blood'; img.src = 'https://www.it610.com/article/img/enemy_' + model + '.gif'; img.width = defaultEne[model].width; img.height = defaultEne[model].height; ene.style.top = 0; ene.strong = defaultEne[model].strong; ene.speed = randomArea(2, 4); // wrap.appendChild(ene).appendChild(bloodBorder).appendChild(blood); ene.appendChild(img)ene.style.left = randomArea(0, wrapWidth - ene.clientWidth) + "px"eneLanding(); // 敌机生成结束开始下降function eneLanding() { ene.style.top = ene.offsetTop + ene.speed + "px"; if (ene.offsetTop >= wrapHeight - ene.offsetHeight) {wrap.removeChild(ene); } else {if (plane[0] && isDuang(plane[0], ene)) {boom(ene); gg(); } else { plane[0] && requestAnimationFrame(eneLanding) }} }}// 创建我军函数 function myPlane(e, idx, model) {var maxTop, maxLeft, minLeft; var plane = document.createElement('div'), img = document.createElement('img'); img.src = 'https://www.it610.com/article/img/' + defaultPlane[model].filename; img.width = defaultPlane[model].width; img.height = defaultPlane[model].height; plane.className = "plane " + model; plane.strong = 0; plane.count = 0; plane.model = model; wrap.appendChild(plane).appendChild(img); img.onload = function() { plane.style.top = e.pageY - wrap.offsetTop - plane.clientHeight / 2 + 'px'; plane.style.left = e.pageX - wrap.offsetLeft - plane.clientWidth / 2 + 'px'; maxTop = wrap.clientHeight - plane.offsetHeight, minLeft = -plane.offsetWidth / 2, maxLeft = wrap.clientWidth + minLeft; }document.onmousemove = function(e) { var top = e.pageY - wrap.offsetTop - plane.offsetHeight / 2, left = e.pageX - wrap.offsetLeft - plane.offsetWidth / 2; top = Math.max(0, top) top = Math.min(maxTop, top) left = Math.max(minLeft, left) left = Math.min(maxLeft, left)plane.style.top = top + 'px' plane.style.left = left + 'px'; for (var i = 0, len = prize.length; i < len; i++) { if (isDuang(plane, prize[i])) {if (prize[i].attr === '火') {plane.strong++; } else if (prize[i].attr === '风') {plane.count++; if (plane.count > 2) { alert('知足者常乐'); gg(); } }clearTimeout(prize[i].time) wrap.removeChild(prize[i]) } } }; // 生成子弹 var speed = [300, 250, 200, 150][idx], biuSpd = [4, 5, 6, 7][idx]; var audio = document.createElement('audio'); audio.loop = true; audio.autoplay = true; wrap.appendChild(audio)plane.time = setInterval(function() {for (var i = 0; i <= plane.count; i++) { Biu({ strong: plane.strong, count: plane.count, i: i })audio.src = https://www.it610.com/article/plane.count> 0 ? 'img/enemy2_out.mp3' : 'img/bullet.mp3'; }}, speed)function Biu(obj) { var biu = document.createElement('img'); biu.src = 'https://www.it610.com/article/img/fire.png'; biu.className = 'biu strong1'; biu.strong = 1 + plane.strong; biu.count = 1 + plane.count; wrap.appendChild(biu); biu.style.top = plane.offsetTop + 'px'; if (obj.count === 0) {biu.style.left = plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2 + "px"; } else if (obj.count === 1) {biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px'; } else if (obj.count === 2) {biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px'; } runBiu(); function runBiu() { biu.style.top = biu.offsetTop - biuSpd + "px"; if (biu.offsetTop <= 0) { wrap.removeChild(biu); } else {plane.parentNode && (biu.time = requestAnimationFrame(runBiu))for (var i = 0, len = enePlane.length; i < len; i++) {if (enePlane[i] && isDuang(biu, enePlane[i])) {cancelAnimationFrame(biu.time)wrap.removeChild(biu); enePlane[i].strong -= biu.strong; enePlane[i].children[0].children[0].style.width = enePlane[i].strong / defaultEne[enePlane[i].model].strong * enePlane[i].children[0].clientWidth + "px"; if (enePlane[i].strong <= 0) { if (enePlane[i].model === 'small') { wrap.score++; } else if (enePlane[i].model === 'big') { wrap.score += 4; } boom(enePlane[i]); document.getElementsByClassName('score')[0].innerHTML = wrap.score; }} }} }} }function boom(obj) { var img = document.createElement('img'); img.src = 'https://www.it610.com/article/img/boom_' + obj.model + '.gif'; img.width = obj.clientWidth + 10; img.height = obj.clientHeight + 10; img.className = 'boom'; img.style.top = obj.offsetTop + "px"; img.style.left = obj.offsetLeft + "px"; wrap.removeChild(obj); wrap.appendChild(img); img.addEventListener('webkitAnimationEnd', function() { wrap.removeChild(this) })var audio = document.createElement('audio'); audio.loop = false; audio.autoplay = true; audio.src = https://www.it610.com/article/obj.className ==='enemy' ? 'img/enemy3_down.mp3' : 'img/game_over.mp3' audio.volume = 0.5; audio.addEventListener('ended', function() { wrap.removeChild(this); }); wrap.appendChild(audio) } function isDuang(obj1, obj2) { // true 碰撞false 不碰撞 var top1 = obj1.offsetTop, left1 = obj1.offsetLeft, right1 = left1 + obj1.offsetWidth, bottom1 = top1 + obj1.offsetHeight,top2 = obj2.offsetTop, left2 = obj2.offsetLeft, right2 = left2 + obj2.offsetWidth, bottom2 = top2 + obj2.offsetHeight; return !(top1 > bottom2 || left1 > right2 || bottom1 < top2 || right1 < left2) } function randomArea(a, b) { return Math.floor(Math.random() * (b + 1 - a) + a); } // GG 游戏结束 function gg() { // 注销document的move事件 document.onmousemove = null; // 关闭生产敌军的定时器 clearInterval(wrap.eneTime) // 关闭生成子弹的定时器 clearInterval(plane[0].time) // 清除生成奖品的定时器 clearInterval(wrap.prizeTime) // 我军的爆炸效果 && 删除我军 boom(plane[0]) // 统计得分情况 setTimeout(ggView, 1000) } //火 = 增加威力风 = 增加子弹的条数 function createPrize(inner) { var div = document.createElement('div'); div.innerHTML = inner; div.className = 'prize'; div.attr = inner; div.style.top = randomArea(0, wrapHeight - 50) + 'px'; div.style.left = randomArea(0, wrapWidth - 50) + 'px'; wrap.appendChild(div); div.time = setTimeout(function() { wrap.removeChild(div) }, 5000) } function ggView() { // 清屏 wrap.innerHTML = ""; // 创建游戏结束画面的两个对象var div = document.createElement('div'), div2 = document.createElement('div'); div.className = 'record'; div.innerHTML = "最终得分：" + wrap.score + " " div2.className = "btn"; div2.innerHTML = '再来一次'; div2.onclick = function() { init(); } wrap.appendChild(div) wrap.appendChild(div2) } // showScore初始化开始几分 function showScore() { var span = document.createElement('span'); span.innerHTML = wrap.score = 0; span.className = 'score'; wrap.appendChild(span); } })()

说明