码迷，mamicode.com
首页 > Web开发 > 详细

HTML 网页游戏 2048

时间：2015-07-30 22:45:14      阅读：138      评论：0      收藏：0      [点我收藏+]

标签：

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

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

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

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

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

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

HTML部分

<!DOCTYPE html>
<html>
<head>
	<title>2048</title>
	<link rel="stylesheet" type="text/css" href="2048.css" />
	
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript" src="support2048.js"></script>
	<script type="text/javascript" src="showanimation2048.js"></script>
	<script type="text/javascript" src="main2048.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 id="showGameover"></div>
	</div>
	
	<p align="center">@wenruo</p>
</body>
</html>

　　

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(‘<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) + 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); 
	
}

　　

游戏效果图：

技术分享

HTML 网页游戏 2048

标签：

原文地址：http://www.cnblogs.com/wenruo/p/4690765.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！