纯JS写的2048游戏，分享之

这几天玩儿着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 onload="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 = 0;//最大值

		var score = 0;//最高分数

		function is_num_exist() {//推断当前处理行（列）是否有数字。有则进行处理。无则不用处理

			return table[cur_queue[1]]||table[cur_queue[2]]||table[cur_queue[3]]||table[cur_queue[4]];

		}

		function need_move() {//当前行（列）是否须要移动（不包含合并）

			if(Boolean(table[cur_queue[4]])>=Boolean(table[cur_queue[3]])&&Boolean(table[cur_queue[3]])>=Boolean(table[cur_queue[2]])&&Boolean(table[cur_queue[2]])>=Boolean(table[cur_queue[1]])) {

				return false;

			}else {

				return true;

			}

		}

		function need_merge() {//当前行（列）是否须要合并

			if((table[cur_queue[4]]==table[cur_queue[3]])&&table[cur_queue[4]]&&table[cur_queue[3]]||(table[cur_queue[3]]==table[cur_queue[2]])&&table[cur_queue[3]]&&table[cur_queue[2]]||(table[cur_queue[2]]==table[cur_queue[1]])&&table[cur_queue[2]]&&table[cur_queue[1]]) {

				return true;

			}else {

				return false;

			}

		}

		function move() {//对当前行（列）的数字进行移动

			for(var i=4;i>=2;i--) {

				if(Boolean(table[cur_queue[i]]<Boolean(table[cur_queue[i-1]]))) {

					table[cur_queue[i]] = table[cur_queue[i-1]];

					table[cur_queue[i-1]] = 0;

					break;

				}

			}

		}

		function merge() {//对当前行（列）的数字进行合并

			for(var i=4;i>=2;i--) {

				if(table[cur_queue[i]]==table[cur_queue[i-1]]) {

					score=score+table[cur_queue[i]];

					table[cur_queue[i]] = table[cur_queue[i]]+table[cur_queue[i-1]];

					table[cur_queue[i-1]] = 0;

					document.getElementById("score").innerHTML=score;//更新最高分

					break;

				}

			}

		}

		function run() {//点击上下左右键时開始运行

			var done = false;

			if(event.keyCode>=37&&event.keyCode<=40) {//仅仅有

				set_direction();//设置移动方向參数

				for(var i=1;i<=4;i++) {//因为一个方向上移动时有4行（列）所以须要逐行处理

					set_cur_queue(i);//设置当前行（列）

					if(is_num_exist()) {

						if(need_move()||need_merge()) {

							done = true;//此变量用来限制每次仅仅合并一次

						}

						while(need_move()) {//假设能够移动则一直移动

							move();

						}

						if(need_merge()) {//假设须要合并

							if(table[cur_queue[1]]==table[cur_queue[2]]&&table[cur_queue[3]]==table[cur_queue[4]]) {//特例，当一行（列）上四个数字所有同样时候，进行两次合并

								merge();

								while(need_move()) {

									move();

								}

								merge();

							}else {

								merge();

								while(need_move()) {

									move();

								}

							}

						}

					}

				}

				//var empty_box = find_empty_box();//获取当前空格子集合

				//if(empty_box.length==0&&!need_merge()) {//假设没有没有空位且不能合并

				//	alert('Game over');

				//	return;

				//}

				if(done) {//假设此次有移动或合并，即有效操作，则生成新的数字

					create_and_set_num();

				}

				update_max_value();//更新最大值

				draw();//又一次绘制表格用于显示

			}

		}

		function update_max_value() {

			max_value = Math.max(table[11],table[12],table[13],table[14],table[21],table[22],table[23],table[24],table[31],table[32],table[33],table[34],table[41],table[42],table[43],table[44]);

			document.getElementById("max_value").innerHTML=max_value;

		}

		function set_cur_queue(queue_num) {

			if(direction == 37) {

				cur_queue = {1:queue_num*10+4,2:queue_num*10+3,3:queue_num*10+2,4:queue_num*10+1};

			}else if(direction == 38) {

				cur_queue = {1:40+queue_num,2:30+queue_num,3:20+queue_num,4:10+queue_num};

			}else if(direction == 39) {

				cur_queue = {1:queue_num*10+1,2:queue_num*10+2,3:queue_num*10+3,4:queue_num*10+4};

			}else if(direction == 40) {

				cur_queue = {1:10+queue_num,2:20+queue_num,3:30+queue_num,4:40+queue_num};

			}else {

				cur_queue = {1:queue_num*10+1,2:queue_num*10+2,3:queue_num*10+3,4:queue_num*10+4};

			}

		}

		function draw() {//总体刷新16个格子

			for(var i=10;i<=40;i+=10) {

				for(var j=1;j<=4;j++) {

					if(table[i+j]!=0) {

						document.getElementById(i+j).innerHTML=table[i+j];

					}else {

						document.getElementById(i+j).innerHTML='';

					}

				}

			}

		}

		function set_direction() {//设置此次移动的方向

			direction = event.keyCode;

		}

		function set_new_num(empty_box) {//生成新的数字

			var num = 0;

			var ranNum = Math.random()*100;

			if(ranNum>80) {

				num = 4;

			}else {

				num = 2;

			}

			var box_num = Math.floor(Math.random()*(empty_box.length));

			table[empty_box[box_num]] = num;

		}

		function find_empty_box() {//获得所有的空格子。即值为0的格子集合

			var empty_box = [];

			for(var num in table) {

				if(table[num]==0) {

					empty_box.push(num);

				}

			}

			return empty_box;

		}

		function init() {

			create_and_set_num();

			for(var i=1;i<=4;i++) {

				set_cur_queue(i);

				draw();

			}

			update_max_value();

		}

		function create_and_set_num() {

			var empty_box;

			empty_box = find_empty_box();

			set_new_num(empty_box);

		}

	</script>

