2048小游戏（原生js基础代码篇）

妖狐艹你老母 2023-07-08 05:57 84阅读 0赞

**今天在这里，我将给各位呈现一个简单的游戏代码。**

想必大家都接触过2048这个小游戏吧，在悠闲时间用于消遣时间最好不过了，那么，我给大家写一个2048最基本的原生js代码。

**HTML:**

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>2048小游戏</title>
    	<link rel="stylesheet" href="2048.css" />
    </head>
    <body>
    	
    	<p class="header">SCORE: <span id="score01"></span></p>
    	
    	<div id="all">
    		
    		<div class="cell"  id="n00"></div>
    		<div class="cell"  id="n01"></div>
    		<div class="cell"  id="n02"></div>
    		<div class="cell"  id="n03"></div>
    		
    		<div class="cell"  id="n10"></div>
    		<div class="cell"  id="n11"></div>
    		<div class="cell"  id="n12"></div>
    		<div class="cell"  id="n13"></div>
    		
    		<div class="cell"  id="n20"></div>
    		<div class="cell"  id="n21"></div>
    		<div class="cell"  id="n22"></div>
    		<div class="cell"  id="n23"></div>
    		
    		<div class="cell"  id="n30"></div>
    		<div class="cell"  id="n31"></div>
    		<div class="cell"  id="n32"></div>
    		<div class="cell"  id="n33"></div>
    	</div>
    	
    	<div id="gameover" >
    		<p>
    			GAME OVER
    			<br />
    			SCORE:<span id="score02"></span>
    			<br />
    			<a onclick="typeonce()">TYPE AGAIN</a>
    		</p>
    		
    	</div>
    	<script type="text/javascript" src="2048.js" ></script>
    </body>
    </html>

**CSS:**

*{
    font-family: arial;
    /*	user-select: none;*/
    font-weight: bold;
    }
    
    .header{
    width: 480px;
    font-size:40px ;
    margin: 60px auto 5px auto;
    }
    
    #score01{
    color: #F00;
    }
    
    #all{
    width: 480px;
    height: 480px;
    background-color: #bbada0;
    margin: 0 auto;
    border-radius: 20px;
    }
    
    .cell{
    width: 100px;
    height: 100px;
    background-color: #ccc0b3;;
    border-radius: 10px;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: #fff;
    float: left;
    margin: 16px 0px 0px 16px;
    
    }
    
    .n2{
    background-color:#eee3da;
    color:#776e65;
    }
    .n4{
    background-color:#ede0c8;
    color:#776e65;
    }
    .n8{
    background-color:#f2b179;
    }
    .n16{
    background-color:#f59563;
    }
    .n32{
    background-color:#f67c5f;
    }
    .n64{
    background-color:#f65e3b;
    }
    .n128{
    background-color:#edcf72;
    }
    .n256{
    background-color:#edcc61;
    }
    .n512{
    background-color:#9c0;
    }
    .n1024{
    background-color:#33b5e5;
    font-size:40px;
    }
    .n2048{
    background-color:#09c;
    font-size:40px;
    }
    .n4096{
    background-color:#a6c;
    font-size:40px;
    }
    .n8192{
    background-color:#93c;
    font-size:40px;
    }
    
    #gameover{
    position: absolute;
    background-color: rgba(0,0,0,0.2);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 40px;
    display: none;
    }
    
    #gameover p{
    background-color: #fff;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    line-height: 66.66px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    }
    
    #gameover p a{
    padding: 10px;
    text-decoration: none;
    background-color: #9f8d77;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    }

**JS:**

