JS面向对象实现飞机大战


Posted in Javascript onAugust 26, 2020

本文实例为大家分享了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();
 })
 }
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
js不是基础的基础
Dec 24 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
JavaScript Image对象实现原理实例解析
Aug 26 #Javascript
js实现飞机大战游戏
Aug 26 #Javascript
JS+Canvas实现五子棋游戏
Aug 26 #Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 #Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 #Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 #Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python如何实现反向迭代
2018/03/20 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python实现大量图片重命名
2020/03/23 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
什么是组件架构
2016/05/15 面试题
资深生产主管自我评价
2013/09/22 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL