【1KE CTO】2个小时学会用 HTML5 制作Flappy Bird
Html5
lilu
50人收藏 10730次学习

【1KE CTO】2个小时学会用 HTML5 制作Flappy Bird

真的只要2个小时,零基础教学,信不信由你!

3月13日首发开课,尽请关注

这是老师今天做的Demo 

http://1ke.co/files/course/02/demo/index.html

同学们点开链接先玩一玩, 目前支持在电脑上玩哦。

 

玩玩这堂课的成品Flappy Bird游戏

通过这节课我将带领大家做一个HTML5版的Flappy Bird游戏

游戏地址:http://1ke.co/files/course/02/demo/index.html

大家先感受一下

 

 

下载并安装文本编辑器brackets

请到官方网站下载  http://brackets.io/

下载到本地电脑后点击安装,一路Next 

安装完成后 打开程序随便玩玩

建议大家看看百度上的教程系统的学习一下下载安装和使用的全过程 http://jingyan.baidu.com/article/d2b1d1027217dc5c7e37d4cf.html

 

什么是HTML5 (选修)

听不明白的同学请参考下列翻译

 

如果你最近经常在网上聊天,你可能已经听说了一个术语 HTML5.
那么,HTML是什么意思呢?
HTML代表  Hyper,Text,Markup,Language  (超文本标记语言),算了别理这个。
HTML那种隐藏在背后的编程语言,它可以让东西在网页上呈现(比如你可以看到这张图片)。
HTML早在20多年前被发明,之后经历了很多次升级。但最后一次升级(HTML4)还是在十多年前,
那些网页术语看起来一直没怎么变过,我的意思是还停留在十多年前,那个我们喜欢电子表的时代。(男声:哇,计算器)
所以在相当长的一段时期HTML其实落后于互联网的发展的。
举个例子,当视频出现的时候,HTML里面并没有相应的视频代整合进来。
所以不同的公司就开发了他们自己的视频播放器 (QuickTime, RealPlayer,Windows Media Player,FLASH),
这些都能在网页上播放,但是需要用户下载额外的插件来播放。这个下载的过程很烦,也存在潜在的安全风险。
HTML5拓展了一些代码能力范围,比如通过添加这些代码(video标签)就能播放视频,从此不再需要播放插件就能直接播放。
HTML5计划添加了更酷的玩意,(video,audio,vecotr graphics & animation,drag and drop,editable web page content,storage within the browser,lots mor geeky stuff...),之前要在网页上实现这些玩意很难甚至不可能仅仅通过html单独实现。
HTML5希望有一天建立一种标准使得网页在各种设备,各种浏览器上显示一致 。
HTML5现在还处在发展阶段,截止到2012年上半年,并非100%的特性都已开发完成。
但是各方浏览器已经开始开始支持某些HTML5的特性。这些浏览器厂商在在一起很努力的推动这个整合进程,可能在不远的将来HTML5的全部特性都将被实现。

 

用HTML5制作游戏是什么意思 (选修)

上一节我们了解了什么是HTML5, 似乎包含了很多东西 HTML新标签,CSS的新属性,JS的新效果

那么本节讲的用HTML5做Flappy Bird主要是使用了HTML5的Canvas.

这里请同学们自学HTML5的Canvas特性 http://wenku.baidu.com/view/1a51349df524ccbff1218481.html

更多的阅读材料 http://wenku.baidu.com/link?url=qvi75msqvq1Y-COCwOZbwqmiMoaS2is4U9TzJgnmjm-0UZqRrc035l61ulyhX2URYK3lpkMYH6v3NvRw17DBozh1VbCK9ACAw4MiZ8_IaVS

 

认识代码骨架

在画布上增加小鸟和跳跃动作

添加障碍物管道

口误:第10分钟,循环体循环8次 从0到7

添加碰撞规则

优化飞翔效果让撞墙更逼真

添加声效 大功告成

深入学习 phaser框架

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

向牛人学习 优化你的作品

http://eisneim.com/project/flappy/

答疑时间

有任何不明白的地方可以在我们的讨论区提问,老师讲一一解答。

把你的作品交给1KE,免费帮你发布

请将你的作品发送到lilu@1ke.co ,并告知你在网站上的用户名,我们将免费为你开通网站展示你的作品。

其他同学作品:http://vicky.1ke.co

安装Python、pip、virtualenv

此处内容需登录后浏览

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
课程交流
lilu
2015-05-14

谢谢 @不二 的鼓励 :)

不二
2015-05-13

老师讲得好有意思,加油