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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
原生js实现弹幕效果
Nov 29 Javascript
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
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
js 颜色选择插件
2017/01/23 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Vue下的国际化处理方法
2017/12/18 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python3 replace()函数使用方法
2018/03/19 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
六年级数学教学反思
2014/02/03 职场文书
供货协议书范本
2014/04/22 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js