1. /*
  2. 创建敌机:
  3. */
  4. function Enemy(blood,speed,imgs,scroe){
  5. //敌机left
  6. this.left = 0;
  7. //敌机top
  8. this.top = 0;
  9. //敌机血量
  10. this.blood = blood;
  11. //敌机速度
  12. this.speed = speed;
  13. //敌机图片集合
  14. this.imgs = imgs;//爆炸前和爆炸后
  15. //分数
  16. this.scroe = scroe;
  17. }
  18. Enemy.prototype = {
  19. constructor:Enemy,
  20. init:function(){
  21. //创建一个元素
  22. var img = document.createElement('img');
  23. //将图片路径赋值给它
  24. img.src=this.imgs[0];
  25. //插入到game中
  26. Engine.game.appendChild(img);
  27. //赋值给敌机的初始图片
  28. this.self = img;
  29.  
  30. //当图片加载完成以后获取图片的高度和宽度
  31. var _this = this;//在函数里面this的指向会改变,所以我们提前报存下来
  32. img.onload = function(){
  33.  
  34. _this.left = parseInt(Math.random()*(320-img.offsetWidth));
  35. _this.top = -img.offsetHeight;
  36. img.style.left = _this.left+'px';
  37. img.style.top = _this.top+'px';
  38. };
  39.  
  40. //生成敌机编号并放入引擎的bullet中
  41. this.id = Math.random();
  42. Engine.enemy[this.id]=this;
  43. },
  44. //子弹移动,定时器都交给引擎去做
  45. move:function(){
  46. this.top+=this.speed;
  47. this.self.style.top = this.top+'px';
  48. //越界判断
  49. if(this.top>568+this.self.offsetWidth){
  50. this.destroy();
  51. }
  52. //判断与英雄机相撞
  53. if(Engine.isCompact(this.self,Hero.self)){
  54. //自己销毁
  55. this.destroy();
  56. //英雄机
  57. Hero.die();
  58. }
  59. },
  60. bang:function(){
  61. var img = document.createElement('img');
  62. img.src = this.imgs[1];
  63. img.style.left = this.left+'px';
  64. img.style.top = this.top+'px';
  65. Engine.game.appendChild(img)
  66. setTimeout(function(){
  67. img.remove();
  68. },1000)
  69. },
  70. destroy:function(){
  71. //销毁
  72. //从页面小时
  73. this.self.remove();
  74. this.bang();
  75. //统计得分
  76. Engine.updateScroe(this.scroe);
  77. //从内存消失
  78. delete Engine.enemy[this.id];
  79. }
  80.  
  81. }

每架飞机的分数

  1. /*
  2. 创建所有类型的飞机
  3. */
  4. function SmallEnemy(){
  5. var s = parseInt(Math.random()*3+3);
  6. Enemy.call(this,1,s,['image/enemy1.png','image/enemy1-bang.gif'],10)
  7. }
  8. SmallEnemy.prototype = {
  9. constructor: SmallEnemy,
  10. __proto__: Enemy.prototype
  11. };
  12.  
  13. function MiddleEnemy(){
  14. var s = parseInt(Math.random()*3+2);
  15. Enemy.call(this,5,s,['image/enemy2.png','image/enemy2-bang.gif'],20)
  16. }
  17. MiddleEnemy.prototype = {
  18. constructor:MiddleEnemy,
  19. __proto__:Enemy.prototype
  20. }
  21.  
  22. function LargeEnemy(){
  23. var s = parseInt(Math.random()*2+1);
  24. Enemy.call(this,10,s,['image/enemy3.png','image/enemy3-bang.gif'],50)
  25. }
  26. LargeEnemy.prototype = {
  27. constructor:LargeEnemy,
  28. __proto__:Enemy.prototype
  29. }

