2048小游戏

最新推荐文章于 2024-05-23 09:41:34 发布
最新推荐文章于 2024-05-23 09:41:34 发布
阅读量893 收藏 1
点赞数
分类专栏： html 前端 文章标签： H5-2048
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fly_TheWind/article/details/50768556
版权

在imooc上见到有用H5做2048的教程，就跟着做了一下。在其中有学到一些不足。
有遇到
Cannot read property '0' of undefined
的问题。后面发现是因为js定义的函数在调用时并没有传参数进去。但是运行结果好像是正确的，在将参数补上后，console不再报错。
还有一次是因为在JQuery的animate函数中把其中一个参数的名称打错了。然而，console不报错，就是不运行结果。最后一点一点查，才查出来结果。是有2个字母的顺序写反了。这个一个值得记住的教训。下面附上源码。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>陈某某做的2048 study from imooc</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">

	<script type="text/javascript" src="jQuery/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="mian2048.js"></script>
	<script type="text/javascript" src="showanimation2048.js"></script>
	<script type="text/javascript" src="support.js"></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>

main2048.js

var board = new Array();
var score = 0;
var hasConflicted = new Array();

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

function perpare4Mobole() {

	if (documentWidth > 500) {
		gridContainer = 500;
		cellSpace = 20;
		cellSideLength = 100;
	}
	$('#grid-container').css('width', gridContainer - 2 * cellSpace);
	$('#grid-container').css('height', gridContainer - 2 * cellSpace);
	$('#grid-container').css('padding', cellSpace);
	$('#grid-container').css('border-radius', 0.02 * gridContainer);

	$('.grid-cell').css('width', cellSideLength);
	$('.grid-cell').css('height', cellSideLength);
	$('.grid-cell').css('border-radius', 0.02 * gridContainer);
}

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

	generateOneRadom();
	generateOneRadom();

}

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),
				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] = 0;
		}
	}

	updateBoardView();
}

function updateBoardView() {

	$(".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('height', '0px');
				theNumberCell.css('top', getPosTop(i, j) + cellSideLength / 2);
				theNumberCell.css('left', getPosLeft(i, j) + cellSideLength / 2);
			} else {

				theNumberCell.css('width', cellSideLength);
				theNumberCell.css('height', cellSideLength);
				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] = 0;
		}
	}
	$('.number-cell').css('line-height', cellSideLength + 'px');
	$('.number-cell').css('font-size', 0.6 * cellSideLength + 'px');
}

function generateOneRadom() {

	if (nospace(board)) {
		return false;
	}
	//随机一个位置
	var randx = parseInt(Math.floor(Math.random() * 4));
	var randy = parseInt(Math.floor(Math.random() * 4));
	var time = 0;
	while (time < 50) {
		if (board[randx][randy] == 0) {
			break;
		}
		randx = parseInt(Math.floor(Math.random() * 4));
		randy = parseInt(Math.floor(Math.random() * 4));
		time++;
	}
	if (time == 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
			event.preventDefault();
			if (moveLeft()) {
				setTimeout("generateOneRadom()", 210);
			}
			isgameover();

			break;
		case 38: //up
			event.preventDefault();
			if (moveUp()) {
				document.preventDefault();
				setTimeout("generateOneRadom()", 210);
			}
			isgameover();

			break;
		case 39: //right
			event.preventDefault();
			if (moveRight()) {
				setTimeout("generateOneRadom()", 210);
			}
			isgameover();

			break;
		case 40: //down
			event.preventDefault();
			if (moveDown()) {
				setTimeout("generateOneRadom()", 210);
				console.log('is check gmaeover');
			}
			isgameover();
			break;
	}
});
document.addEventListener('touchstart', function(event) {
	startx = event.touches[0].pageX;
	starty = event.touches[0].pageY;
});

document.addEventListener('touchend', function(event) {
	endx = event.changedTouches[0].pageX;
	endy = event.changedTouches[0].pageY;

	var deltaX = endx - startx;
	var deltaY = endy - starty;

	if (Math.abs(deltaX) < 0.15 * documentWidth && Math.abs(deltaY) < 0.15 * documentWidth) {
		return;
	}
	//x
	if (Math.abs(deltaX) >= Math.abs(deltaY)) {
		if (deltaX > 0) {
			//move Right
			if (moveRight()) {
				setTimeout("generateOneRadom()", 210);
				setTimeout("isgameover()", 210);
			}
		} else {
			//move Left
			if (moveLeft()) {
				setTimeout("generateOneRadom()", 210);
				setTimeout("isgameover()", 210);
			}
		}

	} else {
		if (deltaY > 0) {
			//move Down
			if (moveDown()) {
				setTimeout("generateOneRadom()", 210);
				setTimeout("isgameover()", 210);
			}
		} else {
			//move Up
			if (moveUp()) {
				setTimeout("generateOneRadom()", 210);
				setTimeout("isgameover()", 210);
			}
		}

	}
});

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

