jquery 简单的别踩白块小游戏

Posted 2020-12-31 电子猫

写写简单的东西，效果如图：

1.html代码

1     <div class="warp">
2         <div class="title">
3             <h3>别踩白块</h3>
4             <p class="maxScore"></p>
5         </div>
6         <ul class="Garea">
7         </ul>
8     </div>

2.css代码

 1 body,
 2         ul,
 3         li,
 4         p {
 5             margin: 0;
 6             padding: 0;
 7         }
 8 
 9         li {
10             list-style: none;
11             /*border: 1px solid #000;*/
12         }
13 
14         .warp {
15             width: 960px;
16             margin: 0 auto;
17         }
18 
19         .title {
20             text-align: center;
21         }
22 
23         .Garea {
24             border: 1px solid #000;
25             width: 300px;
26             height: 550px;
27             margin: 0 auto;
28         }
29 
30         .Garea li {
31             height: 90px;
32         }
33 
34         .Garea li p {
35             float: left;
36             width: 73px;
37             height: 100%;
38             border: 1px #c9c9c9 solid;
39         }
40 
41         .black {
42             background-color: #000;
43         }

View Code

3.js代码，记得先引入jquery

 1 init(); // 初始化页面黑白块
 2 
 3         function init() {
 4             localStorage.setItem(\'score\', \'0\'); // 初始化当前得分
 5 
 6             var html = \'\'
 7             for (let i = 0; i < 6; i++) {
 8                 html += \'<li>\';
 9                 var random = Math.floor(Math.random() * 3 + 1);
10                 for (let j = 0; j < 4; j++) {
11                     var black = "";
12                     if (j == random) { black = "black" };
13                     html += \'<p class="\' + black + \'" onclick="cai(this);"></p>\';
14                 }
15                 html += \'</li>\';
16             }
17             $("ul").prepend(html)
18             if (localStorage.getItem(\'maxScore\')) {
19                 $(\'.maxScore\').html(\'历史最高分为：\' + localStorage.getItem(\'maxScore\'))
20             }
21         }
22         function cai(obj) {
23             //判断是否点击最后一行
24             if ($(obj).parent().index() != \'5\') {
25                 return false;
26             }
27 
28             //判断是否踩到白块
29             if (obj.className == "") {
30                 if (localStorage.getItem(\'score\') > localStorage.getItem(\'maxScore\') - 1) {
31                     alert("Game Over! You get the higher score is " + localStorage.getItem(\'score\'));
32                 } else {
33                     alert("Game Over! Your score is " + localStorage.getItem(\'score\'));
34                 }
35                 $(\'.maxScore\').html(\'历史最高分为：\' + localStorage.getItem(\'maxScore\'))
36                 localStorage.setItem(\'score\', \'0\')
37                 //游戏结束！
38             } else {
39                 //游戏继续
40                 $(obj).parent().remove();
41                 var p = "";
42                 var random = Math.floor(Math.random() * 4 + 1);
43                 for (var i = 4; i >= 1; i--) {
44                     var black = "";
45                     if (i == random) { black = "black" };
46                     p += \'<p class="\' + black + \'" onclick="cai(this);"></p>\';
47                 };
48 
49                 var html = \'<li>\' + p + \'</li>\'
50                 $("ul").prepend(html);
51 
52                 if (!localStorage.getItem(\'maxScore\')) {
53                     localStorage.setItem(\'maxScore\', \'0\');
54                 }
55 
56                 if (localStorage.getItem(\'score\')) {
57                     localStorage.setItem(\'score\', localStorage.getItem(\'score\') * 1 + 1)
58                     if (localStorage.getItem(\'score\') * 1 > localStorage.getItem(\'maxScore\') * 1) {
59                         localStorage.setItem(\'maxScore\', localStorage.getItem(\'score\') * 1)
60                     }
61                 }
62             }
63         };

完成。