用JS实现2048小游戏

最新推荐文章于 2023-11-14 11:38:02 发布
最新推荐文章于 2023-11-14 11:38:02 发布
阅读量582 收藏 3
点赞数 1
分类专栏： 前端 文章标签： JS 小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41664447/article/details/84314689
版权

前言

< HTML >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Game-2048</title>
	</head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<body>
		<!--因为js需要调用body中的元素，所以将它放在body中引入-->
		<script type="text/javascript" src="Game.js"></script>
		<div id="Game_top">
			<button id="restart" class="btn" onclick="restart()">重新开始</button>
			<button id="regret" class="btn" onclick="regret()">撤回上一步</button>
		</div>
		<!--2048的面板-->
		<div id="Game_panel">
			<!--第一行-->
			<div class="grid" id="grid_00"></div>
			<div class="grid" id="grid_01"></div>
			<div class="grid" id="grid_02"></div>
			<div class="grid" id="grid_03"></div>
			<!--第二行-->
			<div class="grid" id="grid_10"></div>
			<div class="grid" id="grid_11"></div>
			<div class="grid" id="grid_12"></div>
			<div class="grid" id="grid_13"></div>
			<!--第三行-->
			<div class="grid" id="grid_20"></div>
			<div class="grid" id="grid_21"></div>
			<div class="grid" id="grid_22"></div>
			<div class="grid" id="grid_23"></div>
			<!--第四行-->
			<div class="grid" id="grid_30"></div>
			<div class="grid" id="grid_31"></div>
			<div class="grid" id="grid_32"></div>
			<div class="grid" id="grid_33"></div>
		</div>
	</body>
</html>

< CSS >

* {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-weight: inherit;
			font-style: inherit;
			font-family: inherit;
			text-align: left;
			vertical-align: baseline;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		}
		#Game_top {
			width: 600px;
			height: 50px;
			background: aliceblue;
			margin: 0 auto;
		}
		#Game_top button {
			font-size: 20px;
			width: 140px;
			height: 50px;
			margin: 3px;
			cursor: pointer;
			background-color: gray;
			color: white;
			text-align: center;
		}
		
		#Game_panel {
			width: 600px;
			height: 600px;
			background-color: beige;
			margin: 0 auto;
		}
		.grid {
			width: 140px;
			height: 140px;
			margin: 5px;
			background-color: bisque;
			float: left;
			font-size: 80px;
			line-height: 140px;
			text-align: center;
		}

< JS >

