在线DEMO地址:打开

  游戏截图:

    

  就不贴代码了, 因为代码太多了, 大概写一下这个游戏实现思路和一些实现;

  游戏一共有三关, 每一关都有一个大Boss, Boss比较好杀,主要各种外星飞船杀伤力太强, 要注意;

          

  

  游戏中打死敌机有10%的几率会掉神符, 包括生命神符加血神符无敌神符炸弹升级神符

  

  每一个敌机的死亡都有100%的几率掉钻石, 如果飞船吃了钻石就可以增加左上角的积分score

  

  

  目前有两台战斗机,战斗机只是机型不同, 战斗力是相同的:

  

  使用requireJS实现模块化, 因为JS的灵活性太高, 代码太多的话很难维护, 使用requireJS进行模块化;

  使用P.js 实现类的继承: P.js , JS的游戏开发比日常的JS应用更需要类的继承, 所以用了这个库;

  弹窗使用了Tiny-Alert, 因为系统默认的alert提示太难看了;

  游戏的声音用了GT.sound, 大城小胖的作品, 打开GT.sound

  游戏的图片素材声音素材都是从网上扒的, 找了好久, 好素材要花钱撒, 没钱, 不解释;

  

  项目的结构如下:

  

  因为requireJS提供了一个自动打包工具r.js, 可以把使用模块的代码打包到一起, 我就用了, 项目下的main-build.js就是打包后的JS文件, 合并后的代码有47kb,(代码很少,图片很多);

  使用了Grunt的watch插件,实现了代码变更时候的实时查看;

  以下是package.json的信息, 可以看看我用了哪些插件:

{
"name": "game_air",
"version": "0.0.0",
"description": "for watch",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "~0.4.5",
"express": "~3.15.2",
"grunt-contrib-connect": "~0.6.0",
"grunt-contrib-watch": "~0.5.3"
},
"devDependencies": {
"grunt-contrib-less": "~1.0.0",
"requirejs": "~2.1.19"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:\\"
},
"keywords": [
"nono"
],
"author": "nono",
"license": "__MIT__"
}

  

  因为游戏要考虑PC和移动端,所以操作方面, 用了自己写的CommonControl.js

  因为游戏中需要涉及图片加载的问题, 所以用了自己写的LoadImg.js

  这个游戏是用canvas画图实现的,所以要有一个主要的画图线程 ,我又写了一个TaskList.js

  游戏中的界面跳转用了自己写的一个Pages, 用来作为路由控制, Pages.js

  这个游戏在电脑上的FPS为50左右, 很流畅,低端机上还是有点卡,  因为会涉及到各种的碰撞检测, 子弹多的话,要跑很多的检测代码, 有优化的空间 , 游戏在中高端的移动设备上有最好的体验, 持续更新;

  园友想要源码, 仅供参考:https://github.com/sqqihao/sqqihao.github.io/tree/master/games/air

  在线DEMO地址:打开, ^_^, 给个推荐如何?

作者: NONO
出处:http://www.cnblogs.com/diligenceday/

QQ:287101329

HTML5射击类游戏----【地球保卫战】的更多相关文章

  1. 关于Unity中FPS第一人称射击类游戏制作(专题十)

    当前Unity最新版本5.6.3f1,我使用的是5.5.1f1 场景搭建 1: 导入人物模型, 手持一把枪;2: 导入碎片模型;3: 创建一个平面;4: 创建一个障碍物;5: 导入人物模型;6: 配置 ...

  2. [安卓] 12、开源一个基于SurfaceView的飞行射击类小游戏

    前言  这款安卓小游戏是基于SurfaceView的飞行射击类游戏,采用Java来写,没有采用游戏引擎,注释详细,条理比较清晰,适合初学者了解游戏状态转化自动机和一些继承与封装的技巧. 效果展示    ...

  3. Skytte:一款令人印象深刻的 HTML5 射击游戏

    Skytte 是一款浏览器里的 2D 射击游戏.使用 Canvas 元素和大量的 JavaScript 代码实现.Skytte 是用我们的开源和现代的前端技术创造的.经典,快节奏的横向滚动射击游戏,探 ...

  4. 通通的最后一篇博客(附自制html5平面射击小游戏一枚)

    这是我最后一篇博客了,由于本人的人生规划吧,以后应该也写不出什么好的技术文章了,到现在在博客园写了2年, 今天一看,我也有了120个粉丝,好几万的浏览量,感谢大家的支持啊~~ 半年没有写博客了,由于半 ...

  5. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  6. 用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面

    游戏主界面,同时也是主程序,包括sprite的生成加入以及游戏状态的控制. 下面同样贴下源码再讲解; /** * Power by html5中文网(html5china.com) * author: ...

  7. 用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

    Block可以说是这个游戏的核心类,它除了包含自身的一些属性和方法外还添加了对触摸事件的响应. 我们先来看下源码吧 /** * Power by html5中文网(html5china.com) * ...

  8. 用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

    系统主菜单如下图所示: 首先,介绍下这个主菜单,它包含了一个动画logo以及一个按钮选项,动画logo每隔1秒钟切换一张图片,点击相应的按钮选项会切换不同的游戏场景. 下面看下这个界面的源码: /** ...

  9. HTML5 2D平台游戏开发#4状态机

    在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...

随机推荐

  1. SQL Server 随机数,随机区间,随机抽取数据rand(),floor(),ceiling(),round(),newid()函数等

    在查询分析器中执行:select rand(),可以看到结果会是类似于这样的随机小数:0.36361513486289558,像这样的小数在实际应用中用得不多,一般要取随机数都会取随机整数.那就看下面 ...

  2. WCF学习系列二---【WCF Interview Questions – Part 2 翻译系列】

    http://www.topwcftutorials.net/2012/09/wcf-faqs-part2.html WCF Interview Questions – Part 2 This WCF ...

  3. 【转】Dubbo使用例子并且和Spring集成使用

    一.编写客户端和服务器端共用接口类1.登录接口类public interface LoginService {    public User login(String name, String psw ...

  4. html

    有目标的学知识才行 要学习html语言,我突然发现我好像可以在markdown文本编辑器中编辑html标签,既然这样我就多玩玩.markdown完全兼容html,这真的是一个好事情.好像也有功能在ma ...

  5. JAVA 读写Excel

    ExcelUtil.java package pers.kangxu.datautils.utils; import java.io.File; import java.io.FileInputStr ...

  6. [dedecms]后台不显示验证码

    原因:某个加载文件的开始处有一个标点,去掉就可显示 // 文件地址 /include/vdimgck.php @session_start(); $_SESSION['securimage_code_ ...

  7. linux(六)__进程与任务控制

    一.程序.进程.线程 1.程序是一个普通文件,是一系列指令和数据的集合,是一个静态的实体,是程序员写好之后存储于外设之上的代码.它是"死"的,而进程和程序都是"活&quo ...

  8. 用C#从数据库动态生成AdminLTE菜单的一种方法

    当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...

  9. VBA常用代码解析

    031 删除工作表中的空行 如果需要删除工作表中所有的空行,可以使用下面的代码. Sub DelBlankRow() DimrRow As Long DimLRow As Long Dimi As L ...

  10. Project server 2016 “没有为此项目配置网站”错误处理

    问题: 没有为此项目配置网站. There is no site configured for this project 解决办法: 依次点击设置>PWA设置>连接到sharepoint网 ...