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

  1. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  2. 推荐21款最佳 HTML5 网页游戏

    尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...

  3. 开源游戏“2048”IOS移植版

    简介: 这个游戏是我在今年(2014/05)课余时闲着无聊做的一个益智类小游戏,总共花了4个工作日才完成,为了游戏的效率,做了很多优化,目前在IE5以上浏览器能够流畅运行,运行时如果屏幕分辨率不兼容, ...

  4. arpg网页游戏之地图（三）

    地图分块加载类MapEngine,主要包含以下属性: g 地图层graphics,地图将画在上面 buffPixelRange 地图加载范围矩形 viewPort 屏幕视窗 currZoneArr 已 ...

  5. arpg网页游戏之地图（二）

    [转]http://www.cnblogs.com/BlueWoods/p/4684557.html 这一节说说视窗,这个视窗,也就是游戏的视角.现在的网页游戏分为2D游戏,2.5D游戏和3D游戏,2 ...

  6. arpg网页游戏之地图（一）

    [转]http://www.cnblogs.com/BlueWoods/p/4681572.html?from=timeline&isappinstalled=1 开发arpg网页游戏一项比较 ...

  7. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  8. 解决unity3d发布的网页游戏放到服务器上无法使用的问题

    http://www.unity蛮牛.com/blog-2429-1226.html 第一次把unity3d发布的网页游戏放到服务器上(Win2003),发现无法使用.可以尝试以下办法.       ...

  9. 40个容易上瘾的HTML5网页游戏,总有一款适合你

    我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

随机推荐

  1. ARM的工作环境和工作模式

    工作环境: 可以称之为“数据环境,”数据总线16位或者32位,应用于不同的情况下.16位的情况下,工作速度快,代码密度高. 工作模式: 设置程序数据所处的状态,为移植操作系统提供方便.

  2. 【算法】桶排->冒泡->快排

    啊哈 算法 http://pan.baidu.com/s/1jGGl2SI http://pan.baidu.com/s/15C1oq 1 节 最快最简单的排序——桶排序 在我们生活的这个世界中到处都 ...

  3. ubuntu - sudo in php exec

    最近写防火墙的WEB版,需要在PHP中调用linux系统命令,但是防火墙有关的执行都需要管理员权限才能执行. 在ubuntu下,Apache2的运行账户默认是www-data,默认是不能通过sudo来 ...

  4. codevs 1540 银河英雄传说

    题目描述 Description 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米 ...

  5. UI表单

    Monk.UI表单美化插件诞生记!   阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...

  6. linux nginx安装

    操作系统centOS7安装nginx: 1.如果centOS7中未安装编译器,先安装gcc编译模块 yum install gcc gcc-c++ ncurses-devel perl 2.安装ngi ...

  7. MSTest不支持参数化测试的解决方案

    之前的项目中做单元测试一直用的是NUnit,这次做新项目,负责人要求统一用MsTest,理由是MsTest是Visual Studio内置的.用就用吧,我没什么意见.不过用了两天,我就发现一个大问题: ...

  8. BZOJ 3969 Low Power 解题报告

    我们首先将所有电池排序,那么我们可以找到一组最优方案,使得一台机器的能量之差是相邻两电池的能量之差. 然后我们就二分这个答案,从前往后贪心地选这个数对,然后看是否所有的数对都是满足条件的. 假设这个数 ...

  9. redis info 各信息意义

    redis_version:2.4.16 # Redis 的版本redis_git_sha1:00000000redis_git_dirty:0arch_bits:64multiplexing_api ...

  10. 保护模式下pmtest1.asm的理解

    整个代码对应内存线性地址分为四段,[gdt] [code32] [video32] [code16] 代码先在实模式[code16]下运行,code16中的cs就是系统分配的该程序物理地址的基址. 编 ...