HTML 网页游戏 2048
2015-07-30 21:58
501 查看
新手只会一点html和css，javascript基本不会，更别提jQuery了= =
跟着慕课网的教学视频（视频地址：http://www.imooc.com/learn/76）一点点做的，由于自己没什么基础，又加上我的Dreamweaver出了点问题，我用notepad++写的，出了错查起来我都要哭了。。。
目前只看了一半，PC端网页部分。
觉得不仅学到了javascript，而且对游戏的逻辑，编程的设计方面学到了很多。
代码全部没有写注释。。大概说一下逻辑。
游戏有16个格子（div）做背景，格子上面有16个浮动的格子用来移动和显示数字，用一个数组来记录每个位置的数字，移动时上下左右分别判断，格子是真的移动走了（表示一开始吓坏了），通过移动后的坐标来确定格子的位置， board数字相加，然后刷新数字的显示。逻辑很简单，代码也很清晰。
HTML部分
CSS部分
JavaScript部分
游戏效果图：
跟着慕课网的教学视频（视频地址：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);
}游戏效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- KindEditor保留htmltag，以及关闭html过滤
- html——a标签添加点击事件，火狐浏览器直接显示0
- HTML超链接标签
- HTML中id、name、class 区别
- 好用的HTML解析库BeautifulSoup
- html的meta标签
- NopCommerce Html扩展方法Html.Widget
- html的转码玉反转码
- 小技巧解决“FF不能读取outerHTML”的问题
- HTML 表单
- HTML <meta> 标签
- HTML 的超链接 a 标签中如何设置其宽度和高度
- html-01
- HTML <link> 标签的 rel 属性
- 将PDF转换成html格式文件的方法
- html<textarea>标签
- 【工作笔记0006】C#调用HtmlAgilityPack类库实现网页数据抓取
- XHTML
- 深入学习Html DOM树的操作
- html 按钮的三种形式