首页 > 代码库 > 纯JS写的2048游戏，分享之

纯JS写的2048游戏，分享之

2024-11-18 00:36:02   202人阅读

这几天玩儿着2048这个游戏，突然心血来潮想练习下敲代码的思路。于是乎就模仿做了一个，到眼下位置还没有实现动态移动，不是非常好看，只是玩儿着自己模仿的小游戏还是蛮爽的，哈哈


假设没有玩儿过这个游戏，最好先试玩儿下，这样看起下边的代码来easy些

用的是event。临时不支持firefox下玩儿。。。

试玩儿>>


里边好多步骤写得不够简单介绍明了。欢迎指正

两个小时构思，主要构思用什么形式存表格，以及当中用到的几个比較关键的方法，比方：是否须要移动，是否须要合并，移动方法。合并方法等，然后開始编程的时候会遇到非常多问题，慢慢解决之


<html>
	<head>
		<title>2048</title>
		<meta http-equiv=‘content-type‘ content=‘text/html;charset=gb2312‘ />
		<style type="text/css">
			body,div,ul,li,p{padding:0;margin:0;border-radius:10px;}
			body{
				font-family:"Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
				background:#FFFCEC;
			}
			.game_box{
				margin:20px auto;
				width:400px;
			}
			.info{
				height:60px;
				color:#333;
				font-size:32px;
			}
			.main_box{
				border:2px solid #8E8E8E;
				background-color:#8E8E8E;
				height:396px;
				color:#333;
				font-size:36px;
				font-weight:700;
				text-align:center;
				line-height:100px;
			}
			.main_box li{
				float:left;
				background:#d0d0d0;
				border:4px solid #8E8E8E;
				height:91px;
				width:91px;
			}
			.rule{
				color:#333;
				font-size:16px;
			}
		</style>
	</head>
	<body onl oad="init();" onkeyup="run();">
		<div class="game_box">
			<div class="info">
				<p style="float:right;">得分：<span id="score">0</span></p>
				最大值：<span id="max_value">0</span>
			</div>
			<ul class="main_box">
				<li id="11"></li>
				<li id="12"></li>
				<li id="13"></li>
				<li id="14"></li>
				<li id="21"></li>
				<li id="22"></li>
				<li id="23"></li>
				<li id="24"></li>
				<li id="31"></li>
				<li id="32"></li>
				<li id="33"></li>
				<li id="34"></li>
				<li id="41"></li>
				<li id="42"></li>
				<li id="43"></li>
				<li id="44"></li>
			</ul>
			<div style="clear:both;"></div>
			<p class="rule">玩法：</p>
			<p class="rule">1.用键盘上下左右键控制数字走向</p>
			<p class="rule">2.当点击了一个方向时，格子中的数字会所有往那个方向移动。直到不能再移动，假设有同样的数字则会合并</p>
			<p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p>
		</div>
	</body>
	<script type="text/javascript">
		var table = {
			11:0,12:0,13:0,14:0,
			21:0,22:0,23:0,24:0,
			31:0,32:0,33:0,34:0,
			41:0,42:0,43:0,44:0
		};//整个表格
		var cur_queue = null;//因为移动时是一行或一列移动的，此变量代表须要处理的当前行和列
		var direction = 0;//当前操作移动的方向
		var max_value = http://www.mamicode.com/0;//最大值>


如需转载，请注明作者及出处。

纯JS写的2048游戏，分享之


联系
我们