JS-2048游戏

最新推荐文章于 2024-03-29 09:18:42 发布
最新推荐文章于 2024-03-29 09:18:42 发布
阅读量225 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44430886/article/details/103818944
版权

#根据慕课网教导尝试做的一个2048小游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2048</title>
		<link rel="stylesheet" type="text/css" href="2048.css" />
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="main2048.js" type="text/javascript" charset="utf-8"></script>
		<script src="showanimation2048.js" type="text/javascript" charset="utf-8"></script>
		<script src="support2048.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<header>
			<h1>2048</h1>
			<a href="javascript:newgame();" id="newgamebutton">New Game</a>
			<p>score:<span id="score">0</span></p>
		</header>
		<div id="grid-container">
			<div class="grid-cell" id="grid-cell-0-0"></div>
			<div class="grid-cell" id="grid-cell-0-1"></div>
			<div class="grid-cell" id="grid-cell-0-2"></div>
			<div class="grid-cell" id="grid-cell-0-3"></div>

			<div class="grid-cell" id="grid-cell-1-0"></div>
			<div class="grid-cell" id="grid-cell-1-1"></div>
			<div class="grid-cell" id="grid-cell-1-2"></div>
			<div class="grid-cell" id="grid-cell-1-3"></div>

			<div class="grid-cell" id="grid-cell-2-0"></div>
			<div class="grid-cell" id="grid-cell-2-1"></div>
			<div class="grid-cell" id="grid-cell-2-2"></div>
			<div class="grid-cell" id="grid-cell-2-3"></div>

			<div class="grid-cell" id="grid-cell-3-0"></div>
			<div class="grid-cell" id="grid-cell-3-1"></div>
			<div class="grid-cell" id="grid-cell-3-2"></div>
			<div class="grid-cell" id="grid-cell-3-3"></div>
		</div>
	</body>
</html>


header {
	display: block;
	margin: 0 auto;
	width: 500px;
	text-align: center;
}

header h1 {
	font-family: arial;
	font-size: 60px;
	font-weight: bold;
}

header #newgamebutton {
	margin: 20 auto;
	width: 100px;
	padding: 10px;
	background-color: #8f7a66;
	font-family: arial;
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
}

header #newgamebutton:hover {
	background-color: #9f8b77;
}

header p {
	font-family: arial;
	font-size: 25px;
	margin: 20px auto;
}

#grid-container {
	width: 460px;
	height: 460px;
	padding: 20px;
	margin: 50px auto;
	background-color: #bbada0;
	border-radius: 10px;
	position: relative;
}

.grid-cell {
	width: 100px;
	height: 100px;
	border-radius: 6px;
	background-color: #ccc0b3;
	position: absolute;
}

.number-cell {
	font-family: arial;
	font-size: 20px;
	font-weight: bold;
	line-height: 100px;
	text-align: center;
	border-radius: 6px;
	position: absolute;
}


// 游戏主逻辑
var board = new Array();
var score = 0;
var hasConflicted = new Array();

$(document).ready(function() {
	newgame();
});

function newgame() {
	// 初始化棋盘格
	init();
	// 在随机两个格子生成数字
	generateOneNumber();
	generateOneNumber();
}

function init() {
	for (var i = 0; i < 4; i++)
		for (var j = 0; j < 4; j++) {
			var gridCell = $("#grid-cell-" + i + "-" + j);
			gridCell.css('top', getPosTop(i, j));
			gridCell.css('left', getPosLeft(i, j));
		}

	for (var i = 0; i < 4; i++) {
		board[i] = new Array();
		hasConflicted[i] = new Array();
		for (var j = 0; j < 4; j++) {
			board[i][j] = 0;
			hasConflicted[i][j] = false;
		}
	}
	// 根据board值进行操作
	updateBoardView();
	// 分数初始化
	score = 0;
}

