<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 400px;
height: 400px;
background-color: #000;
margin: 100px auto;
position: relative;
}
.scoreBox {
position: absolute;
line-height: 30px;
top: 0;
left: 0;
color: #fff;
}
.start {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
background: url(./images/start.png) no-repeat;
}
</style>
</head>
<body>
<div class="tab" id="content">
<p class="scoreBox">已经坚持了：<span class="score">0</span>秒</p>
<div class="start" id="start"></div>
</div>
<script>
var start = document.getElementById('start');
start.onclick = function() {
game.startGame();
start.style.display = 'none';
}
function isOver(bullets, Plane, D) {
var flag = false;
for (var i = 0; i < bullets.length; i++) {
var d = Math.sqrt(Math.pow(bullets[i].x - Plane.x, 2) + Math.pow(bullets[i].y - Plane.y, 2));
if (d < D) {
// 说明撞上了；
flag = true;
break;
}
}
return flag;
}
// 总导演： 总的控制器
// 应该有的方法： 让飞机就位。主循环；
var game = {
bulletNumber: 30, // 子弹数量
timer: 0, //定时器
bullets: [],
result: document.querySelector('.score'),
frameIndex: 0,
startGame: function() {
var score = 0; //分数；
for (var i = 0; i < this.bulletNumber; i++) {
this.bullets.push(new Bullet());
}
plane.set(); //让飞机就位；
var that = this;
// 游戏主循环；
this.timer = setInterval(function() {
if (isOver(that.bullets, plane, 20)) {
console.info("你挂掉了");
// that.bullets = [];
// that.bulletNumber = 0;
that.stopGame();
start.style.display = 'block';
// game.startGame();
}
// plane.move();
// 让所有子弹开始动起来；
for (var i = 0; i < that.bulletNumber; i++) {
that.bullets[i].move();
}
plane.update(); //更新飞机的位置；
// console.info(e);
that.frameIndex++;
// 设置显示的分数；
if (that.frameIndex % 2 == 0) {
score++;
}
that.result.innerHTML = score / 10;
}, 50);
},
stopGame: function() {
clearInterval(this.timer);
}
}
// 产生随机数的函数；
function r(m, n) {
return (m + Math.ceil((n - m) * Math.random()));
}
// 子弹对象：
// 属性: 大小，颜色，速度；位置，
// 方法： 运动；
function Bullet() {
this.color = "rgb(" + r(0, 255) + "," + r(0, 255) + "," + r(0, 255) + ")";
this.x = r(20, 50); //子弹中心点的位置；
this.y = r(20, 50); //y方向
this.dx = r(-5, 5); //x方向 速度
this.dy = r(-5, 5); //y方向速度;
this.width = 10;
this.height = 10;
this.span = document.createElement('span');
// 把属性设置对应到对应的dom元素上;
this.span.style.zIndex = 2;
this.span.style.position = 'absolute';
this.span.style.width = this.width + 'px';
this.span.style.height = this.height + 'px';
this.span.style.backgroundColor = this.color;
this.span.style.left = this.x + 'px';
this.span.style.top = this.y + 'px';
//创建元素之后需要把元素添加到屏幕上面；
document.getElementById('content').appendChild(this.span);
}
Bullet.prototype.move = function() { //子弹运动的方法；
// 控制子弹遇到边缘之后转方向；
if (this.x > 400 - this.width) {
this.dx = -1 * this.dx;
this.x = 400 - this.width;
} else if (this.x < 0) {
this.dx = -1 * this.dx;
}
if (this.y > 400 - this.height) {
this.y = 400 - this.height;
this.dy = -1 * this.dy;
} else if (this.y < 0) {
this.dy = -1 * this.dy;
}
// 控制子弹的运动。在当前位置，加上速度；
this.x = this.x + this.dx;
this.y = this.y + this.dy;
// 更新到dom元素中；
this.span.style.top = this.y + 'px';
this.span.style.left = this.x + 'px';
};
// 游戏停止的时候，显示开始按钮；加载完成之后，鼠标点击开始；
// 飞机对象
// 属性；背景图；位置，大小，
// 方法：移动
var keyStatus = {};
document.addEventListener('keyup', function(e) {
keyStatus[e.keyCode] = false;
})
document.addEventListener("keydown", function(e) {
keyStatus[e.keyCode] = true;
console.info(e);
e.preventDefault;
return false;
})
var plane = {
// 飞机的位置
ele: document.createElement('div'),
x: 200,
y: 200,
set: function() { //飞机的方法；
this.ele.style.position = 'absolute';
this.ele.style.background = "url('images/plane2.png')";
this.ele.style.backgroundSize = '100% 100%';
this.ele.style.height = '40px';
this.ele.style.width = '40px';
this.ele.style.top = (this.y - 20) + 'px';
this.ele.style.left = (this.x - 20) + 'px';
this.ele.style.zIndex = 2;
this.ele.style.transform = 'rotate(0deg)';
this.ele.style.transition = 'all .1s ease 0s';
// 添加到屏幕上，
document.getElementById('content').appendChild(this.ele);
},
move: function() {
this.x = this.x > (400 - 20) ? (400 - 20) : this.x;
this.x = this.x < 0 ? 0 : this.x;
this.y = this.y > (400 - 20) ? (400 - 20) : this.y;
this.y = this.y < 0 ? 0 : this.y;
this.ele.style.left = (this.x - 20) + 'px';
this.ele.style.top = (this.y - 20) + 'px';
// console.info(this.ele.style.left, this.ele.style.top);
},
update: function() {
// 按下按键的时候，应该改变的距离；
// 所有合法的按键可能性；
// 四种基本的按键；
// 四种复合的按键；
//按住shift加速 keycode ：16；
var speed = 5; //速度；
if (keyStatus[38] == true && keyStatus[37] == true) {
// 左上；
plane.x -= speed;
plane.y -= speed;
this.ele.style.transform = 'rotate(-45deg)';
} else if (keyStatus[40] == true && keyStatus[37] == true) {
// 左下
plane.x -= speed;
plane.y += speed;
this.ele.style.transform = 'rotate(-135deg)';
} else if (keyStatus[39] == true && keyStatus[38] == true) {
// 右上
plane.x += speed;
plane.y -= speed;
this.ele.style.transform = 'rotate(45deg)';
} else if (keyStatus[39] == true && keyStatus[40] == true) {
// 右下
plane.x += speed;
plane.y += speed;
this.ele.style.transform = 'rotate(135deg)';
} else if (keyStatus[39] == true) {
// 右边
plane.x += speed;
this.ele.style.transform = 'rotate(90deg)';
} else if (keyStatus[37] == true) {
// 左边；
plane.x -= speed;
this.ele.style.transform = 'rotate(-90deg)';
} else if (keyStatus[40] == true) {
// 下边；
plane.y += speed;
this.ele.style.transform = 'rotate(180deg)';
} else if (keyStatus[38] == true) {
// 上边；
plane.y -= speed;
this.ele.style.transform = 'rotate(0deg)';
}
// 更新飞机的位置；
plane.move();
}
};
// 键盘状态：
//监听键盘事件；
// 如果按住向上。则更改飞机的css属性；transform：rotate(45deg)
</script>
</body>
</html>
