基于html的2048小游戏,基于jQuery的2048小游戏设计（网页版）
上周模仿一個2048小游戲，總結一下自己在編寫代碼的時候遇到的一些坑。
游戲規則：省略，我想大部分人都玩過，不寫了
源碼地址：https://github.com/xinhua6/2048game.git
文件結構：
2048.css? 編寫游戲樣式
index.html? 頁面結構內容
main2048.js 游戲主邏輯文件，包含初始化格子，隨機生成2個數字
game.js 游戲交互邏輯文件，主要包含上下左右移動邏輯
support.js 游戲的基礎邏輯文件，提供游戲結束判斷，數字移動的前提條件判斷
animation.js 游戲的動畫邏輯文件，包含數字格子的顏色設計，移動的動畫設計
ps：這里我只是寫一下注意點，不會把詳細的代碼都羅列出來，要想看詳細的編寫代碼，請到源碼地址：https://github.com/xinhua6/2048game.git 下載。
1.在css樣式中沒有對每個格子的位置進行設置，利用循環來初始化每個格子。
.grid-cell{
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
margin：0 auto;
}
main.js中
function init() {
for (var i =0;i<4;i++){
board[i] = new Array();
for (var j= 0;j<4;j++){
board[i][j] = 0;
//通過雙重遍歷獲取每個格子的元素
var eachGrid = $('#grid-cell-'+i+'-'+j);
//通過getPostTop()獲取每個格子距離頂部的高度和到左端的距離
//eachGrid.css({"top":getPos(i),"left":getPos(j)});無效
eachGrid.css('top',getPos(i));
eachGrid.css('left',getPos(j));
}
}
updateBoardView();
}
support.js文件中
//格子到頂部/左端的距離
function getPos(num) {
return 20+num*120;
}
注意：在這里子元素grid-cell的position要設置為absolute，父元素container的position要設置為relative，這樣才可以基于父元素框向左向下偏移位置，否則子元素grid-cell會基于整個屏幕來向左，向下移動
2.隨機生成兩個數字。(2或者4)。這里三步走：生成一個隨機的位置；生成一個隨機的數字；在隨機的位置上顯示隨機的數字
function generateOneNumber() {
//生成一個隨機位置的隨機數
//1生成隨機的位置
var randx = parseInt(Math.floor(Math.random()*4));
var randy = parseInt(Math.floor(Math.random()*4));
//定義一個死循環，完成生成隨機空格子
while (true){
//如果當前的格子為0，滿足條件
if (board[randx][randy] == 0){
break;
}
//否則重新隨機一個位置
var randx = Math.floor(Math.random()*4);
var randy = Math.floor(Math.random()*4);
}
//2生成隨機的數字,只能生成2或4
var randNumber = Math.random() < 0.5 ? 2 : 4;
//3在隨機的位置上顯示出隨機的數字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
}
3.這里就向左移來講解，其余方向的移動邏輯都是類似的。
開始是判斷是否能夠左移，左移的條件是當前數字所在的格子左邊相鄰的值為0或者值相等。該函數返回的是boolean值
function canMoveLeft(board) {
for (var i =0;i<4;i++){
for (var j = 1;j<4;j++){
if (board[i][j] != 0){
//當前數字格的左邊前一個值為0或者當前數字格的值與左邊第一個數字格的值相等
if (board[i][j-1] == 0 || board[i][j-1] == board[i][j]){
return true;
}
}
}
}
return false;
}
緊接著如果判斷成立，則進行左移。左移的時候要進行判斷，相鄰的格子數是否相等，相等要相加，同時成績上要增加分數；否則，當前的格子的數字移動到相應格子。
function moveLeft() {
//moveLeft 左移要注意不是第一列，第一列無法左移
for (var i = 0; i < 4; i++){
for (var j = 1; j < 4; j++){
if (Number(board[i][j]) != 0){
for (var k = 0;k
if (board[i][k]==0 && noBoardHorizontal(i,k,j,board)) {
//向左移動
showMoveAnimation(i,j,i,k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}else if (board[i][k] == board[i][j] && noBoardHorizontal(i,k,j,board)){
//向左移動
showMoveAnimation(i,j,i,k);
board[i][k] += board[i][j];
score += board[i][k];
updateScore(score);
board[i][j] = 0;
}
}
}
}
}
//設置刷新時間是為了讓運動的動畫走完再進行跟新數字格，否則數字格運動的動畫將會被打斷
setTimeout(updateBoardView(),200);
}
//判斷當前數字格水平的數字格是否值為0
function noBoardHorizontal(row,col1,col2,board) {
for (var i = col1 + 1; i< col2;i++){
if (board[row][i]!=0){
return false;
}
}
return true;
}
function showMoveAnimation(fromx,fromy,tox,toy) {
//獲取當前的數字格的元素
var numberCell = $("#number-cell-"+ fromx + "-" + fromy);
numberCell.animate({
top:getPos(tox),
left:getPos(toy),
},200)
4.最后判斷是否游戲結束，以及分數跟新
//跟新分數
function updateScore(num){
$('#score').text(num);
}
//判斷游戲是否結束
function isgameover(board){
if (!canMoveLeft(board) && !canMoveUp(board) && !canMoveRight(board) && !canMoveDown(board)) {
alert("游戲結束，請重新開始游戲！");
}
}
總結：
這個游戲編程總體不難，只要理清思路，就可以寫了，最后調試的時候，比較注意的是：設置setTimeOut時，要注意最后的時間設置。
基于jQuery仿QQ音樂播放器網頁版代碼
基于jQuery仿QQ音樂播放器網頁版代碼是一款黑色樣式風格的網頁QQ音樂播放器樣式代碼.效果圖如下: 在線預覽???源碼下載 實現的代碼. html代碼:
Swift實戰之2048小游戲
上周在圖書館借了一本Swift語言實戰入門,入個門玩一玩^_^正好這本書的后面有一個2048小游戲的實例,筆者跟著實戰了一把. 差不多一周的時間,到今天,游戲的基本功能已基本實現,細節我已不打算繼續完 ...
2048小游戲代碼解析 C語言版
2048小游戲,也算是風靡一時的益智游戲.其背后實現的邏輯比較簡單,代碼量不算多,而且趣味性強,適合作為有語言基礎的童鞋來加強編程訓練.本篇分析2048小游戲的C語言實現代碼. 前言 游戲截圖: ?游 ...
HTML+CSS+JavaScript實現2048小游戲
相信很多人都玩過2048小游戲,規則易懂.操作簡單,我曾經也“癡迷”于它,不到2048不罷休,最高成績合成了4096,現在正好拿它來練練手. 我對于2048的實現,除了使用了現有2048小游戲的配色, ...
c#擼的控制臺版2048小游戲
1.分析 最近心血來潮,突然想寫一個2048小游戲.于是搜索了一個在線2048玩玩,熟悉熟悉規則. 只談核心規則:(以左移為例) 1.1合并 以行為單位,忽略0位,每列依次向左進行合并,且每列只能合并 ...
C# 開發2048小游戲
這應該是幾個月前,閑的手癢,敲了一上午代碼搞出來的,隨之就把它丟棄了,當時讓別人玩過,提過幾條更改建議,但是時至今日,我也沒有進行過優化和更改(本人只會作案,不會收場,嘎嘎),下面的建議要給代碼愛好的 ...
隨機推薦
check_user_createdate.sh
在前面這篇文章Linux如何找出用戶的創建時間里面討論了查看用戶創建時間的方法,后面自己嘗試弄了一個腳本來檢查所有用戶創建時間腳本,當然更合理的應該叫檢查所有用戶的密碼修改時間比較準確(因為這種方法有 ...
(原創)AD賬戶誤刪導致Exchange郵箱被刪 莫苦惱
由于人員變動,離職人員AD賬戶和郵箱經常要刪除.但是在刪除AD賬戶的時候難免會犯錯,將在用的用戶給刪除了,這是個痛苦的事情, 然后你會發現Exchange郵箱也會跟著刪除,抓狂了..,還好,幸虧這里進 ...
Maven-007-Nexus 用戶添加，用戶角色分配，用戶修改密碼，管理員重置用戶密碼
配置好 maven nexus 私服后,默認的用戶可通過查看[Users]查看當前私服中所存在的用戶,如下圖所示:
HDFS原理講解
簡介 本文是筆者在學習HDFS的時候的學習筆記整理, 將HDFS的核心功能的原理都整理在這里了. [廣告] 如果你喜歡本博客,請點此查看本博客所有文章:http://www.cnblogs.com/x ...
CC.NET-自動化發布時 Web.config 文件維護
[Hello CC.NET]自動化發布時 Web.config 文件維護 ? 在??的 HellowWorld 中經實現: 1. ...
svn branching and merging
the svn switch command is an alternative way to creating a working copy of a branch :) You can merge ...
Java編碼問題匯總
轉自?http://www.blogjava.net/zhangchao/archive/2011/05/26/351051.html?Thanks Java編碼問題匯總 工作中經常遇到java編碼問 ...
Delphi 開發手機 App 與其他工具之間的比較分析
寫在前頭 關于各種手機App開發的工具,從2010年前后到現在已經在很多不同的場合介紹過,在元智大學.中臺科技大學.德霖科技大學等不同學校的講座.課程當中,都有類似的主題,所以對我來說,這個主題屬于駕 ...
ubuntu server 在 virtualbox中安裝增強包
原文鏈接:http://luzl.iteye.com/blog/1010597 首先說下增強包能干什么,在desktop下面有了增強包桌面就能變大了,在server下也是類似,那個黑屏就能變大了,還有 ...
SpingBoot —— 多線程
Spring 通過任務執行器(TaskExecutor)來實現多線程和并發編程.使用ThreadPoolTaskExecutor可實現一個基于線程池的TaskExecutor.而實際開發中任務一般是非 ...
總結
以上是生活随笔為你收集整理的基于html的2048小游戏,基于jQuery的2048小游戏设计（网页版）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页版2048游戏html,HTML网页
- 下一篇： Qt+opencv二值化