当前位置:Gxlcms > JavaScript > JavaScript原生编写《飞机大战坦克》游戏完整实例

JavaScript原生编写《飞机大战坦克》游戏完整实例

时间:2021-07-01 10:21:17 帮助过:34人阅读

先来看看开始的界面图

实现思路:

      1.打开页面,背景开始走动;

      2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方;

      3.当敌人碰到子弹,敌人消失;

      4.当敌人和飞机相遇,飞机死亡,结束游戏;

html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>飞机大战</title>
  6. <link rel="stylesheet" type="text/css" href="飞机大战.css">
  7. </head>
  8. <body>
  9. <div id="mainScreen">
  10. <!-- 背景图片 -->
  11. <div id="bgImg1" class="bg"></div>
  12. <div id="bgImg2" class="bg"></div>
  13. <!-- 飞机 -->
  14. <div id="airplane"></div>
  15. <!-- 开始按钮 -->
  16. <div id="startMenu">
  17. <a href="#" id="start">Start</a>
  18. </div>
  19. <!-- 重新开始按钮 -->
  20. <div id="restartMenu">
  21. <a href="#" id="restart">Game Over!<br/>重新开始</a>
  22. </div>
  23. <!-- 敌人 -->
  24. <div class="enemy"></div>
  25. <div class="enemy"></div>
  26. <div class="enemy"></div>
  27. <div class="enemy"></div>
  28. <div class="enemy"></div>
  29. <!-- 子弹 -->
  30. <div class="bullet"></div>
  31. <div class="bullet"></div>
  32. <div class="bullet"></div>
  33. <div class="bullet"></div>
  34. <div class="bullet"></div>
  35. <div class="bullet"></div>
  36. <div class="bullet"></div>
  37. <div class="bullet"></div>
  38. <div class="bullet"></div>
  39. <div class="bullet"></div>
  40. </div>
  41. <script type="text/javascript" src="sunckBase.js"></script>
  42. <script type="text/javascript" src="飞机大战.js"></script>
  43. </body>
  44. </html>

css样式

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. font-family: "微软雅黑";
  5. }
  6. #mainScreen{
  7. width: 512px;
  8. height: 768px;
  9. margin:0 auto;
  10. position: relative;
  11. overflow: hidden;
  12. }
  13. .bg{
  14. width: 512px;
  15. height:768px;
  16. position: absolute;
  17. background: url(bg.jpg);
  18. }
  19. #bgImg2{
  20. top:-768px;
  21. }
  22. #airplane{
  23. width: 109px;
  24. height: 82px;
  25. position: absolute;
  26. background: url(hero.png);
  27. left: 215px;
  28. top: 668px;
  29. }
  30. .enemy{
  31. position: absolute;
  32. width: 30px;
  33. height: 30px;
  34. left: -100px;
  35. top: 0px;
  36. background: url(enemy.png);
  37. background-size: 30px 30px;
  38. }
  39. .bullet{
  40. position: absolute;
  41. width: 5px;
  42. height: 10px;
  43. left: -100px;
  44. top: -100px;
  45. background: url(bullet.png);
  46. background-size: 5px 10px;
  47. }
  48. #startMenu, #restartMenu{
  49. position: absolute;
  50. width: 512px;
  51. text-align: center;
  52. left: 0;
  53. top: 300px;
  54. }
  55. #start, #restart{
  56. line-height:50px;
  57. font-size:30px;
  58. font-weight:bold;
  59. color:#F00;
  60. display:block;
  61. text-decoration:none;
  62. }
  63. #restartMenu{
  64. display: none;
  65. }

进入页面时,背景开始动

  1. //给背景设置定时器,让背景不停的动,形成动感
  2. var bgTimer = setInterval(bgRun, 10);
  3. function bgRun() {
  4. jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
  5. jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
  6. if (jsBg1.offsetTop >= 768) {
  7. jsBg1.style.top = "-768px";
  8. } else {
  9. if (jsBg2.offsetTop >= 768) {
  10. jsBg2.style.top = "-768px";
  11. }
  12. }
  13. }

点击开始,进入游戏


游戏中