//游戏环节
    var game = {
    data: [],  //定义一个数组存储
    score: 0,  //开始时分数为0
    gamerunning: 1,  //游戏开始时游戏状态为1
    gameover: 0,  //游戏结束时游戏状态为0
    status: 1,  //个人状态与游戏状态相对应，默认为1
    //游戏开始时还原所有
    start: function () {
    	this.data = [
    		[0, 0, 0, 0],
    		[0, 0, 0, 0],
    		[0, 0, 0, 0],
    		[0, 0, 0, 0]
    	];
    	this.score = 0;
    	this.status = this.gamerunning;
    	//随机生成两个数2或者4，方法调用5次
    	this.randomNum();
    	this.randomNum();
    	this.randomNum();
    	this.randomNum();
    	this.randomNum();
    	//更新视图
    	this.dataView();
    },
    //随机赋值
    randomNum: function () {
    	//循环获取是否方块存在空白位置
    	while (true) {
    		//获取随机值
    		var r = Math.floor(Math.random() * 4);   //随机生成一个行
    		var c = Math.floor(Math.random() * 4);   //随机生成一个列
    		//判断 
    		if (this.data[r][c] == 0) {
    			//随机生成2或者4
    			var num = Math.random() > 0.2 ? 2 : 4;   //三元表达式
    			//赋值
    			this.data[r][c] = num;
    			//停止循环
    			break;
    
    		}
    
    	}
    },
    //更新视图的方法
    dataView: function () {
    	//		直接大循环
    	for (var r = 0; r < 4; r++) {  //循环行
    		for (var c = 0; c < 4; c++) { //循环里面的每个单元格
    			//				找到对应的id的div
    			var div = document.getElementById("n" + r + c);  //字符串拼接
    			if (this.data[r][c] != 0) {
    				div.innerHTML = this.data[r][c]; //直接把数组中的数字展示到div中
    				div.className = "cell n" + this.data[r][c]; //设置对应div的样式
    			} else {
    				div.innerHTML = "";  //等于0的时候，div里面的内容直接置空
    				div.className = "cell";
    			}
    		}
    	}
    	//		更新分数
    	document.getElementById("score01").innerHTML = this.score;
    	//		判断游戏是否结束
    	if (this.status == this.gameover) {  //游戏结束弹出框显示
    		document.getElementById("gameover").style.display = "block";
    		document.getElementById("score02").innerHTML = this.score;
    	} else {   //游戏没有结束的时候弹出框一直隐藏
    		document.getElementById("gameover").style.display = "none";
    	}
    },
    //	判断游戏是否结束的方法
    isgameove: function () {
    	for (var r = 0; r < 4; r++) {
    		for (var c = 0; c < 4; c++) {
    			if (this.data[r][c] == 0) {  //有空白的时候
    				return false;
    			}
    			if (c < 3) {  //判断左右是否有相同，只需要判断到第三个格子即可
    				if (this.data[r][c] == this.data[r][c + 1]) {
    					return false;
    				}
    			}
    			if (r < 3) {
    				if (this.data[r][c] == this.data[r + 1][c]) {
    					return false;
    				}
    			}
    		}
    	}
    	return true;   //上面情况全都不符合，表示游戏已经GG了，返回一个true
    },
    //移动的方法
    //数字左移
    moveLeft: function () {
    	//移动之前转化一次字符串
    	var before = String(this.data);
    	//循环每行数据
    	for (var r = 0; r < 4; r++) {
    		//处理每一行的函数
    		this.moveLeftinRow(r);
    	}
    	//移动之后转换一次
    	var after = String(this.data);
    	//判断
    	if (before != after) {
    		//随机生成两个数2或者4
    		this.randomNum();
    		if (this.isgameove()) { //如果游戏结束
    			//自己状态等于游戏结束状态
    			this.status = this.gameover;
    		}
    		//更新视图
    		this.dataView();
    	}
    
    },
    //处理每一行的数据
    moveLeftinRow: function (r) {
    	//循环获取后面的数据,最左边不用考虑
    	for (var c = 0; c < 3; c++) {
    		//变量接收
    		var nextc = this.moveLeftNum(r, c);
    		//判断是否为-1，否则则为找到数字
    		if (nextc != -1) {
    			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
    				this.data[r][c] = this.data[r][nextc];
    				//找到的数清空变为0
    				this.data[r][nextc] = 0;
    				//再次从最左边的数进行循环
    				c--;
    
    			}
    			else if (this.data[r][c] == this.data[r][nextc]) {
    				//如果当前的数等于找到的数，则相加
    				this.data[r][c] *= 2;
    				//找到的数清空变为0
    				this.data[r][nextc] = 0;
    				//数字相加一次分数加
    				this.score += this.data[r][c];
    
    			}
    		} else {
    			//如果没有找到数，则退出循环
    			break;
    		}
    	}
    
    },
    moveLeftNum: function (r, c) {	//	左移
    	//循环获取后面的数据,最左边不用考虑
    	for (var i = c + 1; i < 4; i++) {
    		//判断后面是否找到数字
    		if (this.data[r][i] != 0) {
    			//返回下标
    			return i;
    		}
    	}
    	//如果没有找到，返回
    	return -1;
    },
    //移动的方法
    //数字右移
    moveRight: function () {
    	//移动之前转化一次字符串
    	var before = String(this.data);
    	//循环每行数据
    	for (var r = 0; r < 4; r++) {
    		//处理每一行的函数
    		this.moveRightinRow(r);
    	}
    	//移动之后转换一次
    	var after = String(this.data);
    	//判断
    	if (before != after) {
    		//随机生成两个数2或者4
    		this.randomNum();
    		if (this.isgameove()) { //如果游戏结束
    			//自己状态等于游戏结束状态
    			this.status = this.gameover;
    		}
    		//更新视图
    		this.dataView();
    	}
    
    },
    //处理每一行的数据
    moveRightinRow: function (r) {
    	//循环获取前面的数据,最左边不用考虑
    	for (var c = 3; c >= 0; c--) {
    		//变量接收
    		var nextc = this.moveRightNum(r, c);
    		//判断是否为-1，否则则为找到数字
    		if (nextc != -1) {
    			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
    				this.data[r][c] = this.data[r][nextc];
    				//找到的数清空变为0
    				this.data[r][nextc] = 0;
    				//再次从最右边的数进行循环
    				c++;
    
    			}
    			else if (this.data[r][c] == this.data[r][nextc]) {
    				//如果当前的数等于找到的数，则相加
    				this.data[r][c] *= 2;
    				//找到的数清空变为0
    				this.data[r][nextc] = 0;
    				//数字相加一次分数加
    				this.score += this.data[r][c];
    
    			}
    		} else {
    			//如果没有找到数，则退出循环
    			break;
    		}
    	}
    
    },
    moveRightNum: function (r, c) {	//	左移
    	//循环获取前面的数据,最右边不用考虑
    	for (var i = c - 1; i >= 0; i--) {
    		//判断前面是否找到数字
    		if (this.data[r][i] != 0) {
    			//返回下标
    			return i;
    		}
    	}
    	//如果没有找到，返回
    	return -1;
    },
    //移动的方法
    //数字上移
    moveUp: function () {
    	//移动之前转化一次字符串
    	var before = String(this.data);
    	//循环每行数据
    	for (var c = 0; c < 4; c++) {
    		//处理每一行的函数
    		this.moveUpinRow(c);
    	}
    	//移动之后转换一次
    	var after = String(this.data);
    	//判断
    	if (before != after) {
    		//随机生成两个数2或者4
    		this.randomNum();
    		if (this.isgameove()) { //如果游戏结束
    			//自己状态等于游戏结束状态
    			this.status = this.gameover;
    		}
    		//更新视图
    		this.dataView();
    	}
    
    },
    //处理每一行的数据
    moveUpinRow: function (c) {
    	//循环获取前面的数据,最上面不用考虑
    	for (var r = 0; r < 3; r++) {
    		//变量接收
    		var nextr = this.moveUpNum(r, c);
    		//判断是否为-1，否则则为找到数字
    		if (nextr != -1) {
    			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
    				this.data[r][c] = this.data[nextr][c];
    				//找到的数清空变为0
    				this.data[nextr][c] = 0;
    				//再次从最上面的数进行循环
    				r--;
    
    			}
    			else if (this.data[r][c] == this.data[nextr][c]) {
    				//如果当前的数等于找到的数，则相加
    				this.data[r][c] *= 2;
    				//找到的数清空变为0
    				this.data[nextr][c] = 0;
    				//数字相加一次分数加
    				this.score += this.data[r][c];
    
    			}
    		} else {
    			//如果没有找到数，则退出循环
    			break;
    		}
    	}
    
    },
    moveUpNum: function (r, c) {	//	上移
    	//循环获取上面的数据,最右边不用考虑
    	for (var i = r + 1; i < 4; i++) {
    		//判断下面是否找到数字
    		if (this.data[i][c] != 0) {
    			//返回下标
    			return i;
    		}
    	}
    	//如果没有找到，返回
    	return -1;
    },
    //移动的方法
    //数字下移
    moveDown: function () {
    	//移动之前转化一次字符串
    	var before = String(this.data);
    	//循环每行数据
    	for (var c = 0; c < 4; c++) {
    		//处理每一行的函数
    		this.moveDowninRow(c);
    	}
    	//移动之后转换一次
    	var after = String(this.data);
    	//判断
    	if (before != after) {
    		//随机生成两个数2或者4
    		this.randomNum();
    		if (this.isgameove()) { //如果游戏结束
    			//自己状态等于游戏结束状态
    			this.status = this.gameover;
    		}
    		//更新视图
    		this.dataView();
    	}
    
    },
    //处理每一行的数据
    moveDowninRow: function (c) {
    	//循环获取前面的数据,最下面不用考虑
    	for (var r = 3; r >= 0; r--) {
    		//变量接收
    		var nextr = this.moveDownNum(r, c);
    		//判断是否为-1，否则则为找到数字
    		if (nextr != -1) {
    			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
    				this.data[r][c] = this.data[nextr][c];
    				//找到的数清空变为0
    				this.data[nextr][c] = 0;
    				//再次从最下面的数进行循环
    				r++;
    
    			}
    			else if (this.data[r][c] == this.data[nextr][c]) {
    				//如果当前的数等于找到的数，则相加
    				this.data[r][c] *= 2;
    				//找到的数清空变为0
    				this.data[nextr][c] = 0;
    				//数字相加一次分数加
    				this.score += this.data[r][c];
    
    			}
    		} else {
    			//如果没有找到数，则退出循环
    			break;
    		}
    	}
    
    },
    moveDownNum: function (r, c) {	//	下移
    	//循环获取前面的数据,最下面不用考虑
    	for (var i = r - 1; i >= 0; i--) {
    		//判断上面是否找到数字
    		if (this.data[i][c] != 0) {
    			//返回下标
    			return i;
    		}
    	}
    	//如果没有找到，返回
    	return -1;
    }
    
    }
    
    //键盘按下时事件
    document.onkeydown = function () {
    //键盘上
    if (event.keyCode == 37) {   //键盘左
    	console.log("左")
    	//左移
    	game.moveLeft();
    } else if (event.keyCode == 38) {   //键盘上
    	console.log("上")
    	//上移
    	game.moveUp();
    
    } else if (event.keyCode == 39) {   //键盘右
    	console.log("右")
    	//右移
    	game.moveRight();
    } else if (event.keyCode == 40) {   //键盘下
    	console.log("下")
    	//下移
    	game.moveDown();
    }
    
    }
    
    //键盘按下时事件
    document.onkeydown = function () {
    //键盘上
    if (event.keyCode == 37) {   //键盘左
    	console.log("左")
    	//左移
    	game.moveLeft();
    } else if (event.keyCode == 38) {   //键盘上
    	console.log("上")
    	//上移
    	game.moveUp();
    
    } else if (event.keyCode == 39) {   //键盘右
    	console.log("右")
    	//右移
    	game.moveRight();
    } else if (event.keyCode == 40) {   //键盘下
    	console.log("下")
    	//下移
    	game.moveDown();
    }
    
    }
    
    //游戏开始时调用
    game.start();
    console.log(game.data)
    console.log(game.score)
    
    //点击再来一次
    function typeonce() {
    document.getElementById("gameover").style.display = "none";
    window.location.href = "2048.html";
    }

以上代码便是2048小游戏最基本的游戏代码了，当然，你也可以将写好的2048打包成App在移动端运行，该代码是Web端和移动端都能运行的了。

具体的移动端我放在这里了 [2048小游戏移动端与Web端基本代码][2048_Web]  
**密码：321200**

希望对大家有帮助！

[2048_Web]: https://download.csdn.net/download/qq_44624386/12190415