var grid = document.getElementsByClassName("grid");
var arr_before = [
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0]
];
var arr_now = [
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0]
];
//重新开始游戏
function restart() {
	if(confirm("是否确定重新开始？")) {
		newGame();
	}
}
window.onload = function() {
	newGame();
}
//开始新的游戏
function newGame() {
	for(var i = 0; i < 4; i++) {
		for(var j = 0; j < 4; j++) {
			document.getElementById("grid_" + i + j).innerHTML = '';
		}
	}
	newGridRandom();
	panel_before();
	score();
}
//随机选择产生数字的格子
function getGrid() {
	if(!isFull()) {
		var gArr = new Array(16);
		var indexArr = new Array();
		for(var i = 0; i < 16; i++) {
			if(isEmpty(grid[i])) {
				gArr[i] = 1;
			} else {
				gArr[i] = 0;
			}
		}
		for(var i = 0; i < 16; i++) {
			if(gArr[i] == 1) {
				indexArr.push(i);
			}
		}
		return grid[indexArr[Math.floor(Math.random() * indexArr.length)]];
	}
}
//随机产生数字2或4
function getRandom() {
	var x = Math.random();
	x < 0.5 ? x = 2 : x = 4;
	return x;
}
//随机空格子产生随机数字2或4
function newGridRandom() {
	if(!isFull())
		getGrid().innerHTML = getRandom();
}
//判断所选的格子是不是空格
function isEmpty(x) {
	if(x != null) {
		return(x.innerHTML == '');
	} else {
		return false;
	}
}
//格子是否全满
function isFull() {
	for(var i = 0; i < 4; i++) {
		for(var j = 0; j < 4; j++) {
			var g = document.getElementById("grid_" + i + j);
			if(isEmpty(g)) {
				return false;
			}
		}
	}
	return true;
}
//是否发生了改变
function isChanged() {
	if(arr_before.toString() == arr_now.toString())
		return false;
	else
		return true;
}
//存储上一步前情况
function panel_before() {
	for(var i = 0; i < 4; i++) {
		for(var j = 0; j < 4; j++) {
			arr_before[i][j] = parseInt(document.getElementById("grid_" + i + j).innerHTML);
		}
	}
}
//存储当前情况
function panel_now() {
	for(var i = 0; i < 4; i++) {
		for(var j = 0; j < 4; j++) {
			arr_now[i][j] = parseInt(document.getElementById("grid_" + i + j).innerHTML);
		}
	}
}
//判断游戏是否结束（格子全满且相邻格子不相等）
function isOver() {
	var arr = new Array(4);
	if(isFull()) {
		for(var i = 0; i < 4; i++) {
			arr[i] = new Array(4);
		}
		for(var i = 0; i < 4; i++) {
			for(var j = 0; j < 4; j++) {
				arr[i][j] = parseInt(document.getElementById("grid_" + i + j).innerHTML);
			}
		}
		for(var i = 0; i < 3; i++) {
			for(var j = 0; j < 4; j++) {
				if(arr[i][j] == arr[i + 1][j]) {
					return false;
				}
			}
		}
		for(var j = 0; j < 3; j++) {
			for(var i = 0; i < 4; i++) {
				if(arr[i][j] == arr[i][j + 1]) {
					return false;
				}
			}
		}
		return true;
	} else {
		return false;
	}
}
//向上移动
function moveUp() {
	panel_before();
	for(var t = 0; t < 3; t++) {
		var i = 2;
		var j = 0;
		for(var i = 1; i < 4; i++) {
			for(var j = 0; j < 4; j++) {
				var currentGrid = document.getElementById("grid_" + i + j);
				var nextGrid = document.getElementById("grid_" + (i - 1) + j);
				if(isEmpty(nextGrid)) {
					nextGrid.innerHTML = currentGrid.innerHTML;
					currentGrid.innerHTML = '';
				} else if(nextGrid.innerHTML == currentGrid.innerHTML) {
					nextGrid.innerHTML = parseInt(currentGrid.innerHTML) * 2;
					currentGrid.innerHTML = '';
				}
			}
		}
	}
	panel_now();
}
//向下移动
function moveDown() {
	panel_before();
	for(var t = 0; t < 3; t++) {
		var i = 2;
		var j = 0;
		for(i = 2; i >= 0; i--) {
			for(j = 0; j < 4; j++) {
				var currentGrid = document.getElementById("grid_" + i + j);
				var nextGrid = document.getElementById("grid_" + (i + 1) + j);
				if(isEmpty(nextGrid) && !isEmpty(currentGrid)) {
					nextGrid.innerHTML = currentGrid.innerHTML;
					currentGrid.innerHTML = '';
				} else if(!isEmpty(currentGrid) && nextGrid.innerHTML == currentGrid.innerHTML) {
					nextGrid.innerHTML = parseInt(currentGrid.innerHTML) * 2;
					currentGrid.innerHTML = '';
				}
			}
		}
	}
	panel_now();
}
//向左移动
function moveLeft() {
	panel_before();
	for(var t = 0; t < 3; t++) {
		var i = 2;
		var j = 0;
		for(var j = 1; j < 4; j++) {
			for(var i = 0; i < 4; i++) {
				var currentGrid = document.getElementById("grid_" + i + j);
				var nextGrid = document.getElementById("grid_" + i + (j - 1));
				if(isEmpty(nextGrid)) {
					nextGrid.innerHTML = currentGrid.innerHTML;
					currentGrid.innerHTML = '';
				} else if(nextGrid.innerHTML == currentGrid.innerHTML) {
					nextGrid.innerHTML = parseInt(currentGrid.innerHTML) * 2;
					currentGrid.innerHTML = '';
				}
			}
		}
	}
	panel_now();
}
//向右移动
function moveRight() {
	panel_before();
	for(var t = 0; t < 3; t++) {
		var i = 2;
		var j = 0;
		for(var j = 2; j >= 0; j--) {
			for(var i = 0; i < 4; i++) {
				var currentGrid = document.getElementById("grid_" + i + j);
				var nextGrid = document.getElementById("grid_" + i + (j + 1));
				if(isEmpty(nextGrid)) {
					nextGrid.innerHTML = currentGrid.innerHTML;
					currentGrid.innerHTML = '';
				} else if(nextGrid.innerHTML == currentGrid.innerHTML) {
					nextGrid.innerHTML = parseInt(currentGrid.innerHTML) * 2;
					currentGrid.innerHTML = '';
				}
			}
		}
	}
	panel_now();
}
//获取键盘键
document.onkeydown = function(event) {
	if(isOver()) {
		alert("Game Over !");
		newGame();
	} else {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if(e.keyCode == 37) {
			moveLeft();
			if(isChanged()) {
				newGridRandom();
			}
		} else if(e.keyCode == 38) {
			moveUp();
			if(isChanged()) {
				newGridRandom();
			}

		} else if(e.keyCode == 39) {
			moveRight();
			if(isChanged()) {
				newGridRandom();
			}

		} else if(e.keyCode == 40) {
			moveDown();
			if(isChanged()) {
				newGridRandom();
			}
		}
	}
	score();
}
//撤回上一步
function regret() {
	for(var i = 0; i < 4; i++) {
		for(var j = 0; j < 4; j++) {
			document.getElementById("grid_" + i + j).innerHTML = '';
		}
	}
	for(var i = 0; i < 4; i++) {
		for(var j = 0; j < 4; j++) {
			if(!isNaN(arr_before[i][j]))
				document.getElementById("grid_" + i + j).innerHTML = arr_before[i][j];
		}
	}
	score();
}
//更换背景色
function score() {
	for(var i = 0; i < grid.length; i++) {
		if(grid[i].innerHTML != "") {
			var bk = grid[i].innerHTML;
			switch(bk) {
				case "2":
					grid[i].style.backgroundColor = "#dacebc";
					grid[i].style.color = "#987e5c";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "4":
					grid[i].style.backgroundColor = "#eecd6f";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "8":
					grid[i].style.backgroundColor = "orange";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "16":
					grid[i].style.backgroundColor = "#E9967A";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "32":
					grid[i].style.backgroundColor = "#FF6347";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "64":
					grid[i].style.backgroundColor = "red";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "128":
					grid[i].style.backgroundColor = "yellow";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "256":
					grid[i].style.backgroundColor = "green";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "512":
					grid[i].style.backgroundColor = "cyan";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "50px";
					grid[i].style.fontWeight = 600;
					break;
				case "1024":
					grid[i].style.backgroundColor = "darkblue";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "30px";
					grid[i].style.fontWeight = 600;
					break;
				case "2048":
					grid[i].style.backgroundColor = "#bf3eff";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "30px";
					grid[i].style.fontWeight = 600;
					break;
				case "4096":
					grid[i].style.backgroundColor = "#2b2b2b";
					grid[i].style.color = "#FFFFFF";
					grid[i].style.fontSize = "30px";
					grid[i].style.fontWeight = 600;
					break;
			}
		} else {
			grid[i].style.backgroundColor = "#EED5B7";
			grid[i].style.color = "#000000";
			grid[i].style.fontSize = "50px";
		}
	}
}

