JavaScript飞机（正方形飞机）大作战
JavaScript飞机（正方形飞机）大作战
要求：
- 飞机随着鼠标移动，或者使用键盘操作，飞机不能超出界面框
- 每隔相应的时间，友方飞机自动发射子弹
- 每个相应的时间，出现一个敌机
- 子弹碰到敌机，敌机和子弹消失
- 友机和敌机相撞，游戏结束
涉及内容：
- setInterval定时器，主要用于发射子弹和敌机的出现
- 元素的大小和元素距上、左可视窗口的大小的距离，需要offset和client相关知识
- document.documentElemnet.clientWidth 可视窗口的宽度
DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>title><style type="text/css">* {margin: 0px;padding: 0px;}#first-page {width: 500px;margin: 200px auto;font-size: 50px;}#first-page button {height: 50px;width: 200px;font-size: 25px;text-align: center;line-height: 50px;cursor: pointer;}#game {display: none;}.score {font-size: 20px;}#myfly {width: 50px;height: 30px;line-height: 30px;text-align: center;position: fixed;left: 0px;top: 0px;background-color: #ADA8A8;cursor: none;}.bullets div {width:5px;height: 5px;border-radius: 50%;background-color: green;position: fixed;}.enemy div {width: 50px;height: 30px;position: fixed;text-align: center;line-height: 30px;background-color: red;}#over {display: none;font-size: 50px;width: 500px;margin: 200px auto;}style>
head>
<body><div id="first-page"><h1>飞机大作战h1><button id="start">开始游戏button> <button id="rule">游戏规则button>div><div id="game"><div class="score">当前的分数为：0div><div id="myfly">友机div><div class="bullets">div><div class="enemy">div>div><div id ="over"><h1>GAME OVERh1>div><script type="text/javascript">var firstPage = document.querySelector('#first-page');var startButton = document.querySelector('#start');var ruleButton = document.querySelector('#rule');var game = document.querySelector('#game');var myfly = document.querySelector('#myfly');var bullets = document.querySelector('.bullets');var enemy = document.querySelector('.enemy');var n = 0;// 记录击倒的飞机数var score = document.querySelector('.score');var over = document.querySelector('#over');// 点击显示规则ruleButton.addEventListener('click', function(){alert('管你知不知道，玩就对了');})// 点击开始游戏startButton.addEventListener('click', function fn(){firstPage.style.display = 'none';game.style.display = 'block';// 鼠标控制友方飞机的移动document.addEventListener('mousemove', function(e){let mouseX = e.pageX;let mouseY = e.pageY;let x = mouseX - myfly.clientWidth / 2;let y = mouseY - myfly.clientHeight / 2;if (x < 0){x = 0;}else if (x > (document.documentElement.clientWidth - myfly.clientWidth)) {x = document.documentElement.clientWidth - myfly.clientWidth;}if (y < 0){y = 0;}else if (y > (document.documentElement.clientHeight - myfly.clientHeight)) {y = document.documentElement.clientHeight - myfly.clientHeight;}myfly.style.left = x + 'px';myfly.style.top = y + 'px';})// 键盘控制友方飞机的移动document.addEventListener('keydown', function(e){inputCode = e.keyCode;let x;let y;if(inputCode == 87){myfly.style.top = myfly.offsetTop - 5 + 'px';}else if (inputCode == 65) {myfly.style.left = myfly.offsetLeft - 5 + 'px';}else if (inputCode == 83) {myfly.style.top = myfly.offsetTop + 5 + 'px'; }else if (inputCode == 68) {myfly.style.left = myfly.offsetLeft + 5 + 'px';}})// 产生子弹var makeBullet = setInterval(function(){let bullet = document.createElement('div');bullet.style.left = myfly.offsetLeft + myfly.clientWidth / 2 + 'px';bullet.style.top = myfly.offsetTop + 'px';bullets.appendChild(bullet);// 子弹的移动,子弹在发射后只有top值在改变let move = setInterval(function(){bullet.style.top = bullet.offsetTop - 7 + 'px';// 超出可视区就删除结点if(bullet.style.top <= 0){bullets.removeChild(bullet);}}, 200)}, 1000);// 产生敌机var makeEnemy = setInterval(function(){let enemyFly = document.createElement('div');let x = Math.floor(Math.random() * ((document.documentElement.clientWidth - enemyFly.clientWidth) + 1)) + 0;let y = 0;enemyFly.style.left = x + 'px';enemyFly.style.top = y + 'px';enemyFly.innerHTML = '敌机';enemy.appendChild(enemyFly);// 敌机的移动let move = setInterval(function(){enemyFly.style.top = enemyFly.offsetTop + 10 + 'px';if (enemyFly.offsetTop >= document.documentElement.clientHeight){enemy.removeChild(enemyFly);}attack(enemyFly);if (myfly.offsetTop - enemyFly.offsetTop - enemyFly.clientHeight <= 0 && (enemyFly.offsetLeft + enemyFly.clientWidth >= myfly.offsetLeft && enemyFly.offsetLeft + enemyFly.clientWidth <= myfly.offsetLeft + myfly.clientWidth)) {window.clearTimeout(makeBullet);window.clearTimeout(makeEnemy);game.style.display = 'none';over.style.display = 'block';}}, 200)}, 5000)// 当子弹碰到敌机，敌机和子弹消失function attack(obj){let divs = document.querySelectorAll('.bullets > div');for(i = 0; i < divs.length; i++){if(divs[i].offsetTop - obj.offsetTop - obj.clientHeight <= 0 && (divs[i].offsetLeft >= obj.offsetLeft && divs[i].offsetLeft <= obj.offsetLeft + obj.clientWidth)){n++;score.innerHTML = '当前的分数为：' + n*10;bullets.removeChild(divs[i]);enemy.removeChild(obj);}}}})script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！