function gameover() {
	alert('gameover');
}

function moveLeft() {
	if (!canmoveLeft(board)) {
		return false;
	}
	//moveLeft
	console.log('2test');
	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][k] === 0 && noBlockHorizontal(i, k, j, board)) {
						//move
						showMoveAnimation(i, j, i, k);
						board[i][k] = board[i][j];
						board[i][j] = 0;

						break;
					} 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] += board[i][j];
						board[i][j] = 0;

						//add score
						score += board[i][k];
						hasConflicted[i][k] = 1;
						updateScore(score);

						break;
					}
				}
			}
		}
	}
	setTimeout('updateBoardView()', 200);
	return true;
}
var ti = 0;

function moveRight() {
	if (!canmoveRight(board)) {
		console.log("can't moveRight.");
		return false;
	}
	//moveRight
	console.log("moveRight");
	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;

						break;
					} 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];
						hasConflicted[i][k] = 1;
						updateScore(score);

						break;
					}
				}
			}
		}
	}

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

function moveUp() {

	if (!canmoveUp(board))
		return false;

	//moveUp
	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] += board[i][j];
						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;

	//moveDown
	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] += board[i][j];
						board[i][j] = 0;
						//add score
						score += board[k][j];
						updateScore(score);

						hasConflicted[k][j] = true;
						continue;
					}
				}
			}
		}

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

function updateScore(score) {
	var obj = $("#score");
	obj.text(score);
	obj.css('color', 'blue');
	obj.css('font-size', '30px');
}

showanimate2048.js

function showNumberWithAnimation(i,j,randNumer){
	var numberCell = $("#number-cell-"+i+'-'+j);

	numberCell.css('background-color', getNumberBackgroundColor(randNumer));
	numberCell.css('color',getNumberColor(randNumer));
	numberCell.text(randNumer);

	numberCell.animate({
		width:cellSideLength,
		height:cellSideLength,
		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);
}

support.js

documentWidth = window.screen.availWidth;
gridContainer = 0.92 * documentWidth;
cellSideLength = 0.18 * documentWidth;
cellSpace = 0.04*documentWidth;  


function getPosTop(i, j) {
	return cellSpace + i * (cellSpace+cellSideLength);
}

function getPosLeft(i, j) {
	return cellSpace + j * (cellSpace+cellSideLength);
}

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

	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;
}
function nomove(board){
	if (canmoveLeft(board) ||canmoveRight(board) || canmoveUp(board)||canmoveDown(board)) {
		return false;
	}
	return true;
}
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;
}

function canmoveRight(board) {
	for (var i = 0; i < 4; i++) {
		for (var j = 2; j > -1; j--) {
			if (board[i][j] != 0) {
				if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j])
					return true;
			}

		}
	}
	return false;
}

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;
}

function canmoveDown(board) {
	for (var i = 2; i > -1; i--) {
		for (var j = 0; j < 4; j++) {
			if (board[i][j] != 0) {
				if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {
					return true;
				}
			}
		}
	}
	return false;
}

function noBlockHorizontal(row, col1, col2, board) {
	for (var i = col1 + 1; i < col2; i++)
		if (board[row][i] != 0)
			return false;
	return true;
}

function noBlockVertical( col , row1 , row2 , board ){
    for( var i = row1 + 1 ; i < row2 ; i ++ )
        if( board[i][col] != 0 )
            return false;
    return true;
}

style.css

header{
	display: block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

header h1 {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	margin:0 0;
}

header #newgamebutton{
	display: block;
	margin: 0px auto;

	width: 100px;
	padding: 10px 10px;
	background-color: #8f7a66;

	font-family: Arial;
	color: white;

	border-radius: 10px;

	text-decoration: none;
}

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

header p{
	font-family: Arial;
	font-style: 25px;
	margin: 10px auto;
}

