JavaScript前端 制作2048游戏

2048是非常经典的数字游戏 今天给大家带来JavaScript版本

下面直接上代码重点位置在单独拿出来说 ， 一共分为三部分

---

HTML部分

<div class = 'contain'>
		<div class = 'hearder'>
			<h1 class = 'title'>
				<a href="#">2048</a>
				<input type="button" onclick="game.start()" value="Try Again" class="tryagain0">
			</h1>
			<h1 class = 'score01'>
				score:<span id="score01"></span>
			</h1>
		</div>
		<div class="game-message">
				<p>Game Over</p>
				<p>score:<span id="score02"></span></p>
				<div class="button">
					<input type="button" onclick="game.start()" value="Try Again" class="tryagain">
				</div>
		</div>

<div class="game-contain">
			<div class="game-ex">	
				<div class="game-row">
					<div class="cell " id="c00"></div>
					<div class="cell " id="c01"></div>
					<div class="cell " id="c02"></div>
					<div class="cell " id="c03"></div>	
				</div>

代码不是完整的 header主要是游戏界面上方的一些图标和重新开始按钮以及一些你需要的文字部分 根据自己的喜好或者要求完成即可 ， 下面的十六个方块都是一样的组成 当然也可以通过 ul - li 去布局

CSS部分

body{
   
	color: #776e65;
    font-family:Arial;
    font-size : 18px;
}
.contain{
   
	width : 500px;
	margin : 0 auto;
	display : block;
}
.game-contain{
   
	margin-top:25px;
    padding: 15px;
    background: #bbada0;
    border-radius: 6px;
    width: 500px;
    height: 500px;
    position:relative;
}
.cell{
   
	width: 106.25px;
    height: 106.25px;
    margin-right: 15px;
    float: left;
    border-radius: 10px;
    background: rgba(238, 228, 218, 0.35);
    margin-bottom:15px;
    text-align:center;
    line-height:2.5;
}
.game-message{
   
	display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(238, 228, 218, 0.5);
    z-index: 100;
    text-align: center;
    padding-top:170px;
}

CSS 部分代码主要还是根据自己做的样式这里主要说一下 .game-message 的样式中 top ， right ， bottom ， left 都设置为0 并把堆叠放置在最上层 主要是做一个遮罩层 当用户游戏结束后覆盖整个画面也是为了防止一些其他的操作只能点击返回

JavaScript部分

首先我们的编程都是面向对象的思想 所以我们整个JavaScript部分都是以 game 为一个对象 只是向他添加属性和方法

var game = {
   
	data: [],
	score: 0,
	gameover: 0,
	gameruning: 1,
	status: 1,
	start: function() {
   
		this