js、html、css實現2048
這段時間看了視頻，用JavaScript實現2048小遊戲，都是一些基本語法和簡單邏輯javascript
下面分享一下整個2048遊戲代碼css
2048.htmlhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="2048.css">
</head>
<body>
<p>SCORE:<span id="score">0</span></p>
<div id="gridPanel">
<div id="c00" class="cell"></div>
<div id="c01" class="cell"></div>
<div id="c02" class="cell"></div>
<div id="c03" class="cell"></div>
<div id="c10" class="cell"></div>
<div id="c11" class="cell"></div>
<div id="c12" class="cell"></div>
<div id="c13" class="cell"></div>
<div id="c20" class="cell"></div>
<div id="c21" class="cell"></div>
<div id="c22" class="cell"></div>
<div id="c23" class="cell"></div>
<div id="c30" class="cell"></div>
<div id="c31" class="cell"></div>
<div id="c32" class="cell"></div>
<div id="c33" class="cell"></div>
</div>
<div id="gameOver">
<p>
GAME OVER!<br>
SCORE:<span id="final">0</span><br>
<a class="btn" href="javascript:game.start();">TRY AGAIN!</a>
</p>
</div>
<script src="2048.js"></script>
</body>
</html>
2048.css
#gridPanel{
width: 480px;
height: 480px;
margin: 0 auto;
position: relative;
background: #bbada0;
border-radius: 10px;
}
.cell{
width: 100px;
height: 100px;
border-radius: 6px;
background:#ccc0b3;
position: absolute;
font-size: 60px;
text-align: center;
color: #fff;
line-height: 100px;
}
[id^="c0"]{top:16px}
[id^="c1"]{top:132px}
[id^="c2"]{top:248px}
[id^="c3"]{top:364px}
[id$="0"]{left:16px}
[id$="1"]{left:132px}
[id$="2"]{left:248px}
[id$="3"]{left:364px}
.n2{background-color:#eee3da}
.n4{background-color:#ede0c8}
.n8{background-color:#f2b179}
.n16{background-color:#f59563}
.n32{background-color:#f67c5f}
.n64{background-color:#f65e3b}
.n128{background-color:#edcf72}
.n256{background-color:#edcc61}
.n512{background-color:#9c0}
.n1024{background-color:#33b5e5}
.n2048{background-color:#09c}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n2,.n4{color:#776e65}
.n1024,.n2048,.n4096,.n8192{font-size:40px}
p{
width: 480px;margin: 0 auto;
font-size: 40px; font-family: Arial;
font-weight: bold;
padding-top: 15px;
}
#gameOver{
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(55,55,55,.5);
}
#gameOver>p{
width: 300px;
height: 200px;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
margin-top:-100px;
margin-left: -150px;
text-align: center;
line-height: 1.5em;
border-radius: 10px;
border:1px solid #edcf72;
}
#gameOver .btn{
padding: 10px;
color: #FFFFFF;
background: #9f8d77;
border-radius: 6px;
text-decoration: none;
}
2048.js
var game = { data: null, RN: 4, CN: 4,//保存遊戲二維數組，總行數，總列數 score: 0,//保存得分 state: 1,//保存遊戲狀態:1表示運行，0表示結束 RUNNING: 1,//專門表示運行狀態 GAMEOVER: 0,//專門表示遊戲結束狀態 //每一個屬性和方法之間必須用逗號隔開！ //對象本身的方法要使用本身的屬性，必須this. start() {//啓動遊戲 this.state = this.RUNNING;//重置遊戲狀態爲運行中 this.score = 0;//分數清0 this.data = [];//新建空數組保存在data中 //r從0開始，到<RN結束 for (var r = 0; r < this.RN; r++) { //新建空數組保存到data中r行 this.data[r] = []; //c從0開始，到<CN結束 for (var c = 0; c < this.CN; c++) { //設置data中r行c列的值爲0 this.data[r][c] = 0; } }//（遍歷結束） this.randomNum(); this.randomNum(); this.updateView(); //事件:內容/設備狀態的改變 //事件處理函數：在事件發生時自動執行的操做 document.onkeydown = function (e) { //this->.前的document->game if (this.state == this.RUNNING) switch (e.keyCode) { case 37://左移 this.moveLeft(); break; case 38: //上移 this.moveUp(); break; case 39: //右移 this.moveRight(); break; case 40: //下移 this.moveDown(); break; } }.bind(this); }, move(callback) {//全部移動中相同的代碼 //爲data拍照，保存在before中 var before = String(this.data); callback.call(this); //爲data拍照，保存在after中 var after = String(this.data); if (before != after) {//若是發生了移動 this.randomNum();//隨機生成數 if (this.isGameOver())//若是遊戲結束 { this.state = this.GAMEOVER; }//修改遊戲狀態 this.updateView();//更新頁面 } }, moveLeft() { this.move(function () { //r從0開始，到<RN結束 for (var r = 0; r < this.RN; r++) { this.moveLeftInRow(r);//左移第r行 } }); }, isGameOver() {//判斷遊戲是否結束 //遍歷data for (var r = 0; r < this.RN; r++) { for (var c = 0; c < this.CN; c++) { //若是當前元素是0，返回false if (this.data[r][c] == 0) return false; //不然，若是c<CN-1且當前元素等於右側元素 else if (c < this.CN - 1 && (this.data[r][c] == this.data[r][c + 1])) { return false;//返回false } //不然，若是r<RN-1且當前元素等於下方元素 else if (r < this.RN - 1 && (this.data[r][c] == this.data[r + 1][c])) { return false;//返回false } } }//（遍歷結束） return true;//返回true }, moveLeftInRow(r) {//左移第r行 //c從0開始，到<CN-1結束，遍歷r行中每一個格 for (var c = 0; c < this.CN - 1; c++) { //找r行c列右側下一個不爲0的位置nextc var nextc = this.getNextInRow(r, c); //若是沒找到,就退出循環 if (nextc == -1) break; else {//不然 //若是c列的值是0 if (this.data[r][c] == 0) { //將nextc列的值賦值給c列 this.data[r][c] = this.data[r][nextc]; //將nextc列的值置爲0 this.data[r][nextc] = 0; c--;//c留在原地 } else if (this.data[r][c] == this.data[r][nextc]) { //不然 若是c列的值等於nextc列的值 //將c列的值*2 this.data[r][c] *= 2; this.score += this.data[r][c]; //將nextc列置爲0 this.data[r][nextc] = 0; } } } }, getNextInRow(r, c) {//找r行c列右側下一個不爲0的位置 //i從c+1開始，到<CN結束 for (var i = c + 1; i < this.CN; i++) { //若是i位置不是0，返回i if (this.data[r][i] != 0) return i; }//(遍歷結束) return -1; //返回-1 }, moveRight() { this.move(function () { //遍歷data中每一行 for (var r = 0; r < this.RN; r++) { this.moveRightInRow(r)//右移第r行 } }); }, moveRightInRow(r) {//右移第r行 //c從CN-1開始，到>0結束，反向遍歷r行中每一個格 for (var c = this.CN - 1; c > 0; c--) { //找r行c列左側前一個不爲0的位置prevc var prevc = this.getPrevInRow(r, c); //若是prevc爲-1,就退出循環 if (prevc == -1) { break; } else {//不然 //若是c列的值是0 if (this.data[r][c] == 0) { //將prevc列的值賦值給c列 this.data[r][c] = this.data[r][prevc]; //將prevc列的值置爲0 this.data[r][prevc] = 0; c++;//c留在原地 } else if (this.data[r][c] == this.data[r][prevc]) { //不然 若是c列的值等於prevc列的值 //將c列的值*2 this.data[r][c] *= 2; this.score += this.data[r][c]; //將prevc列置爲0 this.data[r][prevc] = 0; } } } }, getPrevInRow(r, c) {//查找r行c列左側前一個不爲0的位置 //i從c-1開始，到>=0結束，每次-1 for (var i = c - 1; i >= 0; i--) { //若是data中r行i列的值不爲0，就返回i if (this.data[r][i] != 0) return i; }//循環結束 //返回-1 return -1; }, moveUp() { this.move(function () { //遍歷data中每一列 for (var c = 0; c < this.CN; c++) { //調用moveUpInCol上移第c列 this.moveUpInCol(c); } }); }, moveUpInCol(c) { //r從0開始,到r<RN-1結束，r每次遞增1 for (var r = 0; r < this.RN - 1; r++) { //查找r行c列下方下一個不爲0的位置nextr var nextr = this.getNextInCol(r, c); //若是沒找到,就退出循環 if (nextr == -1) break; else//不然 //若是r位置c列的值爲0 if (this.data[r][c] == 0) { //將nextr位置c列的值賦值給r位置 this.data[r][c] = this.data[nextr][c]; //將nextr位置c列置爲0 this.data[nextr][c] = 0; r--;//r留在原地 } else if (this.data[r][c] == this.data[nextr][c]) {//不然，若是r位置c列的值等於nextr位置的值 //將r位置c列的值*2 this.data[r][c] *= 2; this.score += this.data[r][c]; //將nextr位置c列的值置爲0 this.data[nextr][c] = 0; } } }, getNextInCol(r, c) { //循環，到<RN結束，r每次遞增1 for (var i = r + 1; i < this.RN; i++) { //若是r位置c列不等於0, 就返回r if (this.data[i][c] != 0) return i; } //(遍歷結束) return -1;//返回-1 }, moveDown() { this.move(function () { //遍歷data中每一列 for (var c = 0; c < this.CN; c++) { //調用moveDownInCol下移第c列 this.moveDownInCol(c); } }); }, moveDownInCol(c) { //r從RN-1開始，到r>0結束，r每次遞減1 for (var r = this.RN - 1; r > 0; r--) { //查找r位置c列上方前一個不爲0的位置prevr var prevr = this.getPrevInCol(r, c); //若是沒找到,就退出循環 if (prevr == -1) break; else {//不然 //若是r位置c列的值爲0 if (this.data[r][c] == 0) { //將prevr位置c列的值賦值給r位置 this.data[r][c] = this.data[prevr][c]; //將prevr位置c列置爲0 this.data[prevr][c] = 0; r++;//r留在原地 } else if (this.data[r][c] == this.data[prevr][c]) {//不然，若是r位置c列的值等於prevr位置的值 //將r位置c列的值*2 this.data[r][c] *= 2; this.score += this.data[r][c]; //將prevr位置c列置爲0 this.data[prevr][c] = 0; } } } }, getPrevInCol(r, c) { //循環，r到>=0結束，每次遞減1 for (var i = r - 1; i >= 0; i--) { //若是r位置c列不等於0, 就返回r if (this.data[i][c] != 0) return i; }//(遍歷結束) return -1; //返回-1 }, updateView() {//將data中的數據更新到每一個div中 //遍歷二維數組 for (var r = 0; r < this.RN; r++) { for (var c = 0; c < this.CN; c++) { var n = this.data[r][c]; //找到id爲crc的div var div = document.getElementById("c" + r + c); if (n != 0) {//若是n不是0 div.innerHTML = n;//設置div的內容爲n //設置div的class爲cell n+n div.className = "cell n" + n; } else { div.innerHTML = "";//清楚div的內容 //恢復div的class爲cell div.className = "cell"; } } } //找到id爲score的span,設置其內容爲score屬性 document.getElementById("score") .innerHTML = this.score; //找到id爲gameOver的div var div = document.getElementById("gameOver"); //若是遊戲狀態爲GAMEOVER就設置div顯示 if (this.state == this.GAMEOVER) { div.style.display = "block"; //找到id爲final的span，設置其內容爲score document.getElementById("final") .innerHTML = this.score; } else {//不然就設置div隱藏 div.style.display = "none"; } }, randomNum() {//在一個隨機位置生成2或4 while (true) {//反覆： //在0～RN-1之間生成隨機數r var r = Math.floor(Math.random() * this.RN); //在0～CN-1之間生成隨機數c var c = Math.floor(Math.random() * this.CN); //若是data中r行c列的值爲0 if (this.data[r][c] == 0) { //將data中r行c列賦值爲： //隨機生成一個小數，若是<0.5,就取2，不然取4 this.data[r][c] = Math.random() < 0.5 ? 2 : 4; break; //退出循環 } } },}game.start();在功能上向左，向右，向上，向下基本一致
相關文章
- 1. HTML+CSS+JavaScript實現2048小遊戲
- 2. html+CSS+js 一個2048小遊戲
- 3. HTML + CSS + JS 寫出簡單2048遊戲
- 4. Cocos2d-JS實現的2048
- 5. html+css+js 實現簡單計算器
- 6. html+css+js實現科學計算器
- 7. html+js+css 實現滿天星
- 8. 原生js+css+html實現時序圖
- 9. 純js+html+css實現模擬時鐘
- 10. 使用html+css+js實現3D相冊
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
