原生javascript編寫飛機大戰
阿新 • • 發佈：2018-12-22
<!-- 簡易版飛機大戰 -->
<!-- 載入dom 建立戰場、 -->
<!-- 建立我方飛機類 定義子彈類自動動態建立飛機子彈-->
<!-- 建立敵方飛機類--
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飛機大戰</title> <style> html,body{ height: 100%; } *{ margin:0; padding:0; } </style> </head> <body> </body> </html>
初始化資料
window.onload = function(){
// 載入戰場
battleground();
// 戰機載入
conbat();
let b = new fly(0,600,5000);
b.keep();
}// 戰場載入
function battleground(){ battleDiv = document.createElement("div"); battleDiv.id = "battleDiv"; document.body.appendChild(battleDiv); battleDiv.style.cssText = "overflow:hidden;position:relative;width:800px; height:100%; background:gray url('img/bg.jpg');margin:0 auto;" }
// 戰機載入
function conbat(){ let battleDiv = document.getElementById("battleDiv"); let myConbat = document.createElement("div"); myConbat.style.cssText = "z-index:1;position:absolute;background: url('img/我的飛機.gif') ; width:66px;height:80px"; battleDiv.appendChild(myConbat); battleDiv.onmousemove = function(event){ let evt = event || window.event; left1 = evt.clientX - battleDiv.offsetLeft; top1 = evt.clientY- battleDiv.offsetTop; if(left1 < 30 ){ left1 = 30; }else if( left1 >(battleDiv.offsetWidth- myConbat.offsetWidth/2)){ left1 = (battleDiv.offsetWidth- myConbat.offsetWidth/2); } if(top1 > 860){ top1 = 860; } myConbat.style.left = left1-33 +"px"; myConbat.style.top = top1-40 +"px"; // 子彈函式 setTimeout(function(){ let zd = new Bullet(left1,top1); // console.log(top1); zd.myBullet(); },500) } }
// 子彈函式
class Bullet{
constructor(x,y){
this.width = 10;
this.height = 20;
this.timer = null;
this.a = x;
this.b = y;
}
// 建立子彈
myBullet(){
let myBullet = document.createElement("div");
myBullet.style.cssText = "border-radius:50%;background:"+getColor()+";position:absolute; width:"+ this.width +"px;height:"+this.height+"px;"
battleDiv.appendChild(myBullet);
myBullet.style.left = this.a +"px";
let currenttop = 0;
this.timer = setInterval(()=>{
currenttop +=10;
// console.log(this.a);
myBullet.style.top = this.b - currenttop +"px";
if( currenttop > this.b){
currenttop = this.b;
myBullet.parentNode.removeChild(myBullet);
window.clearInterval(this.timer);
}
;
},10)
let zd = new Panduan(this.a,this.b);
zd.pz();
}
}//建立敵方飛機
//建立敵方飛機
class fly{
constructor(startTop,endTop,timerLong){
this.startTop = startTop;
this.endTop = endTop;
this.timerLong = timerLong;
}
keep() {
let timeSpace = 10;
let step = (this.startTop - this.endTop) / (this.timerLong / timeSpace);
let timer = setInterval(function () {
let num ;
let flyImg = document.createElement("img");
// console.log(suiji());
battleDiv.appendChild(flyImg);
flyImg.style.position = "absolute";
// alert(suiji());
num = suiji();
// 儲存left/
js_fly.left = num;
flyImg.style.left = num+ "px";
flyImg.src = "img/enemy" + suiji2() + "_fly_1.png";
fun(flyImg);
let zd1 = new Panduan();
zd1.pz(num);
// console.log(num);
}, 3000)
// 飛行距離
function fun(flyImg) {
let currTop = 0;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let timer2 = setInterval(function () {
// let evt = event || window.event;
currTop -= step;
if (currTop > clientHeight) {
window.clearInterval(timer2)
flyImg.parentNode.removeChild(flyImg);
}
flyImg.style.top = currTop + "px";
js_fly.top = currTop;
}, 10)
}
// 隨機函式
function suiji() {
return (Math.random() * 650) + 50;
}
function suiji2() {
return parseInt((Math.random() * 2) + 1);
}
}
}
基本初步完成