function updateBoardView() {
	// 如果有.number-cell将其移除
	$(".number-cell").remove();
	for (var i = 0; i < 4; i++)
		for (var j = 0; j < 4; j++) {
			$("#grid-container").append('<div class="number-cell" id="number-cell-' + i + '-' + j + '"></div>');
			var theNumberCell = $("#number-cell-" + i + "-" + j);
			if (board[i][j] == 0) {
				theNumberCell.css('width', '0px');
				theNumberCell.css('heigth', '0px');
				theNumberCell.css('top', getPosTop(i, j) + 50);
				theNumberCell.css('left', getPosLeft(i, j) + 50);
			} else {
				theNumberCell.css('width', '100px');
				theNumberCell.css('heigth', '100px');
				theNumberCell.css('top', getPosTop(i, j));
				theNumberCell.css('left', getPosLeft(i, j));
				theNumberCell.css('background-color', getNumberBackgroundColor(board[i][j]));
				theNumberCell.css('color', getNumberColor(board[i][j]));
				theNumberCell.text(board[i][j]);
			}

			hasConflicted[i][j] = false;
		}

}

function generateOneNumber() {
	if (nospace(board))
		return false;

	// 随机一个位置
	var randx = parseInt(Math.floor(Math.random() * 4));
	var randy = parseInt(Math.floor(Math.random() * 4));
	var times = 0;
	while (times < 50) {
		if (board[randx][randy] == 0)
			break;
		randx = parseInt(Math.floor(Math.random() * 4));
		randy = parseInt(Math.floor(Math.random() * 4));

		times++;
	}
	if (times == 50) {
		for (var i = 0; i < 4; i++)
			for (var j = 0; j < 4; j++) {
				if (board[i][j] == 0) {
					randx = i;
					randy = j;
				}
			}
	}
	// 随机一个数字
	var randNumber = Math.random() < 0.5 ? 2 : 4;
	// 在随机位置显示出随机数字
	board[randx][randy] = randNumber;
	showNumberWithAnimation(randx, randy, randNumber);

	return true;
}
$(document).keydown(function(event) {
	switch (event.keyCode) {
		case 37: //left
			if (moveLeft()) {
				setTimeout("generateOneNumber()", 210);
				setTimeout("isgameover()", 300);
			}
			break;
		case 38: //up
			if (moveUp()) {
				setTimeout("generateOneNumber()", 210);
				setTimeout("isgameover()", 300);
			}
			break;
		case 39: //right
			if (moveRight()) {
				setTimeout("generateOneNumber()", 210);
				setTimeout("isgameover()", 300);
			}
			break;
		case 40: //down
			if (moveDown()) {
				setTimeout("generateOneNumber()", 210);
				setTimeout("isgameover()", 300);
			}
			break;
		default: //defauit
			break;
	}
});

function isgameover() {
	if (nospace(board) && nomove(board)) {
		gameover();
	}

}

function gameover() {
	alert("gameover!")
}

function moveLeft() {
	// 判断canMoveLeft()
	// 1:左边是否没有数字
	// 2:左边数字是否和自己相等
	if (!canMoveLeft(board))
		return false;

	// movLeft
	// 1:落脚位置是否为空
	// 2:落脚位置数字和待判定元素位置相等i
	// 3:移动路径中是否有障碍物
	for (var i = 0; i < 4; i++)
		for (var j = 1; j < 4; j++) {
			if (board[i][j] != 0) {
				for (var k = 0; k < j; k++) {
					if (board[i][j] == 0 && noBlockHorizontal(i, k, j, board)) {
						// move
						showMoveAnimation(i, j, i, k);
						board[i][k] = board[i][j];	
						board[i][j] = 0;
						continue;
					} else if (board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board) && !hasConflicted[i][k]) {
						// move
						showMoveAnimation(i, j, i, k);
						// add
						board[i][k] *= 2;
						board[i][j] = 0;
						// add score
						score += board[i][k];
						// 通知前台
						updateScore(score);
						hasConflicted[i][k] = true;
						continue;
					}
				}
			}
		}

	setTimeout("updateBoardView()", 200);
	return true;
}

