HTML5游戏开发
文章平均质量分 75
未来的web时代,是html5的时代,研究html5游戏引擎制作与游戏开发。
lufy
从事web开发和游戏开发多年,精通html5和flash等技术。html5开源游戏引擎lufylegend.js的开发者,著有HTML5 Canvas游戏开发实战一书,利用html5和flash等技术独立开发了大型网页游戏アイドルバトルflash游戏ポイガチャ多平台游戏三国记系列,以及数十款手机小游戏,游戏开发经验十分丰富。
展开
-
HTML5高级编程之像素处理及粒子效果
HTML5中的像素处理,需要用到getImageData和putImageData两个函数,先用getImageData复制canvas画布中的像素数据,然后对获取的像素数据进行处理,最后再通过putImageData将处理完的数据粘贴到canvas画布。我们不妨把中间处理像素的过程称作像素的批处理,由于像素的复制和粘贴是两个比较费时的过程,为了更高效的对像素进行处理,我们应该在一次批处理过程中尽原创 2014-03-10 06:33:00 · 19979 阅读 · 15 评论 -
HTML5各引擎显示效率比较
现在越来越多的人开始尝试使用HTML5开发,HTML5的引擎也逐渐增多,开发者到底应该选择一款什么样的引擎呢?这一次我来对比一下几个我个人认为还不错的引擎的效率。本次参加对比的引擎:1. createJS,2. cocos2d-HTML5,3. enchant.js,4. lufylegend.js原创 2014-02-09 14:15:37 · 36228 阅读 · 44 评论 -
HTML5开发中使用MVC模式
很多人一定会说,js开发根本不需要什么MVC,用了就是给自己找麻烦。在这里,我不去讨论需不需要的问题,只是我个人感觉这次的开发使用了MVC模式之后,代码各个模块确实一目了然,维护和扩展都相对方便了许多,很适合大中型的开发,当然对于小程序而言,也确实没有使用MVC的必要。现在我将这个框架公开,并在这里简单说明一下它的用法,这个框架是我在很短的时间内完成的,所以一定存在很多不完善的地方,如果你有更好的想法,也欢迎提出来一起讨论。原创 2013-11-27 07:41:49 · 16278 阅读 · 5 评论 -
HTML5超帅动画制作-LTweenLite的妙用
lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画。原创 2013-10-14 10:18:51 · 23813 阅读 · 22 评论 -
HTML5开源游戏引擎lufylegend1.8.0发布
lufylegend是一个HTML5开源引擎, 它实现了利用仿ActionScript3.0的语法进行HTML5的开发,包含了LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent等多个AS开发人员熟悉的类, 支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境。利用lufylegend可以轻松的使用面向对象编程,并且可以配合Box2dWeb制作物理游戏, 另外它还内置了LTween原创 2013-10-09 07:51:57 · 13211 阅读 · 64 评论 -
HTML5开发-在你的游戏应用中加入广告
在中国,一般都是不喜欢花钱的,如果你的游戏或者应用是需要付费的,那么玩的人就少。所以大多数开发者都会选择在游戏中植入广告,来获取些许微薄的收入。下面我来说说如何利用lufylegend.js开源引擎在游戏中加入广告。利用lufylegend.js引擎1.7.2版中的新功能LStageWebView,可以在html中加入一个iframe用来显示一个外部页面,我们可以利用这个功能来显示广告。lufyl原创 2013-04-23 08:19:12 · 15946 阅读 · 13 评论 -
画出自己的UI组件
HTML5开源引擎lufylegend-1.7.1版的下载包内包含了lufylegend.ui-0.1.0.js文件,它是一个lufylegend.js引擎的专用UI组件,我在api的介绍里也说了,这个UI组件是专门为懒人准备的,包含按钮,单选框,多选框,组合框,滚动条等UI。下面我来具体说一说这些UI的绘制过程,也方便大家更好的理解和扩展新的UI组件。1,矩形按钮LButtonSample1首先原创 2013-04-10 10:10:07 · 13642 阅读 · 17 评论 -
HTML5开源游戏引擎lufylegend1.7.1发布
HTML5开源引擎lufylegend1.7.1版发布,下载包内含开发示例近30个,已分享至github。lufylegend.js引擎官网http://lufylegend.com/lufylegendlufylegend.js引擎在线API文档链接http://lufylegend.com/lufylegend/api一,1.7.1版更新内容1,修改了ie10中LURLLoader读取js的b原创 2013-04-10 07:08:45 · 8935 阅读 · 28 评论 -
抽出1个小时制作一款简单的物理小游戏(绳子原理)
前天公司聚会,在一起玩游戏,游戏虽然及其简单,但是却很适合在活动中玩,因为公司参加聚会的人比较多,所以只有一部分人玩到了。晚上回家后我试着将其中一款游戏用html5还原了一下,第二天给大家玩儿,在公司的人气爆火,尤其女生,边玩边叫,“おもしろい!!”,“難しい!!”...。一般大家看到女生喜欢,肯定急切想知道是什么游戏吧?游戏界面如下。看到游戏界面后,估计有几个人已经摔倒在地了吧,就是一个及其简单原创 2013-04-04 11:34:06 · 22505 阅读 · 39 评论 -
用HTML5来开发一款android本地化App游戏-宝石碰碰
本次来说一说如何利用lufylegend.js引擎制作一款HTML5游戏后,将其转换为android本地化的App应用,转换过程其实很简单,下面一步步来做说明。首先来开发一个类似于对对碰的游戏,不过此游戏玩法为在下原创,如有雷同,纯属巧合,游戏界面如下。游戏操作:上下左右划动屏幕,来操作宝石向不同的方向移动。游戏规则:当有三个一样的宝石相邻则消除,被消除过一次的宝石会变成半透明,当所有宝石都被消除原创 2013-03-27 08:03:33 · 36746 阅读 · 61 评论 -
HTML5开源游戏引擎lufylegend1.7.0发布
lufylegend1.7.0版发布,下载包内含开发示例已经增加到20多个,为了更方便操作游戏中的声音等,加入了音频和视频操作,另外更新了API文档。lufylegend.js引擎的下载链接http://lufylegend.com/lufylegendlufylegend.js引擎在线API文档链接http://lufylegend.com/lufylegend/api一,1.7.0版更新内容1原创 2013-03-26 00:27:14 · 15324 阅读 · 10 评论 -
[html5游戏开发]数独游戏-完整算法-开源讲座
开言:本次讲一下数独游戏的开发,数独游戏是一个填数字的游戏,在一个9x9的方格内,这个9x9的大格子又可以分为9个3x3的小的九宫格,在这些格子内填写上1至9的数字,使得每一行,每一列,并且每个小的九宫格内的数字都不重复,游戏玩法简单,数字组合千变万化,所以玩起来特别有意思。在中国数独游戏似乎没那么流行,但是在日本这个游戏非常受欢迎,在通勤的电车上,经常能看到一些人一个手拿着一本数独游戏的书,另一原创 2013-03-10 07:43:49 · 24493 阅读 · 31 评论 -
[HTML5游戏开发]挑战横版ACT(三):遇红颜英雄亦多情
本篇是该系列文章第三篇,其他文章请看下面帖子中的目录http://blog.csdn.net/lufy_legend/article/details/8441677开篇啰嗦本系列教程,是我首次采用调侃式开发,文中大多数内容都是口水,大家直接空干了读就行了,谨防被淹。进行该类型开发的第一个瓶颈,就是素材了,在此多谢网友yorhomwang提供了大量素材网址。下面是本次开发的成果,大家先预览一下。素材原创 2013-03-04 11:31:19 · 11187 阅读 · 8 评论 -
[html5游戏开发]经典的推箱子
开言:lufylegend.js引擎已经更新到1.6以上了,虽然我陆陆续续发布了一些教程,也提供了一些简单的游戏示例,但是一直以来也没有制作几款完整的作品来,实在也是自己一个人时间太有限了,接下来的时间,我会尽可能的使用lufylegend.js引擎开发几款完整的作品,来增加一下这个引擎的说服力,希望喜欢html5,喜欢游戏开发的朋友多提些意见。这一次先来看一个经典的推箱子游戏,相信大家也都知道这原创 2013-02-25 07:20:22 · 24542 阅读 · 34 评论 -
HTML5开源游戏引擎lufylegend1.6.0发布
lufylegend1.6.0版终于发布了,加入了自适应屏幕和滤镜等新功能,更新了API文档,新版本的API文档更方便查询。lufylegend.js引擎的下载链接http://lufylegend.com/lufylegendlufylegend.js引擎在线API文档链接http://lufylegend.com/lufylegend/api一,1.6.0版更新内容1,修改了Firefox浏览原创 2013-02-20 12:23:55 · 9223 阅读 · 16 评论 -
[HTML5游戏开发]挑战横版ACT(二):秀身手勇猛如当年
本篇是该系列文章第二篇,其他文章请看下面帖子中的目录http://blog.csdn.net/lufy_legend/article/details/8441677话说突然想起来黄忠黄老将军被我仍在漆黑的战场上已经有一段时日了,没吃没喝的,不知道怎么样了。等我来到战场上一看,才发现这个担心是多余的,老将军依然精神抖擞的在原地活蹦乱跳,嘴里不停的喊着,“别想困住老夫,老夫已经死过一回了”。看着老将军原创 2013-01-07 12:31:01 · 14035 阅读 · 28 评论 -
[HTML5游戏开发]挑战横版ACT(一):开天地黄忠初登场
鄙人虽然不是专职的游戏开发者,但是自己也尝试着开发过各种各样类型的游戏,不过横版类游戏还没有尝试过,本次就使用lufylegend引擎来挑战一下横版ACT类游戏的开发,大家可以到http://lufylegend.com/lufylegend下载lufylegend引擎的最新版本,由于鄙人也是第一次开发此类游戏,所以有不妥的地方,欢迎大家回帖探讨和指正。该系列文章目录(更新中)(一):开天地黄忠初原创 2012-12-27 07:22:33 · 9119 阅读 · 17 评论 -
[代码艺术]17行代码的贪吃蛇小游戏
一个贪吃蛇小游戏javascrpt有效代码17行加上html代码的话,共25行运行方法chrome或者firefox测试连接http://lufylegend.com/html5/lufylegend/tcs.html完整代码如下Your browser does not support the HTML5 canvas tag.var ctx=document.getElementBy原创 2012-11-28 11:07:00 · 24097 阅读 · 102 评论 -
HTML5高级编程之图形扭曲及其应用三(扩展篇)
本篇是该系列文章第三篇,前两篇介绍了在html5中实现图片扭曲效果的原理,以及drawtriangles函数的详细用法,连接如下HTML5高级编程之图形扭曲及其应用一(原理篇)http://blog.csdn.net/lufy_legend/article/details/8084367HTML5高级编程之图形扭曲及其应用二(应用篇)http://blog.csdn.net/lufy_legend原创 2012-11-27 12:58:24 · 9809 阅读 · 15 评论 -
HTML5高级编程之图形扭曲及其应用二(运用篇)
上次介绍了在html5中实现图片扭曲效果的原理,并扩展成了drawtriangles函数,下面是上文连接HTML5高级编程之图形扭曲及其应用一(原理篇)http://blog.csdn.net/lufy_legend/article/details/8084367下面来详细讲解一下drawtriangles函数的使用方法。并且使用drawtriangles函数实现下面这种处理效果因为这个方法是从A原创 2012-10-26 08:07:56 · 14535 阅读 · 27 评论 -
HTML5高级编程之图形扭曲及其应用一(原理篇)
HTML5中的几种变形HTML5中的变形,共有以下几种方法scale() 缩放rotate() 旋转translate() 平移transform() 矩阵变形setTransform() 重设矩阵这几个方法,对图片一共能完成下面几种处理但是,如果要实现下面这种不规则的变形,就不行了那咱们一步步,先来看HTML5的这几个方法。1,缩放方法如下var c=document.getEleme原创 2012-10-18 10:25:26 · 16852 阅读 · 16 评论 -
HTML5开源游戏引擎lufylegend1.5.0发布
说明lufylegend1.5.0版终于发布了,本来打算再完善一下才发布的,但是最近实在太忙了,1.5.0版拖了又拖,所以决定先发布,等继续完善后再发布1.5.1版,API也相对完善了一下,并加入到了下载包中,原谅偶复制粘贴......lufylegend.js库件的下载及在线API文档请点击下面链接http://lufylegend.com/lufylegend一,1.5.0版更新内容1,将1.原创 2012-10-10 12:25:05 · 19620 阅读 · 53 评论 -
html5游戏开发-愤怒的小鸟-开源讲座(三)-碰撞产生的冲力
在前面已经实现了利用外力将小鸟弹飞出去,并且实现了镜头的跟随。本次来研究一下小鸟与其他物体之间发生碰撞时的冲力,以及由碰撞而使物体发生变形,进而消失,下面是前两讲的链接,看本篇教程之前请朋友们最好先了解一下。html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟http://blog.csdn.net/lufy_legend/article/details/7765599html5游戏开发原创 2012-07-31 07:40:01 · 22658 阅读 · 74 评论 -
html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
上一讲中介绍了如何让小鸟旋转跳上弹弓,以及利用外部力使小鸟弹飞出去,但是如果不做任何处理的话,小鸟就这么直冲冲的飞出屏幕了,本次我们就要让镜头时刻跟随小鸟来移动。下面是上一讲的连接,没有看过上一讲的朋友们请先了解一下。html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟http://blog.csdn.net/lufy_legend/article/details/7765599关于如何原创 2012-07-25 08:27:41 · 16532 阅读 · 27 评论 -
html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。准备工作一首先,你需要下载lufylegend库件1.4.1版http://blog.csdn.net/lufy_legend/article/details/7751425box2dweb你可以到这里下载http://code.google.com/p原创 2012-07-23 10:27:16 · 34939 阅读 · 93 评论 -
HTML5游戏开发开源库件lufylegend1.4.1发布
lufylegend.js库件的下载及API文档请点击下面链接http://lufylegend.com/lufylegend一,1.4.1版更新内容1,修正了一些低级bug2,增加了hitTest方法,用于检测矩形碰撞3,增加了hitTestArc方法,用于检测圆形碰撞4,为ie浏览器增加了Array.prototype.indexOf方法5,增加了LRectangle矩形类6,增加了LQuad原创 2012-07-16 15:35:33 · 13841 阅读 · 20 评论 -
HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接
上次介绍了用box2dweb创建各种刚体,这次来介绍如何用鼠标拖拽刚体,刚体之间的碰撞,以及刚体之间的各种连接。HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体http://blog.csdn.net/lufy_legend/article/details/7654607一,鼠标拖拽刚体使用lufylegend.js库件后,拖拽刚体变得很简单,只需调用LSprite的setBod原创 2012-06-18 12:09:01 · 10508 阅读 · 36 评论 -
【用HTML5来玩读心术】游戏很简单,但是挺有意思,分享给大家
“吉普赛人祖传的神奇读心术.它能测算出你的内心感应”,任意选择一个两位数(或者说,从10~99之间任意选择一个数),把这个数的十位与个位相加,再把任意选择的数减去这个和。例如:你选的数是23,然后2+3=5,然后23-5=18,在图表中找出与最后得出的数所相应的图形,并把这个图形牢记心中,然后点击水晶球。你会发现,水晶球所显示出来的图形就是你刚刚心里记下的那个图形:http://lufy.netn原创 2012-06-15 14:44:25 · 7781 阅读 · 9 评论 -
HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体
本篇开始,会介绍lufylegend-1.4.0的新功能,怎样结合box2dweb创建一个物理世界以及这个物理世界里的各种刚体准备工作首先你需要下载html5开源库件lufylegend-1.4.0http://blog.csdn.net/lufy_legend/article/details/7644932box2dweb你可以到这里下载http://code.google.com/p/box2原创 2012-06-13 00:30:57 · 26208 阅读 · 25 评论 -
【HTML5】3D模型--百行代码实现旋转立体魔方
最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。下面是测试链接和预览画面。http://lufy.netne.net/lufylegend-js/lufylegend-1.4/Rubik/index.html制作流程首先你需要下载html5开源库件lufylegend-1.4.0http://blog.csdn.n原创 2012-06-12 01:42:35 · 36782 阅读 · 26 评论 -
HTML5游戏开发开源库件lufylegend1.4.0发布,新增物理引擎Box2dWeb封装和缓动类TweenLite
一,lufylegend.js是什么?lufylegend是一个HTML5开源引擎, 它实现了利用仿ActionScript3.0的语法进行HTML5的开发,包含了LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent等多个AS开发人员熟悉的类, 支持Google Chrome,Firefox,Opera,IE9,IOS,A原创 2012-06-08 12:53:05 · 14541 阅读 · 8 评论 -
HTML5游戏开发开源库件lufylegend1.3.1发布
这次更新,其实也没加什么太多的内容,主要是为了方便使用,将库件重新封装成了一个文件,大家使用时只需要把lufylegend.js文件引入即可。一,lufylegend.js是什么?lufylegend.js是个javascript库,它的前身是LegendForHtml5Programming,名字太长所以改了,它模仿了ActionScript的语法,包含了LSprite,LBitmapData,原创 2012-04-10 12:05:40 · 12399 阅读 · 19 评论 -
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转
首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东东。html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://blog.csdn.net/lufy_legend/article/details/7063316html5游戏开发-零基础开原创 2012-01-22 03:50:00 · 16917 阅读 · 30 评论 -
html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下想要了解前两篇内容,请电击下面的链接html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://blog.csdn.net/lufy_legend/article/details/7063316html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄http://blog原创 2011-12-23 01:45:05 · 24152 阅读 · 29 评论 -
html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
上一篇中,已经详细讲解了,如何添加地图,以及添加了一个游戏人物,现在我们来添加控制事件,让这个小英雄走动起来了解上一篇内容请看这里html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://blog.csdn.net/lufy_legend/article/details/7063316我们已经给游戏人物建立了一个Character类,现在先来在类里加入Character.prototy原创 2011-12-16 10:25:59 · 12527 阅读 · 9 评论 -
html5游戏开发-零基础开发RPG游戏-开源讲座(一)
因为上一篇雷电的开发中,有朋友反应不太理解,本篇将以零基础的视点,来讲解如何开发一款RPG游戏。在游戏的世界里,我们可以看到各种地图,各种游戏人物,看到人物在地图上行走,对话等,无论是地图还是人物,其实都是图片的处理与显示,把不同的图片显示到屏幕上,我们就看到不同的游戏界面,要想让这些图片同时显示到界面上,我们就需要处理好层次,让他们来分层显示,我们可以想象,如果游戏人物显示在地图的下层的话,显然原创 2011-12-13 13:49:21 · 45408 阅读 · 90 评论 -
html5游戏开发-弹幕+仿雷电小游戏demo
本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。本篇文章详细讲解如何用html5来开发一款射击游戏,雷电可以说是射击游戏中的经典,下面就来模仿一下。先看一下游戏截图演示地址http://fsanguo.comoj.com/html5/barrage2/index.html游戏开发,需要用到开源引擎:lufylegend.jslufylegend.js引擎下载地址http:原创 2011-12-01 14:03:29 · 22514 阅读 · 37 评论 -
html5游戏开发-简单老虎机
本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。使用开源引擎:lufylegend.js,lufylegend.js引擎包内包含这个demo,请直接下载lufylegend.js引擎,查看引擎包内源码lufylegend.js引擎下载地址http://lufylegend.com/lufylegend游戏截图游戏测试地址http://fsanguo.comoj.com/h原创 2011-11-29 08:44:02 · 35107 阅读 · 19 评论 -
用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为旧版,库件1.4.1版已经发布http://blog.csdn.net/lufy_legend/article/details/7751425一,LegendForHtml5Programming1.原创 2011-10-05 11:21:40 · 14813 阅读 · 9 评论 -
用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
第九篇,仿URLLoader读取文件先看看最后的代码function readFile(){ urlloader = new LURLLoader(); urlloader.addEventListener(LEvent.COMPLETE,readFileOk);原创 2011-09-26 21:39:43 · 5663 阅读 · 8 评论