在水果忍者游戏上做改编的中秋切月饼canvas小游戏

《中秋切月饼游戏》

2015年9月25日

要过中秋哒~于是我们又要做中秋的小游戏了，在水果忍者的游戏的基础上做的，第一次做游戏，激动，但是难免很多都不懂，几乎是一边学一边做。

整个游戏的流程其实还是很简单的，开始动画，加载页，然后进入切月饼的游戏页面，游戏中如果切到兔子就GG了，会看到灰常血腥的一幕，如果顺利玩完游戏那么你就可以，输入手机号码查看你的微信好友排名。

作为一只游戏小白，表示真的什么都不懂啊，策划突然给我这么一游戏的时候，我真的好想说，臣妾做不到啊~

好在技术老大给喝了一大碗鸡汤之后又默默有了战斗力，弄了两个星期总算是出来了。今天终于通过测试，记录下这个项目中遇到的技术难点和要总结的一些东西。

做之前列了些可能遇到的问题，做完之后把遇到的问题集中总结了下：
1.排行榜问题（如何获得排行榜中的微信名，微信头像，游戏分数）
2.游戏时间问题（如何控制游戏时间，暂停游戏）
3.如何实现重玩一次
4.如何防止ajax重复提交请求
5.要让页面元素都加载完之后游戏才开始
第一个问题，获取微信名头像和微信名，后台哥哥们给我的接口是这样设计的，首先在微信平台访问这个小游戏的链接时，微信就会把你的微信名nickname和头像地址headImg的参数带到链接后面，然后写个获取参数的函数，








然后发送两次请求给后台，第一次是添加本人本次游戏的分数的记录，第二次是请求后台返回排行榜的信息。这里要注意的一点是，如何将游戏的分数变成全局变量然后一并传给后台。window.变量名 = 变量名；虽然做完看这个知识点觉得挺简单的，但是有时候一个小知识点真的是能够解决很大的问题。
第二个问题，控制游戏时间，设置定时器就可以了，setInterval(id),然后当游戏结束的时候clearInterval(id)就行了;
第三个问题，window.location.reload( );调用这个方法就可以了~
第四个问题，多次点击确认手机注册的按钮的时候，会发送多次请求，从而会产生重复的排行榜成绩，这显然是不科学的，所以，查了资料，一般的方法是让按钮点击一次就disabled掉，但是我很作死的觉得不是很优雅，恩，最近就是有点任性，然后就设置了个lock的全局变量，var
lock = true; 一开始让锁是打开的，然后在发送请求之前做一个判断
if(lock){
$.ajax({ }) 让lock为true的的时候才会发送请求，然后当执行过一次函数之后，将lock值设为false,那么第二次点击确认手机注册的按钮时就不会再发送请求，也不会坑爹的给我返回N个排行榜了
}
lock =false;
第五个问题， 我做了个loading页面，让这个页面住处顶层盖住所有元素，等页面所有图片加载完之后，这个loading页面才会消失，
window.onload = function( ){
$(".loading").hide( )
}

最后，感谢UI的妹纸，画的图好看极了，极大增强了我玩游戏的欲望，附上小游戏的上线二维码一枚，祝各位玩的愉快，顺便吐槽帮我找bug, 少年们中秋节快乐~




扫我啊~