function moveRight() {
	if (!canMoveRight(board))
		return false;

	for (var i = 0; i < 4; i++)
		for (var j = 2; j >= 0; j--) {
			if (board[i][j] != 0) {
				for (var k = 3; k > j; k--) {
					if (board[i][k] == 0 && noBlockHorizontal(i, j, k, board)) {
						// move
						showMoveAnimation(i, j, i, k);
						board[i][k] = board[i][j];
						board[i][j] = 0;
						continue;
					} else if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board) && !hasConflicted[i][k]) {
						// move
						showMoveAnimation(i, j, i, k);
						// add
						board[i][k] *= 2;
						board[i][j] = 0;
						// add score
						score += board[i][k];
						// 通知前台
						updateScore(score);
						hasConflicted[i][k] = true;
						continue;
					}
				}
			}
		}

	setTimeout("updateBoardView()", 200);
	return true;
}

function moveUp() {
	if (!canMoveUp(board))
		return false;

	for (var j = 0; j < 4; j++)
		for (var i = 1; i < 4; i++) {
			if (board[i][j] != 0) {
				for (var k = 0; k < i; k++) {
					if (board[k][j] == 0 && noBlockVertical(j, k, i, board)) {
						// move
						showMoveAnimation(i, j, k, j);
						board[k][j] = board[i][j];
						board[i][j] = 0;
						continue;
					} else if (board[k][j] == board[i][j] && noBlockVertical(j, k, i, board) && !hasConflicted[k][j]) {
						// move
						showMoveAnimation(i, j, k, j);
						// add
						board[k][j] *= 2;
						board[i][j] = 0;
						// add score
						score += board[k][j];
						// 通知前台
						updateScore(score);
						hasConflicted[k][j] = true;
						continue;
					}
				}
			}
		}

	setTimeout("updateBoardView()", 200);
	return true;
}

function moveDown() {
	if (!canMoveDown(board))
		return false;

	for (var j = 0; j < 4; j++)
		for (var i = 2; i >= 0; i--) {
			if (board[i][j] != 0) {
				for (var k = 3; k > i; k--) {
					if (board[k][j] == 0 && noBlockVertical(j, i, k, board)) {
						// move
						showMoveAnimation(i, j, k, j);
						board[k][j] = board[i][j];
						board[i][j] = 0;
						continue;
					} else if (board[k][j] == board[i][j] && noBlockVertical(j, i, k, board) && !hasConflicted[k][j]) {
						// move
						showMoveAnimation(i, j, k, j);
						// add
						board[k][j] *= 2;
						board[i][j] = 0;
						// add score
						score += board[k][j];
						// 通知前台
						updateScore(score);
						hasConflicted[k][j] = true;
						continue;
					}
				}
			}
		}

	setTimeout("updateBoardView()", 200);
	return true;
}


// 动画效果逻辑
function showNumberWithAnimation(i, j, randNumber) {
	var numberCell = $("#number-cell-" + i + "-" + j);
	numberCell.css('background-color', getNumberBackgroundColor(randNumber));
	numberCell.css('color', getNumberColor(randNumber));
	numberCell.text(randNumber);
	numberCell.animate({
		width: "100px",
		height: "100px",
		top: getPosTop(i, j),
		left: getPosLeft(i, j)
	}, 50);
}

function showMoveAnimation(fromx, fromy, tox, toy) {
	var numberCell = $("#number-cell-" + fromx + "-" + fromy);
	numberCell.animate({
		top: getPosTop(tox, toy),
		left: getPosLeft(tox, toy)
	}, 200);
}

function updateScore(score) {
	$("#score").text(score);
}



// 底层逻辑
function getPosTop(i, j) {
	return 20 + i * 120
}

function getPosLeft(i, j) {
	return 20 + j * 120
}

