写写简单的东西，效果如图：
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 ????????}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 ????????};完成。
jquery 简单的别踩白块小游戏
原文地址：https://www.cnblogs.com/e-cat/p/9528828.html