HTML5游戏实战之20行代码实现打地鼠
之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右。
先show一下终于成果,点击试玩:打地鼠。或者扫描二维码:
假设你想在这个游戏上改进。 appid=previewqqArmily-941435980697281">点击这里
開始解说之前,打个广告。欢迎html5游戏开发爱好者扫描下方二维码或者搜群号223466431,增加开发人员QQ群,我们免费提供最高速的开发工具。我们的全部html5游戏都开源。
整个游戏的开发。基于在线H5游戏开发工具TangIDE,相关开发文档点击这里,观看开发视频点击这里。假设您致力于开发H5轻应用,请点这里。
1. 准备工作
浏览器打开TangIDE链接,右上角有登陆button,选择QQ登陆。
浏览器推荐谷歌浏览器或者猎豹浏览器。
游戏所需的资源文件夹:共享资源/成套资源/模板/打地鼠/
2. 创建第一个场景
打开TangIDE后,默认有两个场景,一个是资源载入窗体,能够不用管,另外有个默认主场景。这个场景能够作为我们的第一个场景。把里面的足球和和草地删掉,场景改名为“開始界面”,然后更改背景。依次把所须要的控件拖拽进来,例如以下图所看到的:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">
分别为微信控件,音效控件。背景音乐控件编辑特有属性:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">
3. 创建第二个场景
新建一个场景,将场景名字改为“游戏界面”。
地鼠的制作:
a、拖一个图片控件进来。将背景图片清空。
b、拖一个帧动画到图片上。作为这个图片控件的子控。
c、在帧动画的特有属性中加入地鼠的帧动绘图片。
d、为帧动画分组。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">
e、利用动画编辑器为地鼠添加出洞入洞的动画。
f、编辑帧动画的onClick事件。加入例如以下代码,这段代码响应击打动作,播放音效并得分,同一时候播放被打的动画效果:
var win = this.getWindow();
win.hammer.setPosition(this.getParent().x,this.getParent().y);
win.hammer.animate("down");
win.playSoundEffect("击打.mp3", function onDone() {console.log("play finished");});
win.score++;
win.find("云/计分板/得分").setValue(win.score);
var ele = this;
ele.play("hit", 2, function() {
ele.play("out");
});
g、选中帧动画的父控件。编辑它的onUpdateTransform事件。加入例如以下代码,这段代码表示该控件仅仅显示固定区域,假设子控件超出该区域不显示,实现地鼠的出入洞效果。
<pre class="javascript" name="code">canvas.beginPath();
canvas.rect(0,0,this.w,this.h);
canvas.clip();
这样,一个完整的地鼠就做完了,游戏界面中有16个地鼠。做好第一个。余下的复制粘贴就可以。
地鼠洞:
地鼠洞也须要一张图片来表示,复制粘贴16个,依次摆放到地鼠下方就可以。
游戏时间的控制:
拖拽一个定时器到场景中,将特有属性中的运行次数设置为1,时长设置为30000。代表整个游戏仅仅进行30s。
编辑onTimeOut事件,创建提前定义事件,打开新窗体。
var initData = this.getWindow().score;
this.openWindow("结束界面",
function (retData) {console.log("window closed.");}, false, initData);
地鼠随机出入洞的实现:
拖拽一个定时器到场景中,将特有属性中的运行冊数设置为1000000,时长为500。代表0.5s让一个地鼠出洞。
编辑onTimeOut事件,这段代码随机选择一个抵触,让其播放出洞动画。
var win = this.getWindow();
var index = Math.floor(Math.random() * 16);
win.find("切图-" + index).getChild(0).animate("up");
完整的界面如图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
游戏的初始化:
编辑场景的onBeforeOpen事件,这段代码主要是在游戏開始前分数清零,将地鼠隐藏起来。
var win = this.getWindow();
var me = this;
win.resetGame();
win.score = 0;
win.hammer = win.find("锤子");
win.hammer.setPivot(1,0.5);
for(var i = 0; i < 16; i++) {
var gopher = win.find("切图-" + i).getChild(0);
gopher.setPosition(gopher.x, gopher.y + 100);
}
上述的20多行代码。就完毕了一个功能完整的打地鼠游戏,包含丰富的动画,声音效果,甚至微信分享。
结束场景很easy,不再赘述。
欢迎增加QQ群223466431交流。
HTML5游戏实战之20行代码实现打地鼠的更多相关文章
- HTML5游戏实战(4): 20行代码实现FlappyBird
这个系列很久没有更新了.几个月前有位读者调侃说,能不能一行代码做一个游戏呢.呵呵,接下来一段时间,我天天都在想这个问题,怎么能让GameBuilder+CanTK进一步简化游戏的开发呢.经过几个月的努 ...
- 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]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定.它包含了一组完善而且容易理 ...
随机推荐
- lhgdialog.js弹出框
官方学习网址: http://www.lhgdialog.com/ 个人认为它的样式不太好调,除此之外它也是一款实用的弹出框,专业的用来提示文字,消息,按钮添加function().ifame: 以下 ...
- (转)es6用法
如何在浏览器中使用es6的语法呢? 方法一:引入文件相关js文件 <script src="traceur.js"></script> <script ...
- okhttp3 ExceptionInInitializerError 异常处理
okhttp3 在Android4.4上出现下面异常 java.lang.ExceptionInInitializerError at okhttp3.OkHttpClient.newSslSocke ...
- Redhat/CentOS xfs文件系统及磁盘挂载
#!/bin/sh #DEVICE_LIST=""DEVICE_LIST="/dev/sda /dev/sdb /dev/sdc /dev/sdd /dev/sde /d ...
- java 抽象工厂模式简单实例
抽象工厂模式:提供一个创建一系列的相关的或者依赖的对象的接口,无需指定它们的具体实现类,具体的时间分别在子类工厂中产生. 类似于工厂模式:隔离了具体类的生产实现,使得替换具体的工厂实现类很容易.包含有 ...
- Jenkins介绍-安装-部署...
1.背景 大师Martin Fowler对持续集成是这样定义的:持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成. ...
- Java代码运用及算法思路养成——用*号输出形状
简单的了解了一些循环算法后,尝试用循环算法,输出形状图形 例1矩形与平行四边形的比较(可以看做矩形的每一行在输出前都输出了矩形长度数量-1的空格数量并且依次递减) 例2三角形(三角形可看做半个矩形,考 ...
- QT+VTK 对接使用
由于MFC和pcl的不兼容问题,只能用QT和VTK进行程序开发,确实是一件蛋疼的事! 出自于QT与VTK结合系列:http://blog.csdn.net/tonylk/article/details ...
- 逐步理解Java中的线程安全问题
什么是Java的线程安全问题? 线程安全就是多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读/写完,其他线程才可使用.不会出现数据不一致或者数据 ...
- 给DBA 的mysql脚本格式