<link rel="stylesheet" href="dafeiji.css">
<body>
<div id="body_main" class="main">
<ul id="options" class="options">
<li value="1">超级困难</li>
<li value="2">非常困难</li>
<li value="3">比较困难</li>
<li value="4">就选我吧</li>
</ul>
</div>
</body>
`
`
<script>
// 飞机大战：
// 引擎：难度选择，logo，loading，游戏开始
// 我的飞机：创建，跟随鼠标移动，开火
// 我的子弹：创建，移动，死亡
// 敌机：创建，移动，碰撞检测，死亡
// 引擎：
function Engine(){
// E1.选择元素
this.li = document.querySelectorAll(".options li");
this.main = document.getElementById("body_main");
// E2.绑定事件
this.init();
}
Engine.prototype.init = function(){
var that = this;
for(var i=0;i<this.li.length;i++){
this.li[i].onclick = function(){
// E3.存储难度，删除按钮组
that.v = this.value;
this.parentNode.remove();
// E4.创建logo和loading
that.load();
}
}
}
Engine.prototype.load = function(){
this.logo = createDiv("logo");
this.loading = createDiv("loading");
// var loading=document.createElement("loading");
// loading.className="loading";
// this.main.appendChild(loading);
// 切换照片 属性精确
// var logo=document.createElement("logo");
// logo.className="logo";
// this.main.appendChild(logo);
// loading图的切换
var i = 0;
this.loadingTimer = setInterval(() => {
this.loading.style.backgroundImage = `url(images/loading${(i++)%3+1}.png)`;
}, 300);
// 背景图的运动
var j=0;
setInterval(()=>{
this.main.style.backgroundPositionY = (j+=2)+"px";
},30)
setTimeout(() => {
// E5.游戏开始
this.gameStart()
}, 300);
}
Engine.prototype.gameStart = function(){
// 删除logo和loading，清除没用的计时器
this.logo.remove()
this.loading.remove()
clearInterval(this.loadingTimer);
// E6.开始创建我的飞机
plane.init(this.main);
// P3.开火
plane.fire(this.v);
// 敌机
}
// 我的飞机：
var plane = {
// main:document.getElementById("body_main"),
init:function(main){
this.main = main;
// P1.创建我的飞机，设置默认位置
this.ele = createDiv("my-warplain");
this.ele.style.left = (this.main.offsetWidth - this.ele.offsetWidth)/2 + "px";
this.ele.style.bottom = 0;
// P2.跟随鼠标移动
this.move();
},
move:function(){
var that = this;
document.onmousemove = function(eve){
var e = eve || window.event;
// 计算位置
var l = e.clientX - that.main.offsetLeft - that.ele.offsetWidth/2;
var t = e.clientY - that.ele.offsetHeight/2;
// 边界限定
if(l<0) l=0;
if(t<0) t=0;
if(l>that.main.offsetWidth - that.ele.offsetWidth){
l=that.main.offsetWidth - that.ele.offsetWidth
}
// 生效位置
that.ele.style.left = l + "px";
that.ele.style.top = t + "px";
}
},
fire:function(v){
// 根据难度，持续开火
setInterval(() => {
new Bullet()
}, 1000/v);
}
}
// 我的子弹：
function Bullet(){
// B1.开始创建
this.init();
}
Bullet.prototype = {
constructor:Bullet,
init:function(){
// 创建
this.ele = createDiv("bullet");
// 设置默认位置：在飞机的头部
this.ele.style.left = plane.ele.offsetLeft + plane.ele.offsetWidth/2 - this.ele.offsetWidth/2 + "px";
this.ele.style.top = plane.ele.offsetTop - this.ele.offsetHeight + "px";
// B2.开始运动
this.move()
},
move:function(){
var speed = 8; //子弹的步长
this.timer = setInterval(() => {
if(this.ele.offsetTop <= 100){
clearInterval(this.timer);
// B3.死亡
this.die()
}else{
this.ele.style.top = this.ele.offsetTop - speed + "px";
}
}, 30);
},
die:function(){
// 先换死亡的class
this.ele.className = "bullet_die";
// 切换第一张爆炸图
setTimeout(() => {
this.ele.style.backgroundImage = "url(images/die2.png)";
}, 100);
// 删除子弹元素
setTimeout(() => {
this.ele.remove()
}, 200);
}
}
// 敌机：
class Enemy{
constructor(){
}
init(){
}
}
function createDiv(classname){
var div = document.createElement("div");
div.className = classname;
document.getElementById("body_main").appendChild(div);
return div;
}
new Engine();
</script>