“21天好习惯”第一期-1 飞机大战-1

1.创建对战窗口，上面有一个计分器、下面是对战的窗口

<div class="info">
	分数<span class="score"></span>
</div>
<div class="gameBox"></div>

.info {
text-align: center;
font-size: 30px;
}

.gameBox {
position: relative;
width: 500px;
height: 600px;
margin: auto;
background: #55AAFF;
}

2.添加己方飞机和敌方飞机。因为敌方飞机会随机生成且会往下飞，所以需要用到JavaScript的计时器、random函数。

//创建己方飞机
function hero() {
	var hero = document.createElement('div');
	hero.className = "hero";
	var gameBox = document.querySelector('.gameBox');
	gameBox.appendChild(hero);
	hero.style.top = 550 + 'px';
}

//创建敌方飞机
var time2 = setInterval(function() {
	var gameBox = document.querySelector('.gameBox');
	var width = gameBox.offsetWidth;
	var num = Math.floor(Math.random() * (width - 30));
	var enemy = document.createElement('div');
	enemy.className = "enemy";
	var gameBox = document.querySelector('.gameBox');
	gameBox.appendChild(enemy);
	enemy.style.left = num + 'px';
	var time1 = setInterval(function() {
		enemy.style.top = enemy.offsetTop + 1 + 'px';
	}, 10);
}, 1000)

3.为创建好的飞机添加样式（因为刚开始写，就用一些带颜色的盒子表示飞机了）

.hero {
	position: absolute;
	background: #008000;
	width: 50px;
	height: 50px;

}

.enemy {
	position: absolute;
	background: #FF0000;
	width: 30px;
	height: 30px;
}

效果图

今天就实现了这些，明天准备实现己方飞机能发射子弹、能左右移动

标签：enemy,天好,21,第一期,width,gameBox,var,hero,document
来源： https://blog.csdn.net/weixin_58550422/article/details/120981581