</html>

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

纯JS写的2048游戏，分享之的更多相关文章

JavaScript中纯JS写21点游戏
// 21点游戏分为人机对战和人人对战 // 玩家每次抽一张牌牌的点数为1-10点随机数谁更接近21点谁就获胜 let readline = require("readline-syn ...
纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html&g ...
280行代码：Javascript 写的2048游戏
2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.最好还是就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算 ...
使用纯js写的一个分页
上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...
用html5 canvas和JS写个数独游戏
为啥要写这个游戏? 因为我儿子二年级数字下册最后一章讲到了数独.他想玩儿. 因为我也想玩有提示功能的数独. 因为我也正想决定要把HTML5和JS搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
纯JS写出日历
封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

随机推荐

Master定理学习笔记
前言 $Master$定理,又称主定理,用于程序的时间复杂度计算,核心思想是分治,近几年$Noip$常考时间复杂度的题目,都需要主定理进行运算. 前置我们常见的程序时间复杂度有: \(O(n ...
Abp数据库迁移注意事项
前记:昨天下载了一个Abp模板,然后尝试利用EF CodeFirst进行数据库生成操作,然后就是一直报错在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务 ...
[USACO 2018 Open Gold] Tutorial
Link: 传送门 A: 对于每一条分割线,设本不应在其左侧的个数为$x$ 重点要发现每次一来一回的操作恰好会将一对分别应在左/右侧的一个数从右/左移过去这样就转直接用树状数组求出最大的$x$即可 ...
[BZOJ3576]江南乐
挺好的题我们算出每个数的sg值后异或起来即可对于$n$,我们要求$sg_n$ 朴素的想法是枚举把$n$个石子分成$m$堆,有$m-n\%m$堆大小为$\left\lfloor\frac nm\ri ...
python基础之序列化 time random os
序列化与反序列化 json pickle 1.什么是序列化与反序列化? 序列化就是将内存中的数据结构转成一种中间格式储存到硬盘或者基于网络传输反序列化是网络,硬盘将被序列化的对象重新读到内存 2. ...
Springcloud中的region和zone的使用
一.背景用户量比较大或者用户地理位置分布范围很广的项目,一般都会有多个机房.这个时候如果上线springCloud服务的话,我们希望一个机房内的服务优先调用同一个机房内的服务 ,当同一个机房的服务不 ...
Activity(活动)生命周期（3）--活动的生存期
Activity类中定义了7中回调方法,覆盖了活动生命周期的每一个环节. 回调方法: 1.onCreate() 这个方法会在活动第一次被创建的时候调用.我们应该在这个方法中完成活动的初始化操作,比如: ...
CentOS 6.9下KVM虚拟机网络Bridge（网桥）方式与NAT方式详解（转）
摘要:KVM虚拟机网络配置的两种方式:NAT方式和Bridge方式.Bridge方式的配置原理和步骤.Bridge方式适用于服务器主机的虚拟化.NAT方式适用于桌面主机的虚拟化. NAT的网络结构图: ...
Linux下KVM的图形界面管理工具（WebVirtMgr）（Web版）
WebVirtMgr面板截图介绍 WebVirtMgr是一个基于libvirt的Web界面,用于管理虚拟机.它允许您创建和配置新域,并调整域的资源分配.VNC查看器为来宾域提供完整的图形控制台.K ...
使用XML向SQL Server 2005批量写入数据——一次有关XML时间格式的折腾经历
使用XML向SQL Server 2005批量写入数据——一次有关XML时间格式的折腾经历原文:使用XML向SQL Server 2005批量写入数据——一次有关XML时间格式的折腾经历常常遇 ...

纯JS写的2048游戏，分享之

纯JS写的2048游戏，分享之的更多相关文章

随机推荐

热门专题