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()语句实在让我捉襟见肘: 这还仅仅是角色 ...
随机推荐
- C#批量插入数据到Sqlserver中的四种方式
我的新书ASP.NET MVC企业级实战预计明年2月份出版,感谢大家关注! 本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的 ...
- MVC跨项目路由
我们在实际应用开发中,经常遇到多人共同开发维护同一个项目情况,所以不免会出现其中一个人代码出现bug质量问题导致整个项目就原地“爆炸”的惨状.在之前公司经常遇到某个人忘记更新(我就做个此事[" ...
- HttpClient相关
HTTPClient的主页是http://jakarta.apache.org/commons/httpclient/,你可以在这里得到关于HttpClient更加详细的信息 HttpClient入门 ...
- Android Studio多渠道打包
本文所讲述的多渠道打包是基于友盟统计实施的. 多渠道打包的步骤: 1.在AndroidManifest.xml里设置动态渠道变量 <meta-data android:name="UM ...
- Struts2初始(一)
1.过滤器:org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter位置:在struts2的核心包struts2-co ...
- (六)Spark-Eclipse开发环境WordCount-Java&Python版Spark
Spark-Eclipse开发环境WordCount 视频教程: 1.优酷 2.YouTube 安装eclipse 解压eclipse-jee-mars-2-win32-x86_64.zip Java ...
- [MySQL Reference Manual] 23 Performance Schema结构
23 MySQL Performance Schema 23 MySQL Performance Schema 23.1 性能框架快速启动 23.2 性能框架配置 23.2.1 性能框架编译时配置 2 ...
- java、easyui-combotree树形下拉选择框
最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...
- [Hadoop in Action] 第1章 Hadoop简介
编写可扩展.分布式的数据密集型程序和基础知识 理解Hadoop和MapReduce 编写和运行一个基本的MapReduce程序 1.什么是Hadoop Hadoop是一个开源的框架,可编写和运 ...
- Linux之od命令详解
功能说明:输出文件内容.语 法:od [-abcdfhilovx][-A <字码基数>][-j <字符数目>][-N <字符数目>][-s <字符串字符数&g ...