注:其实子弹和敌人的标签没有几个,但是我们使用定时器,开始之前,现将表现都放在屏幕外,进入游戏需要时候再改变标签定位,将其放入到页面中。

  1. var jsStartBox=document.getElementById("startMenu")
  2. jsStart.onclick = function startGame(){
  3. jsStartBox.style.display="none";
  4. var baseX = 0;
  5. var baseY = 0;
  6. var moveX = 0;
  7. var moveY = 0;
  8. jsAirplane.onmousedown = function(e) {
  9. var evt = e || window.event;
  10. baseX = evt.pageX;
  11. baseY = evt.pageY;
  12. jsDivBox.onmousemove = function(v) {
  13. var vt = v || window.event;
  14. moveX = vt.pageX - baseX;
  15. baseX = vt.pageX;
  16. moveY = vt.pageY - baseY;
  17. baseY = vt.pageY;
  18. jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px";
  19. jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px";
  20. };
  21. };
  22. jsAirplane.onmouseup = function() {
  23. mainScreen.onmousemove = null;
  24. }
  25. //找到可用的子弹
  26. var findBulletTimer = setInterval(findBullet, 300);
  27. function findBullet() {
  28. for (var i = 0; i < jsBullets.length; i++) {
  29. if (jsBullets[i]["isShow"] == false) {
  30. jsBullets[i]["isShow"] = true;
  31. //将子弹移动到飞机头
  32. jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px";
  33. jsBullets[i].style.top = jsAirplane.offsetTop + "px";
  34. break;
  35. }
  36. }
  37. }
  38. // //让子弹飞
  39. var bulletFlyTimer = setInterval(bulletFlay, 100);
  40. function bulletFlay() {
  41. for (var j = 0; j < jsBullets.length; j++) {
  42. if (jsBullets[j]["isShow"] == true) {
  43. if (jsBullets[j].offsetTop > -20) {
  44. jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px";
  45. } else {
  46. jsBullets[j].style.left = "-100px";
  47. jsBullets[j].style.top = "-100px";
  48. jsBullets[j]["isShow"] = false;
  49. }
  50. }
  51. }
  52. }
  53. //找到可用敌人
  54. var findEnemyTimer = setInterval(findEnemy, 500);
  55. function findEnemy(){
  56. //找到一个没有在屏幕中的敌人
  57. for (var i = 0; i < jsEnemys.length; i++) {
  58. if (jsEnemys[i]["isShow"] == false) {
  59. //标记敌人已经使用
  60. jsEnemys[i]["isShow"] = true;
  61. //将敌人移动到屏幕
  62. var left = randomNum(0, 482);
  63. jsEnemys[i].style.left = left + "px";
  64. jsEnemys[i].style.top = 0 + "px";
  65. break;
  66. }
  67. }
  68. }
  69. // //让敌人下落
  70. var enemyLandTimer = setInterval(enemyLand, 100);
  71. function enemyLand() {
  72. for (var j = 0; j < jsEnemys.length; j++) {
  73. if (jsEnemys[j]["isShow"] == true) {
  74. var a = randomNum(4, 20);
  75. if (jsEnemys[j].offsetTop <= 768) {
  76. jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
  77. } else {
  78. jsEnemys[j].style.left = "-100px";
  79. jsEnemys[j].style.top = "0px";
  80. jsEnemys[j]["isShow"] = false;
  81. }
  82. }
  83. }
  84. }
  85. }

打中怪物

用页面上存在每一个敌人和每一个子弹的定位进行简则,如果相撞,那么怪物消失

  1. var perishEnemyTimer = setInterval(perishEnemy, 50);
  2. function perishEnemy() {
  3. for (var i = 0; i < jsBullets.length; i++) {
  4. if (jsBullets[i]["isShow"] == true) {
  5. for (var j = 0; j < jsEnemys.length; j++) {
  6. if (jsEnemys[j]["isShow"] == true) {
  7. var ret = pzjcFunc(jsBullets[i], jsEnemys[j]);
  8. if (ret) {
  9. jsBullets[i].style.left = "-100px";
  10. jsBullets[i].style.top = "-100px";
  11. jsBullets[i]["isShow"] = false;
  12. jsEnemys[j].style.left = "-100px";
  13. jsEnemys[j].style.top = "-100px";
  14. jsEnemys[j]["isShow"] = false;
  15. }
  16. }
  17. }
  18. }
  19. }
  20. }

死亡检测


游戏结束

用页面上存在每一个敌人和飞机的定位进行检测,如果两者相遇,那么结束游戏。

注:检测时考虑取反,坦克在飞机上面,在飞机下面,在飞机左边,在飞机右边是没有碰到的时候,那么我们取反就是说明两者已经相遇了。

  1. //死亡检测
  2. var dieTimer = setInterval(die, 50);
  3. var jsStop = document.getElementById("restartMenu")
  4. function die() {
  5. for (var i = 0; i < jsEnemys.length; i++) {
  6. if (jsEnemys[i]["isShow"] == true) {
  7. var isDie = pzjcFunc(jsAirplane, jsEnemys[i]);
  8. if (isDie) {
  9. jsStop.style.display="block";
  10. jsAirplane.onmouseup = function() {
  11. mainScreen.onmousemove = null;
  12. }
  13. }
  14. }
  15. }
  16. }

上述两步中用到的检测两者是否碰撞的函数

  1. //死亡检测的函数
  2. function pzjcFunc(obj1, obj2){
  3. var obj1Left = obj1.offsetLeft;
  4. var obj1Width = obj1Left + obj1.offsetWidth;
  5. var obj1Top = obj1.offsetTop;
  6. var obj1Height = obj1Top + obj1.offsetHeight;
  7. var obj2Left = obj2.offsetLeft;
  8. var obj2Width = obj2Left + obj2.offsetWidth;
  9. var obj2Top = obj2.offsetTop;
  10. var obj2Height = obj2Top + obj2.offsetHeight;
  11. if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
  12. return true;
  13. }
  14. return false;
  15. }

点击重新开始之后刷新页面

  1. var jsRestart=document.getElementById("restart");
  2. jsRestart.onclick=function(){
  3. jsStop.style.display="none";
  4. window.location.reload();//刷新页面
  5. }

好的,现在我们的游戏就可以玩了,这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如,页面之外的空间的运用;比如,检测碰撞。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。

人气教程排行