HTML5游戏实战 3 60行代码实现水平跑酷游戏
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
跑酷游戏无疑是目前最受欢迎的游戏类型之一,3D跑酷游戏可能比较难做一点(这个我不懂),2D跑酷却是非常容易的,只要有美术资源,做一个《天天酷跑》这类流行游戏也并非是什么难事。 这里通过一个松鼠跑酷的游戏介绍一下用Gamebuilder+CanTK开发游戏的方法,这个游戏的主场景仅用了60来行代码。
CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏和APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk
0.先Show一下最终成果:
在线运行:http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586
在线编辑:http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586
1,新建一个项目,删除场景里的球和地面,把手机设置成横屏
设置场景的物理引擎参数,把Y方向的重力设置为50,像素和米之间的比例为50:
设置场景的背景图片:
设置场景的虚拟宽度:
2,在场景中放入一张图片,用它来创建一条路径。
效果如下:
通过拷贝粘贴,并使用不同的图片,生成一条完整的路径(拖动场景可以查看场景的全部视图)。
3,前面放置的图片路径,纯粹是为了达到视觉上的效果,物理上的效果还需要放置刚体来实现。
让刚体在运行时不可见:
设置刚体的物理属性,不要弹力和摩擦力。
效果如下:
4,在场景中放一个图片文字,用来表示分数。
5,在场景中放一个帧动画,用来表示榛子。
设置它的物理参数:
通过拷贝粘贴生成一系列榛子。
6,在场景中放一个帧动画,用来表示松鼠。
在这个帧动画里放一个多边形,让它运行时不可见:
设置它的物理参数:
7,在场景中放几个静态刚体,用来检测松鼠是否掉下去了。
8,在场景中放一个静态刚体,用来检测松鼠是否到家了。
界面上的工作及基本上OK了。作为一个程序员来说调整游戏界面可能有些单调,这时不妨把自己想象成产品经理或者UI设计师吧。
9,现在我们来写程序。
在场景的onOpen事件中:
//初始化游戏this.initGame = function() { for(var i = 0; i < this.children.length; i++) { var iter= this.children[i]; if(iter.name === "ui-acorn") { iter.setFrameRate(30).play("normal", 100000); } }//设置松鼠的初速度,先播放jumpdown,再播放run var squirrel = this.find("ui-squirrel", true); squirrel.nutBonus = 0; squirrel.setV(10, 20); squirrel.play("jumpdown", 1, function() { squirrel.play("run", 1000); });}//对话框关闭时重新开始游戏。this.onDialogClose = function(retInfo) { this.replay(); this.initGame();}this.initGame();
在场景的onPointerUp事件中,给松鼠一个向上的速度,播放jumpup动画:
var squirrel = this.find("ui-squirrel", true);var vy = squirrel.jumpingUp ? -6 : -22;squirrel.setV(4, vy).play("jumpup", 2, function() { squirrel.play("run", 10000); }); squirrel.jumpingUp = true;
在松鼠的onBeginContact(碰撞)事件中:
var win = this.getWindow();var element = body.element;function onDialogClose(retInfo) { win.onDialogClose(retInfo);}switch(element.name) { case "ui-acorn": {//在榛子撞到后,增加分数,并播放消失的动画,然后移除榛子。 this.nutBonus++; element.play("dispear", 1, function() {win.removeChild(element);}); break; } case "ui-target": {//在到达目的地后,显示分数对话框。关闭对话框重新开始游戏。 var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100}; win.openWindow("win-success", onDialogClose, false, info); this.setEnable(false); break; } case "ui-failed": {//在掉下后,显示分数对话框。关闭对话框重新开始游戏。 var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100}; win.openWindow("win-failed", onDialogClose, false, info); this.setEnable(false); break; } default: {//落地时,设置向右的速度。 this.jumpingUp = false; this.setV(8); break; }}
在松鼠的onMoved事件中,移动场景的视图,并显示总分数。
var win = this.getWindow();win.setOffset(this.x - 200, this.y - 200);var score = win.find("ui-score");var distance = Math.round((this.x / 100)) * 100;var totalScore = distance + this.nutBonus * 100;score.setText(totalScore);
游戏中还有几个对话框,它们都很简单,做好一个后拷贝粘贴生成,然后界面做些调整就好了,为了不让文章太长。关于对话框的使用,在单独的文章中介绍吧。
谢谢阅读,欢迎任何建议和反馈。
参考资料:
https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
HTML5游戏实战 3 60行代码实现水平跑酷游戏相关推荐
- HTML5游戏实战 2 90行代码实现捕鱼达人
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 捕鱼达人 ...
- python跑酷游戏源码_HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- python游戏辅助lol_Python爬虫实战,60行代码爬取英雄联盟全英雄全皮肤,找寻曾今那些被删除的绝版皮肤...
学了一周多的爬虫课后终于按捺不住了,小编决定自己手动编写爬虫程序,刚好LJ在鼓励学员分享成果,优秀作品有奖励,就把自己用Python编程爬取各大游戏高清壁纸的过程整理了出来进行投稿,与大家一起分享. ...
- Python实战项目:39行代码打造数字战舰游戏
2019独角兽企业重金招聘Python工程师标准>>> 前言 制造多艘战舰:你需要小心,因为你需要确保你不要在战斗板上将战列舰放在彼此之上.你还需要确保平衡棋盘的大小和船只的数量,这 ...
- GameBuilder开发游戏应用系列之60行代码实现FlappyBird
在线演示:http://osgames.duapp.com/apprun.html?appid=osgames1-911422256817006 在线编辑:http://osgames.duapp.c ...
- 菜鸟最爱,60行代码打造一款音乐播放器!
点上方"菜鸟学Python",选择"星标" 第467篇原创干货,第一时间送达 大家好,我是菜鸟哥! 对于小伙伴们来说,在日常的学习和工作中,很多人都喜欢边听音乐 ...
- 直击面试现场:神级程序员仅100秒,60行代码写出俄罗斯方块,成为全公司焦点!...
小编我今天逛论坛看到一位HR帖子直播公司面试情况,该公司是做棋牌APP的,现在正在招聘前端工程师和运营人员,HR直播的是前端这块的,有写游戏的也有做网站项目的,写特效的都有很多,但是这位HR却看上了一 ...
- C++900行代码实现中国象棋游戏规则以及相关功能
本文章通过C++中的900行代码实现中国象棋游戏以及相关功能,主要的内容如下: 1.设置未进入游戏前的主页面: 2.绘制棋盘(如果有刚好尺寸的图片也可直接加载),包括棋盘网格,炮与兵的特殊标记绘制: ...
- Java控制台游戏~600行代码实现打怪小游戏
Java控制台游戏~600行代码实现打怪小游戏(多图预警) 一,先放个启动界面(一些英雄,怪物技能介绍跟装备属性都写在里边): 二,在这个简单的小游戏里,你可以体验到: 1.打怪: 2.随机玩法寻宝: ...
- php本地文件打包代码,PHP实战:几行代码轻松实现PHP文件打包下载zip
<PHP实战:几行代码轻松实现PHP文件打包下载zip>要点: 本文介绍了PHP实战:几行代码轻松实现PHP文件打包下载zip,希望对您有用.如果有疑问,可以联系我们. PHP应用 //获 ...
最新文章
- C语言 数组(做个笔记)
- 网络丢包现象分析处理指导书5
- 带你进入String类的易错点和底层本质分析!
- mongoose小试牛刀
- Centos 6.0/ Nginx 安装与配置
- php上传图文,php+ajax实现异步上传图文功能详解
- ie浏览器修复_[图]三大Windows 10获得累积更新 修复IE和无法运行Access 95数据库问题...
- 物料主数据(MM03)跳转函数
- opengl 区域填充之种子填充线扫描法
- 深度剖析数据库国产化迁移之路
- java中android_在Android中用纯Java代码布局
- ResNet 运行在Cifar10 测试集86.38% Tensorflow 2.1 小白从代码实践中 理解
- php中api提升响应速度,php – WordPress REST API慢响应时间
- 直播带货还有机会吗?
- 毕设题目:Matlab图像去噪
- edius裁剪快捷键_edius5.0常用快捷键 edius快捷键使用大全
- Path 贝塞尔曲线 练习 Demo
- element ui 中 el-checkbox-group 点击一个全部选中的问题
- 利用 Map-Reduce 从文件中找到出现频率最高的 10 个 URL(2021 VLDB Summer School Lab0)
- 面向对象,面向对象的优点
热门文章
- 大学生搭建自己的web项目服务器心得
- 毕业论文的页眉、页脚奇偶页不同的设置方法
- 使用 openssl 进行 base64 编解码
- Dell R740服务器新版Raid设置图文教程
- 关于WZ指令的配网与烧写固件
- 笔记本电脑CPU低压、标压、高压的区别
- PDF旋转使用的转换器有哪些
- 矩阵标准型的系数是特征值吗_矩阵分解术,不得不从高斯说起
- Linux当前目录下所有jpg文件,解决Linux平台下无法打开jpg文件(提示: “Not a JPEG file: starts with 0x89 0x50”)的方法...
- 战舰世界选服务器删除什么文件夹,《战舰世界》常见问题解决方案合集