Jquery简单实现2048小游戏

最新推荐文章于 2024-04-03 12:44:29 发布

╰(￣ω￣ｏ)沫儿

最新推荐文章于 2024-04-03 12:44:29 发布

阅读量296

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41135146/article/details/115800707

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Jquery实现2048小游戏思路整理

1.搭建基础的UI界面

2048需要4*4的表格，所我们要先搭建基础的UI界面；可以使用表格，然后再对基础的单元格进行样式设置；

<body>
		<div id="">
			<table border="" cellspacing="" cellpadding="">
				<tbody>
					<tr>
						<td class="tdCell tdCellrow1 tdCellcol1"></td>
						<td class="tdCell tdCellrow1 tdCellcol2"></td>
						<td class="tdCell tdCellrow1 tdCellcol3"></td>
						<td class="tdCell tdCellrow1 tdCellcol4"></td>
					</tr>
					<tr>
						<td class="tdCell tdCellrow2 tdCellcol1"></td>
						<td class="tdCell tdCellrow2 tdCellcol2"></td>
						<td class="tdCell tdCellrow2 tdCellcol3"></td>
						<td class="tdCell tdCellrow2 tdCellcol4"></td>
					</tr>
					<tr>
						<td class="tdCell tdCellrow3 tdCellcol1"></td>
						<td class="tdCell tdCellrow3 tdCellcol2"></td>
						<td class="tdCell tdCellrow3 tdCellcol3"></td>
						<td class="tdCell tdCellrow3 tdCellcol4"></td>
					</tr>
					<tr>
						<td class="tdCell tdCellrow4 tdCellcol1"></td>
						<td class="tdCell tdCellrow4 tdCellcol2"></td>
						<td class="tdCell tdCellrow4 tdCellcol3"></td>
						<td class="tdCell tdCellrow4 tdCellcol4"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

2.实现界面中能够随机生成数字的功能

我们如果想在界面中能够随机的向二个单元格中生成数字：

1.我们要判断单元格是否为空。空的单元格不能够生成数字；

我们要遍历所有的单元格，判断他们的值是否为空；如果为空的话就参与随机生成；如果有值的话，就不参与。

2.在没有值的单元格中随机的生成2或者4；

具体实现代码如下：

//随机生成数字的方法；
		function rundomNum(){
			
			//判断器的主要功能是确保每次只有二个格子的值会随机生成数字
			var judge = 0;
			//for循环遍历所有的格子；然后检查他们是否为空，如果为空的话则随机生成
			//2~4的二个数字
			for (var i = 0; i < $(".tdCell").length; i++) {
				//判断格子中是否有值，没有值的话就行随机生成；
				if($($(".tdCell")[i]).text() == ""){
					//用Math类的随机生成函数，确定像不像函数中随机生成函数
					//这里的随机越到后面生成的概率越小；
					if(Math.round(Math.random()) == 1){
						//随机生成2或4添加到单元格中
						$($(".tdCell")[i]).text((Math.round(Math.random())*2+2))
						judge++;
					}
				} 
				//判断是否随机向二个格子中生成数字，如果是就结束循环；
				//这里有个bug就是会出现只生成一个或者一个都没有生成的情况；
				//目前来说暂时还没有想去修复；
				if(judge == 2){
					break;
				}
			}
		}

3.2048核心功能的实现

1.游戏的过程通过键盘的输入上下左右键进行模拟手机中的滑动操作实现代码如下

//监听事件监听是否有鼠标的输入和输出
		$(document).keydown(function(){
			var keyNum = Number(event.which)
			var row = ".tdCellrow"
			var col = ".tdCellcol"
			//通过键值进行判断用户键盘输入
			switch(keyNum){
				case 37:
					allTd(row,37)
					break;
				case 38:
					allTd(col,38)
					break;
				case 39:
					allTd(row,39)
					break;
				case 40:
					allTd(col,40)
					break;
				default:
					break;
			}
		})

2.2048在进行上滑，下滑，左滑和右滑的时候数值的合并；其实主要就是对单列的数组进行排列；

因为我们通过$符获取的时候表格对应的下标不会改变的；

为了方便下面用1和2进行演示

比如： 1 1 1 1 -> 2 0 2 0 -> 2 2 0 0 -> 4 0 0 0

     1 2  2  1 ->   1 4 0 1 -> 1 4 1 0

1 2 2 2 -> 1 4 0 2 -> 1 4 2 0

所以我们只要获取到每组的值，然后把他们复制到数组中，最后在进行排列即可；