function getNumberBackgroundColor(number) {
	switch (number) {
		case 2:
			return "#eee4da";
			break;
		case 4:
			return "#ede0c8";
			break;
		case 8:
			return "#f2b179";
			break;
		case 16:
			return "#f59563";
			break;
		case 32:
			return "#f67c5f";
			break;
		case 64:
			return "#f65e3b";
			break;
		case 128:
			return "#edcf72";
			break;
		case 256:
			return "#edcc61";
			break;
		case 512:
			return "#9c0";
			break;
		case 1024:
			return "#33b5e5";
			break;
		case 2048:
			return "#09c";
			break;
		case 4096:
			return "#a6c";
			break;
		case 8192:
			return "#93c";
			break;
	}
	return "black";
}

function getNumberColor(number) {
	if (number <= 4) {
		return "#776e65"
	}
	return "white";
}

function nospace(board) {
	for (var i = 0; i < 4; i++)
		for (var j = 0; j < 4; j++)
			if (board[i][j] == 0)
				return false;
	return true;
}
// moveLeft
function canMoveLeft(board) {
	for (var i = 0; i < 4; i++)
		for (var j = 1; j < 4; j++)
			if (board[i][j] != 0)
				if (board[i][j - 1] == 0 || board[i][j - 1] == board[i][j])
					return true;
	return false;
}

// moveRight
function canMoveRight(board) {
	for (var i = 0; i < 4; i++)
		for (var j = 2; j >= 0; j--)
			if (board[i][j] != 0)
				if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j])
					return true;
	return false;
}
// moveUp
function canMoveUp(board) {
	for (var j = 0; j < 4; j++)
		for (var i = 1; i < 4; i++)
			if (board[i][j] != 0)
				if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j])
					return true;
	return false;
}
// moveDown
function canMoveDown(board) {
	for (var j = 0; j < 4; j++)
		for (var i = 2; i >= 0; i--)
			if (board[i][j] != 0)
				if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j])
					return true;
	return false;
}
// left and right
function noBlockHorizontal(row, col1, col2, board) {
	for (var i = col1 + 1; i < col2; i++)
		if (board[row][i] != 0)
			return false;
	return true;
}
// up and down
function noBlockVertical(col, row1, row2, board) {
	for (var i = row1 + 1; i < row2; i++)
		if (board[i][col] != 0)
			return false;
	return true;
}

