jquery 簡單的別踩白塊小遊戲

標籤：gif   小遊戲   tle   http   引入   onclick   close   function   pre   

寫寫簡單的東西，效果

1.html代碼

1     <div class="warp">2         <div class="title">3             <h3>別踩白塊</h3>4         </div>5         <ul class="Garea">6         </ul>7     </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 Code3.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         };

完成。

 

jquery 簡單的別踩白塊小遊戲