function allTd(tdNamestr,keyValue){
			//循环遍历通过类名最后的位数达到遍历所有的行或者所有列的效果
			//这里随便获取一个cell行类的长度；主要想着以后的可扩展性
			
			for (var z = 1; z <= $('.tdCellrow1').length; z++) {
				//通过字符串拼接获取类名
				var str =  tdNamestr+z
				//将该列或者行中的数组分别收集起来然后再存入数组中
				var a = Number($(str)[0].innerText)
				var b = Number($(str)[1].innerText)
				var c = Number($(str)[2].innerText)
				var d = Number($(str)[3].innerText)
				
				//通过键码判断是为右和下如果是右和下数组中元素应该被反过来进行获取；
				if (keyValue == 39 || keyValue == 40 ) {
					var tdArr = [d,c,b,a]
					//调用数组排列的方法
					tdArr = numArray(tdArr)
					//循环将数组中的值反过来赋值给赋值给单元格
					for (var i = 0; i < tdArr.length; i++) {
						if(tdArr[i] == 0 ){
							$(str)[3-i].innerText = ""
						}else{
							$(str)[3-i].innerText = tdArr[i]
						}
						
					}
				} else{
					var tdArr = [a,b,c,d]
					tdArr = numArray(tdArr)
					for (var k = 0; k < tdArr.length; k++) {
						if(tdArr[k] == 0 ){
							$(str)[k].innerText = ""
						}else{
							$(str)[k].innerText = tdArr[k]
						}	
					}
				}
			}
			rundomNum()
			changeColor()
		}
		
		
		function numArray(arr){
			//获取数组的长度进行排序；
			var len = arr.length;
			//主要控制内部循环的次数：这里应该用递归可能效果更好
			//但是我不会;后面有机会再次修改的时候一定尝试
			for (var i = 0; i < len; i++) {
				//循环遍历数组
				for (var j = 0; j < len; j++) {
					//判断arr[j]的值是否为0；如果为0的话就
					//就将0传递到数组中的最后一位
					if(arr[j] == 0){
						//对数组进行重新排列
						for (var k = j; k < len ; k++) {
							arr[k] = arr[k+1]
						}
						arr[len-1] = 0;
					}
					//判断数组中值是否与下个元素的值是否相等；
					//如果相等话就进行合并，然后j++条过下一个值
					if(arr[j] == arr[j+1]){
						arr[j] = 2*arr[j]
						arr[j+1] = 0;
						//主要针对2 2 2 2 的情况 4 0 4 0
						j++
					}
				}
			}
			return arr;
		}

4.美化单元格

function changeColor(){
			//最开始要把所有的单元格颜色变为白色；然后再根据单元格的值进行改变颜色
    		$(".tdCell").css("background-color","white")
			for (var i = 0; i < $(".tdCell").length; i++) {
				
				switch ( Number( $(".tdCell")[i].innerText)){
					case 0:
					case 2:
						$($(".tdCell")[i]).css("background-color","white")
						break;
					case 4:
						$($(".tdCell")[i]).css("background-color","antiquewhite")
						break;
					case 8:
						$($(".tdCell")[i]).css("background-color","#DCF7B7")
						break;
					case 16:
						$($(".tdCell")[i]).css("background-color","#06FF45")
						break;
					case 32:
						$($(".tdCell")[i]).css("background-color","#87E9E3")
						break;
					case 64:
						$($(".tdCell")[i]).css("background-color","#5688E4")
						break;
					case 128:
						$($(".tdCell")[i]).css("background-color","#B1A2F0")
						break;
					case 256:
						$($(".tdCell")[i]).css("background-color","#DA7DEA")
						break;
					case 512:
						$($(".tdCell")[i]).css("background-color","#E8F444")
						break;
					case 1024:
						$($(".tdCell")[i]).css("background-color","#F3C73F")
						break;
					case 2048:
						$($(".tdCell")[i]).css("background-color","#F97C39")
						break;
					default:
						$($(".tdCell")[i]).css("background-color","#F84B4B")
						break;
				}
			}
		}

╰(￣ω￣ｏ)沫儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery简单实现2048小游戏

Jquery实现2048小游戏思路整理1.搭建基础的UI界面2048需要4*4的表格，所我们要先搭建基础的UI界面；可以使用表格，然后再对基础的单元格进行样式设置；<body> <div id=""> <table border="" cellspacing="" cellpadding=""> <tbody> <tr> <td class="tdCell tdCellrow1 tdCellcol
复制链接

扫一扫

专栏目录