HTML5游戏实战 1 50行代码实现正面跑酷游戏
前段时间看到一个“熊来了”的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法。
CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏或者APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk
Gamebuilder是一个在线开发HTML游戏或者APP的集成开发环境,目标是让开发游戏和玩游戏一样简单和有趣。
0.先Show一下最终成果:
在线运行:http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375
在线编辑:http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375
1,先新建一个项目,删除场景里的球和地面,然后设置场景的物理引擎参数,把X/Y方向的重力设置为0。
2,再向场景中放入一个帧动画控件,用作游戏的背景。
设置它的图像显示方式为“缩放”:
设置它的宽度和高度属性为“填充父控件”:
给它指定一组图片:
得到下面的效果图:
3,再向场景中放入一个帧动画控件,用来显示榛子。
给它指定一组图片,并设置其名称和帧率等属性:
启用它的物理引擎:
4,再向场景中放入一个帧动画控件,用来显示石头。
给它指定一组图片,并设置其名称和帧率等属性:
启用它的物理引擎:
5,再向场景中放入一个帧动画控件,用来显示熊。
给它指定一组图片,并设置其名称和帧率等属性:
启用它的物理引擎:
6,再向场景中放入一个帧动画控件,用来显示人。
给它指定一组图片,并设置其名称和帧率等属性:
启用它的物理引擎:
7,再向场景中放入一个图片文字控件,用来显示总分数。
8,再向场景中放入一个图片文字控件,用来显示单次分数。
9,界面构建完成了,效果如下:
现在我们来写代码:
在场景的onOpen事件中定义几个函数:
var nut = this.find("ui-nut");var win = this;var totalScore = 0;var nut, stone, man, bear, delta, total;//左右移动人物this.handlePointerMove = function(point) { var x = Math.max(Math.min(point.x, win.w * 0.8), win.w * 0.2); man.setPosition(x, man.y);}//处理人物与榛子和石头的碰撞事件this.handleOnBeginContact = function(body) { var el = body.element; var score = el.name == "ui-nut" ? 1000 : -600; var x = man.x + ((man.w - delta.w)>>1); totalScore += score; delta.setText(score).setVisible(true).setPosition(x, man.y); var config = {yEnd: delta.y-100, opacityStart:1, opacityEnd:0.2, scaleStart:1, scaleEnd:0.2, duration:500, onDone: function() {delta.setVisible(false);total.setText(totalScore);}}; el.play("dispear", 1, function() { el.setVisible(false).setPosition(0, 0).setV(0, 0);}); delta.animate(config);}//初始化游戏this.initGame = function() { totalScore = 0; nut = this.find("ui-nut"); stone = this.find("ui-stone"); man = this.find("ui-man"); bear = this.find("ui-bear"); delta = this.find("ui-delta-score"); total = this.find("ui-total-score"); nut.setVisible(false); stone.setVisible(false); function generateObj() { var random = Math.random(); var obj = random < 0.5 ? nut : stone; obj.setVisible(true).setPosition(win.w >>1, win.h).setV(0, -5).play("normal", 10000); totalScore += 500; setTimeout(generateObj, 1000); } generateObj();}this.initGame();
在人物的onBeginContact事件中调用前面的函数handleOnBeginContact:
this.getWindow().handleOnBeginContact(body);
简单吧,我们用了不足50行代码就实现了这个游戏的主体部分。
参考资料:https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
HTML5游戏实战 1 50行代码实现正面跑酷游戏相关推荐
- python跑酷游戏源码_HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- HTML5游戏实战 2 90行代码实现捕鱼达人
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 捕鱼达人 ...
- java加按钮_Java实战:50行代码实现QQ登录和微博登录
作者丨我是小茗同学 整理丨Java团长 https://www.cnblogs.com/liuxianan 1. 前言 个人网站最近增加了评论功能,为了方便用户不用注册就可以评论,对接了 QQ 和微博 ...
- Python实战项目:39行代码打造数字战舰游戏
2019独角兽企业重金招聘Python工程师标准>>> 前言 制造多艘战舰:你需要小心,因为你需要确保你不要在战斗板上将战列舰放在彼此之上.你还需要确保平衡棋盘的大小和船只的数量,这 ...
- python爬虫实战:利用scrapy,短短50行代码下载整站短视频
近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...
- 利用scrapy,短短50行代码下载整站短视频
一.撕开爬虫的面纱--爬虫是什么,它能做什么 爬虫是什么 爬虫就是一段能够从互联网上高效获取数据的程序. 我们每天都在从互联网上获取数据.当打开浏览器访问百度的时候,我们就从百度的服务器获取数据,当拿 ...
- 【Python】50行代码带你背单词,四六级冲冲冲
前言 很快就要到六月份的英语四级考试了,你们都准备好了吗?听说很多小伙伴还在背单词,在我看来,背单 词真的是很难坚持的一件事.今天,就用Python给大家分享一个背单词神奇,一边学还能一边玩,这可 把 ...
- pyquery获取不到网页完整源代码_爬虫神器之PyQuery实用教程(二),50行代码爬取穷游网...
爬虫神器之PyQuery实用教程(二),50行代码爬取穷游网 前言 上篇文章 PyQuery (一) 回顾.今天来介绍具体 PyQuery 的使用方法. 穷游网目标与分析 开始之前,按照之前的套路一步 ...
- C++900行代码实现中国象棋游戏规则以及相关功能
本文章通过C++中的900行代码实现中国象棋游戏以及相关功能,主要的内容如下: 1.设置未进入游戏前的主页面: 2.绘制棋盘(如果有刚好尺寸的图片也可直接加载),包括棋盘网格,炮与兵的特殊标记绘制: ...
- Java控制台游戏~600行代码实现打怪小游戏
Java控制台游戏~600行代码实现打怪小游戏(多图预警) 一,先放个启动界面(一些英雄,怪物技能介绍跟装备属性都写在里边): 二,在这个简单的小游戏里,你可以体验到: 1.打怪: 2.随机玩法寻宝: ...
最新文章
- mysql隐式转换造成索引失效的事故总结
- html社交模板,Olympus – 社交网HTML静态模板
- 索尼录音笔怎么导出录音内容_录音笔十大品牌名单出炉!录音笔十大品牌排名榜单揭晓!...
- java切换jdk版本_切换JDK版本quick
- Python问题3——爬虫编码问题
- 安卓系统,启用微信浮窗 session 丢失
- #windowsxpsp3系统MS12-020漏洞测试
- 红孩儿编辑器的模块设计3
- ardruino控制继电器_Arduino基础入门篇24—继电器控制
- PHP万能小偷程序源码
- 写数据分析报告,建议部分憋到脸红,咋整?
- 用无线网卡做wifi热点共享网络的方法
- 要求实现符号函数sign(x)。
- 一文读懂闪电网络工作原理
- linux veket安装教程,【重写】在U盘上安装使用Veket(Linux)系统
- GPS网络时间服务器(NTP时钟系统)技术应用方案
- 汇编语言程序设计-贺利坚-专题视频课程
- 安卓 camera API2 下发Reuqest的接口流程
- 计算机软件优化,如何优化计算机软件系统
- 从零开始-Exchange和Skype for Business 部署-Exchange 安装