HTML5

玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。

在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径。

这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持。

玩转 html5 (一) --- 盘点 html5 新增的那些酷酷的 input 类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性。

这些代码是在猎豹浏览器下实现的。

html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color

email:提交时会自动验证输入的内容是否满足格式

cocos2d-html5 简易 下拉表单 控件

刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示很伤心啊  ,于是乎  自己写一个把 共享给大家。

效果图上一个  只实现了一个最最基本的控件  很简单  别吐槽啊,以后有空我会完善一下的,如果有朋友自愿帮忙完善一下就更好了。

有任何问题请加DZ老师的QQ 460418221

 

引擎版本 : 2.2.2

 

原理:有空再写吧  

 

源码:

 

 

HTML5 高级编程之像素处理及粒子效果

HTML5中的像素处理,需要用到getImageData和putImageData两个函数,先用getImageData复制canvas画布中的像素数据,然后对获取的像素数据进行处理,最后再通过putImageData将处理完的数据粘贴到canvas画布。我们不妨把中间处理像素的过程称作像素的批处理,由于像素的复制和粘贴是两个比较费时的过程,为了更高效的对像素进行处理,我们应该在一次批处理过程中尽可能处理更多的像素数据,来减少像素的复制和粘贴这两个操作。

这听起来似乎是一个相当麻烦的过程,可能有些朋友光是看到上面的几句话估计就已经开始不耐烦了,其实我也是这么认为的,所以我把这一麻烦的过程封装到了lufylegend引擎中的LBitmapData类中,你可以像处理flash的像素一样处理HTML5中的canvas,这听起来是不是很有趣?如果你有兴趣,那么请跟着我一起来看一下这个好玩儿的小功能。

《游戏脚本的设计与开发》--- 队员列表和人物属性

本节主要是为接下来进入战场做准备,要做战斗画面,必须有参战的队员,所以就需要有队员列表,有了队员列表,那么为了确认每个队员的战斗力防御力等,则需要有人物属性的显示,本次主要来介绍一下队员列表以及人物属性的显示。

先看一下效果预览:

队员列表的作用就是保存我方能够参战的人员的信息,简单来说一个数组就可以完成。但是我们需要考虑,这个数组里需要保存哪些信息,对于早期简单的RPG游戏来说,比如《勇者斗恶龙》,《吞食天地》等,每个人的相应等级的能力是固定的,所以对于这些游戏来说,只需要保存人物的ID和等级就足够了。但是现在游戏都讲究多样化,如果还这样做,恐怕就该被吐槽了。当然,不怕被拍砖的话,你可以说,我们是资深的剧情派,只要剧情好,其他的都是浮云。我的脑袋已经是扁的了,不能再被拍了,所以我希望这个功能可以相对的容易扩展一些,能够满足我后面的一系列的功能。说的貌似挺深奥的,其实就是装一下,我的想法其实很简单,就是把每个队员的信息放到一个类中,这个类中除了有人物的基本信息(等级,HP,武力等),还可以有人物的装备,还可以有人物的状态,还可以有根据外部条件计算临时能力的功能等等。

6个最好的 HTML5/CSS3 演示(PPT)框架

HTML 是全世界最流行的网页编程语言。而HTML5是这门语言的升级版本。越来越多的开发者和设计师开始使用HTML5.下面介绍几个 HTML5/CSS3 的演示工具和框架,你可以用它们来创建你的网页PPT。这样只要浏览器兼容,不必再考虑office版本问题了。而且干净整洁,这样的ppt个人认为汇报和演示都是比较好的。

1. html5 Slides
这是 Google 提供的 HTML5 幻灯片模板。你可以下载这个模板,然后编辑它,就可以创建你自己的幻灯片了。

《游戏脚本的设计与开发》- 游戏背包和任务系统

本节重点来讲一下背包系统,以及简单的先来认识一下任务系统。

先看一下背包系统的效果预览:

背包系统在游戏中是必不可少的,在游戏中,所有获得的物品都会储存在背包里面。背包的种类,我一般将它分成两大类,一种是类似于《吞食天地》的“个人背包”,在游戏中每个人物都有一个背包,每个人的背包都互不影响,并且每个人只能使用自己背包中的物品。另一种是“集体背包”,游戏中所有己方的人物都共用一个背包,大多数游戏都采用这种形势。下面我们就来实现一下“集体背包”。

我们先来做一个按钮,用来打开游戏菜单,按钮的添加很简单,界面如下。

根据我制作《三国记》的经验,游戏菜单的UI需要注意的是,按钮要尽量大一些,否则在手机上就很难被点到。先来创建游戏菜单的相关文件。

控制器MenuController,模型MenuModel和视图MenuView。

用 HTML5 来开发一款 Android 本地化 App 游戏 --- 宝石碰碰

本次来说一说如何利用lufylegend.js引擎制作一款HTML5游戏后,将其转换为android本地化的App应用,转换过程其实很简单,下面一步步来做说明。

首先来开发一个类似于对对碰的游戏,不过此游戏玩法为在下原创,如有雷同,纯属巧合,游戏界面如下

游戏操作:上下左右划动屏幕,来操作宝石向不同的方向移动。

游戏规则:当有三个一样的宝石相邻则消除,被消除过一次的宝石会变成半透明,当所有宝石都被消除一次后,则进入下一关。

游戏测试连接:

http://lufylegend.com/demo/GemGem

制作开始

[HTML5游戏开发] 简单的《找不同汉字版》,来考考你的眼力吧

本文首发自我的csdn博客:http://blog.csdn.net/yorhomwang/article/details/8627830

一,准备工作

本次游戏开发需要用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(现在最新的版本是1.6.0)。

引擎下载的位置:http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar

Paged App in Android Bugs

I have a basic paged informational app with a simple appearance. In iOS the top header is blue with white text and a white body with black text. But in the Android emulator the header comes up black and no text is visible (header or body). Also, on the main page the name of the app is in the header and each of the subsequent pages the header changes to the title of the page. This works in the emulator on iOS but on Android the name of the app appears only on the subsequent pages, not even on the main page.

订阅 HTML5