博主教你轻轻松松利用js技巧 写出属于自己的2048小游戏!!
自己做出实现在页面中
想必大家都听说过甚至玩过2048这款小游戏 博主无聊时也会拿起手机或者在电脑上玩上几把 但是大家有没有想过自己花费点时间做出一个2048游戏 会不会非常有成就感呢?
废话不多说 开始
一.首先大家要整理一下逻辑。
首先大家在打开电脑,准备敲代码写出游戏的时候,一定要先思考,该游戏的每一步应该用什么样的逻辑判断去表达,包括游戏的输赢判断条件是什么,有没有理清楚,建议没玩过的宝贝们可以下载一个去玩玩,是非常有必要的。
1>游戏的界面应该怎么样用css去设计更为美观
每个人都有自己的审美观 在做到保证基本样式的情况下 可以添加一些自己的元素进去
2>游戏的开始与结束:
需要添加:游戏进行状态(status) 游戏结束状态(gameover) 游戏运行状态 (gamerunning)
然后分别写出游戏开始的代码块封装成一个函数 命名为“start游戏开始函数”。然后写出游戏在什么状态下会结束,写出一个总的判断条件封装成“gameover游戏结束函数”。
3>游戏的视图更新 分数,样式,数据
需要添加:游戏得分属性(score) 游戏数据存储数组[data]
然后写出游戏进行时视图的更新.样式的变化.数据的变化.分数的变化 封装成一个函数用来进行调用。
>特别重要的操作按钮键
创建键盘上下左右键按下事件绑定各自的功能
按下左键 数字移动功能封装成一个函数
按下左键 数字进行相加的功能以及判定封装成两个函数
为了保证游戏的完整性 所有的封装函数功能都是相辅相成的 所以每一个都是不可缺少的
二 在HTML文档中利用css写出游戏基本样式
因为布局比较简单 博主在这简单介绍一下我的布局 主要还是讲解js部分
首先打开百度搜索2048小游戏 然后对比页面进行设计 先上博主的效果图:
(ul li) 标签部分为游戏格 用div写也是一样的效果
注意:博主为了方便稍后的调用 li标签的id名 才设置成这个样子 与行列一一对应
(div的tab属性名标签)为游戏分数与历史分数
(div的zhebu属性名标签)为游戏结束后全屏遮布效果
<body>
<div class="father">
<div class="top_1">
<div class="top_l">
<p class="bigzi">2048</p>
<p class="bigzi1">Play 2048 Game Online</p>
<p class="bigzi2">Join the numbers and get to the <b>2048 tile!</b> </p>
</div>
<div class="top_r">
<div class="tab tab1">
<p>BEST</p>
<P class="score03">0</P>
</div>
<div class="tab tab2">
<p class="score01">SCORE</p>
<P class="score02">0</P>
</div>
<div class="tab3">
<p><button>New Gamen</button></p>
</div>
</div>
</div>
<div class="bot">
<ul>
<li class="cell" id="c00"></li>
<li class="cell" id="c01"></li>
<li class="cell" id="c02"></li>
<li class="cell" id="c03"></li>
<li class="cell" id="c10"></li>
<li class="cell" id="c11"></li>
<li class="cell" id="c12"></li>
<li class="cell" id="c13"></li>
<li class="cell" id="c20"></li>
<li class="cell" id="c21"></li>
<li class="cell" id="c22"></li>
<li class="cell" id="c23"></li>
<li class="cell" id="c30"></li>
<li class="cell" id="c31"></li>
<li class="cell" id="c32"></li>
<li class="cell" id="c33"></li>
</ul>
</div>
</div>
<div id="zhebu">
<p>
GAME OVER !<br> SCORE:
<span id="score00">0</span><br>
<a href="">TRY AGAIN</a>
</p>
</div>
</body>
css样式与大家分享一下 博主写的比较简略
<style>
//以下为主结构基本样式
* {
margin: 0px;
padding: 0px;
list-style: none;
/* background-color: #FAF8EF; */
}
.father {
width: 510px;
height: 700px;
/* border: 1px solid; */
margin: 0 auto;
z-index: 2;
}
.top_1 {
color: #776E65;
width: 100%;
height: 160px;
background-color: #FAF8EF;
}
.top_r {
width: 150px;
}
.bigzi {
font-weight: 900;
font-size: 75px;
}
.bigzi1 {
font-weight: 900;
font-size: 20px;
}
.top_l,
.top_r {
float: left;
margin-top: 5px;
}
.top_r {
margin-left: 10