时间:2021-07-01 10:21:17 帮助过:34人阅读
先来看看开始的界面图
实现思路:
1.打开页面,背景开始走动;
2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方;
3.当敌人碰到子弹,敌人消失;
4.当敌人和飞机相遇,飞机死亡,结束游戏;
html页面
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>飞机大战</title>
- <link rel="stylesheet" type="text/css" href="飞机大战.css">
- </head>
- <body>
- <div id="mainScreen">
- <!-- 背景图片 -->
- <div id="bgImg1" class="bg"></div>
- <div id="bgImg2" class="bg"></div>
- <!-- 飞机 -->
- <div id="airplane"></div>
- <!-- 开始按钮 -->
- <div id="startMenu">
- <a href="#" id="start">Start</a>
- </div>
- <!-- 重新开始按钮 -->
- <div id="restartMenu">
- <a href="#" id="restart">Game Over!<br/>重新开始</a>
- </div>
- <!-- 敌人 -->
- <div class="enemy"></div>
- <div class="enemy"></div>
- <div class="enemy"></div>
- <div class="enemy"></div>
- <div class="enemy"></div>
- <!-- 子弹 -->
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- <div class="bullet"></div>
- </div>
- <script type="text/javascript" src="sunckBase.js"></script>
- <script type="text/javascript" src="飞机大战.js"></script>
- </body>
- </html>
css样式
- *{
- margin: 0;
- padding: 0;
- font-family: "微软雅黑";
- }
- #mainScreen{
- width: 512px;
- height: 768px;
- margin:0 auto;
- position: relative;
- overflow: hidden;
- }
- .bg{
- width: 512px;
- height:768px;
- position: absolute;
- background: url(bg.jpg);
- }
- #bgImg2{
- top:-768px;
- }
- #airplane{
- width: 109px;
- height: 82px;
- position: absolute;
- background: url(hero.png);
- left: 215px;
- top: 668px;
- }
- .enemy{
- position: absolute;
- width: 30px;
- height: 30px;
- left: -100px;
- top: 0px;
- background: url(enemy.png);
- background-size: 30px 30px;
- }
- .bullet{
- position: absolute;
- width: 5px;
- height: 10px;
- left: -100px;
- top: -100px;
- background: url(bullet.png);
- background-size: 5px 10px;
- }
- #startMenu, #restartMenu{
- position: absolute;
- width: 512px;
- text-align: center;
- left: 0;
- top: 300px;
- }
- #start, #restart{
- line-height:50px;
- font-size:30px;
- font-weight:bold;
- color:#F00;
- display:block;
- text-decoration:none;
- }
- #restartMenu{
- display: none;
- }
进入页面时,背景开始动
- //给背景设置定时器,让背景不停的动,形成动感
- var bgTimer = setInterval(bgRun, 10);
- function bgRun() {
- jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
- jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
- if (jsBg1.offsetTop >= 768) {
- jsBg1.style.top = "-768px";
- } else {
- if (jsBg2.offsetTop >= 768) {
- jsBg2.style.top = "-768px";
- }
- }
- }
点击开始,进入游戏
游戏中
注:其实子弹和敌人的标签没有几个,但是我们使用定时器,开始之前,现将表现都放在屏幕外,进入游戏需要时候再改变标签定位,将其放入到页面中。
- var jsStartBox=document.getElementById("startMenu")
- jsStart.onclick = function startGame(){
- jsStartBox.style.display="none";
- var baseX = 0;
- var baseY = 0;
- var moveX = 0;
- var moveY = 0;
- jsAirplane.onmousedown = function(e) {
- var evt = e || window.event;
- baseX = evt.pageX;
- baseY = evt.pageY;
- jsDivBox.onmousemove = function(v) {
- var vt = v || window.event;
- moveX = vt.pageX - baseX;
- baseX = vt.pageX;
- moveY = vt.pageY - baseY;
- baseY = vt.pageY;
- jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px";
- jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px";
- };
- };
- jsAirplane.onmouseup = function() {
- mainScreen.onmousemove = null;
- }
- //找到可用的子弹
- var findBulletTimer = setInterval(findBullet, 300);
- function findBullet() {
- for (var i = 0; i < jsBullets.length; i++) {
- if (jsBullets[i]["isShow"] == false) {
- jsBullets[i]["isShow"] = true;
- //将子弹移动到飞机头
- jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px";
- jsBullets[i].style.top = jsAirplane.offsetTop + "px";
- break;
- }
- }
- }
- // //让子弹飞
- var bulletFlyTimer = setInterval(bulletFlay, 100);
- function bulletFlay() {
- for (var j = 0; j < jsBullets.length; j++) {
- if (jsBullets[j]["isShow"] == true) {
- if (jsBullets[j].offsetTop > -20) {
- jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px";
- } else {
- jsBullets[j].style.left = "-100px";
- jsBullets[j].style.top = "-100px";
- jsBullets[j]["isShow"] = false;
- }
- }
- }
- }
- //找到可用敌人
- var findEnemyTimer = setInterval(findEnemy, 500);
- function findEnemy(){
- //找到一个没有在屏幕中的敌人
- for (var i = 0; i < jsEnemys.length; i++) {
- if (jsEnemys[i]["isShow"] == false) {
- //标记敌人已经使用
- jsEnemys[i]["isShow"] = true;
- //将敌人移动到屏幕
- var left = randomNum(0, 482);
- jsEnemys[i].style.left = left + "px";
- jsEnemys[i].style.top = 0 + "px";
- break;
- }
- }
- }
- // //让敌人下落
- var enemyLandTimer = setInterval(enemyLand, 100);
- function enemyLand() {
- for (var j = 0; j < jsEnemys.length; j++) {
- if (jsEnemys[j]["isShow"] == true) {
- var a = randomNum(4, 20);
- if (jsEnemys[j].offsetTop <= 768) {
- jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
- } else {
- jsEnemys[j].style.left = "-100px";
- jsEnemys[j].style.top = "0px";
- jsEnemys[j]["isShow"] = false;
- }
- }
- }
- }
- }
打中怪物
用页面上存在每一个敌人和每一个子弹的定位进行简则,如果相撞,那么怪物消失
- var perishEnemyTimer = setInterval(perishEnemy, 50);
- function perishEnemy() {
- for (var i = 0; i < jsBullets.length; i++) {
- if (jsBullets[i]["isShow"] == true) {
- for (var j = 0; j < jsEnemys.length; j++) {
- if (jsEnemys[j]["isShow"] == true) {
- var ret = pzjcFunc(jsBullets[i], jsEnemys[j]);
- if (ret) {
- jsBullets[i].style.left = "-100px";
- jsBullets[i].style.top = "-100px";
- jsBullets[i]["isShow"] = false;
- jsEnemys[j].style.left = "-100px";
- jsEnemys[j].style.top = "-100px";
- jsEnemys[j]["isShow"] = false;
- }
- }
- }
- }
- }
- }
死亡检测
游戏结束
用页面上存在每一个敌人和飞机的定位进行检测,如果两者相遇,那么结束游戏。
注:检测时考虑取反,坦克在飞机上面,在飞机下面,在飞机左边,在飞机右边是没有碰到的时候,那么我们取反就是说明两者已经相遇了。
- //死亡检测
- var dieTimer = setInterval(die, 50);
- var jsStop = document.getElementById("restartMenu")
- function die() {
- for (var i = 0; i < jsEnemys.length; i++) {
- if (jsEnemys[i]["isShow"] == true) {
- var isDie = pzjcFunc(jsAirplane, jsEnemys[i]);
- if (isDie) {
- jsStop.style.display="block";
- jsAirplane.onmouseup = function() {
- mainScreen.onmousemove = null;
- }
- }
- }
- }
- }
上述两步中用到的检测两者是否碰撞的函数
- //死亡检测的函数
- function pzjcFunc(obj1, obj2){
- var obj1Left = obj1.offsetLeft;
- var obj1Width = obj1Left + obj1.offsetWidth;
- var obj1Top = obj1.offsetTop;
- var obj1Height = obj1Top + obj1.offsetHeight;
- var obj2Left = obj2.offsetLeft;
- var obj2Width = obj2Left + obj2.offsetWidth;
- var obj2Top = obj2.offsetTop;
- var obj2Height = obj2Top + obj2.offsetHeight;
- if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
- return true;
- }
- return false;
- }
点击重新开始之后刷新页面
- var jsRestart=document.getElementById("restart");
- jsRestart.onclick=function(){
- jsStop.style.display="none";
- window.location.reload();//刷新页面
- }
好的,现在我们的游戏就可以玩了,这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如,页面之外的空间的运用;比如,检测碰撞。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。