JS面向对象实现飞机大战

本文实例为大家分享了JS面向对象实现飞机大战的具体代码，供大家参考，具体内容如下

主页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .bg{
  width: 530px;
  height: 600px;
  position: relative;
  margin: 100px auto;
  background: url("bg.png") no-repeat 0 -9399px;
 }
 .plane{
  width: 60px;
  height: 53px;
  position: absolute;
  left: 235px;
  bottom: 10px;
  background: url("my_air.gif") no-repeat;
 }
 .enemy{
  position: absolute;
 }
 .buttle{
  width: 9px;
  height: 37px;
  position: absolute;
  background: url("my_ari_1.gif") no-repeat;
 }
 .bomp{
  width: 160px;
  height: 160px;
  position: absolute;
  background: url("0.gif") no-repeat;
 }
 </style>
</head>
<body>
<div class="bg" id="bg">
 <div class="plane" id="plane"></div>
</div>

</body>
<script type="text/javascript" src="buttle.js"></script>
<script type="text/javascript" src="enemies.js"></script>
<script src="jquery-3.0.0.min.js"></script>
<script>
 //bg移动begin
 var bg_height=-9399;
 function bg_move(){
 var bg=document.getElementById("bg");
 bg_height+=3;
 if (bg_height>0){
 bg_height=-9399;
 }
 bg.setAttribute("style","background: url('bg.png') no-repeat 0 "+bg_height+"px");
 }
 setInterval(bg_move,30);
 //bg移动over
 //通过获取键盘的key值来控制飞机的方向begin
 document.onkeydown = function(){

 var key=event.keyCode;
 var plane =document.getElementById("plane");
 switch (key){
  case 37:
   plane_Left();
  break;
  case 38:
  plane_Top();
  break;
  case 39:
  plane_Right();
  break;
  case 40:
  plane_Bottom();
  break;
  case 32:
   fire();
  break;
 }
 };
 //通过获取键盘的key值来控制飞机的方向over
 //飞机的方向begin
 var planeLeft=235;
 var planeBottom=10;
 //声明全局变量planeBottom、planeLeft用来让飞机移动
 function plane_Left(){
 if(planeLeft>0){
  planeLeft-=8;
  document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
 }
 }
 function plane_Right(){
 if(planeLeft<470){
  planeLeft+=8;
  document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
 }
 }
 function plane_Top(){
 if(planeBottom<550){
  planeBottom+=8;
  document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
 }
 }
 function plane_Bottom(){
 if(planeBottom>10){
  planeBottom-=8;
  document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
 }
 }
 //飞机的方向over
 function enemyShow(){
 var number = parseInt(Math.random()*10);
 for(var i=0;i<number;i++){
  var enemies=new enemiesShow();
 }
 }
 setInterval(enemyShow,3000);
 function fire(){
 var bottom=planeBottom+5+53;
 var left=planeLeft+30-5;
 var buttle = new buttleDemo(left,bottom);
 }

</script>
</html>

子弹

/**
 * Created by echo22 on 2016/7/29.
 */
function buttleDemo(left,bottom){
 var buttleLeft =left;
 var buttleBottom = bottom;
 var id;
 var Move;
 inti();
 function inti(){
 id=getRandom();
 var str = "<div class='buttle' id='b"+id+"'></div>";
 $("#bg").append(str);
 $("#b"+id).css({"left":buttleLeft,"bottom":buttleBottom});
 Move=setInterval(buttleMove,10);
 }
 //获取随机ID
 function getRandom(){
 return parseInt(Math.random()*10000);
 }
 //子弹的移动
 function buttleMove(){
 if(buttleBottom<550){
  buttleBottom+=10;
  $("#b"+id).css("bottom",buttleBottom);
  if(JudgeShot()){
  dispire();
  }
 }
 else {
  dispire();
 }
 }
 //清除子弹
 function dispire(){
 $("#b"+id).remove();
 clearInterval(Move);
 }
 //判断子弹与敌机的碰撞位置
 function JudgeShot(){
 var enemy=$(".enemy");
 for (var i=0;i<enemy.length;i++){
  var enemy_top=$(".enemy").eq(i).css("top");
  var enemy_left=$(".enemy").eq(i).css("left");
  enemy_bottom=600-getInt(enemy_top);
  enemy_left=getInt(enemy_left);
  console.log(enemy_left);
  if (buttleLeft>enemy_left&&buttleLeft<enemy_left+50&&buttleBottom>enemy_bottom&&buttleBottom<enemy_bottom+60){
  $(".enemy").eq(i).remove();

  var bomp="<div class='bomp' id='bo"+id+"'></div>";
  $("#bg").append(bomp);
  $("#bo"+id).css({"left":buttleLeft-70,"bottom":buttleBottom-100});
  setTimeout(gundan,50);
  return true;
  }
 }
 return false;
 }
 function getInt(str){
 var result = str.substring(0,(str.length-2));
 return parseInt(result);
 }
 function gundan(){
 $("#bo"+id).remove();
 }
}

