HTML5游戏实战(4): 20行代码实现FlappyBird
这个系列很久没有更新了。几个月前有位读者调侃说,能不能一行代码做一个游戏呢。呵呵,接下来一段时间,我天天都在想这个问题,怎么能让GameBuilder+CanTK进一步简化游戏的开发呢。经过几个月的努力,虽然还是做不到一行代码做一个游戏,但是GameBuilder的功能已经有了质的突破了。今天我们用FlappyBird为例介绍一下用GameBuilder +CanTK开发游戏的方法,整个游戏用了不到20行代码。
CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏和APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk
0.先Show一下最终成果:
在线运行:http://www.tangide.com/apprun.html?appid=previewupyundemo-651428115940100
在线编辑:http://www.tangide.com/gamebuilder.php?appid=previewupyundemo-651428115940100
1.打开CanTK的集成开发环境GameBuilder 并新建一个项目,取名FlappyBird。
2.删除场景中的球和地面,并给场景设置一张背景图片(登录后在共享资源中可以找到FlappyBird的资源文件)。
3.在场景放一个几何变换动画,设置相应的图片,再向几何变换动画中放一个帧动画,设置好它的位置和图片。在场景放一个图片用作帮助,再放一个图片用作开始按钮。效果如下:
4.现在我们来做Get Ready窗口,这个很简单,不再详细解释。效果如下:
5.终于到了真正游戏开始的地方了:新建一个场景,设置场景的背景图片,图片显示方式为水平平铺,设置场景的虚拟宽度为5000。向场景中放一个方块刚体,在刚体中放一个帧动画,用做FlappyBird这只鸟了,把刚体的水平初始速度设置为3米/秒,设置小鸟的“镜头跟随属性“。再放两个静态方块,用来表示上下的柱子,并设置相应的图片。
6.再放一个方块静态刚体。这是两根柱子之间的门,为了与柱子区别:取名为ui-door。因为玩家是看不见这个门的,把它设置为运行时不可见。因为它只感应鸟通过,而不会与鸟碰撞,把它设置成感应器。
(copy&paste两个柱子和门,生成后面的关卡。)
7.分数对话框同样很简单,不再详细解释。效果如下:
8.现在我们来做事件处理:
第一个窗口的按钮点击后,打开第二个窗口。
第二个窗口点击后,打开第三个窗口。
- 第三个窗口点击后,给小鸟一个向右上的速度。速度是矢量,这里X方向的速度向左为负,向右为正。Y方向的速度向上为负,向下为正。下面的代码可以用代码产生器产生。
this.getWindow().find("ui-bird").setV(3,-3);
- 小鸟的碰撞事件处理:撞到门分数加1,撞到柱子弹出分数对话框。
var win = this.getWindow();
if(body.element.name.indexOf("ui-door") < 0) {
win.stop();
var score = parseInt(win.getValueOf("ui-score"));
window.best = Math.max(window.best||0, score);
var initData = {score:score, best:window.best};
this.openWindow("dialog-confirm", function (retData) { win.replay();}, false, initData);
}
else {
win.find("ui-score").addValue(1);
}
- 再来看分数显示对话框的处理:
this.setValueOf("ui-score", initData.score);
this.setValueOf("ui-best", initData.best);
搞定了!很抱歉骗了你,没有20行代码。我们只用了14行代码,而且其中10行可以用代码产生器产生。用CanTK+GameBuilder做游戏不可思议的简单,熟练的话,相信2个小时可以轻轻松松的完成这个游戏。
有问题请加QQ群:223466431
HTML5游戏实战(4): 20行代码实现FlappyBird的更多相关文章
- HTML5游戏实战之20行代码实现打地鼠
之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或 ...
- 20 行代码极速为 App 加上聊天功能
现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + ...
- Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)
接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...
- HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- 代码优化实战,3行代码解决了一百个if else!
事情是这样的,前段时间做代码review的时候,发现项目中有一个方法代码量超鸡儿多,而且大部分都是写的参数校验的代码,得,我们先抓着缕一缕需求先. 产品需求 找到产品要到了需求文档,需求是这样得: e ...
- JS模版引擎[20行代码实现模版引擎读后感]
曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...
- 20 行代码:Serverless 架构下用 Python 轻松搞定图像分类和预测
作者 | 江昱 前言 图像分类是人工智能领域的一个热门话题.通俗解释就是,根据各自在图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法. 它利用计算机对图像进行定量分析,把图像或图像中 ...
- javascript写贪吃蛇游戏(20行代码!)
<!doctype html> <html> <body> <canvas id="can" width="400" ...
- 学会python可以上天!20行代码获取斗鱼平台房间数据,就是这么牛逼!
Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定.它包含了一组完善而且容易理 ...
随机推荐
- HTML 的 <div> 和 <span> 标签
这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...
- IOSView显示特性设置
一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...
- [SAP ABAP开发技术总结]Function远程、同步、异步调用
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 细说 Request[]与Request.Params[]
http://www.cnblogs.com/fish-li/archive/2011/12/06/2278463.html
- iOS - TouchID 指纹识别
前言 NS_CLASS_AVAILABLE(10_10, 8_0) @interface LAContext : NSObject 指纹识别功能是 iPhone 5s 推出的,SDK 是 iOS 8. ...
- Win7_刻录DVD
1.刻录 临时文件夹: 1.1.C:\Users\具体的用户名\AppData\Local\Microsoft\Windows\Burn 1.2.双击 插入刻录盘的光驱,直接将文件复制到 这里,实际上 ...
- [玲珑OJ1044] Quailty and Binary Operation (FFT+cdq分治)
题目链接 题意:给定两个长度为n的数组a与长度为m的数组b, 给定一个操作符op满足 x op y = x < y ? x+y : x-y. 有q个询问,每次给出询问c,问:有多少对(i, j ...
- elastic
学习链接 http://rfyiamcool.blog.51cto.com/1030776/1420811?utm_source=tuicool&utm_medium=referral
- poj2826An Easy Problem?!
链接 繁琐细节题. 1.线段无交点时,ans=0; 2.如图 假设过p3.y的水平线与p1p2相交 因为雨是垂直下落的,左图的情况是无法收集到雨水的,而这种情况有一种简便的判定方式 cross(p1- ...
- python仿微软记事本
# -*- coding=utf-8 -*- from tkinter import filedialog import tkinter as tk import tkinter.scrolledte ...