HTML 网页游戏 2048

新手只会一点html和css，javascript基本不会，更别提jQuery了= =

跟着慕课网的教学视频（视频地址：http://www.imooc.com/learn/76）一点点做的，由于自己没什么基础，又加上我的Dreamweaver出了点问题，我用notepad++写的，出了错查起来我都要哭了。。。

目前只看了一半，PC端网页部分。

觉得不仅学到了javascript，而且对游戏的逻辑，编程的设计方面学到了很多。

代码全部没有写注释。。大概说一下逻辑。

游戏有16个格子（div）做背景，格子上面有16个浮动的格子用来移动和显示数字，用一个数组来记录每个位置的数字，移动时上下左右分别判断，格子是真的移动走了（表示一开始吓坏了），通过移动后的坐标来确定格子的位置， board数字相加，然后刷新数字的显示。逻辑很简单，代码也很清晰。

HTML部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <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 type="text/javascript" src="support2048.js"></script>
    <script type="text/javascript" src="showanimation2048.js"></script>
    <script type="text/javascript" src="main2048.js"></script>
</head>
<body>
    <header>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton">New Game</a>
        <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 id="showGameover"></div>
    </div>
     
    <p align="center">@wenruo</p>
</body>
</html>

　　

CSS部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
header{
    display: block;
    margin: 0 auto;
    width: 500px;
    text-align: center;
}
 
header h1{
    font-family: Arial;
    font-size: 40px;
    font-weight: bold;
}
 
header #newgamebutton{
    display: block;
    margin: 20px auto;
     
    width: 100px;
    padding: 10px 10px;
    background-color: #8f7a66;
     
    font-family: Arial;
    color: white;
     
    border-radius: 10px;
     
    text-decoration: none;
}
 
header #newgamebutton:hover{
    background-color:#9f8b77;
}
 
header p{
    font-family: Arial;
    font-size: 25px;
    margin: 20px auto;
}
 
#grid-container{
    width: 460px;
    height: 460px;
    padding: 20px;
     
    margin: 50px auto;
    background-color: #bbada0;
     
    border-radius: 10px;
    position: relative;
}
 
.grid-cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background-color: #ccc0b3;
     
    position: absolute;
}
 
.number-cell{
    border-radius: 6px;
     
    font-family: Arial;
    font-weight: bold;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
     
    position: absolute; /*通过js中函数来确定位置*/
}
 
#score{
    color: orange;
}
 
#showGameover {
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 40px;
    color: black;
    z-index: 9;
    alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}

　　

JavaScript部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
//main2048.js
var board = new Array();
var score = 0;
var hasConflicted = new Array();
 
$(document).ready(function(){
    newgame();
});
 
function newgame(){
    init();
    //在随机的两个格子里生成数字
    generateOneNumber();
    generateOneNumber();
}
 
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', getPosTop(i, j));
            gridCell.css('left', getPosLeft(i, 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;
    }
    score = 0;
    updateScore(score);
     
// 自己初始化4096用来装B = =
// board[0][0] = 121;
// board[0][1] = 213;
// board[0][2] = 438;
// board[0][3] = 1024;
// board[1][0] = 8;
// board[1][1] = 8;
// board[1][2] = 16;
// board[1][3] = 16;
// board[2][0] = 32;
// board[2][1] = 64;
// board[2][2] = 512;
// board[2][3] = 8;
// board[3][0] = 2;
// board[3][1] = 512;
// board[3][2] = 2048;
// board[3][3] = 4096; 
    updateBoardView();
    var showGameover = $('#showGameover');
    showGameover.css('width', '0px');
    showGameover.css('height', '0px');
    showGameover.css('top', "250px");
    showGameover.css('left', "250px");
    showGameover.text("");
}
 
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', getPosTop(i, j) + 50);
                theNumberCell.css('left', getPosLeft(i, j) + 50);
            } else {
                theNumberCell.css('width', '100px');
                theNumberCell.css('height', '100px');
                theNumberCell.css('top', getPosTop(i, j));
                theNumberCell.css('left', getPosLeft(i, j));
                theNumberCell.css('background-color', getNumberBackgroundColor(board[i][j]));
                theNumberCell.css('color', getNumberColor(board[i][j]));
                theNumberCell.text(board[i][j]);
            }
             
            hasConflicted[i][j] = false;
             
        }
}
 
function generateOneNumber() {
    if (nospace(board))
        return false;
         
    //random position
    var randx = parseInt(Math.floor(Math.random() * 4)); // 0,1,2,3
    var randy = parseInt(Math.floor(Math.random() * 4));
    while (true) {
        if (board[randx][randy] == 0)
            break;
         
        var randx = parseInt(Math.floor(Math.random() * 4)); // 0,1,2,3
        var randy = parseInt(Math.floor(Math.random() * 4));
    }
     
    //random number
    var randNumber = Math.random() < 0.5 ? 2 : 4;
     
    board[randx][randy] = randNumber;
    showNumberWithAnimation(randx, randy, randNumber);
     
    return true;
}
 
$(document).keydown(function(event){
    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:
            break;
    }
});
 
function isgameover() {
    if (nospace(board) && !canMoveLeft(board)
        && !canMoveRight(board) && !canMoveUp(board) && !canMoveRight(board)) {
        gameover();
        return true;
    }
         
    return false;
}
 
function gameover() {
    showGameOver();
}
 
