飞机大战4-我的子弹

<link rel="stylesheet" href="dafeiji.css">
<body><div id="body_main" class="main"><ul id="options" class="options"><li value="1">超级困难</li><li value="2">非常困难</li><li value="3">比较困难</li><li value="4">就选我吧</li></ul></div>
</body>

    <script>// 飞机大战：// 引擎：难度选择，logo，loading，游戏开始// 我的飞机：创建，跟随鼠标移动，开火// 我的子弹：创建，移动，死亡// 敌机：创建，移动，碰撞检测，死亡// 引擎：function Engine(){// E1.选择元素this.li = document.querySelectorAll(".options li");this.main = document.getElementById("body_main");// E2.绑定事件this.init();}Engine.prototype.init = function(){var that = this;for(var i=0;i<this.li.length;i++){this.li[i].onclick = function(){// E3.存储难度，删除按钮组that.v = this.value;this.parentNode.remove();// E4.创建logo和loadingthat.load();}}}Engine.prototype.load = function(){this.logo = createDiv("logo");this.loading = createDiv("loading");// var loading=document.createElement("loading");// loading.className="loading";// this.main.appendChild(loading);// 切换照片 属性精确// var logo=document.createElement("logo");// logo.className="logo";// this.main.appendChild(logo);// loading图的切换var i = 0;this.loadingTimer = setInterval(() => {this.loading.style.backgroundImage = `url(images/loading${(i++)%3+1}.png)`;}, 300);// 背景图的运动var j=0;setInterval(()=>{this.main.style.backgroundPositionY = (j+=2)+"px";},30)setTimeout(() => {// E5.游戏开始this.gameStart()}, 300);}Engine.prototype.gameStart = function(){// 删除logo和loading，清除没用的计时器this.logo.remove()this.loading.remove()clearInterval(this.loadingTimer);// E6.开始创建我的飞机plane.init(this.main);// P3.开火plane.fire(this.v);// 敌机}// 我的飞机：var plane = {// main:document.getElementById("body_main"),init:function(main){this.main = main;// P1.创建我的飞机，设置默认位置this.ele = createDiv("my-warplain");this.ele.style.left = (this.main.offsetWidth - this.ele.offsetWidth)/2 + "px";this.ele.style.bottom = 0;// P2.跟随鼠标移动this.move();},move:function(){var that = this;document.onmousemove = function(eve){var e = eve || window.event;// 计算位置var l = e.clientX - that.main.offsetLeft - that.ele.offsetWidth/2;var t = e.clientY - that.ele.offsetHeight/2;// 边界限定if(l<0) l=0;if(t<0) t=0;if(l>that.main.offsetWidth - that.ele.offsetWidth){l=that.main.offsetWidth - that.ele.offsetWidth}// 生效位置that.ele.style.left = l + "px";that.ele.style.top = t + "px";}},fire:function(v){// 根据难度，持续开火setInterval(() => {new Bullet()}, 1000/v);}}// 我的子弹：function Bullet(){// B1.开始创建this.init();}Bullet.prototype = {constructor:Bullet,init:function(){// 创建this.ele = createDiv("bullet");// 设置默认位置：在飞机的头部this.ele.style.left = plane.ele.offsetLeft + plane.ele.offsetWidth/2 - this.ele.offsetWidth/2 + "px";this.ele.style.top = plane.ele.offsetTop - this.ele.offsetHeight + "px";// B2.开始运动this.move()},move:function(){var speed = 8;  //子弹的步长this.timer = setInterval(() => {if(this.ele.offsetTop <= 100){clearInterval(this.timer);// B3.死亡this.die()}else{this.ele.style.top = this.ele.offsetTop - speed + "px";}}, 30);},die:function(){// 先换死亡的classthis.ele.className = "bullet_die";// 切换第一张爆炸图setTimeout(() => {this.ele.style.backgroundImage = "url(images/die2.png)";}, 100);// 删除子弹元素setTimeout(() => {this.ele.remove()}, 200);}}// 敌机：class Enemy{constructor(){}init(){}}function createDiv(classname){var div = document.createElement("div");div.className = classname;document.getElementById("body_main").appendChild(div);return div;}new Engine();
</script>

转载于:https://www.cnblogs.com/sansancn/p/10909952.html

飞机大战4-我的子弹相关推荐

Java飞机大战敌机消失_Shoot 飞机大战，功能是子弹打在敌机上，消失且在内存中，小蜜蜂上同理 Games 游戏 247万源代码下载- www.pudn.com...
文件名称: Shoot下载收藏√ [ 5 4 3 2 1 ] 所属分类: Games 开发工具: Java 文件大小: 371 KB 上传时间: 2015-12-01 下载次数: 0 提 ...
飞机大战英雄出场加子弹实现
英雄出场加子弹的实现文章目录英雄出场加子弹的实现一.英雄登场 01. 设计英雄和子弹类 02.子弹需求 03.Hero -- 英雄 04.Bullet -- 子弹二.创建英雄 01. ...
ES6飞机大战篇-添加子弹追踪功能
既然是飞机大战那必定少不了子弹追踪那么添加子弹追踪功能的实现如下: // 原文链接:https://blog.csdn.net/erweimac/article/details/82256087 ...
第094讲: Pygame：飞机大战5 | 学习记录（小甲鱼零基础入门学习Python）
我们接下来在游戏界面的左上角设置一个得分显示区域,实时显示玩家得分,我们的规则如下: 击落小中大敌机分别可以获得1000,6000,10000分. 我们现在main 函数中添加一个 score 变量统 ...
C++ 飞机大战小游戏 EGE
C++ EGE 实现飞机大战小游戏图形界面飞机大战因为没有了地图的限制,所以相比较坦克大战而言稍微简单一些. 而游戏的可玩性和复杂度一般应该是成正比的. 但是飞机大战并没有因为地图上的省略而变得没有 ...
c++课程设计：飞机大战（图形化界面）
飞机大战.cpp #include <iostream> #include <graphics.h> #include <time.h> #include < ...
java飞机大战子弹怎么修改_java改版飞机大战源码
[实例简介] 利用java写的飞机大战,有BOSS 导弹,散射子弹,追踪弹,清屏技能,爆炸效果等等.适合用来练习面向对象: [实例截图] [核心代码] 4692cf8f-6049-4755-a40a- ...
Python学习日记-第二十六天-飞机大战（发射子弹和碰撞检测）
系列文章目录 1.发射子弹 2.碰撞检测一.发射子弹 1.1 添加发射子弹事件 Pygame的定时器使用套路非常固定: 定义定时器常量--eventtid 在初始化方法中,调用set_timer ...
python-pygame实现飞机大战-3-发射子弹以及击中敌机
承接上两步: 1.python-pygame实现飞机大战-添加背景以及飞机运动 2.python-pygame实现飞机大战-2-添加敌机以及碰撞爆炸在完成玩家飞机运动,生成敌机飞机以及两者碰撞爆炸后 ...
Pygame飞机大战（四）——创建己方飞机的类，并添加子弹吧
我们接下来要基于pygame.sprite.Sprite创建自己的类,首先必须是主角的,创建一个己方飞机的类,并且给飞机加上子弹哈! 首先我们还是先分析一下,己方飞机需要有哪些部分构成: 自身的图片加 ...

飞机大战4-我的子弹

飞机大战4-我的子弹相关推荐

最新文章

热门文章