python跑酷游戏源码_HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个“熊来了”的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法。
CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏或者APP的利器。假设你喜欢它,请在github上给它加星。您的支持是我们努力的动力:https://github.com/drawapp8/cantk
Gamebuilder是一个在线开发HTML游戏或者APP的集成开发环境,目标是让开发游戏和玩游戏一样简单和有趣。
0.先Show一下终于成果:
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行代码就实现了这个游戏的主体部分。
python跑酷游戏源码_HTML5游戏实战(1):50行代码实现正面跑酷游戏相关推荐
- python算法实现源码_python 实现A_算法的示例代码
python 实现A_算法的示例代码 来源:中文源码网 浏览: 次 日期:2018年9月2日 [下载文档: python 实现A_算法的示例代码.txt ] (友情提示:右键点上行txt ...
- Spring源码之BeanDifinition(加几行代码,可以产出让队友几天也找不出的Bug)
前言 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/bin392328206/six-finger 种一棵树最好的时间是十年前,其次是现在 我知道很多人不玩qq ...
- 干货案例!Python实现视频批量加水印,仅需50行代码
最近由于工作安排,同事需要经常大批量给视频添加水印,昨天反馈给我说,用的某软件批量添加水印过程真的很繁琐,效率也很低,加一个水印要好几分钟时间,你能不能帮我开发一个小工具直接达到"一键添加& ...
- Python实战项目:39行代码打造数字战舰游戏
2019独角兽企业重金招聘Python工程师标准>>> 前言 制造多艘战舰:你需要小心,因为你需要确保你不要在战斗板上将战列舰放在彼此之上.你还需要确保平衡棋盘的大小和船只的数量,这 ...
- 如何在宝塔面板里的源码编辑器里一次性将多行代码注释掉的快捷键
如何一键注释掉宝塔里的多行代码快捷键: 先选中需要注释掉的代码,再同时按住ctrl+shift+/?,即可一键注释掉: 如果需要取消被注释掉的代码,方法跟它一样,即也是按此快捷键即可恢复代码.
- java加按钮_Java实战:50行代码实现QQ登录和微博登录
作者丨我是小茗同学 整理丨Java团长 https://www.cnblogs.com/liuxianan 1. 前言 个人网站最近增加了评论功能,为了方便用户不用注册就可以评论,对接了 QQ 和微博 ...
- 15款Cocos2d-x游戏源码
(1)用cocos2d-x开发的中国象棋游戏源码 使用Cocos2d-X2.2.3开发的一款中国象棋游戏,游戏中可以实现.新局面.悔棋.游戏音乐.胜利后会显示游戏结果. 源码下载:http://www ...
- 15款Cocos2d-x游戏源码 1
转自:http://blog.okbase.net/iphone/archive/4619.html (1)用cocos2d-x开发的中国象棋游戏源码 使用Cocos2d-X2.2.3开发的一款中国象 ...
- Cocos2d游戏源码下载分享
对于很多新手来说,学习游戏开发不仅需要大量的技术文档.教程支持,我觉得一个完整的游戏源码那也是必须的,毕竟实践出真知嘛!遥想当年,为了完成大学每学期的工程实践课程,花了好多时间在网上收刨各种学习资料及 ...
最新文章
- Console.ReadLine(); 获取用户输入内容
- Flutter Dart 安装在window系统
- 不止性能优化,移动端 APM 产品研发技能
- 诈骗者如何伪造电子邮件地址,以及如何分辨
- MacBook键盘符号
- 伯努利数学习笔记的说...
- 丰厚奖学金博士招生 | 澳大利亚OPTIMA 招募博士,多光谱时间序列数据的时空目标检测/分割方向...
- HDU 2653 (记忆化BFS搜索+优先队列)
- redis 哨兵_Redis的哨兵模式
- Linux基础命令---accept打印机控制
- Node.js 学习笔记--- (2)创建一个简单的博客工程
- Javascript特效:关闭小广告
- java架构师之路-并发编程
- 机器学习常见概率模型
- < 数据结构 > 树与二叉树
- 微信内置浏览器缓存清理 微信缓存清除 清除微信里的h5缓存
- vue resource的应用
- 大学 University 2
- Windows11 下屏幕亮度自动调整的问题解决
- PROC SUMMARY