原生JS+HTML表格Table实现2048小游戏

最新推荐文章于 2024-08-20 11:01:09 发布

爱写点东西的留白

最新推荐文章于 2024-08-20 11:01:09 发布

阅读量772

点赞数 7

分类专栏：前端实例文章标签： 2048 原生js table 源代码

本文链接：https://blog.csdn.net/LiuBai_X/article/details/89643009

版权

本文介绍了如何利用JavaScript和HTML表格元素实现2048小游戏。作者通过创建格子类，结合键盘事件监听，实现棋盘上数字的移动和合并。并提供了HTML、CSS及JavaScript代码示例。

摘要由CSDN通过智能技术生成

最近闷头学习JS，有些收获，闲着实现了个2048小游戏，废话不多说，直接看效果、代码。

效果图

1.思路

2048首先是一个4*4的16格棋盘，那么用表格还挺方便的，表格直接text-align就可以把文字左右、上下居中。
其次，每个格子块有自己的数字，那么就可以有一个格子块类Div，它有属性number，有方法is2048（）判断是否通关，一个格子实例的数组就代表了16个格子。
我们可以通过监听键盘的onkeydown事件来判断格子块移动方向，百度得知←↑→↓键盘码分别为37、38、39、40，通过window.event.keyCode获得当前敲击键盘事件的键盘码。（这里有个小坑，onkeypress只能监听数字、字母键，所以不能通过它来监听up这样的功能键）
得到移动方向后，如果是左右那就是横向移动，为了简化操作，可以把格子数组按行（横行竖列）分割成4个格子数组，每个数组代表每一行的格子，对一行的所有格子遍历，非零格子向左或右移动，直到碰到另一个非零格子，上下操作则按列分割。（移动并不是td节点的移动，而是格子实例的number的变化）
因为移动是对格子实例的number的操作，所以页面并不会变化，就需要一个函数render（）来更新页面，根据每个格子类的number依次对td节点的数字、背景颜色操作。

2.html以及css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>2048Game</title>
		<style>
			tr{
				height: 25%;
			}
			td{
				border: 4px solid antiquewhite;
				font-size: 40px;
				color: antiquewhite;
				width: 25%;
				text-align: center;
			}
			.pane{
				margin-left: 100px;
				margin-top: 50px;
				border: 2px solid gainsboro;
				height: 600px;
				width: 600px;