ELECTRONICS WORLD·j6； 雾 与 粤 赛 基 于HTM L+CSS+J S的网页；I~2 048的实现 【摘要 】描述了一个使用HTML和css进行uI界面设计，使用Js进行后台逻辑设计的网页版2()48小游戏的实现．． 【关键词 】HTML；CSS；js；网页版；2()48 1．前言 2048是一款简单而流行的休闲益销类小游戏，凭借着简单而1 失美观的ul设计 与独特的创意吸0I_r许彩的游戏玩家。游戏一一开始 会产 两个数宁2或4，将所有数字 苻 ’个方向移动时，卡H同的数 字会替加，同时 自地方会产生 一个新的数字，然J 重复操作 随 到 得到 个2048就算胜利。 为规则简单，所以2048小游戏仃许多 版本，本文 分析 与研究如何使用js来 现游戏的 辑设计 。 2．设计 2．1总体架构 (1)该2048小游戏采片{而向过程的设计方法，整个开发过程 一 共用五个文件实现。game．html用 于对游戏界面元素进行简 单布 局，gameStyle．CSS用于设计界面元素的样式，mainFunction．js用于设 计该游戏的主逻辑。bottom,js用于存放一些被主逻辑所调用的底层 逻辑，showAnimation．js~,4是用于存放动画效果。 (2)游戏的 循环 则是根据玩家所按的方向键决定所需调用 的 函数 。 2_2逻辑设计与实现 ===～ ／ 一 ( 学 ’ 三⋯⋯～] ＼、／ ， 熊 ? ( ’ ● l _、／ ／V l二 ／ ， ／／ 图1游 戏活动图 整个游戏的大致流程用活动 图表示如图l所示，最终效果如 图! 所示 。 其 中： (1)棋盘初始化 如图3所示 ，首先将一个棋盘划分为4*4的类名为child．cell的 底层div，然后再为每个小格子添加一层类名为number-cell的div用 于存放数据 并且将数据的值赋为0。如果数据为0，则只显示底层 div，如果数字非0，顶层的div将会 以动画的形式覆盖底层 的divd, 格子 。核心代码如下所示。 ·32 · 屯 早 世 界 山西农业大学 王艺燕 Fcr( i O i、4．i ) 港毋每十小格子 for e j=O 5<4 j $( #f日therT8b1日 ) ap~ d(’
