“倔驴”一个h5小游戏的实现和思考(码易直播)——总结与整理
3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享。15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一样(可以理解为借口)。我先贴出写错的两个地方。
1.
//self.last['', ''];//重置 这个是写错的
self.last = ["",""];//重置 这个才是正确的
2.
$sword.css({'-webkit-transfrom':'rotateX(' + this.swordRotate[this.rotateIndex] +'deg)', 'display': 'block'});//错的,form写成from了(以前还老说别人常常写错)
$sword.css({'-webkit-transform':'rotateX(' + this.swordRotate[this.rotateIndex] +'deg)', 'display': 'block'});
直播又不能暂停,当时出了问题真的没检查出来,一直去看逻辑有没有错误,结果全是拼写错误,直到直播结束我才找到问题。 也算是第一次做视频的现场直播,看了一下回放,核心问题应该是讲清楚了,只是听我说话有点难受,语言组织的太差,顿一顿的,还有很多口水语。 如果要看直播回放的朋友前30分钟看看就行了,后面的快进吧。 因为直播的时候好多准备好的东西,没有准确讲出来,下面先用博客来说一遍,最后附上直播地址。
需求:
做的是一个有点类似切水果的游戏,游戏的应用场景在移动设备上,交互方式就是屏幕滑动,对着一只驴一阵乱切(可以想象是水果忍者切最后的那个红色石榴),最后计算规定时间内,切的次数,给予相应奖励。这类游戏的目的不在于多好玩,而在于给用户优惠的同时排队不那么无聊,一个购物的排队过程的一个游戏,主要是还可以根据游戏情况打折,当然根据游戏的特性,还可以用于其它环境。这类H5小游戏都比较简单,使用的技术:jq、html、css。
实现细分:
需求已经清楚了,我们来思考下,要实现功能,我们需要做哪些工作:游戏页面-游戏功能交互-游戏结果。
- 游戏页面: 写好页面,适配(页面不要出现滚动,刚好一屏)
- 游戏功能交互(如何切驴):驴的区域,手势交互(切驴的算法),切中效果(刀数增加、刀光剑影),倒计时
- 游戏结果:依据切驴次数展示的最终样式和游戏后的中奖结果,送微信卡券,结果分享......
工作量大部分都在页面和样式上,还有状态的切换,核心功能是手势交互。
核心功能:
这次分享,其它页面都做好了,直接来写核心代码。就是下面这头驴,如何实现手势滑动,计算切驴的次数。这个可以自己先思考一下,如果是自己做的话,准备怎么去做,自己的方案自己能不能把它实现。方案我想每个人都有想法,但是最终能不能落地,能不能实现这个只有做了才知道。
我的方案就是获取驴的一个坐标范围,根据手势进出驴的范围,来判断是否算是切一次。比如我上一次手指的位置在驴外面,这次就在里面了,那就说明我是从外到里进去了一次,就算切了一刀,如果再从里面出去,那么又算是一刀。如下图:
红色区域是监听的touch事件区域,绿色的区域都代表是驴,白色代表手势,通过手势进去这个区域我们统计切的次数。 但是有个问题如果我直接一刀从外面到里面再到外面不反向呢?如下图
我直播里讲错了,写博客我才想起之前的逻辑,源码里也确实不是上面那样算的。 实际是我第一次手指的位置 从“外” 到 “里" 再到 "外"算是一刀;第一次手指的位置从”里“到”外“算一刀。 这样从哪里开始似乎都并没有重复计算。 但是要严格按照真实情况模拟,这样的算法和代码或者具体怎么算一刀的需求,还是需要再进行一次深刻的推敲。但目前的方式算出来,从感官上确实是察觉不到任何问题的,本身游戏也是无条件的给用户优惠,这样的算法也不会让用户受损,或者说大家都是公平的。
还是来说说具体代码和实现步骤把
1. 先找到驴的范围:
$donkey: $('.donkey'),//倔驴的dom init: function(){
var self = this;
var $offset = self.$donkey.offset();//获取驴的位置和宽度
self.$x = [$offset.left + $offset.width / 5, $offset.left + $offset.width - $offset.width / 5];//0左1右
self.$y = [$offset.top + $offset.height / 5, $offset.top + $offset.height - $offset.height / 5];//0上1下
return this;
}
以上定义了驴的左右上下坐标,因为驴和菜板是一张图,加减处理的五分之一是截掉后面菜板。
2. 绑定touch事件
cut: function(){
var self = this,
$region = $('.cut-region'); $region.on('touchstart', function(){
$region.on('touchmove', function(e){
e.preventDefault();
if(self.cutCount(e)){//去计算是否应该算一次,如果需要计数+1,会返回true
}
}); }).on('touchend', function(){
$region.off('touchmove');
});
},
3. 进出判断计算
cutCount: function(e){//传入的touch事件对象
var self = this;
self.last = ['', ''];
var loca = e.targetTouches[0];
if(loca.clientX > self.$x[0]
&& loca.clientX < self.$x[1]
&& loca.clientY < self.$y[1]
&& loca.clientY > self.$y[0]){//在驴身上 if(self.last[0] == 'in') return false;//上一次同样在里面,不执行 if(self.last[0] == 'out' && self.last[1] == 'in'){//上一次在外面
return true;
}else{
self.last[1] = self.last[0];
self.last[0] = 'in';
return false;
} }else{//就在外面 if(self.last[0] == 'out') return false;//上一次在同样外面,不执行 if(self.last[0] == 'in' && self.last[1] == 'out'){
return true;
}else{
self.last[1] = self.last[0];
self.last[0] = 'out';
return false;
}
}
},
last纪录了上一次和上上次手指的位置,这样纪录我们后面才能判断正确。
剩下的就是去打磨交互效果了,这里就不多说了,可以直接看下源码或者直播回放。
小游戏的思考:
我做过那么些个小游戏,基本都是自己想方案再写出来实现的,拿到需求的时候需要拆分和评估,先把游戏核心难点找出来单独实现了才行,否则先做其它事情没有意义。 游戏本质是通过视觉、触觉、听觉和本能意识产生与现实相近的体验,利用这几个感官的特性,给人造成逼真的体验,比如视觉上的错位、相对移动,听觉上物体的声音、远近声音大小等等。 对于一些要求并不高的小游戏,我们可以做一些模拟上的舍弃,要实现一个现实模拟,有些时候可能会非常复杂,如果做不到百分百准确,至少先做出一个让人使用起来感觉到基本上是这个东西的版本。 当然如果自己愿意钻研也是好事,不要影响开发进度就好。 如果有一天谁遇到这类的需求,发现这个事情很难做,就要先想办法简化,达到最低要求,再慢慢去优化,不会拆分会给人心理造成负担,容易被一拳头撑死。 如果是做h5小游戏的话,一定要强调html和css,先写好这两个东西,再去使用JS,因为如果html和css不写好,不充分利用其最大优势的话,用js去填补是会消耗很大精力的,会让代码维护和可读性变得复杂,比如说一些轮播图的实现,自己写过的人可能会有所体会。
以下是直播地址 和 github上的源码,有兴趣的看看吧,给个start也好~
直播回放地址https://www.mayigeek.com/mayi-edu-web/user/html/liveShare.html?id=8
看不了的话,复制链接在微信打开吧!
github上的源码https://github.com/zimv/cut-donkey
“倔驴”一个h5小游戏的实现和思考(码易直播)——总结与整理的更多相关文章
- 50行代码写的一个插件,破解一个H5小游戏
小游戏链接:测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline 废话不多说,先放代码: window.onloa ...
- 浅试 Webview 一app 加载 H5小游戏
整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...
- Egret白鹭H5小游戏开发入门(二)
前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...
- Egret白鹭H5小游戏开发入门(三)
前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...
- Egret白鹭H5小游戏开发入门(一)
前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...
- 青瓷qici - H5小游戏 抽奖机 “one-arm bandit”
写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个 ...
- 开发H5小游戏
Egret白鹭H5小游戏开发入门(一) 前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条
本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...
随机推荐
- Program terminated with signal SIGKILL,Killed
车载后视镜机器,Liinux + qtUI形式,前后双路,前一天晚上开机用gdb run DvrUI,第二天早上回来一看,机器绿屏卡死了,录像预览停止刷新了,sd录像也停止了.点击无任何反应. 看gd ...
- Salesforce的Auto Number
在Salesforce中新建Object的时候,可以对Name选择Auto Number,即自动编号.如果没有仔细阅读说明的话,会有一个很容易让人迷惑的地方. 在选择时候,Salesforce提供的示 ...
- AKKA学习笔记
AKKA学习笔记总结 01. AKKA 1. 介绍: Akka基于Actor模型,提供了一个用于构建可扩展的(Scalable).弹性的(Resilient).快速响应的(Responsive)应用程 ...
- java字节数组格式化为十六进制字符串
/** * 格式化byte * * @param b * @return */ public static String byte2hex(byte[] b) { char[] Digit = { ' ...
- IOS之TableViewCell重用机制解决上下刷新重复显示
首先我是一个经验浅薄的iOS开发人员,这个问题想必许多初学者经常遇到这些问题,在面试中也会经常问到.现在我们一一解决. 首先我们要知道TableViewCell重用机制的原理是什么,我们抽象的理解为古 ...
- WebServerice的发布
在webserverice一文中,我们简单的介绍了一下什么是webserverice,以及如何建立一个webserverice服务.今天,我们一起学习下webserverice是如何发布的. 为什么要 ...
- MATLAB中的分类器
MATLAB中的分类器 目前了解到的MATLAB中分类器有:K近邻分类器,随机森林分类器,朴素贝叶斯,集成学习方法,鉴别分析分类器,支持向量机.现将其主要函数使用方法总结如下,更多细节需参考MAT ...
- web前端页面性能
前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则:80%的最终用户响应时 ...
- angular destroy & jquery destroy
destroy的目的是为了内存溢漏,这对性能会造成影响. angular scope在处理element 移除时,会触发destroy, 而调用逻辑和jquery使用的一样. 在ck editor 中 ...
- 每天一个linux命令(49)--diff命令
diff 命令是 Linux 上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff 在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件,diff ...