Ahri-珊
day5将分享LeetCode算法题125,141,136以及抓娃娃机小游戏的制作。
LeetCode
今天的三道题涉及到数组、字符串以及链表的处理。
125. Valid Palindrome
判断一段文字是否为回文（不包含符号）。
心路历程
1.去除空格，符号,我用了一个循环实现这步，其实可以用JS的函数实现s = s.replace(/[^A-Za-z0-9]/g, “”)
2.判断回文
代码：
var isPalindrome = function(s) {
var newStr = [];
var reg= /^[a-z0-9]+$/i;
for(let i=0;i<s.length;i++)
{
if(reg.test(s.charAt(i)))
{
newStr.push(s.charAt(i).toLowerCase());
}
}
console.log(newStr);
for(let i=0;i<newStr.length;i++)
{
if(newStr[i]!==newStr[newStr.length-i-1])
return false;
}
return true;
};136. Single Number
找出数组中的单身狗！
心路历程
方法1：
1.将数组排序
2.遍历数组，若nums[i]不等于nums[i+1]则返回numsi
3.若nums[i]等于nums[i+1]，那i+1也不需要判断了，所以执行i++；
代码：
var singleNumber = function(nums) {
nums = nums.sort();
console.log(nums);
for(let i=0;i<nums.length;i++)
{
if(nums[i]!=nums[i+1])
return nums[i];
else
i++;
}
return ;
};方法2：
将数组所有的元素异或起来，相同的值都两两抵消了，最后就只剩下单身狗，不，Single Number留下来了。
代码：
var singleNumber = function(nums) {
let result = 0;
for(let i = 0; i < nums.length; i++) {
result = result ^ nums[i];
}
return result;
};141. Linked List Cycle
判断链表是否为循环链表。
心路历程
1.怎么判断是不是循环链表：使用两个指针p1,p2。p1跑的慢，每次跑一步，p2每次跑两步，p1追上p2了,肯定是p2甩了它好几圈了，那这肯定是循环的。
2.什么时候不判断了：跑的快的已经跑到队尾了(p2 && p2.next为空 )，说明不是循环，返回false，p1跟p2相遇了，返回true。
代码：
var hasCycle = function(head) {
var p1 = head;
var p2 = head;
while ( p2 && p2.next )
{
p1 = p1.next;
p2 = p2.next.next;
if ( p1 == p2 )
return true;
}
return false;
};抓娃娃机
昨天在微博热门看到一个关于抓娃娃的，说抓娃娃真是个奇特的娱乐活动，你一个也抓不到，你身边的姑娘非但不生气还开心的像朵花，那是真的喜欢你了。你一个也抓不到还愿意陪姑娘去做，那你是真的很喜欢这个姑娘了。刷完微博，曾经抓不到娃娃的悲惨回忆涌来。姐姐我要自己写一个简单的抓娃娃机，来纪念我为抓娃娃而香消玉殒的毛爷爷。本游戏使用Jquery的animate方法实现动画效果。
组件：抓娃娃机盒子、抓娃娃机遮罩、弹出框（使用的2048同款弹出框）、娃娃
主要事件：左右移动抓竿、抓娃娃、判断娃娃是否抓到
组件
抓娃娃机盒子
抓娃娃机的盒子为了制造盒子的效果，使用了border-style:grove。
CSS代码：
.box{
width:680px;
height:755px;
position:absolute;
left:50%;
top:50%;
margin:-380px 0 0 -350px;
border-radius:10px;
overflow:hidden;
box-shadow:1px 5px 5px rgb(0,0,0);
border: 50px solid #f1f1a1;
border-style:groove;
background-image:url(../images/background.jpg);
background-size:100%;
}抓娃娃机遮罩
为了制造出娃娃是被关在玻璃里的效果，我给娃娃机加了一个遮罩效果。
CSS代码：
.shade{
display:block;
z-index:9;
width:630px;
position:absolute;
left:50%;
top:50%;
margin:-355px 0 0 -325px;
height:705px;
opacity:0.5;
background-color:#FFF;
}娃娃
娃娃需要放在盒子的底部，并且可以移动到盒子顶部。
CSS代码：
..doll img
{
width:110px;
padding-bottom:5px;
z-index:-1;
float:left;
margin-top:400px;
}事件
左右移动抓竿
开始游戏后，玩家可以在盒子内部左右移动抓竿。因此我们需要一个判断抓竿能否左右移动的函数canMoveLeft、canMoveRight，判断玩家键盘按钮事件的函数，玩家按左右键滑竿随之左右移动20px（变化抓竿div的width），玩家按下键，抓竿变长抓娃娃。
JS代码：
var canMoveLeft = function()
{
if($("#catch_box").css('width')=='30px')
return false;
return true;
}
var canMoveRight = function()
{
if($("#catch_box").css('width')=='1130px')
return false;
return true;
}
document.onkeydown = function(event){
switch (event.keyCode) {
case 37://left
if(canMoveLeft())
$("#catch_box").animate({width:'-=20px'},100);
break;
case 39://right
if(canMoveRight())
$("#catch_box").animate({width:'+=20px'},100);
break;
case 40://down
goPole();
break;
}
}抓娃娃
用户按下键开始抓娃娃了，这时抓竿需要变长，然后系统还需要执行一个判断抓娃娃结果的函数。
JS代码：
var goPole = function()
{
$("#change").animate({height:'460px'},2000);
$("#change").animate({height:'100px'},2000);
isWin($("#catch_box").width());
}判断是否抓到娃娃
如果抓竿没有对准娃娃，即抓不到娃娃（使用抓竿的width值判断），抓竿自己变短，如果对准了娃娃会和抓竿一起上升，当然了只有一定的概率能娃娃不会掉（在身边的小朋友强烈要求下把概率改成了二分之一= =），如果系统决定让你抓到的娃娃掉下来，那会有一个掉下来的动画。
JS代码：
var isWin = function(width)
{
var id = 0;
switch (width){
case 90:
id = 3;
break;
case 330:
id = 4;
break;
case 570:
id = 2;
break;
case 770:
id = 5;
break;
case 990:
id = 6;
break;
}
if(id!=0)
{
var t = Math.round(Math.random()*2);
setTimeout(function(){
$("#doll"+id+" img").animate({marginTop:'0px'},2000);
},2000);
if(t!=1)
{
setTimeout(function(){
$("#doll"+id+" img").animate({marginTop:'400px'},1000);
},2000);
setTimeout("showRes(3)",5000);
}
else
setTimeout("showRes(1)",4000);
}
else
setTimeout("showRes(2)",4000);
}后期还需要改进
1.图片加载速度。
2.可以让抓竿移动的距离也是随机的，这样很容易对不准。
3.设置一个抓娃娃的时间限制。
4.抓到娃娃之后让娃娃消失，娃娃全部抓光后将所有的娃娃都变回来。
5.记录抓到娃娃的次数。
Comments