带你使用h5开发移动端小游戏

带你使用h5开发移动端小游戏

JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为简单的小游戏,在JY官网也写了很多的小游戏demo,但后来由于工作的缘因,一直没太去维护他,真是一转眼,已经是移动互联网的时代了,5年后的今天,有了重新构思JY框架的冲动,于是全新的JY2.0开始构建了。它将只适用于h5的移动端游戏开发,它将更多的去关注更复杂的js游戏,不在局限于红白机时代。

在使用JY1时,我做了一个塔防的h5游戏,它做得有点像《保卫萝卜》,当然它只是个原型,如下图所示,它的演示地址是h5塔防游戏

它的设计是canvas加上div混合的一种形式,这也就是JY2.0的起步,在一个游戏中,我们通常会划分三层结构:

  1. 第一层,view,是游戏的核心部分,整个动画的显示;
  2. 第二层,control操作层,这一层是用来响应用户的输入的;
  3. 第三层,model数据层,是显示当前用户的相关信息的,比如等级、血条等。

方便记忆,你可以理解成mvc,当然实际上是没有半毛线关系的。 这个是JY1.x版本的玩法,如果有兴趣的可以去github上把代码down下来看下。在JY2里,我把canvas做得更简单了,所有的游戏元素都继承Sprite类,我把整个JY库初步划分成了10个类:

  • index.ts 主入口类, class JY
  • iScreen.ts 窗口接口类, interface IScreen
  • sprite.ts 游戏精灵 class Sprite
  • writeText.ts 文本控制 class WriteText
  • control.ts 控制器,IScreen的实现  class Control implements IScreen
  • stage.ts 游戏舞台,同上
  • descrition 欢迎界面,同上
  • title.ts 开始界面,同上
  • gameOver.ts 游戏结束界面,同上
  • score.ts 积分界面,同上

可能会有人产生疑问,这是js么,怎么有class和interface啊,为了增加js的语法,所以我是用typescript来编写的,typescript是一类更像c#的js实现,比es6更完善吧,特别是有强类型。

有了这些后,我们就可以开始构建一款纯h5的游戏了,由于时间原因,我就先把游戏的截图放出来吧!

游戏已经集成进app中,可以通过https://beta.bugly.qq.com/jsc7下载,或者http://www.lovewebgames.com/app/bigeatsmall/bigeatsmall.apk 和ios越狱版http://www.lovewebgames.com/app/bigeatsmall/bigeatsmall.ipa

这个游戏是使用html和js集成进app中的混合app,它有点像吞食蛇大作战和球球大作战。未完待续吧,记住关注我的js游戏框架JY

时间: 2024-11-05 18:51:30

带你使用h5开发移动端小游戏的相关文章

javascrpit开发连连看记录-小游戏

工作之余,总想做点什么有意思的东西.但是苦于不知道做什么,也就一直没有什么动作.在一个午饭后,跟@jedmeng和@墨尘聊天过程中,发现可以写一些小东西来练练手,有以下几点好处: 1. 加强巩固前端相关知识 2. 可以用一些平时项目中想用但没用的新东西 3. 一块儿做相同的东西,可以分享各自不同的想法 先来一张效果图,也可以来这里玩玩~      接下来就介绍一下做这个小游戏,自己的一些步骤和思路: 首先就是熟悉连连看的规则,为此还专门下载了一个app感受了一下,规则简单的说就是:找到两个相同的

一款JavaScript开发的扫雷小游戏

<style><!-- #FLM_main { margin:50px auto; padding:20px; background:#EEE; zoom:1; width:650px; } #FLM_main table { border-collapse:collapse; background:#EEE; float:left; } #FLM_main table td { border:1px solid #CCC; font-size:20px; width:38px; hei

DirectX游戏开发——从一个小游戏开始

本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/26364129 写在前面:自己对DirectX挺感兴趣的,加上自己目前在研究3D重建方面的东西,所以利用课余时间学习一下.看了一段时间的书,感觉还是靠动手编写一些小例子来学习,进步的更快体会的更深.所以从我自己写的一个小游戏开始吧,把自己学习心得和自己的一些想法写下来.更是欢迎有兴趣的童鞋来和我交流. 首先:先把我的小例子分享

Python开发接水果小游戏

我研发的Python游戏引擎Pylash已经更新到1.4了.现在我们就来使用它完成一个极其简单的小游戏:接水果.以下是游戏截图: 游戏操作说明:点击屏幕左右两边或者使用键盘方向键控制人物移动,使人物与水果接触得分,碰到非水果的物品,如碎玻璃,就会game over. 接下来是详尽的开发过程,篇幅较长,请看官耐心阅读. Pylash项目地址 由于本次开发用到了pylash,大家可以先去Github上对引擎进行了解. https://github.com/yuehaowang/pylash_engi

基于cocos2d开发的android小游戏——採花仙

/*cocos 2d 已经成为了如今移动端游戏开发的强有力的工具,眼下主流游戏中多採用cocos 2d游戏引擎. 我也尝试了一下该引擎.我是用的是cocos2d-android,以后要移植到Cocos2d-x上.废话不多说,代码例如以下.*/ watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFwcHlub29t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/South

【娱乐】高端小游戏Manufactoria

Manufactoria 是一款游戏.游戏中,一家生产机器人的工厂内部出了一 些问题,生产出来的机器人有很多不合格的.一个机器人可以用一个含有红色和 蓝色的颜色串来描述,只有颜色串符合某种规律的机器人才是合格的. 颜色串可 以为空.你要利用已有部件在一个厂房中设计一套系统,来识别机器人是否合格 网络上的下载链接都很鬼畜 这是我的云盘分享下载链接:http://pan.baidu.com/s/1jHKOPQu 推荐使用浏览器打开   游戏场景 上面那个圆是输入节点,最下面一行是输出结果 1.比较节

使用Laya引擎开发微信小游戏(上)

本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现了越来越多的以小游戏作为载体运营的活动类型,比如游戏预约,抢先试完等等,都收到了非常良好的效果. 在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一下

最近微信上很火的小游戏【壹秒】android版——开发分享

最近在朋友圈,朋友转了一个html小游戏[壹秒],游戏的规则是:用户按住按钮然后释放,看谁能精准地保持一秒的时间.^_^刚好刚才在linux服务器上调试程序的时候服务器挂了,腾出点时间分享下前天自己做的这个小游戏. 话不多说,直接上图:     呐,作为一个对android无比热爱的小伙伴,腾出一个小小时间做一个小小的小游戏,也不失为一种享受哈.整个游戏比较简单,主要分为UI设计与开发和时间计算逻辑.当然,这个小游戏界面要做得漂亮点,所以我侧重讲下UI设计与开发. UI设计与开发 采用Relat

微信为什么要搞一个小游戏?

众厂关于 H5 游戏市场的争夺,自 2014 年以来,一直就没有停止过.但一直也没有尘埃落定,最终花落谁家,鹿死谁手现在还不好讲.微信推出小程序,继而推出小游戏,只是腾讯数年来在 H5 市场企业战略的一环. 微信为什么要自定义一套技术,起名为小程序?明明就是原来的 H5 技术,为什么 CSS 不叫 CSS,叫 WXSS:为什么 HTML 不叫 HTML,叫 WXML:为什么明明有 JS.TS,还要自主研发一个 WXS,并且声称"WXS 与 JS 是不同的语言,有自己的语法,并不和 JS 一致&q