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(’