敌机

/**
 * Created by echo22 on 2016/7/29.
 */
function enemiesShow(){
 var id;
 init();
 function init(){
 var type=getEnemyType();
 var enemyLeft=getEnemyLeft();
 getEnemyPlane(type,enemyLeft);
 getLine();
 }
 function getEnemyPlane(type,left){
 console.log(111);
 id=parseInt(Math.random()*10000);
 var width;
 var height;
 if(type==1){
  width=47;
  height=72;
 }
 else {
  width=64;
  height=56;
 }
 var enemy="<div class='enemy' id='e"+id+"' ></div>";
 $("#bg").append(enemy);
 $("#e"+id).css({"width":width,"height":height,"left":left,"background":"url('d_j_"+type+".gif') no-repeat"});

 }
 function getEnemyType(){
 return (parseInt(Math.random()*10/5)>0)?1:3;
 }
 function getEnemyLeft(){
 return parseInt(Math.random()*(530-64));
 }
 function getLine(){
 Math.random()>0.5?zhiLine():quLine();
 }
 function zhiLine(){
 $("#e"+id).animate({
  "top":"520px"
 },3000,function(){
  $("#e"+id).remove();
 })
 }
 function quLine(){
 $("#e"+id).animate({
  "top":"200px",
  "left":getEnemyLeft()
 },1500,function(){})
 $("#e"+id).animate({
  "top":"520px",
  "left":getEnemyLeft()
 },1500,function(){
  $("#e"+id).remove();
 })
 }
}

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • three.js绘制地球、飞机与轨迹的效果示例

    three.js绘制地球、飞机与轨迹的效果示例

    对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

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

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

    先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r

  • JavaScript仿微信打飞机游戏

    JavaScript仿微信打飞机游戏

    首先实现微信打飞机游戏,首先会有自己和敌机,采用canvas绘图来生成自己和敌人. 1.生成自己,且可以通过左右键来进行左右移动. //生成自己,且可以左右移动 //控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png";

  • 纯javascript模仿微信打飞机小游戏

    纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • js实现飞机大战小游戏

    本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/

  • JavaScript制作简易的微信打飞机

    简单的用JavaScript模拟微信打飞机,部分功能还不完善,刚开始写,还有很多不足,还望大家多多指出. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv

  • js实现飞机大战游戏

    本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo

  • JavaScript 小型打飞机游戏实现原理说明

    玩法说明:上下左右控制移动,空格发弹. 每打中一个敌机就加100分,每提升5000分,玩家的飞机的一次发弹数就加一,最多四,被敌机撞到或者让敌机飞到底部就算输.... 演示代码:http://demo.jb51.net/js/FlyBeat/index.html 游戏目前的功能还是比较简单的....貌似就贴个源码不太好,所以这次还是写写思路... 游戏主要分为4个js文件,4个js文件分别包含4个类. 1:飞机类---Flyer 复制代码 代码如下: //飞机对应的dom元素 this.dom

  • JavaScript用200行代码制作打飞机小游戏实例

    JavaScript用200行代码制作打飞机小游戏实例

    我去,我的图片分数被这个录屏软件的水印盖上了,扎心. 这个程序的文件以及代码全部上传到了github 程序下载链接传送门 这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了.所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西. 当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创. 代码部分我是通过一个大

  • JS面向对象实现飞机大战

    本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma

  • js canvas实现飞机大战

    本文实例为大家分享了js canvas实现飞机大战的具体代码,供大家参考,具体内容如下 首先我们绘制一个canvas区域,确实其宽高为480px*852px;水平居中 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" conten

  • js+css实现飞机大战游戏

    js+css实现飞机大战游戏

    本文实例为大家分享了js+css实现飞机大战游戏的具体代码,供大家参考,具体内容如下 用js和css实现,css中定义样式,js中定义了具体的实现事件,例如碰撞.子弹.飞机等. main.css文件(可根据需要定义): *{     margin: 0;     padding: 0; } #contentdiv{     position: absolute;     left: 500px; } #startdiv{     width: 320px;     height: 568px;

  • 用JS实现飞机大战小游戏

    本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =

  • 原生JS实现飞机大战小游戏

    原生JS实现飞机大战小游戏

    本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>

  • 基于JS实现飞机大战游戏的示例代码

    基于JS实现飞机大战游戏的示例代码

    目录 演示 技术栈 源码 定义敌方战机 定义我方战机 碰撞检测 演示 技术栈 今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /

  • python pygame模块编写飞机大战

    本文实例为大家分享了python pygame模块编写飞机大战的具体代码,供大家参考,具体内容如下 该程序没有使用精灵组,而是用列表存储对象来替代精灵组的动画效果.用矩形对象的重叠来判断相撞事件.该程序可以流畅运行,注释较为详细,希望可以帮助大家. import pygame from pygame.locals import * from sys import exit import time import random # 创建子弹类,把子弹的图片转化为图像对象,设定固定的移动速度 clas

随机推荐