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 相关文章推荐
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
如何使用 vue + d3 画一棵树
Dec 03 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 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
yii实现创建验证码实例解析
2014/07/31 PHP
8个PHP数组面试题
2015/06/23 PHP
php图像验证码生成代码
2017/06/08 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP echo()函数讲解
2019/02/15 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
用Vue写一个分页器的示例代码
2018/04/22 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
三项教育活动实施方案
2014/03/30 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
地震慰问信
2015/02/14 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
Python中字符串对象语法分享
2022/02/24 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python