2048小遊戲——網頁版（提升篇）
出於以前的承諾，仍是含着淚來總結一下2048改進版的代碼吧！javascript
2048小遊戲——網頁版（提升篇）：主要是想對該遊戲進行一個改進，2048的數字換成圖片、支持手機端的滑動操做等。css
並無換圖片，也沒有作滑動設置，感受那個沒什麼卵用。因此此次的主要改進：①屏幕適配；②數字換成文字；③界面優化。html
一樣的，我把該項目的全部代碼已上傳，歡迎下載：點擊打開連接
java
先對比一下界面：jquery
能夠看到，如今這個界面的標題改了、數字也改文字了、新增了一箇中止按鈕。數組
那麼代碼上有作哪些變化呢，我就把代碼有改動過的幾個文件再展現一下好了：app
index.html
dom
<!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="http://libs.baidu.com/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
ide
/**
* 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();
}
// --------------------------------------------------------------------------------------------------------------------
/*
* 一、初始化棋盤格 gridCell
* 二、初始化二維數組 用於存儲數據 board
* 三、初始化數據 清零 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]));
theNumberCell.text(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() {
// 一、首先，判斷可否向左移動
if (!canMoveLeft(board))
return false;
/*二、若是能夠向左移動：
* ①當前的數字是否爲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;
}
}
}
}
// 三、初始化數據 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
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 isgameover() {
if (nospace(board) && nomove(board)) {
gameover();
}
}
function gameover() {
//alert("遊戲結束！您的得分爲：" + score);
var max = 0;
for (var i = 0; i < 4; i++){
for (var j = 0; j < 4; j++){
if (board[i][j] > max) {
max = board[i][j];
}
}
}
alert("恭喜您得到了：" + getNumberText(max) + "段位！"+ "\n 您的當前得分爲：" + score + "分");
}
support2048.js
函數
/**
* Created by Kay on 2016/3/7.
*/
// 定義一些相對屏幕的經常使用尺寸
documentWidth = window.screen.availWidth;
gridContainerWidth = 0.92 * documentWidth;
cellSideLength = 0.18 * documentWidth;
cellSpace = 0.04 * documentWidth;
// --------------------------------------------------------------------------------------------------------------------
// 獲取每一個單元格的座標
function getPosition(pos) {
return cellSpace + pos * (cellSpace + cellSideLength);
}
// --------------------------------------------------------------------------------------------------------------------
// 設置不一樣數字的不一樣背景顏色
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 "#9c0";
break;
case 1024:
return "#33b5e5";
break;
case 2048:
return "#09c";
break;
case 4096:
return "#a6c";
break;
case 3192:
return "#93c";
break;
}
return "black";
}
function getNumberText(number) {
switch (number) {
case 2:
return "LOL";
break;
case 4:
return "人機";
break;
case 8:
return "匹配";
break;
case 16:
return "排位";
break;
case 32:
return "青銅";
break;
case 64:
return "白銀";
break;
case 128:
return "黃金";
break;
case 256:
return "鉑金";
break;
case 512:
return "鑽石";
break;
case 1024:
return "大師";
break;
case 2048:
return "王者";
break;
case 4096:
return "大神";
break;
case 8192:
return "騰訊";
break;
}
return "black";
}
// --------------------------------------------------------------------------------------------------------------------
// 設置數字的顏色：2和4的顏色都爲#776e65，其它數字的顏色爲白色
function getNumberColor(number) {
if (number <= 4)
return "#776e65";
return "white";
}
// --------------------------------------------------------------------------------------------------------------------
// 判斷當前格子是否有數字 即判斷是否是一個「非空（nospace）」的格子
function nospace(board) {
for (var i = 0; i < 4; i++)
for (var j = 0; j < 4; j++)
if (board[i][j] == 0) // 若是沒有數字，返回false
return false;
// 若是有數字，返回true
return true;
}
// --------------------------------------------------------------------------------------------------------------------
/* 判斷可否向左移動
* 一、只須要判斷每一行的後3列格子便可。
* 二、能夠移動的條件是：
* ①當前格子有數字，即 board[i][j] != 0
* ②左側格子沒有數字，即 (board[i][j - 1] == 0
* ③左側格子和當前格子數字相同，即 board[i][j - 1] == board[i][j]
*/
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 canMoveUp(board) {
for (var j = 0; j < 4; j++)
for (var i = 1; i < 4; i++)
if (board[i][j] != 0)
if (board[i - 1][j] == 0 || board[i - 1][j] == 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 + 1] == board[i][j])
return true;
return false;
}
function canMoveDown(board) {
for (var j = 0; j < 4; j++)
for (var i = 0; i < 3; i++)
if (board[i][j] != 0)
if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j])
return true;
return false;
}
// --------------------------------------------------------------------------------------------------------------------
// 判斷水平方向是否可移動，即水平方向的兩個目標格子之間沒有其餘數字 noBlockHorizontal
function noBlockHorizontal(row, col1, col2, board) {
for (var i = col1 + 1; i < col2; i++)
if (board[row][i] != 0) // 若是在這二者之間的其它格子有數字，返回false
return false;
// 若是二者之間沒數字，返回true
return true;
}
// --------------------------------------------------------------------------------------------------------------------
// 判斷垂直方向是否可移動，即垂直方向的兩個目標格子之間沒有其餘數字 noBlockHorizontal
function noBlockVertical(col, row1, row2, board) {
for (var i = row1 + 1; i < row2; i++)
if (board[i][col] != 0) // 若是在這二者之間的其它格子有數字，返回false
return false;
// 若是二者之間沒數字，返回true
return true;
}
function nomove(board) {
if (canMoveLeft(board) ||
canMoveRight(board) ||
canMoveUp(board) ||
canMoveDown(board))
return false;
return true;
}
另外的幾個文件（2048.css、showAnimation.js）和以前同樣，不作修改。快速連接請點擊→2048小遊戲——網頁版（基礎篇）
相關文章
- 1. 2048小遊戲——網頁版（基礎篇）
- 2. 網頁版<2048>遊戲
- 3. python版2048小遊戲
- 4. HTML 網頁遊戲 2048
- 5. 2048小遊戲
- 6. 2048小遊戲HTML網頁版源碼共享
- 7. 2048 小遊戲 Demo
- 8. 【flash】小遊戲 2048
- 9. 小遊戲之2048
- 10. Android小遊戲--2048
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • ASP.NET Web Forms - 母版頁 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 2048小遊戲——網頁版（基礎篇）
- 2. 網頁版<2048>遊戲
- 3. python版2048小遊戲
- 4. HTML 網頁遊戲 2048
- 5. 2048小遊戲
- 6. 2048小遊戲HTML網頁版源碼共享
- 7. 2048 小遊戲 Demo
- 8. 【flash】小遊戲 2048
- 9. 小遊戲之2048
- 10. Android小遊戲--2048