function moveLeft() {
    if(!canMoveLeft(board))
        return false;
    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)) {
                        showMoveAnimation(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                    } else if(board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board)
                                && hasConflicted[i][k] == false){
                        //add
                        showMoveAnimation(i, j, i, k);
                        board[i][k] += board[i][j];
                        board[i][j] = 0;
                        score += board[i][k];
                        updateScore(score);
                        hasConflicted[i][k] = true;
                    }
                }
            }
        }
         
    setTimeout("updateBoardView()", 200);
    return true;
}
 
function moveRight(){
    if (!canMoveRight(board))
        return false;
    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)) {
                        showMoveAnimation(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                    } else if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board)
                                && hasConflicted[i][k] == false){
                        showMoveAnimation(i, j, i, k);
                        board[i][k] += board[i][j];
                        board[i][j] = 0;
                        score += board[i][k];
                        updateScore(score);
                        hasConflicted[i][k] = true;
                    }
                }
            }
        }
    }
    setTimeout("updateBoardView()", 200);
    return true;
}
 
 
function moveUp() {
    if (!canMoveUp(board))
        return false;
    for (var i = 0; i < 4; ++i)
        for (var j = 1; j < 4; ++j)
            if (board[j][i]) {
                for (var k = 0; k < j; ++k) {
                    if (board[k][i] == 0 && noBlockVertical(i, k, j, board)) {
                        showMoveAnimation(j, i, k ,i);
                        board[k][i] = board[j][i];
                        board[j][i] = 0;
                    } else if (board[k][i] == board[j][i] && noBlockVertical(i, k, j, board)
                                && hasConflicted[k][i] == false) {
                        showMoveAnimation(j, i, k ,i);
                        board[k][i] += board[j][i];
                        board[j][i] = 0;
                        score += board[k][i];
                        updateScore(score);
                        hasConflicted[k][i] = true;
                    }
                }
            }
    setTimeout("updateBoardView()", 200);
    return true;
}
 
function moveDown() {
    if (!canMoveDown(board))
        return false;
    for (var i = 0; i < 4; ++i) {
        for (var j = 2; j >= 0; --j) {
            if (board[j][i]) {
                for (var k = 3; k > j; --k) {
                    if (board[k][i] == 0 && noBlockVertical(i, j, k, board)) {
                        showMoveAnimation(j, i, k ,i);
                        board[k][i] = board[j][i];
                        board[j][i] = 0;
                    } else if (board[k][i] == board[j][i] && noBlockVertical(i, j, k, board)
                                && hasConflicted[k][i] == false) {
                        showMoveAnimation(j, i, k ,i);
                        board[k][i] += board[j][i];
                        board[j][i] = 0;
                        score += board[k][i];
                        updateScore(score);
                        hasConflicted[k][i] = true;
                    }
                }
            }
        }
    }
    setTimeout("updateBoardView()", 200);
    return true;
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
//support2048.js
function getPosTop(i, j){
    return 20 + i * 120;
}
 
function getPosLeft(i ,j){
    return 20 + j * 120;
}
 
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 "#09c";break;
        case 1024: return "#33b5e5";break;
        case 2048: return "#09c";break;
        case 4096: return "#a6c";break;
        case 8192: return "#93c";break;
    }
 
    return "black";
}
 
function getNumberColor(number) {
    if (number <= 4)
        return "#776e65";
    return "white";
}
 
function nospace(board){
    for (var i = 0; i < 4; ++i)
        for (var j = 0; j < 4; ++j)
            if (board[i][j] == 0)
            return false;
    return true;
}
 
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 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] == board[i][j + 1])
                    return true;
            }
    return false;
}
 
function canMoveUp(board) {
    for (var i = 0; i < 4; ++i) {
        for (var j = 1; j < 4; ++j) {
            if (board[j][i])
                if (board[j - 1][i] == 0 || board[j - 1][i] == board[j][i])
                    return true;
        }
    }
    return false;
}
 
function canMoveDown(board) {
    for (var i = 0; i < 4; ++i) {
        for (var j = 0; j < 3; ++j) {
            if (board[j][i])
                if (board[j + 1][i] == 0 || board[j + 1][i] == board[j][i])
                    return true;
        }
    }
    return false;
}
 
function noBlockVertical(col, row1, row2, board) {
    for (var i = row1 + 1; i < row2; ++i)
        if (board[i][col] != 0)
            return false;
    return true;
}
 
function noBlockHorizontal(row, col1, col2, board) {
    for (var i = col1 + 1; i < col2; ++i)
        if (board[row][i] != 0)
            return false;
    return true;
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//showanimation2048.js
function showNumberWithAnimation(i, j, randNumber) { //coord
    var numberCell = $('#number-cell-' + i + "-" + j);
     
    numberCell.css('background-color', getNumberBackgroundColor(randNumber));
    numberCell.css('color', getNumberColor(randNumber));
    numberCell.text(randNumber);
     
    numberCell.animate({
        width:"100px",
        height:"100px",
        top: getPosTop(i, j),
        left: getPosLeft(i, j)
    }, 50); //动画在50毫秒以内完成
}
 
function showMoveAnimation(fromx, fromy, tox, toy) {
    var numberCell = $("#number-cell-" + fromx + "-" + fromy);
    numberCell.animate({
        top: getPosTop(tox, toy),
        left: getPosLeft(tox, toy)
    }, 200);
}
 
function updateScore(score) {
    $("#score").text(score);
}
 
function showGameOver() {
    var showGameover = $("#showGameover");
 
    showGameover.css('background-color','yellow');
    showGameover.text('Game Over!');
    showGameover.animate({
        width:"250px",
        height:"150px",
        top: "175px",
        left: "125px"
    }, 200);
     
}

　　

游戏效果图：

posted @   我不吃饼干呀  阅读(1308)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae