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方法实现动画效果。

zww

组件:抓娃娃机盒子、抓娃娃机遮罩、弹出框(使用的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.记录抓到娃娃的次数。

END