网页版2048html制作,基于HTML＋CSS＋JS的网页版2048的实现.pdf

ELECTRONICS WORLD ・探索与观察

基于HTML+CSS+JS的网页版2048的实现

山西农业大学 王艺燕

【摘要】

描述了一个使用HTML和CSS进行UI界面设计，使用JS进行后台逻辑设计的网页版2048小游戏的实现。

【关键词】

HTML；CSS；JS；网页版；2048

1.前言

2048是一款简单而流行的休闲益智类小游戏，凭借着简单而不

失美观的UI设计与独特的创意吸引了许多的游戏玩家。游戏一开始

会产生两个数字2或4 ，将所有数字朝着一个方向移动时，相同的数

字会叠加，同时在空白地方会产生一个新的数字，然后重复操作直

到得到一个2048就算胜利。因为规则简单，所以2048小游戏有许多

版本，本文将分析与研究如何使用js 来实现游戏的逻辑设计。

2.设计

2.1 总体架构

(1)该2048小游戏采用面向过程的设计方法，整个开发过程

一共用五个文件实现。game.html用于对游戏界面元素进行简单布

局，gameStyle.css用于设计界面元素的样式，mainFunction.js用于设

计该游戏的主逻辑，bottom.js 用于存放一些被主逻辑所调用的底层

逻辑，showAnimation.js则是用于存放动画效果。

(2 )游戏的主循环则是根据玩家所按的方向键决定所需调用 图2 效果图 图3 棋盘初始化

的函数。

2.2 逻辑设计与实现 (2 )是否可以左移 (以左移为例)

在这一部分的逻辑设计中&#