本人正在學習ing，應該bug眾多還請見諒如有轉載請告知，謝謝！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2048</title> <style> *{ font-family: arial; margin ...
本人正在學習ing，應該bug眾多還請見諒
如有轉載請告知，謝謝！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048</title>
<style>
*{
font-family: arial;
margin: 0;
padding: 0;
}
.header{
width: 500px;
height: 50px;
color: #000;
margin: 0 auto;
font-size: 48px;
font-weight: bold;
margin-top: 100px;
}
.header>span{
color: #f00;
}
.cell_all{
width: 500px;
height: 500px;
margin: 0 auto;
background-color: #bbada0;
border-radius: 10px;
}
.cell{
width: 110px;
height: 110px;
border: 1px solid #000;
opacity: 0.95;
float: left;
border-radius: 9px;
margin-left: 10px;
margin-top: 12px;
font-size: 35px;
font-weight: bold;
line-height: 110px;
text-align: center;
color: #fff;
}
/*不同數字加減後的數值*/
.n2{
background-color:#eee3da;
color:#776e65;
}
.n4{
background-color:#ede0c8;
color:#776e65;
}
.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{
font-size:40px;
background-color:#33b5e5;
}
.n2048{
font-size:40px;
background-color: #09c;
}
.n4096{
background-color:#a6c;
font-size:40px;
}
.n8192{
background-color:#93c;
font-size:40px;
}
/*gameover*/
.gameover{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
display: none;
}
.gameover>p{
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #000;
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 66px;
}
.gameover_p>span{
color: #f00;
font-size: 40px;
}
.gameover_p>a{
text-decoration: none;
background-color: #9f8d77;
border-radius: 5px;
color: #fff;
padding: 8px 8px 4px;
}
</style>
</head>
<body>
<!-- header -->
<div class="header">
SCORE:<span id="score_01">0</span>
</div>
<!-- 4*4 -->
<div class="cell_all">
<!-- 第一行 -->
<div class="cell" id="c00"></div>
<div class="cell" id="c01"></div>
<div class="cell" id="c02"></div>
<div class="cell" id="c03"></div>
<!-- 第二行 -->
<div class="cell" id="c10"></div>
<div class="cell" id="c11"></div>
<div class="cell" id="c12"></div>
<div class="cell" id="c13"></div>
<!-- 第三行 -->
<div class="cell" id="c20"></div>
<div class="cell" id="c21"></div>
<div class="cell" id="c22"></div>
<div class="cell" id="c23"></div>
<!-- 第四行 -->
<div class="cell" id="c30"></div>
<div class="cell" id="c31"></div>
<div class="cell" id="c32"></div>
<div class="cell" id="c33"></div>
<!--[
[00,01,02,03],
[10,11,12,13],
[20,21,22,23],
[30,31,32,33]
]-->
</div>
<!-- gameover -->
<div class="gameover" id="gameover">
<p class="gameover_p">
GAMEOVER！<br>
SCORE:<span id="score_02">0</span><br>
<a href="javascript:game.start()">TRY AGAIN!</a>
</p>
</div>
</body>
<script>
//創建一個對象,所有的操作全部都在對象裡面完成
var game = {
data:[],//存放數據
score:0,//分數
status:1,// 定義游戲狀態：可以玩的時候為狀態為：1
gameover:0,//游戲結束的狀態定義為0
gamerunning:1,//表示的是當前游戲的狀態，時時刻刻檢測該狀態，如果這個狀態等於1，表示可以繼續，如果等於0，結束
// 游戲開始
start: function(){
game.gamerunning = game.status;
game.score = 0; //游戲開始時分數清零
game.data = [ //重新給數組進行賦值
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
]
// 生成兩個隨機數
game.randomNum();
game.randomNum();
// 生成游戲開始時的視圖
game.dataView();
},
randomNum:function(){//生成隨機數的方法
//這個方法,需要用到的時候調用,不需要用到的時候不用
//數字要隨機生成2或者4;位置也要隨機生成
for(;;){//死迴圈，直到生成完成再停止，否則一直生成
var r = Math.floor(Math.random()*4);//生成一個行
var c = Math.floor(Math.random()*4);//生成一個列
if(game.data[r][c] == 0){//只有數組這一個位置為 0 的時候才可以賦值
var num = Math.random()>0.5?2:4; //隨機生成2或者4
game.data[r][c] = num;
break;//退出死迴圈
}
}
},
dataView:function(){ //更新視圖的方法
for (var r = 0; r < 4; r++) {
for(var c = 0; c<4;c++){
// console.log(game.data[r][c]);
var div = document.getElementById("c" + r + c); //獲取到每一個對應的div
if(game.data[r][c] != 0){ //如果數組裡有數值
div.innerHTML = game.data[r][c];//給單元格進行賦值
div.className = "cell n" + game.data[r][c]; //改變樣式
}else{ //如果數組裡不含有元素
div.innerHTML = "";//數組中的元素如果為0的時候，界面中是沒有值的，把內容清空
div.className = "cell";//樣式恢復
}
}
}
document.getElementById("score_01").innerText = game.score; //找到分數的ID，更新分數
if(game.gamerunning == game.gameover){ //如果游戲處於結束的階段了，更新視圖
document.getElementById("gameover").style.display = "block";//在進行中 對某一狀態進行直接的改變 "游戲結束時，將結束時對應寫好的'框'display:顯示出來'block'"
document.getElementById("score_02").innerText = game.score;//找到結束時的分數ID，更新分數
}else{//如果游戲處於游戲狀態中
document.getElementById("gameover").style.display = "none";
}// 定義游戲的結束狀態和游戲時的狀態，根據狀態來確定何時彈出對應狀態的'display:block || none'
},
isgameover:function(){ // 判斷游戲是否結束的方法
// 那，游戲結束需要滿足哪些條件呢？
// 1.格子全部都不為0的時候 && 相鄰的位置不能有相同的
// 給函數增加一個返回值,如果false表示還可以繼續,ture表示游戲結束
for(var r = 0;r<4;r++){
for(var c = 0;c<4;c++){
if(game.data[r][c] == 0){ //如果有等於零的情況，則游戲繼續
return false;
}
if(c<3){//檢測同一行之間是否有相同
if(game.data[r][c] == game.data[r][c+1]){
return false;
}
}
if(r<3){//檢測同一列之間是否有相同
if(game.data[r][c] == game.data[r+1][c]){
return false;
}
}
}
}
return true;//如果條件全都不滿足，表示游戲結束
},
//移動的方法：
//左移
moveLeft:function(){
var before = String(game.data);//給移動之前的數組“拍個照” 因為數組之間不能直接比較(地址問題),所以這裡需要先將其轉化為字元串,然後才能用於比較
for(var r = 0;r<4;r++){
game.moveLeftinRow(r);
}
var after = String(game.data);//給移動之後的數組“拍個照”
// 比較“拍照”前的前後
if(before != after){ // 若是前後不相等
game.randomNum(); //生成一個隨機數
if(game.isgameover()){
game.gamerunning == game.gameover; //游戲狀態改變為gameover
}
game.dataView();//更新視圖
}
},
moveLeftinRow:function(r){
for(var c = 0;c<3;c++){
var nextc = game.moveLeftNextRows(r,c);//找數字,並依據不同的情況返回值
if(nextc != -1){//在位置game.data[r][i]上找到了元素
if(game.data[r][c] == 0){//如果為0,則替代
game.data[r][c] = game.data[r][nextc];
game.data[r][nextc] = 0;
c--;
}else if(game.data[r][c] == game.data[r][nextc]){
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[r][nextc] = 0;
}
}else{//如果沒找到
break;
}
}
},
moveLeftNextRows:function(r,c){//找位置的函數
for (var i = c+1;i<4;i++) {//從當前位置的下一個元素開始去找,所以是 c+1(當前位置為c，下一個為c+1)
if (game.data[r][i] != 0) {//如果不等於0，則表明位置上存在一個元素
return i;//找到了就把這個位置直接返回出來
}
}
return -1;//如果沒有找到，隨意取一個標識符返回回來:表示沒有找到
},
// 左移結束
///////////////////////////////////////////////////////////////////////////////////
// 右移開始
moveRight:function(){
var before = String(game.data);
for (var r = 0;r<4;r++) {//逐行比較
game.moveRightinRow(r);
}
var after = String(game.data);
if (before != after) {
game.randomNum();//生成一個隨機數
if(game.isgameover()){//判斷游戲是否結束
game.gamerunning = game.gameover;
}
game.dataView();//更新視圖
}
},
moveRightinRow:function(r){
for(var c = 3;c>0;c--){
var nextc = game.moveRightNextRows(r,c);//找數字,並根據找數字的情況接收返回值
if (nextc != -1) {//如果返回值不為 -1,則表示位置上找到了元素
if(game.data[r][c] == 0){
game.data[r][c] = game.data[r][nextc];
game.data[r][nextc] = 0;
c++;// 這一步,重點理解: 當位置替代發生了改變之後,下一次的比較則從下一位開始比較,需要讓它回到原點的位置重新從頭開始繼續比較
}else if (game.data[r][c] == game.data[r][nextc]) {
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[r][nextc] = 0;
}
}else{
break;
}
}
},
moveRightNextRows:function(r,c){//找位置的函數
for(var i = c-1;i>=0;i--){//因為從c開始,所以下一位是從 c-1 開始找
if (game.data[r][i] != 0) {
return i;
}
}
return -1;
},
// 右移結束
moveTop:function(){//上移的方法
var before = String(game.data);//強制轉換成字元串 移動前給數組拍一個照 //join toString()
// 移動的方法
for(var c = 0;c<4;c++){//移動每一列
game.moveTopinRow(c);
}
var after = String(game.data);//強制轉換成字元串 移動以後給數組拍一個照 ?
if(before != after){//如果兩次拍照不相等，就發生了移動
game.randomNum();//生成一個隨機數
if(game.isgameover()){//如果游戲結束
game.gamerunning = game.gameover;//改變游戲的狀態
}
game.dataView();//移動完成數據更新
}
},
moveTopinRow:function(c){//僅僅移動一行
for(var r = 0;r<4;r++){
var nextr = game.moveTopNextRows(r,c);//獲取到後面數字的位置 1 2 3 -1
if(nextr != -1){//如果後面找到元素
if(game.data[r][c] == 0){//如果為0，就替代
game.data[r][c] = game.data[nextr][c];//
game.data[nextr][c] = 0;
r--;//從原地開始，繼續往後
}else if(game.data[r][c] == game.data[nextr][c]){//如果相等
game.data[r][c] *= 2;//當前位置的值*2
game.score += game.data[r][c];//加上分數
game.data[nextr][c] = 0;//位置變為0
}
}else{//如果沒有找到元素
break;//直接退出迴圈
}
}
},
moveTopNextRows:function(r,c){
for(var i = r + 1;i < 4;i++){
//如果不為0，表示找到，就返回i，i對應的格子的幾個位置
if (game.data[i][c] != 0) {
return i;
}
}
return -1//表示的是後面都找不到元素。表示返回一個狀態，這個狀態自己定義，只要後面對應就OK
},
//////////////////////////////////////////////////////////////////////////////////////////
moveDown:function(){//下移的方法
var before = String(game.data);//強制轉換成字元串 移動前給數組拍一個照 //join toString()
// 移動的方法
for(var c = 0;c<4;c++){//移動每一列
game.moveDowninRow(c);
}
var after = String(game.data);//強制轉換成字元串 移動以後給數組拍一個照 ?
if(before != after){//如果兩次拍照不相等，就發生了移動
game.randomNum();//生成一個隨機數
if(game.isgameover()){//如果游戲結束
game.gamerunning = game.gameover;//改變游戲的狀態
}
game.dataView();//移動完成數據更新
}
},
moveDowninRow:function(c){//僅僅移動一行
for(var r = 3;r>=0;r--){
var nextr = game.moveDownNextRows(r,c);//獲取到後面數字的位置 1 2 3 -1
if(nextr != -1){//如果後面找到元素
if(game.data[r][c] == 0){//如果為0，就替代
game.data[r][c] = game.data[nextr][c];//
game.data[nextr][c] = 0;
r++;//從原地開始，繼續往後
}else if(game.data[r][c] == game.data[nextr][c]){//如果相等
game.data[r][c] *= 2;//當前位置的值*2
game.score += game.data[r][c];//加上分數
game.data[nextr][c] = 0;//位置變為0
}
}else{//如果沒有找到元素
break;//直接退出迴圈
}
}
},
moveDownNextRows:function(r,c){
for(var i = r - 1;i >= 0;i--){
//如果不為0，表示找到，就返回i，i對應的格子的幾個位置
if (game.data[i][c] != 0) {
return i;
}
}
return -1//表示的是後面都找不到元素。表示返回一個狀態，這個狀態自己定義，只要後面對應就OK
}
}
game.start();
document.onkeydown = function(e){
var e = e || event || arguments[0];
if(e.keyCode == 37){
game.moveLeft();
}else if (e.keyCode == 39) {
game.moveRight();
}else if (e.keyCode == 38) {
game.moveTop();
}else if (e.keyCode == 40) {
game.moveDown();
}
}
</script>
</html>
