2048 的原始版本最早发布在 GitHub 上，原作者是 Gabriele Cirulli。它是一款基于“1024”和“小三传奇”玩法开发的新数字游戏。2014 年，Gabriele Cirulli 利用周末时间为 2048 这个游戏编写了程序，只是为了好玩。他想创建自己的游戏版本，具有不同的视觉显示效果和更快的动画。作者的初衷只是为了好玩。在将开源版本放在 Github 上后，它意外地在互联网上流行起来。各大平台的开发人员在 2048 原始版本的基础上开发了各种版本的 2048，包括传统版、六边形版、王朝版、2048 3D 中国版、2048 后宫版等。不过，唯一的缺点是游戏是作为手机游戏开发的，PC 玩家最初无法玩到。本次我通过HTML5和javascript技术在PC端实现了2048的原版，游戏保持了原版游戏的规则，由于PC操作方式的限制音效，游戏暂时不能通过触摸进行，玩家可以使用鼠标来模拟手机的手指操作进行游戏。游戏是在浏览器端实现的，建议使用较新版本的Chrome或者Firefox浏览器，这样游戏体验会最好。这款游戏主要使用目前最流行的html5技术、CSS技术和javascript技术进行开发。
Html5和CSS3主要用于开发游戏界面，javascript主要用于编写游戏代码，实现游戏中用到的各种算法。 关键词：HTML5，CSS，javascript，2048，游戏，请网页！！！ 1.引言 1.1发展背景 随着科技的革新，手机也面临着一次次的更新换代，每一次的技术革新都会被很多人关注，手机更新的浪潮也不断的到来。2007年第一代iPhone发布，2008年7月11日苹果推出iPhone 3G，从此智能手机的发展迎来了全新的时代，不久之后谷歌发布了Android智能手机操作系统，随后智能手机风靡全球3D素材，在全球各个地区掀起了换机潮。 智能手机，顾名思义，就是以“智能”为特点的，智能手机就像个人电脑一样，有独立的操作系统，有独立的操作空间。用户可以安装第三方服务商提供的软件、游戏、导航等程序，并可以通过移动通信网络接入无线网络。在第三方应用中，游戏占了很大比重。正因如此，近年来全球越来越多的开发者转向移动游戏开发。Gabriele Cirulli 利用周末时间编写了游戏《2048》的程序，起初只是为了好玩，没想到上传到网上后竟然火了。
但是这款游戏是针对手机开发的，由于有些玩家更喜欢在PC上玩游戏，所以这次我想将热门游戏2048通过浏览器在PC上本地实现。 1.2 开发内容 这款游戏在PC上的实现主要依赖浏览器2048游戏设计，开发平台主要使用visual studio 2013和Google Chrome浏览器，语言主要使用HTML5和javascript的结合来实现更好的游戏效果，使用HTML5和CSS结合构建游戏界面，使用javascript和jquery库对游戏进行编码。 2.游戏开发相关技术 2.1 开发工具介绍 这款游戏的开发工具选择了Visual studio 2013，以HTML5和javascript为主要语言，同时使用了CSS布局和jquery库。 2.1.1 visual studio 2013简介 Visual Studio 2013是美国软件巨头微软开发的一款功能强大的IDE，适合各类开发人员。通过使用单一 IDE，即可创建适用于 Windows、iOS、Android 等多平台的应用程序。Web、移动和云开发工具为 Windows、Android 和 iOS 构建应用程序集成的设计器、编辑器、调试器和分析器使用 C#、C++、JavaScript、Python、TypeScript、Visual Basic、F# 等编写代码能够部署、调试和管理 Microsoft Azure 服务数千种扩展（从 PHP 到游戏）2.2 开发与应用技术简介2.2.1 HTML5 简介HTML5 是 HTML 的最新修订版本，万维网联盟（W3C）于2014 年 10 月完成了标准制定。
其目标是取代1999年制定的HTML 4.01和XHTML 1.0标准，使网页标准在互联网应用飞速发展的情况下，能够满足当代网页的需求。广义上讲HTML52048游戏设计，其实是指包括HTML、CSS和JavaScript在内的一套技术，希望减少网页浏览器对基于插件的富互联网应用服务（RIA）的需求，如Adobe Flash、Microsoft Silverlight和Oracle JavaFX，并提供更多能够有效增强网页应用的标准集。具体来说，HTML5增加了很多新的语法特性，包括video、audio和canvas元素，并整合了SVG内容。这些元素的加入，使得在网页中添加和处理多媒体和图像内容更加容易。其他新元素如section、article、header和nav的加入，也丰富了文档的数据内容。为了同样的目的，也增加了新的属性。同时，也删除了一些属性和元素。一些元素，如a、cite和menu，进行了修改、重新定义或标准化。同时API和DOM也成为了HTML5的基础部分，HTML5还定义了处理非法文档的具体细节，以便所有浏览器和客户端程序都能一致地处理语法错误。
2.2.2 javascript简介 JavaScript是一种针对互联网终端的扩展语言，它由Netscape公司的LiveScript发展而来，具有原始继承、面向对象、非静态类型、区分大小写等特点，主要目的是解决服务器端的语言问题。加入JavaScript可以为Netscape公司的网页查看器Navigator提供一些最基本的验证数据的功能。 2.2.3 jQuery简介 jQuery是开源软件，遵循MIT许可证。jQuery的语法设计使很多操作变得简单，比如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、开发Ajax程序等。jQuery还为开发人员提供了在其上创建插件的能力，这使得开发人员可以为底层的交互和动画、高级效果、高级主题抽象出组件。模块化的方法使jQuery函数库能够创建功能强大的动态网页和网络应用程序。 jQuery 有以下特点： 跨浏览器的 DOM 元素选择 DOM 巡查与修改：支持 CSS 1-3 事件（Events） CSS 操控效果与动画（移动显示位置、淡入、淡出） Ajax 扩展工具：如浏览器版本（内置的已经取消并由 jQuery Migrate 插件提供）及各功能。
JavaScript插件轻量级jQuery 1.8.0版本 (内置Sizzle.js)： 文件行大小 jquery-1.8.0.min.js 291KB jquery-1.8.0.js 9228254KB DHTML?DOM 选择器与链式语法 通过jQuery的DHTML DOM选择器，可以更加方便地操作复杂的树状HTML中的任意DHTML DOM对象，并且可以使用链式语法操作同一个对象的不同属性。 例如：$(p.surprise).addClass(ohmy).show(slow); 相当于找到HTML p标签，class为surprise的DHTML DOM对象会在其Class属性上增加一个ohmy（通常配合CSS定义，用于修改显示时的颜色） 开启显示 CSS 1-3选择器： 支持使用CSS选择器选择DOM对象。跨浏览器：跨浏览器的AJAX解决方案，支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+。 简单：比其他JavaScript库更容易上手。 3.功能 3.1游戏功能结构图 3.2游戏代码结构： 4.设计内容 2048游戏代码： /*根据移动方向进行处理*/ move: function (direction) { switch (direction) { case up: this.moveUp(); break; case right: this.moveRight(); break; case down: this.moveDown(); break; case left: this.moveLeft(); break; } }, Top: moveUp: function () { //i表示行号，j表示列号 for (var j = 0; j 4; j++) { for (var m = 0; m 3; m++) {//最坏情况是[2,0,0,0]需要3次才能移动到最右边，所以在列上做3次循环 for (var i = 0; i 3; i++) { //将非零数按顺序排列 if (this.data[i][j] == 0 this.data[i + 1][j] != 0) { this.data[i][j] = this.data[i + 1][j]; this.data[i + 1][j] = 0; this.slide = true; //如果有移动，就可以滑动} } } } for (var j = 0; j 4; j++) { for (var i = 0; i 3; i++) { if (this.data[i][j] != 0 (this.data[i][j] == this.data[i + 1][j])) { this.data[i][j] = 2 * this.data[i][j]; //合并 this.data[i + 1][j] = 0; this.score += this.data[i][j]; this.slide = true; //如果有合并，就意味着生成了新的0位置} } } for (var j = 0; j 4; j++) { for (var m = 0; m 2; m++) {//最坏情况是需要2次才能将[0,4,0,0]移动到最右边，所以在该列上做2次循环 for (var i = 0; i 3; i++) { //将非零数按顺序排列 if (this.data[i][j] == 0 this.data[i + 1][j] != 0) { this.data[i][j] = this.data[i + 1][j]; this.data[i + 1][j] = 0; } } } } if (this.slide) { //滑动之后，在0位置生成一个随机数 this.randomNum(); } this.slide = false; this.reprint(); }, for (var j = 0; j 4; j++) { for (var i = 3; i 0; i--) { if (this.data[i][j] != 0 (this.data[i][j] == this.data[i - 1][j])) { this.data[i][j] = 2 * this.data[i][j]; //合并 this.data[i - 1][j] = 0; this.score += this.data[i][j]; this.slide = true; //如果有合并，则意味着生成了新的0号位置} } } for (var j = 0; j 4; j++) { for (var m = 0; m 2; m++) {//最坏情况是[0,4,0,0]需要2次移动到最右边，所以在该列上做2次循环for (var i = 3; i 0; i--) { //将非零数按顺序排列 if (this.data[i][j] == 0 this.data[i - 1][j] != 0) { this.data[i][j] = this.data[i - 1][j]; this.data[i - 1][j] = 0; } } } } if (this.slide) { //滑动之后，在0号位置生成一个随机数 this.randomNum(); } this.slide = false; this.reprint(); },Right: moveRight: function () { //i表示行号，j表示列号 for (var j = 0; j 4; j++) { for (var m = 0; m 3; m++) { for (var i = 3; i 0; i--) { if (this.data[j][i] == 0 this.data[j][i - 1] != 0) { this.data[j][i] = this.data[j][i - 1]; this.data[j][i - 1] = 0; this.slide = true;//有移动，就是能滑动} } } } for (var j = 0; j 4; j++) { for (var i = 3; i 0; i--) { if } } } for (var j = 0; j 4; j++) { for (var m = 0; m 2; m++) { for (var i = 3; i 0; i--) { if (this.data[j][i] == 0 this.data[j][i - 1] != 0) { this.data[j][i] = this.data[j][i - 1]; this.data[j][i - 1] = 0; } } } if (this.slide) { //滑动之后，在0位置生成一个随机数 this.randomNum(); } this.slide = false; this.r