更新得分

  1. /*
  2. 游戏引擎
  3. */
  4. var Engine = {
  5. //刚开始的游戏状态
  6. gameStatus:false,
  7. //所以敌机
  8. enemy:{},
  9. //子弹
  10. bullet:{},
  11. //得分
  12. scroe:0,
  13. //背景图片
  14. game:document.querySelector('.game'),
  15. //页面得分
  16. textScroe:document.querySelector('.score'),
  17. //初始化
  18. init:function(){
  19. this.gameStart();
  20. },
  21. //游戏开始
  22. gameStart:function(){
  23. var _this = this;
  24. //点击图片的时候判断游戏状态
  25. this.game.onclick = function(){
  26. if(!_this.gameStatus){
  27. _this.gameStatus = true;
  28. //移动移动
  29. _this.bgMove();
  30. _this.handleMove();
  31. _this.createPlane();
  32. }
  33. }
  34. },
  35. //背景移动
  36. bgMove:function(){
  37. var y=0;
  38. var _this = this;
  39. this.bgTimer = setInterval(function(){
  40. y+=2;
  41. _this.game.style['background-position-y']=y+'px';
  42. },50)
  43. },
  44. createPlane:function(){
  45. //创建敌机和英雄机
  46. Hero.init();
  47.  
  48. //创建敌机
  49. var timer = setInterval(function(){
  50. var num = parseInt(Math.random()*15)+1;
  51. switch (num) {
  52. case 1:
  53. case 3:
  54. case 5:
  55. case 7:
  56. case 9:
  57. new SmallEnemy().init();
  58. break;
  59. case 2:
  60. case 4:
  61. case 6:
  62. new MiddleEnemy().init();
  63. case 8:
  64. case 12:
  65. new LargeEnemy().init();
  66.  
  67. }
  68. },500)
  69. },
  70. //所有敌机和子弹都要动
  71. handleMove:function(){
  72. var _this=this;
  73. var timer = setInterval(function(){
  74. //创建所有子弹
  75. for(var i in _this.bullet){
  76. _this.bullet[i].move()
  77. }
  78. //c创建所有敌机动
  79. for(var i in _this.enemy){
  80. _this.enemy[i].move()
  81. }
  82.  
  83. },30)
  84. },
  85. //碰撞检测
  86. isCompact:function(obj1,obj2){
  87. var l1 = obj1.offsetLeft>obj2.offsetLeft+obj2.offsetWidth;
  88. var l2 = obj2.offsetLeft>obj1.offsetLeft+obj1.offsetWidth;
  89. var t1 = obj1.offsetTop>obj2.offsetTop+obj2.offsetHeight;
  90. var t2 = obj2.offsetTop>obj1.offsetTop+obj1.offsetHeight;
  91. if(l1||l2||t1||t2){
  92. return false;
  93. }else{
  94. return true;
  95. }
  96. },
  97. //更新得分
  98. updateScroe:function(scroe){
  99. this.scroe+=scroe;
  100. this.textScroe.innerHTML="分数"+this.scroe;
  101. }
  102. };
  103. Engine.init();

javascript飞机大战-----008积分的更多相关文章

  1. javascript飞机大战-----001分析

    1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...

  2. JavaScript—飞机大战

    今天来写个游戏,飞机大战 1,布局 2,思路 1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动. 2,在自己飞机的上方,间隔1s生成子弹.子弹往上移动 当top:0 子弹消失 3,每隔1s 产生 ...

  3. javascript 飞机大战完整代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. javascript飞机大战-----0010完整版代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. javascript飞机大战-----006创建敌机

    先写一个敌机类 /* 创建敌机: */ function Enemy(blood,speed,imgs){ //敌机left this.left = 0; //敌机top this.top = 0; ...

  6. JavaScript—飞机大战2版

    前面的思路对了  BUG 出在了计时器和没有加判断页面是否存在元素 <!DOCTYPE html> <html lang="en"> <head> ...

  7. javascript飞机大战-----009游戏结束

    /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...

  8. javascript飞机大战-----007爆炸效果

    要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...

  9. javascript飞机大战-----005创建子弹对象2

    子弹销毁 /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this. ...

随机推荐

  1. 编译 boost 库(win7+boost1.60+vs2008)

    参见:http://blog.csdn.net/u013074465/article/details/42532527 下载boost安装包 https://sourceforge.net/proje ...

  2. e677. 模糊化图像

    This example demonstrates a 3x3 kernel that blurs an image. Kernel kernel = new Kernel(3, 3, new flo ...

  3. Web 浏览

    Web 浏览为了更好地了解 CGI 的概念,让我们点击一个超链接,浏览一个特定的网页或 URL,看看会发生什么. 您的浏览器联系上 HTTP Web 服务器,并请求 URL,即文件名.Web 服务器将 ...

  4. CentOS7设置开机自启动命令大全

    任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd  on              systemctl enable httpd.service 使某服务不自 ...

  5. php 错误和异常处理

    一.错误和异常处理 1.1 错误类型和基本的调试方法 PHP程序的错误发生一般归属于下列三个领域: 语法错误: 语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运行 ...

  6. spark on yarn(zookeeper 配置)

    http://database.51cto.com/art/201404/435630.htm

  7. 帝国留言板管理员回复发送EMAIL通知客户

    说明:修改1:e/admin/tool/ReGook.php   /*回复表单*/ 43行处添加代码 ------------------------------------------------- ...

  8. ubuntu zip解压

    您好,zip xx.zip压缩,unzip xx.zip 解压,tar zcvf xx.tar.gz压缩tar zxvf xx.tar.gz解压

  9. Swift - UITableView的用法

    因为倾向于纯代码编码,所以不太喜欢可视化编程,不过也略有研究,所以项目里面的所有界面效果,全部都是纯代码编写! 终于到了重中之重的tableview的学习了,自我学习ios编程以来,工作中用得最多的就 ...

  10. Python 常见文件操作的函数示例(转)

    转自:http://www.cnblogs.com/txw1958/archive/2012/03/08/2385540.html # -*-coding:utf8 -*- ''''' Python常 ...