#grid-container{
	width: 460px;
	height: 460px;
	padding: 20px;

	margin: 0px 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{
	border-radius: 6px;

	font-family: Arial;
	font-weight: bold;
	font-size: 60px;
	line-height: 100px;
	text-align: center;

	position: absolute;
}
Fly_TheWind
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C++ 实现2048小游戏
余识-
10-21 4183
详解如何用C++实现一个控制台版本的2048小游戏
2048小游戏C++板来啦！
PingdiGuo_guo的博客
02-15 4339
C++板2048游戏实现，超详细有趣喔~~关注主播不迷路喔！
python小游戏 2048小游戏设计与实现
WEB_DC的博客
01-08 2652
🔥 Hi，各位同学好呀，这里是L学长！🥇今天向大家分享一个今年(2022)最新完成的毕业设计项目作品python小游戏毕设 2048小游戏设计与实现 (源码)🥇 学长根据实现的难度和等级对项目进行评分(最低0分，满分5分)难度系数：3分工作量：3分创新点：4分今天我们用python实现一个2048小游戏。游戏规则“使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块。游戏的时候尽可能多地合并这些数字方块就行了。简介。
推荐开源项目：2048 移动版
最新发布
gitblog_00007的博客
05-23 327
推荐开源项目：2048 移动版 项目地址:https://gitcode.com/tpcstld/2048 1、项目介绍 2048 是一款广受欢迎的数字合并游戏的经典移植版，专为Android平台打造。这款游戏由Gabriele Cirulli设计，现已被移植到移动设备上，让你随时随地享受思考与娱乐的双重乐趣。简单易懂的操作方式和逐渐升级的挑战性，使2048成为休闲益智类游戏的一股清流。 2、项目...
用python实现2048小游戏
热门推荐
qq_44728118的博客
04-27 1万+
用python实现2048小游戏
matlab 2048小游戏
slandarer的博客
03-11 8574
对第一版的2048小游戏的改进，界面使用gui制作，各个组件的颜色由之前RGB颜色提取程序提取的原版。 游戏效果： 游戏改进： 1.该程序增添了快速截取游戏分数的功能，以及记录游戏最高分的功能。 2.更加美观的界面 完整代码： function game2048 clc;clear; global GUI; global score; global best; global gameover...
JAVA2048小游戏
m0_53602804的博客
06-09 766
java2048小游戏练手
【C语言】2048小游戏【附源码】
m0_73367097的博客
04-03 6153
C语言2048小游戏
JAVA实现2048小游戏
D77的博客
02-03 1万+
目录 一、效果 二、教程 三、代码 一、效果 2048小游戏是一款比较流行的数字游戏，游戏规则如下： 每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方乱数出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。 ps: 博主就没有添加成功的图片了，实在是因为技术不行，试完了几次均没有凑成 2048 ... 二、教程 1、使用IDEA搭建一个...
2048小游戏及改进
Itachi__的博客
01-11 2485
寒假在家闲来无事，想要自己搞一个2048的小游戏，就在网上搜了一下，搜到了大佬的程序，就自己一遍参考一遍自己摸索，将代码实现了起来，能够真正的运行出来游戏界面，并且游戏感觉良好。 但是玩了几次之后，发现代码有点小bug，即即使右下角有可以接着合并的情况时，也会提示游戏结束，可以接着操作，如果后续操作可以破局，就会是游戏结束提示消失，如下图所示。 分析可知是源代码中判断游戏结束出现了问题，定位到相应位置，代码如下 。 //是否全部格子占满，是则游戏结束 private boo...
Javascript编写2048小游戏
10-23
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。
2048小游戏.zip
07-22
《2048小游戏开发详解》 2048小游戏是一款简单却极具挑战性的数字合成游戏，由Gabriele Cirulli在2014年创造。它以其独特的玩法和简洁的设计吸引了全球无数玩家的喜爱。在这个项目中，我们将探讨如何使用前端技术...
CSS3中transform属性和transition属性
IT路上的学步者
04-13 7219
学习了CSS3之后觉得比JQuery更方便点。做点记录。以便复习。
BeautifulSoup如何根据Style中是属性选择元素
IT路上的学步者
12-10 4676
如题，我为了提取文中红色的文字标记，必须要使用CSS选择器选中对应的标签。但是对应的Span标签中并没有标签可以使用， 使用 soup.select("span[style='color:rgb(255,0,0);']") 或者 soup.select("span[style='color:red;']") 并没有办法选中对应的spanspanspan标签 我使用百度查询了几乎大半个晚上，也...
CSS3 Animation 动画
IT路上的学步者
04-14 461
CSS3 Animation 动画 @keyframes 其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: gree
2048小游戏python
08-24
总的来说，编写2048小游戏需要考虑游戏界面的初始化和刷新、方块的生成和移动、游戏结束的判断等方面。通过使用Python面向对象的编程思想，我们可以比较方便地实现这个小游戏。 ### 回答3： 2048是一款流行的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值