HTML CSS Javascript 2048小游戏[200行]，可能有BUG

最新推荐文章于 2024-06-16 17:04:32 发布

缘起性本空

最新推荐文章于 2024-06-16 17:04:32 发布

阅读量274

点赞数 3

分类专栏：生活杂谈文章标签： javascript css html

本文链接：https://blog.csdn.net/r77683962/article/details/121732324

版权

生活杂谈专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style>
			div
			{
				border: 1px red solid;
			}
			
			.wrapper
			{
				width: 420px;
				height: 420px;
				margin: 0 auto;
				position: relative;
			}
			
			.square
			{
				float: left;
				width: 90px;
				height: 90px;
				margin: 6.5px;
				text-align: center;
				line-height: 90px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper"></div>
		<script>
			var can_move = true;
            var FrontSquare;
			var TargetExist = false;
			var TargetSquare ;
            var SelfSquare;
			var element = document.getElementsByClassName("wrapper");
			for (var i = 1; i < 5; i++)
				for (var j = 1; j < 5; j++)
				{
					var node = document.createElement("div");
					node.setAttribute('id', 's' + i + j);  
					node.setAttribute('class', 'square');  
					element[0].appendChild(node);
				}
							
			function BornSquare()
			{
				var RandomNumber = Math.random();
				var NewRandomNumber = (RandomNumber > 0.5) ? 2 : 4;
								
				while(true)
				{
					var RowRandom = Math.ceil(Math.random() * 4);
					var ColumnRandom = Math.ceil(Math.random() * 4);
					
					var square = document.getElementById("s" + RowRandom + ColumnRandom);
					if (square.innerHTML == "" )
					{
						square.innerHTML = NewRandomNumber;
						break;						
					}
				}
			}
			
			document.onkeydown = function(event)
			{
                TargetExist = false;
				switch (event.keyCode)
				{
					case 37: MoveLeft();   break;
					case 38: MoveUp();     break;
					case 39: MoveRight();  break;
					case 40: MoveDown();   break;
					default: console.log("Default branch");
				}                
                
				if (can_move)
				{
					BornSquare();
					can_move = false;
				}
			}
			
			function Check()
			{
                if (FrontSquare.innerHTML == "")
                {
                    TargetSquare = FrontSquare;
                    TargetExist = true;
                }
                else if (SelfSquare.innerHTML == FrontSquare.innerHTML)
                {
                    FrontSquare.innerHTML = 2 * SelfSquare.innerHTML;
                    SelfSquare.innerHTML = ""
                    can_move = true;
                    TargetExist = false;
                }
                else
                    return false;
            }
            
            function CheckTargetExist()
            {
                if (TargetExist)
                {
                    TargetSquare.innerHTML = SelfSquare.innerHTML;
                    SelfSquare.innerHTML = ""
                    can_move = true;
                    TargetExist = false;
                }
            }
            
			function MoveLeft()
			{
				for (var j = 1; j < 5; j++)
				{
					for (var i = 2; i < 5; i++)
					{
						SelfSquare = document.getElementById("s" + j + i);
						if (SelfSquare.innerHTML != "")
						{
							for (var k = 1; k < i; k++)
							{
								FrontSquare = document.getElementById("s" + j + (i - k));
								if (false == Check())
                                    break;
							}
							CheckTargetExist();
						}
					}
				}
			}
			
			function MoveRight()
			{				
				for (var j = 1; j < 5; j++)
				{
					for (var i = 3; i > 0; i--)
					{
						SelfSquare = document.getElementById("s" + j + i);
						if (SelfSquare.innerHTML != "")
						{
							for (var k = i + 1; k < 5; k++)
							{
								FrontSquare = document.getElementById("s" + j + k);
								if (false == Check())
                                    break;
							}
							CheckTargetExist();
						}
					}
				}
			}
						
			function MoveUp()
			{				
				for (var i = 1; i < 5; i++) // column
				{
					for (var j = 2; j < 5; j++) // row
					{
						SelfSquare = document.getElementById("s" + j + i);
						if (SelfSquare.innerHTML != "") // 找到不为空的格子
						{
							for (var k = 1; k < j; k++)
							{
								FrontSquare = document.getElementById("s" + (j - k) + i);
								if (false == Check())
                                    break;
							}
							CheckTargetExist();
						}
					}
				}
			}
						
			function MoveDown()
			{
				for (var i = 1; i < 5; i++) // column
				{
					for (var j = 3; j > 0; j--) // row
					{
						SelfSquare = document.getElementById("s" + j + i);
						if (SelfSquare.innerHTML != "")
						{
							for (var k = j + 1; k < 5; k++)
							{
								FrontSquare = document.getElementById("s" + k + i);
								if (false == Check())
                                    break;
							}
							CheckTargetExist();
						}
					}
				}
			}
			BornSquare();
		</script>
	</body>
</html>

缘起性本空

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS Javascript 2048小游戏[200行]，可能有BUG

<!DOCTYPE html><html> <head> <style> div { border: 1px red solid; } .wrapper { width: 420px; height: 420px; margin: 0 auto; position: relative; } .square { float: left; .
复制链接

扫一扫