HTML5射击类游戏----【地球保卫战】
在线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射击类游戏----【地球保卫战】的更多相关文章
- 关于Unity中FPS第一人称射击类游戏制作(专题十)
当前Unity最新版本5.6.3f1,我使用的是5.5.1f1 场景搭建 1: 导入人物模型, 手持一把枪;2: 导入碎片模型;3: 创建一个平面;4: 创建一个障碍物;5: 导入人物模型;6: 配置 ...
- [安卓] 12、开源一个基于SurfaceView的飞行射击类小游戏
前言 这款安卓小游戏是基于SurfaceView的飞行射击类游戏,采用Java来写,没有采用游戏引擎,注释详细,条理比较清晰,适合初学者了解游戏状态转化自动机和一些继承与封装的技巧. 效果展示 ...
- Skytte:一款令人印象深刻的 HTML5 射击游戏
Skytte 是一款浏览器里的 2D 射击游戏.使用 Canvas 元素和大量的 JavaScript 代码实现.Skytte 是用我们的开源和现代的前端技术创造的.经典,快节奏的横向滚动射击游戏,探 ...
- 通通的最后一篇博客(附自制html5平面射击小游戏一枚)
这是我最后一篇博客了,由于本人的人生规划吧,以后应该也写不出什么好的技术文章了,到现在在博客园写了2年, 今天一看,我也有了120个粉丝,好几万的浏览量,感谢大家的支持啊~~ 半年没有写博客了,由于半 ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面
游戏主界面,同时也是主程序,包括sprite的生成加入以及游戏状态的控制. 下面同样贴下源码再讲解; /** * Power by html5中文网(html5china.com) * author: ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
Block可以说是这个游戏的核心类,它除了包含自身的一些属性和方法外还添加了对触摸事件的响应. 我们先来看下源码吧 /** * Power by html5中文网(html5china.com) * ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单
系统主菜单如下图所示: 首先,介绍下这个主菜单,它包含了一个动画logo以及一个按钮选项,动画logo每隔1秒钟切换一张图片,点击相应的按钮选项会切换不同的游戏场景. 下面看下这个界面的源码: /** ...
- HTML5 2D平台游戏开发#4状态机
在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...
随机推荐
- SQL Server 随机数,随机区间,随机抽取数据rand(),floor(),ceiling(),round(),newid()函数等
在查询分析器中执行:select rand(),可以看到结果会是类似于这样的随机小数:0.36361513486289558,像这样的小数在实际应用中用得不多,一般要取随机数都会取随机整数.那就看下面 ...
- WCF学习系列二---【WCF Interview Questions – Part 2 翻译系列】
http://www.topwcftutorials.net/2012/09/wcf-faqs-part2.html WCF Interview Questions – Part 2 This WCF ...
- 【转】Dubbo使用例子并且和Spring集成使用
一.编写客户端和服务器端共用接口类1.登录接口类public interface LoginService { public User login(String name, String psw ...
- html
有目标的学知识才行 要学习html语言,我突然发现我好像可以在markdown文本编辑器中编辑html标签,既然这样我就多玩玩.markdown完全兼容html,这真的是一个好事情.好像也有功能在ma ...
- JAVA 读写Excel
ExcelUtil.java package pers.kangxu.datautils.utils; import java.io.File; import java.io.FileInputStr ...
- [dedecms]后台不显示验证码
原因:某个加载文件的开始处有一个标点,去掉就可显示 // 文件地址 /include/vdimgck.php @session_start(); $_SESSION['securimage_code_ ...
- linux(六)__进程与任务控制
一.程序.进程.线程 1.程序是一个普通文件,是一系列指令和数据的集合,是一个静态的实体,是程序员写好之后存储于外设之上的代码.它是"死"的,而进程和程序都是"活&quo ...
- 用C#从数据库动态生成AdminLTE菜单的一种方法
当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...
- VBA常用代码解析
031 删除工作表中的空行 如果需要删除工作表中所有的空行,可以使用下面的代码. Sub DelBlankRow() DimrRow As Long DimLRow As Long Dimi As L ...
- Project server 2016 “没有为此项目配置网站”错误处理
问题: 没有为此项目配置网站. There is no site configured for this project 解决办法: 依次点击设置>PWA设置>连接到sharepoint网 ...