function nomove(board) {
	if (canMoveLeft(board) || canMoveRight(board) || canMoveUp(board) || canMoveDown(board))
		return false;
	return true;
}
JS实现2048小游戏
呀呀呀
11-10 581
js实现2048小游戏 开始时的页面 当游戏结束时会显示得分情况并可以再试一次 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2048小游戏</title> <link rel="stylesheet" href="st...
JS+Jquery：2048游戏
QD的博客
03-11 1463
终于完成了2048小游戏的制作~ UI长这样 使用键盘的上下左右来控制数字块的活动。 下面主要是记录一下这个游戏在制作过程中遇到的一些问题。UI的设置？如何确定每一个块的位置？我们可以看到，其实每次移动都是块的移动或合并。所以这个过程是有一个动画的，就是块的横向或纵向地改变自己的坐标。 但是，我们看到的块的移动并不是 这个背景块在移动，而是这个数字块。 就是说其实在背景块的上面还是悬
纯js 实现 2048 游戏
08-03
纯js 实现 2048 游戏。无任何js框架。用transition实现动画效果。兼容主流浏览器。 做了手机兼容，手机使用touch事件。
使用JS实现2048小游戏
weixin_30270561的博客
05-02 300
JS实现2048小游戏源码 效果图： 代码如下，复制即可使用： （适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。） <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten...
js之2048小游戏
qq_45117533的博客
07-15 280
这里写自定义目录标题 我们首先来了解一下2048这个游戏的规则： 它由一个4x4的小方格组成，在游戏一开始的时候会在随机位置随机生成一个2或者4； 每点击一次开始就刷新一次游戏界面； 通过键盘的上下左右四个方向键来控制数字的移动； 当移动的时候判断相应的方向有无相同的数字或者0；若为相同的数字则叠加，将叠加的和作为分数计算进总分；若为0，则与其换位； 当页面被铺满时，且每个数字都无法叠加，那么叛定为游戏结束，显示一个结束界面，界面内容有当前分数以及重新开始。 　　以上是游戏的基本流程，其中还要考虑到每个数
js实现2048小游戏
hcute的博客
08-25 640
2048小游戏 2048小游戏（带动画效果） 所用语言html、css、JavaScript 通过上下左右进行控制，实现了移动、合并等功能 github地址 线上测试地址 效果图 实现功能 1.新建游戏 先清空方格和分数，再随机两个位置，生成2或者4数字 2.移动数字 移动包括：上、下、左、右 监控键盘事件keyCode 例如：用户向上时，从每一行开始遍历，当遍历到某个小方格有数字时，就判断它上方有没有其他数字，如果也有，就让他们合并，然后标记一下，因为一个方格只能合并一次。 其他方向类比。 3.新出现的
微信小程序-2048小游戏_echat-weapp-2048.zip
最新发布
10-04
微信小程序版本的2048游戏，是在微信平台下开发的一种2048游戏形式。玩家可以通过微信小程序的入口直接打开游戏，无需下载额外的App，方便用户随时娱乐。这种游戏的开发通常需要具备前端开发技能，熟悉微信小程序的...
qt-2048游戏软件
01-18
QT-2048是一款基于Qt框架开发的2048游戏软件，它利用了Qt的QML（Qt Quick）技术来实现用户界面和游戏逻辑。QML是一种强大的声明式语言，专门用于构建Qt应用程序的用户界面，它可以与JavaScript结合使用，提供灵活且...
Cocos2djs-2048:基于cocos2djs 引擎实现的2048小游戏
07-12
基于cocos2djs 引擎实现的2048小游戏 由于cocos2djs 的framework代码太大，这里只放我编写的源码部分，可下载源码后放到cocos的环境下即可运行。 License Cocos2djs-2048 is licensed under the
html5前端小游戏-2048益智游戏
11-12
2048游戏的成功在于其简洁的游戏规则和高度的可玩性，它迅速在全球范围内流行起来，激发了众多类似数字益智游戏的诞生。无论是在闲暇时间消遣，还是寻求智力挑战，2048都能提供有趣且富有挑战性的体验。对于前端...
微信小程序源码-2048游戏.zip
03-07
在2048游戏中，JavaScript会负责生成新的数字方块、检测和合并相邻的相同数字、更新游戏状态以及检查游戏是否结束等功能。 压缩包中的"ignore.txt"文件通常是一个忽略文件，可能包含了开发者在版本控制或构建过程中...
2048小游戏js版本，键盘上下左右操作。
10-01
2048小游戏js版本，键盘上下左右操作。2048小游戏js版本，键盘上下左右操作。
js写2048小游戏
Alice_yo的博客
11-23 465
首先页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="demo1.css"> </head> <bo...
用JS写一个丐版《2048》小游戏
KISS
05-06 1931
效果图 放马过来 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>2048</title> <style type="text/css"> .basic{ height:80px; width:80px; backgro
2048 js canvas实现2048小游戏及思路
NEWonclick的博客
11-14 1079
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
原生js 实现2048小游戏
好川的博客
03-07 866
2048小游戏 首先2048小游戏离不开16个格子，我们通过html和css创建好对应的标签和样式，然后开始js逻辑 <div id="box">//一个盒子里面16个小div <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div>
JavaScript实现2048小游戏，我终于赢了一把
2301_76348171的博客
03-29 1326
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！if(bool){bool为true才执行自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
简单的JavaScript实现2048游戏
geyao2015的博客
03-13 1755
实现一个网页版的2048游戏，过程参考了慕课网2048游戏的教程，具体代码如下：html结构：<body> <div class="header"> <h2>2048</h2> <a href="javascript:newGame()" id="newGameBtn">New Game</a> <p>Score:<span id="score">0</span></p> <
探索JavaScript编写的my-2048游戏
由于文件名称列表中提到了"my-2048-master"，这表明可能存在一个包含2048游戏源代码的压缩文件。这个文件可能是一个版本控制系统的"master"分支，表明它可能包含了该分支下的所有文件和代码。版本控制系统，如Git，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值