HTML 网页游戏 2048

新手只会一点html和css，javascript基本不会，更别提jQuery了= =

跟着慕课网的教学视频（视频地址：http://www.imooc.com/learn/76）一点点做的，由于自己没什么基础，又加上我的Dreamweaver出了点问题，我用notepad++写的，出了错查起来我都要哭了。。。

目前只看了一半，PC端网页部分。

觉得不仅学到了javascript，而且对游戏的逻辑，编程的设计方面学到了很多。

代码全部没有写注释。。大概说一下逻辑。

游戏有16个格子（div）做背景，格子上面有16个浮动的格子用来移动和显示数字，用一个数组来记录每个位置的数字，移动时上下左右分别判断，格子是真的移动走了（表示一开始吓坏了），通过移动后的坐标来确定格子的位置， board数字相加，然后刷新数字的显示。逻辑很简单，代码也很清晰。

HTML部分

	
	
	
	
	
	
	


	

		
2048
		New Game
		
score: 0
	
	
	

		
		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

	
	
	
@wenruo

　　

CSS部分

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

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

header #newgamebutton{
	display: block;
	margin: 20px 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-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{
	border-radius: 6px;
	
	font-family: Arial;
	font-weight: bold;
	font-size: 40px;
	line-height: 100px;
	text-align: center;
	
	position: absolute; /*通过js中函数来确定位置*/ 
}

#score{
	color: orange;
}

#showGameover {
	position: absolute;
	text-align: center;
	line-height: 150px;
	font-size: 40px;
	color: black;
	z-index: 9;
	alpha(opacity=80); 
	-moz-opacity:0.8; 
	opacity: 0.8;
}

　　

JavaScript部分

//main2048.js
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;
	}
	score = 0;
	updateScore(score);
	
// 自己初始化4096用来装B = =
// board[0][0] = 121;
// board[0][1] = 213;
// board[0][2] = 438;
// board[0][3] = 1024;
// board[1][0] = 8;
// board[1][1] = 8;
// board[1][2] = 16;
// board[1][3] = 16;
// board[2][0] = 32;
// board[2][1] = 64;
// board[2][2] = 512;
// board[2][3] = 8;
// board[3][0] = 2;
// board[3][1] = 512;
// board[3][2] = 2048;
// board[3][3] = 4096;	
	updateBoardView();
	var showGameover = $('#showGameover');
	showGameover.css('width', '0px');
	showGameover.css('height', '0px');
	showGameover.css('top', "250px");
	showGameover.css('left', "250px");
	showGameover.text("");
}

function updateBoardView() {
	$(".number-cell").remove();
	for (var i = 0; i < 4; ++i)
		for (var j = 0; j < 4; ++j) {
			$("#grid-container").append('
');//<-- @_@
			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) + 50);
				theNumberCell.css('left', getPosLeft(i, j) + 50);
			} else {
				theNumberCell.css('width', '100px');
				theNumberCell.css('height', '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;
		
	//random position
	var randx = parseInt(Math.floor(Math.random() * 4)); // 0,1,2,3
	var randy = parseInt(Math.floor(Math.random() * 4)); 
	while (true) {
		if (board[randx][randy] == 0)
			break;
		
		var randx = parseInt(Math.floor(Math.random() * 4)); // 0,1,2,3
		var randy = parseInt(Math.floor(Math.random() * 4)); 
	}
	
	//random number
	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:
			break;
	}
});

function isgameover() {
	if (nospace(board) && !canMoveLeft(board) 
		&& !canMoveRight(board) && !canMoveUp(board) && !canMoveRight(board)) {
		gameover();
		return true;
	}
		
	return false;
}

function gameover() {
	showGameOver();
}

function moveLeft() {
	if(!canMoveLeft(board))
		return false;
	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)) {
						showMoveAnimation(i, j, i, k);
						board[i][k] = board[i][j];
						board[i][j] = 0;
					} else if(board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board)
								&& hasConflicted[i][k] == false){
						//add
						showMoveAnimation(i, j, i, k);
						board[i][k] += board[i][j];
						board[i][j] = 0;
						score += board[i][k];
						updateScore(score);
						hasConflicted[i][k] = true;
					}
				}
			}
		}
		
	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)) {
						showMoveAnimation(i, j, i, k);
						board[i][k] = board[i][j];
						board[i][j] = 0;
					} else if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board)
								&& hasConflicted[i][k] == false){
						showMoveAnimation(i, j, i, k);
						board[i][k] += board[i][j];
						board[i][j] = 0;
						score += board[i][k];
						updateScore(score);
						hasConflicted[i][k] = true;
					}
				}
			}
		}
	}
	setTimeout("updateBoardView()", 200);
	return true;
}


function moveUp() {
	if (!canMoveUp(board))
		return false;
	for (var i = 0; i < 4; ++i) 
		for (var j = 1; j < 4; ++j) 
			if (board[j][i]) {
				for (var k = 0; k < j; ++k) {
					if (board[k][i] == 0 && noBlockVertical(i, k, j, board)) {
						showMoveAnimation(j, i, k ,i);
						board[k][i] = board[j][i];
						board[j][i] = 0;
					} else if (board[k][i] == board[j][i] && noBlockVertical(i, k, j, board)
								&& hasConflicted[k][i] == false) {
						showMoveAnimation(j, i, k ,i);
						board[k][i] += board[j][i];
						board[j][i] = 0;
						score += board[k][i];
						updateScore(score);
						hasConflicted[k][i] = true;
					}
				}
			}
	setTimeout("updateBoardView()", 200);
	return true;
}

function moveDown() {
	if (!canMoveDown(board)) 
		return false;
	for (var i = 0; i < 4; ++i) {
		for (var j = 2; j >= 0; --j) {
			if (board[j][i]) {
				for (var k = 3; k > j; --k) {
					if (board[k][i] == 0 && noBlockVertical(i, j, k, board)) {
						showMoveAnimation(j, i, k ,i);
						board[k][i] = board[j][i];
						board[j][i] = 0;
					} else if (board[k][i] == board[j][i] && noBlockVertical(i, j, k, board)
								&& hasConflicted[k][i] == false) {
						showMoveAnimation(j, i, k ,i);
						board[k][i] += board[j][i];
						board[j][i] = 0;
						score += board[k][i];
						updateScore(score);
						hasConflicted[k][i] = true;
					}
				}
			}
		}
	}
	setTimeout("updateBoardView()", 200);
	return true;
}

　　

//support2048.js
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 "#09c";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;
}

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 = 0; j < 3; ++j)
			if (board[i][j] != 0){
				if (board[i][j + 1] == 0 || board[i][j] == board[i][j + 1])
					return true;
			}
	return false;
}

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

function canMoveDown(board) {
	for (var i = 0; i < 4; ++i) {
		for (var j = 0; j < 3; ++j) {
			if (board[j][i])
				if (board[j + 1][i] == 0 || board[j + 1][i] == board[j][i])
					return true;
		}
	}
	return false;
}

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

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

　　

//showanimation2048.js
function showNumberWithAnimation(i, j, randNumber) { //coord
	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); //动画在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 showGameOver() {
	var showGameover = $("#showGameover");

	showGameover.css('background-color','yellow');
	showGameover.text('Game Over!');
	showGameover.animate({
		width:"250px",
		height:"150px",
		top: "175px",
		left: "125px"
	}, 200); 
	
}

　　

游戏效果图：

转载于:https://www.cnblogs.com/wenruo/p/4690765.html