2048⼩游戏——⽹页版（提⾼篇）出于之前的承诺，还是含着泪来总结⼀下2048改进版的代码吧！ 2048⼩游戏——⽹页版（提⾼篇）：主要是想对该游戏进⾏⼀个改进，2048的数字换成图⽚、⽀持⼿机端的滑动操作等。 并没有换图⽚，也没有做滑动设置，感觉那个没什么卵⽤。所以这次的主要改进：①屏幕适配；②数字换成⽂字；③界⾯优化。同样的，我把该项⽬的所有代码已上传，欢迎下载： 先对⽐⼀下界⾯：
可以看到，现在这个界⾯的标题改了、数字也改⽂字了、新增了⼀个停⽌按钮。
那么代码上有做哪些变化呢，我就把代码有改动过的⼏个⽂件再展⽰⼀下好了：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title>2048</title>
<link rel="stylesheet" type="text/css" href="2048.css"/>
<!--<script type="text/javascript" src="libs.baidu/jquery/1.9.0/jquery.min.js"></script>-->
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="support2048.js"></script>
<script type="text/javascript" src="showAnimation.js"></script>
<script type="text/javascript" src="main2048.js"></script>
</head>
<body>
<!-- 绘制标题 -->
<header>
<h1>2048⽂字版</h1>
<div id="button">
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<a href="javascript:gameover();" id="stopgamebutton">Stop Game</a>
</div>
<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>
</body>
</html>
main2048.js
/**
* Created by Kay on 2016/3/7.
*/
// --------------------------------------------------------------------------------------------------------------------
var board = new Array();
var score = 0;
var hasConflicted = new Array();// ⽤来判断每个格⼦是否已经发⽣过碰撞，从⽽避免⼀下⼦加好⼏个格⼦$(document).ready(function () { prepareForMobile();
newgame();
});
function prepareForMobile(){
if(documentWidth > 500){
gridContainerWidth = 500;
cellSpace = 20;
cellSideLength = 100;
}
$('#grid-container').css('width',gridContainerWidth - 2*cellSpace);
$('#grid-container').css('height',gridContainerWidth - 2*cellSpace);
$('#grid-container').css('padding',cellSpace);
$('#grid-container').css('border-radius',0.02*gridContainerWidth);
$('.grid-cell').css('width',cellSideLength);
$('.grid-cell').css('height',cellSideLength);
$('.grid-cell').css('border-radius',0.02*cellSideLength);
}
function newgame() {
// 初始化棋盘格
init();
// 在随机两个格⼦⽣成数字
generateOneNumber();
generateOneNumber();
}
// --------------------------------------------------------------------------------------------------------------------
/*
* 1、初始化棋盘格 gridCell
* 3、初始化数据清零 updateBoardView();
*/
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', getPosition(i));
gridCell.css('left', getPosition(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;
}
}
updateBoardView();
score = 0;
updateScore(score);
}
// --------------------------------------------------------------------------------------------------------------------
/
/ 初始化数据，就是将数据可视化！根据board[i][j]存的数值来画图！
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", getPosition(i) + cellSideLength/2);
theNumberCell.css("left", getPosition(j) + cellSideLength/2);
} else {
theNumberCell.css('width', cellSideLength);
theNumberCell.css('height',cellSideLength);
theNumberCell.css('top', getPosition(i));
theNumberCell.css('left', getPosition(j));
theNumberCell.css('background-color', getNumberBackgroundColor(board[i][j]));
theNumberCell.css('color', getNumberColor(board[i][j]));
<(getNumberText(board[i][j]));
}
hasConflicted[i][j] = false;
}
$('.number-cell').css('line-height',cellSideLength+'px')
$('.number-cell').css('font-size',0.3*cellSideLength+'px')//注意这⾥之前是0.6.现在⽂字版是0.3
}
// --------------------------------------------------------------------------------------------------------------------
// 随机选⼀个格⼦⽣成⼀个数字
function generateOneNumber() {
if (nospace(board))
return false;
// 随机⼀个位置
var randx = parseInt(Math.floor(Math.random() * 4));
var randy = parseInt(Math.floor(Math.random() * 4));
/
/ 设置⼀个时间参数，50次以内系统还未⽣成⼀个空位置，那么就进⾏⼈⼯⼀个空位置
var times = 0;
while (times < 50) {
if (board[randx][randy] == 0)
break;
randx = parseInt(Math.floor(Math.random() * 4));
randy = parseInt(Math.floor(Math.random() * 4));
times++;
}
if (times == 50) {
for (var i = 0; i < 4; i++)
for (var j = 0; j < 4; j++) {
if (board[i][j] == 0) {
randx = i;
randy = j;
}
}
}
// 随机⼀个数字
var randNumber = Math.random() < 0.5 ? 2 : 4;
// 在随机位置显⽰随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx, randy, randNumber);
return true;
}
// --------------------------------------------------------------------------------------------------------------------
// 判断键盘的响应时间上下左右
$(document).keydown(function (event) {
event.preventDefault();
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: // default
break;
}
});
// --------------------------------------------------------------------------------------------------------------------
// 向左移动
function moveLeft() {
// 1、⾸先，判断能否向左移动
if (!canMoveLeft(board))
return false;
/*2、如果可以向左移动：
* ①当前的数字是否为0，不为0则进⾏左移 board[i][j] != 0
* ②如果左侧为空格⼦，则数字进⾏⼀个移位操作 board[i][k] == 0
* ③如果左侧有数字且不相等，则数字还是进⾏移位操作 noBlockHorizontal
* ④如果左侧有数字且相等，则数字进⾏相加操作 board[i][k] == board[i][j]
*/
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)) {
//move
showMoveAnimation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
else if (board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board) && !hasConflicted[i][k]) { //move
showMoveAnimation(i, j, i, k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;
//add score
score += board[i][k];
updateScore(score);
hasConflicted[i][k] = true;
continue;
}
}
}
}
/
/ 3、初始化数据 updateBoardView()
// 为显⽰动画效果，设置该函数的等待时间200毫秒
setTimeout("updateBoardView()", 200);
return true;
}
// --------------------------------------------------------------------------------------------------------------------
// 向上移动
function moveUp() {
if (!canMoveUp(board))
return false;
//moveUp
for (var j = 0; j < 4; j++)
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
for (var k = 0; k < i; k++) {
if (board[k][j] == 0 && noBlockVertical(j, k, i, board)) {
//move
showMoveAnimation(i, j, k, j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if (board[k][j] == board[i][j] && noBlockVertical(j, k, i, board) && !hasConflicted[k][j]) { //move
showMoveAnimation(i, j, k, j);
//add
board[k][j] += board[i][j];
board[i][j] = 0;
//add score
score += board[k][j];
updateScore(score);
hasConflicted[k][j] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()", 200);
return true;
}
// --------------------------------------------------------------------------------------------------------------------
// 向右移动
function moveRight() {
if (!canMoveRight(board))
return false;
/
/moveRight
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)) {
//move
showMoveAnimation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
else if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board) && !hasConflicted[i][k]) { //move
showMoveAnimation(i, j, i, k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;
//add score
score += board[i][k];
updateScore(score);
hasConflicted[i][k] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()", 200);
return true;
}
// --------------------------------------------------------------------------------------------------------------------
// 向下移动
function moveDown() {
if (!canMoveDown(board))
return false;
//moveDown
for (var j = 0; j < 4; j++)
for (var i = 2; i >= 0; i--) {
if (board[i][j] != 0) {
for (var k = 3; k > i; k--) {
if (board[k][j] == 0 && noBlockVertical(j, i, k, board)) {
//move
showMoveAnimation(i, j, k, j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if (board[k][j] == board[i][j] && noBlockVertical(j, i, k, board) && !hasConflicted[k][j]) { //move
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议