當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML+JavaScript飞机大战小游戏简易版
生活随笔
收集整理的這篇文章主要介紹了
HTML+JavaScript飞机大战小游戏简易版
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
點擊開始游戲后拖動鼠標在藍色區(qū)域內(nèi)即可操作飛機移動
打中敵方得分,被敵方碰撞則減分掉血 運用延時調(diào)用函數(shù)實現(xiàn)連續(xù)發(fā)射子彈 運用隨機函數(shù)使敵方飛機在藍圖隨機刷新 運用坐標判斷子彈和敵方飛機距離,碰撞則消失,加得分 己方飛機圖:50px*50px (plane.png) 敵方飛機圖:32px*32px (zdj.png) 子彈圖:32px*32px, (zidan.png) 在HTML同層創(chuàng)建img文件夾,將圖放入,配合代碼則可運行,圖片可更換,但是名字大小得一樣完整代碼
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}.big {width: 500px;height: 700px;background: deepskyblue;position: absolute;overflow: hidden;left: 774px;}.small {width: 50px;height: 50px;position: absolute;top: 650px;left: 225px;margin-bottom: 0;}#zd_1 {position: absolute;top: 618px;left: 234px;display: none;}#zd_2 {position: absolute;top: 618px;left: 234px;display: none;}#zd_3 {position: absolute;top: 618px;left: 234px;display: none;}#zd_4 {position: absolute;top: 618px;left: 234px;display: none;}#zdj_1 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_2 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_3 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_4 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_5 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_6 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_7 {position: absolute;top: -32px;left: 234px;display: none;}#zdj_8 {position: absolute;top: -32px;left: 234px;display: none;}#start {width: 140px;height: 40px;background: #31ff00;position: absolute;left: 180px;top: 518px;text-align: center;border: 0;}#start span {display: inline-block;padding: 10px;}#score {width: 200px;height: 30px;background: cornflowerblue;text-align: center;margin-top: 10px;position: absolute;}#A_blood {width: 200px;height: 35px;position: relative;margin-top: 40px;background: #96ff7d;text-align: center;}#blood {width: 200px;height: 30px;background: red;position: relative;border-radius: 5px;margin-top: 0;}</style><script>window.onload = function () {var big = document.getElementById("big");var small = document.getElementById("small");var zd_1 = document.getElementById("zd_1");var zd_2 = document.getElementById("zd_2");var zd_3 = document.getElementById("zd_3");var zd_4 = document.getElementById("zd_4");var blood = document.getElementById("blood");var zdj_1 = document.getElementById("zdj_1");var zdj_2 = document.getElementById("zdj_2");var zdj_3 = document.getElementById("zdj_3");var zdj_4 = document.getElementById("zdj_4");var zdj_5 = document.getElementById("zdj_5");var zdj_6 = document.getElementById("zdj_6");var zdj_7 = document.getElementById("zdj_7");var zdj_8 = document.getElementById("zdj_8");var start = document.getElementById("start");var score = document.getElementById("score");var A_blood = document.getElementById('A_blood');var zdjarr = [zdj_1, zdj_2, zdj_3, zdj_4, zdj_5, zdj_6, zdj_7, zdj_8]var zd_speed_1 = 0;var zd_speed_2 = 0;var zd_speed_3 = 0;var zd_speed_4 = 0;var first_zdj = 0;var second_zdj = 0;var third_zdj = 0;var four_zdj = 0;var five_zdj = 0;var six_zdj = 0;var seven_zdj = 0;var eight_zdj = 0;var score_1 = 0;var blood_1 = 100;var x=200; //血量長度var big_height = 500; //子彈頻率var zdj_height = 1000; //戰(zhàn)斗機頻率start.onclick = function (event) {start.style.display = "none";zd_1.style.display = "block";var big_left = big.offsetLeft; //774,大邊框距離左邊位置var big_top = big.offsetTop; //0var speed = 2;var zdj_speed = 1;var a = event.clientY; //549var b = event.clientX; //1042setInterval(function () {if (a <= (big_top + 675)) {big.onmousemove = function (event) {a = event.clientY;b = event.clientX;small.style.top = a - 25 + 'px';small.style.left = b - big_left - 25 + 'px';}};if (b <= (big_left + 475) || b >= big_left + 25) {big.onmousemove = function (event) {a = event.clientY;b = event.clientX;small.style.top = a - 25 + 'px';small.style.left = b - big_left - 25 + 'px';}}if (a >= (big_top + 675)) {big.onmousemove = null;};if (b >= (big_left + 475) || b < big_left + 25) {big.onmousemove = null;};}, 1);setInterval(function () {document.onmousemove = function (event) {a = event.clientY; //549b = event.clientX;}}, 1);function zidanspeed(obj, zidan_speed_, time) {setTimeout(function () {obj.style.top = small.offsetTop - 32 + 'px';obj.style.left = small.offsetLeft + 9 + 'px';obj.style.display = "block";setInterval(function () {obj.style.top = (obj.offsetTop - speed) + 'px';zidan_speed_++;for (var i = 0; i < zdjarr.length; i++) {if (obj.offsetTop - zdjarr[i].offsetTop < 32 && obj.offsetTop - zdjarr[i].offsetTop >= -16) {if (obj.offsetLeft - zdjarr[i].offsetLeft < 32 && obj.offsetLeft - zdjarr[i].offsetLeft >= 0) {zdjarr[i].style.display = "none";score_1 += 10;score.innerText = "得分:" + score_1 + '分';}}}if (zidan_speed_ == big_height) {obj.style.top = small.offsetTop - 32 + 'px';obj.style.left = small.offsetLeft + 9 + 'px';zidan_speed_ = 0;obj.style.display = "block";};}, 0.5);}, time);}zidanspeed(zd_1, zd_speed_1, 1);zidanspeed(zd_2, zd_speed_2, 500);zidanspeed(zd_3, zd_speed_3, 1000);zidanspeed(zd_4, zd_speed_4, 1500);function zdj(obj, zdj_speed_, time) {setTimeout(function () {obj.style.top = (big.offsetTop - 32) + 'px';obj.style.left = Math.floor(Math.random() * 468) + 'px';obj.style.display = "block";setInterval(function () {obj.style.top = (obj.offsetTop + zdj_speed) + 'px';zdj_speed_++;if (small.offsetTop - obj.offsetTop < 32 && small.offsetTop - obj.offsetTop >= -50) {if (obj.offsetLeft - small.offsetLeft < 50 && small.offsetLeft - obj.offsetLeft < 32) {obj.style.display = "none";blood.style.width=(x-20)+"px";x=x-20;score_1 -= 10;blood_1 -= 10;A_blood.innerHTML = "當前血量:"+blood_1+"%";score.innerText = "得分:" + score_1 + '分';}}if (zdj_speed_ == zdj_height) {obj.style.top = (big.offsetTop - 32) + 'px';obj.style.left = Math.floor(Math.random() * 468) + 'px';zdj_speed_ = 0;obj.style.display = "block";}}, 1)}, time);}zdj(zdj_1, first_zdj, 1);zdj(zdj_3, third_zdj, 1000);zdj(zdj_2, second_zdj, 1500);zdj(zdj_4, four_zdj, 500);zdj(zdj_5, five_zdj, 2000);zdj(zdj_6, six_zdj, 2500);zdj(zdj_7, seven_zdj, 3000);zdj(zdj_8, eight_zdj, 3500);}}</script> </head> <body><div class="big" id="big"><div id="score">得分:0</div><div id="A_blood">當前血量:100%</div><div id="blood"></div><button id="start"><span>開始游戲</span></button><img src="img/plane.png" class="small" id="small"><img src="img/zidan.png" id="zd_1"><img src="img/zidan.png" id="zd_2"><img src="img/zidan.png" id="zd_3"><img src="img/zidan.png" id="zd_4"><img src="img/zdj.png" id="zdj_1"><img src="img/zdj.png" id="zdj_2"><img src="img/zdj.png" id="zdj_3"><img src="img/zdj.png" id="zdj_4"><img src="img/zdj.png" id="zdj_5"><img src="img/zdj.png" id="zdj_6"><img src="img/zdj.png" id="zdj_7"><img src="img/zdj.png" id="zdj_8"></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的HTML+JavaScript飞机大战小游戏简易版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 运行selenium脚本，出现Can n
- 下一篇： 如何搭建属于 “数据业务”的指标体系？