结语

  • 如有问题或意见，请在下方评论，博主会第一时间回复~
长浔
关注
专栏目录
2048小游戏——简简单单利用js做出自己的游戏！！
fan_ge_的博客
05-12 1426
博主教你轻轻松松利用js技巧 写出属于自己的2048小游戏！！ 自己做出实现在页面中 想必大家都听说过甚至玩过2048这款小游戏 博主无聊时也会拿起手机或者在电脑上玩上几把 但是大家有没有想过自己花费一点时间做出一个2048游戏 会不会非常有成就感呢？ 废话不多说 开始 一.首先大家要整理一下逻辑。 首先大家在打开电脑，准备敲代码写出游戏的时候，一定要先思考，该游戏的每一步应该用什么样的逻辑判断去表达，包括游戏的输赢判断条件是什么，有没有理清楚，建议没玩过的宝贝们可以下载一个去玩玩，是非常有必要的。
使用JS实现2048小游戏
weixin_30270561的博客
05-02 270
JS实现2048小游戏源码 效果图： 代码如下，复制即可使用： （适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。） <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten...
js实现2048小游戏
10-22 225
这是学完javascript基础，编写的入门级web小游戏 游戏规则：在玩法规则也非常的简单，一开始方格内会出现2或者4等这两个小数字，玩家只需要上下左右其中一个方向来移动出现的数字，所有的数字就会想滑动的方向靠拢，而滑出的空白方块就会随机出现一个数字，相同的数字相撞时会叠加靠拢，然后一直这样，不断的叠加最终拼凑出2048这个数字就算成功。但是我们的程序没有终点。 一、HTML部分 ...
JavaScript实现2048小游戏
02-26
JavaScript实现2048游戏源码
原生js 实现2048小游戏
好川的博客
03-07 794
2048小游戏 首先2048小游戏离不开16个格子，我们通过html和css创建好对应的标签和样式，然后开始js逻辑 <div id="box">//一个盒子里面16个小div <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div>
Javascript编写2048小游戏
10-23
### Javascript编写2048小游戏知识点详解 #### 1. 游戏2048简介 2048是一款简单上手的数字拼图游戏。玩家通过上下左右滑动屏幕来移动板块上的数字格子，相同数字的格子在碰撞时会合并成它们的和。游戏的目标是创建...
vue实现2048小游戏功能思路详解
08-27
总结来说，使用Vue.js实现2048小游戏涉及到的主要知识点包括Vue的组件化思想、数据绑定、事件监听、计算逻辑实现（如移动合并算法）、矩阵旋转以及游戏状态管理。通过这个项目，开发者不仅可以提升Vue.js的实战技能...
HTML+JS实现2048小游戏demo
05-05
HTML+JS实现的2048小游戏是一款基于网页的数字拼图游戏，它结合了HTML的结构、CSS的样式和JavaScript的动态交互功能。在这个游戏中，玩家需要通过上下左右滑动棋盘，使得相同数字的方块合并成更大的数字，最终目标是...
微信小程序经典2048小游戏实现版
03-16
标题中的“微信小程序经典2048小游戏实现版”指的是基于微信小程序平台开发的一个游戏应用，它是对流行数字拼图游戏2048的改编。2048游戏的规则简单，玩家通过上下左右滑动屏幕，使得数字方块合并，每次合并相同数字...
原生js实现2048小游戏
08-10
《原生JS实现2048小游戏》 2048是一款广受欢迎的数字合并游戏，它的核心玩法是通过上下左右滑动棋盘，让相同数字的方块合并成更大的数字，直到达到2048这个目标。在这个项目中，我们将探讨如何利用原生JavaScript、...
javascript实现2048小游戏_V1.0.0
08-12
原生Js编写一款2048小游戏 涉及点： 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了，提示游戏接受
js实现的2048游戏
09-06
js实现的2048小游戏。供初学者参考，代码有注释。供参考
2048小游戏js.zip
06-09
这是我跟着别人学习写的2048小游戏,仅供学习和参考里面还有一些bug,希望大家能有所收获.如果没有积分可以私信我
Javascript实现的2048游戏
12-16
2048的JS版，能够实现2048的全部功能，可以根据自己需要做更改
JS2048小游戏代码.zip
05-23
JS2048小游戏代码，原生JS编写。玩法说明:键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。
用javascript实现简版2048小游戏
bs775926015的博客
04-05 1855
** 1、2048小游戏玩法和规则 ** 2048是一款休闲小游戏。 2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。 当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。 2、游戏界面截图 3、2048游戏实现原理 1、游戏界面由16宫格组成，可以看成是矩阵的形式。 2、在HTML中给每个格子添加类名以及属性，来记录每个格子的位置。 3、
2048 js canvas实现2048小游戏及思路
最新发布
NEWonclick的博客
11-14 969
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
使用原生JS实现2048游戏详细代码解析
"使用原生JavaScript实现2048小游戏的代码示例" 在本文中，我们将探讨如何使用原生JavaScript编写2048小游戏。2048是一款基于数字的益智游戏，玩家需要通过滑动屏幕将相同的数字合并，目标是达到2048这个数字。以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值