HTML 网页游戏 2048

新手只会一点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的更多相关文章

jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
推荐21款最佳 HTML5 网页游戏
尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...
开源游戏“2048”IOS移植版
简介: 这个游戏是我在今年(2014/05)课余时闲着无聊做的一个益智类小游戏,总共花了4个工作日才完成,为了游戏的效率,做了很多优化,目前在IE5以上浏览器能够流畅运行,运行时如果屏幕分辨率不兼容, ...
arpg网页游戏之地图（三）
地图分块加载类MapEngine,主要包含以下属性: g 地图层graphics,地图将画在上面 buffPixelRange 地图加载范围矩形 viewPort 屏幕视窗 currZoneArr 已 ...
arpg网页游戏之地图（二）
[转]http://www.cnblogs.com/BlueWoods/p/4684557.html 这一节说说视窗,这个视窗,也就是游戏的视角.现在的网页游戏分为2D游戏,2.5D游戏和3D游戏,2 ...
arpg网页游戏之地图（一）
[转]http://www.cnblogs.com/BlueWoods/p/4681572.html?from=timeline&isappinstalled=1 开发arpg网页游戏一项比较 ...
基于html5实现的愤怒的小鸟网页游戏
之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...
解决unity3d发布的网页游戏放到服务器上无法使用的问题
http://www.unity蛮牛.com/blog-2429-1226.html 第一次把unity3d发布的网页游戏放到服务器上(Win2003),发现无法使用.可以尝试以下办法. ...
40个容易上瘾的HTML5网页游戏,总有一款适合你
我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

随机推荐

VSCode调试go
VSCode调试go语言出现:exec: "gcc": executable file not found in %PATH% 1.问题描述由于安装VS15 Preview ...
php分页类的二种调用方法(转载)
php分页类的二种调用方法原文地址:http://www.xfcodes.com/php/fenye/25584.htm 导读:php分页类的二种调用用法,ajax调用php分页类,非ajax方式调 ...
java的装箱与拆箱
在 JDK1.5 引入自动装箱和拆箱的机制后,包装类和基本类型之间的转换就更加轻松便利了.那什么是装箱和拆箱呢?我们分别来看下装箱:把基本类型转换成包装类,使其具有对象的性质,又可分为手动装箱和自动装 ...
BZOJ 3997 [TJOI 2015 组合数学] 解题报告
这个题我脑洞了一个结论: 首先,我们定义满足以下条件的路径为“从右上到左下的路径”: 对于路径上任何不相同的两个点 $(x_1, y_1)$,$(x_2, y_2)$,都有: $x_1\neq x_2 ...
[XJOI NOI2015模拟题13] C 白黑树【线段树合并】
题目链接:XJOI - NOI2015-13 - C 题目分析使用神奇的线段树合并在 O(nlogn) 的时间复杂度内解决这道题目. 对树上的每个点都建立一棵线段树,key是时间(即第几次操作),动 ...
zepto源码学习-06 touch
先上菜,看这个模块的最后一段代码,一看就明白. ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 't ...
【形式化方法：VDM++系列】1.前言
1.前言今天开始上课学习软件需求分析与VDM++,经过一节课的学习,我又增长了见识. 软件需求工程在软件工程中处于十分核心的地位:需求分析的好坏直接决定软件工程的成败.这一点是我之前对需求工程的理解 ...
Android 多屏幕适配
问题: 测试时,发现应用在不同的显示器上显示效果不同(部分文本不能显示完全),自然想到屏幕适配的问题. 按照思路整理如下: (一) 几个概念 1, Screen size 屏幕的尺寸,即对角线长度(单 ...
【HDOJ】1258 Sum It Up
典型的深搜,剪枝的时候需要跳过曾经搜索过的相同的数目,既满足nums[i]=nums[i-1]&&visit[i-1]==0,visit[i-1]==0可以说明该点已经测试过. #in ...

HTML 网页游戏 2048

HTML 网页游戏 2048的更多相关文章

随机推荐

热门专题