飞机游戏
<!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>