中秋闲来无事，自己写个2048玩玩

最新推荐文章于 2022-09-20 21:55:27 发布

wendale309

最新推荐文章于 2022-09-20 21:55:27 发布

阅读量645

点赞数

本文链接：https://blog.csdn.net/yangwenjun2017/article/details/39138083

版权

本人从事java web后端开发，接触前段知识甚少，趁中秋闲来无事，写点前端代码自我陶醉下。

直接贴代码，简单粗暴：

html页面：

<!DOCTYPE html>
<html>
<head>
	<title>html5版2048</title>
	<meta charset="utf-8"/>
</head>
<body οnkeydοwn="onKeyDown();">
	<!--提前载入所需图片-->
	<img id="img_2" src="img/2.png" height="0"/> 
	<img id="img_4" src="img/4.png" height="0"/> 
	<img id="img_8" src="img/8.png" height="0"/> 
	<img id="img_16" src="img/16.png" height="0"/> 
	<img id="img_32" src="img/32.png" height="0"/> 
	<img id="img_64" src="img/64.png" height="0"/> 
	<img id="img_128" src="img/128.png" height="0"/> 
	<img id="img_256" src="img/256.png" height="0"/> 
	<img id="img_512" src="img/512.png" height="0"/> 
	<img id="img_1024" src="img/1024.png" height="0"/> 
	<img id="img_2048" src="img/2048.png" height="0"/> 
	<center>
	<canvas id="can1" width="450px" height="450px" 
		style="border: 1px solid grey;background-color: #BBADA0">
		您的浏览器不支持html5！
	</canvas>
	</center>
	<script type="text/javascript" src="2048.js">

	</script>
</body>
</html>

js:

//常量

var canvas=document.getElementById("can1");

var cxt=canvas.getContext("2d");

cxt.fillStyle="#CCC0B3";

var table = new Array();

init();

drawTable();

/**
 *初始化
 */
function init() {
	for (var i = 0; i < 4; i++) {
		table[i] = new Array();
		for (var j = 0; j < 4; j++) {
			table[i][j] = 0;
		}
	}
	generate();
	generate();
}

/**
 *绘制
 */
function drawTable() {
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 4; j++) {
			var x = 10 * (j + 1) + j * 100;
			var y = 10 * (i + 1) + i * 100;
			cxt.fillRect(x, y, 100, 100);
			if (table[i][j] != 0) {
				var img = document.getElementById("img_" + table[i][j]);
				cxt.drawImage(img, x, y, 100, 100);
			}
		}
	}
}

/**
 *判断游戏是否结束
 */
function gameOver() {
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 4; j++) {
			if (table[i][j] == 0) {
				return false;
			}
		}
	}
	return true;
}

/**
 *在空位置生成2或者4
 */
function generate() {
	if (gameOver()){
		alert("游戏结束，byebye");
		return;
	}
	var indexs = new Array();
	var len = 0;
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 4; j++) {
			if (table[i][j] == 0) {
				indexs[len++] = i * 4 + j;
			} 
		}
	}
	var idx = Math.floor(Math.random() * len);
	var r = Math.random() > 0.5 ? 2 : 4;
	table[Math.floor(indexs[idx] / 4)][indexs[idx] % 4] = r;
}

/**
 *键盘驱动事件
 */
function onKeyDown() {  
    var keyID = event.keyCode;  
    if(keyID === 38 || keyID === 87)  { // up arrow and W  
		mergeUp();
    }  
    if(keyID === 39 || keyID === 68)  { // right arrow and D  
		mergeRight();
    }  
    if(keyID === 40 || keyID === 83)  { // down arrow and S  
		mergeDown();
    }  
    if(keyID === 37 || keyID === 65)  { // left arrow and A  
		mergeLeft();
    }  

	//重绘
	generate();
	drawTable();
}  

function mergeLeft() {
	var eles = new Array();
	for (var i = 0; i < 4; i++){

		//1、平移
		var len = 0;
		for (var j = 0; j < 4; j++){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var j = 0; j < len; j++){
			table[i][j] = eles[j];
		}

		//2、合并
		for (var j = 1; j < len; j++){
			if (table[i][j] == table[i][j-1]){
				table[i][j-1] = 2 * table[i][j-1];
				table[i][j] = 0;
			}
		}

		//3、再次平移
		len = 0;
		for (var j = 0; j < 4; j++){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var j = 0; j < len; j++){
			table[i][j] = eles[j];
		}
	}
}

function mergeRight() {
	var eles = new Array();
	for (var i = 0; i < 4; i++){

		//1、平移
		var len = 0;
		for (var j = 3; j >= 0; j--){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var j = 3; j >= 4 - len; j--){
			table[i][j] = eles[3-j];
		}

		//2、合并
		for (var j = 2; j >= 4 - len; j--){
			if (table[i][j] == table[i][j+1]){
				table[i][j+1] = 2 * table[i][j+1];
				table[i][j] = 0;
			}
		}

		//3、再次平移
		len = 0;
		for (var j = 3; j >= 0; j--){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var j = 3; j >= 4 - len; j--){
			table[i][j] = eles[3-j];
		}
	}
}

function mergeUp() {
	var eles = new Array();
	for (var j = 0; j < 4; j++){

		//1、平移
		var len = 0;
		for (var i = 0; i < 4; i++){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var i = 0; i < len; i++){
			table[i][j] = eles[i];
		}

		//2、合并
		for (var i = 1; i < len; i++){
			if (table[i][j] == table[i-1][j]){
				table[i-1][j] = 2 * table[i-1][j];
				table[i][j] = 0;
			}
		}

		//3、再次平移
		len = 0;
		for (var i = 0; i < 4; i++){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var i = 0; i < len; i++){
			table[i][j] = eles[i];
		}
	}
}

function mergeDown() {
	var eles = new Array();
	for (var j = 0; j < 4; j++){

		//1、平移
		var len = 0;
		for (var i = 3; i >= 0; i--){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var i = 3; i >= 4 - len; i--){
			table[i][j] = eles[3-i];
		}

		//2、合并
		for (var i = 2; i >= 4 - len; i--){
			if (table[i][j] == table[i+1][j]){
				table[i+1][j] = 2 * table[i+1][j];
				table[i][j] = 0;
			}
		}

		//3、再次平移
		len = 0;
		for (var i = 3; i >= 0; i--){
			if (table[i][j] > 0){
				eles[len++] = table[i][j];
				table[i][j] = 0;
			}
		}
		for (var i = 3; i >= 4 - len; i--){
			table[i][j] = eles[3-i];
		}
	}
}

不得不承认合并逻辑理得不清，所以代码太冗余了，谁有清晰的逻辑，求指点呀。

所需图片：

2048开发所需图片