js+jq面向对象编程-别踩白块儿。

一个非常简单的小游戏。点击黑色会变成白色，,点击白色或者碰到大盒子下边框游戏结束。
排版比较简单，js代码也非常好理解,而且不到100行，使用的方法也非常简单。

首先是css部分

  <style>* {margin: 0;padding: 0;}#app {width: 408px;height: 608px;border: 1px solid #ccc;margin: auto;overflow: hidden;position: relative;}.row {position: absolute;top: -150px;left: 0;}.row div {float: left;width: 100px;height: 150px;border: 1px solid #ccc;}.row .black {background: black;background-size: 100% 100%;}.white {background: #fff;background-size: 100% 100%;}.tits {text-align: center;position: fixed;top: 680px;left: 50%;transform: translate(-50%, -50%);}.tits p {height: 50px;line-height: 50px;font-size: 33px;color: red}#gameOver {width: 408px;height: 608px;background: #fff;position: fixed;top: 305px;left: 50%;text-align: center;transform: translate(-50%, -50%);color: red;display: none;border: 1px solid #ccc}#gameOver h1 {margin-top: 200px;}</style>

然后是html部分

<body><div id="app"><!-- 游戏区域 --></div><div id="gameOver"><h1>游戏结束</h1><br><p>下次继续努力吧</p></div><div class="tits"><p>别踩白块儿</p>当前分数为<span id='score'>0</span>分</div>
</body>

最后是js部分

js部分需要引入jq框架

    <script src="./jquery-1.12.4.min.js"></script>

添加方块

首先往对象中添加方块。
定义一个数组，用来存放class名，并且默认全部显示为白色，写一个随机数，随机其中一个为黑色。
并且把他们遍历放进class为row的div里面，最后显示在页面中。
设置计时器，算出每次添加的时间。每次添加的时间 = 每次移动的时间 ✖ 盒子的高度 ➗ 定义好的速度

var game = {speed: 5, //定义速度
}// 连续添加addRows() {time = (20 * 150) / game.speedaddRows = setInterval(() => {// 加载4个白色，随机一个为黑色load = ['white', 'white', 'white', 'white']BlackPosition = Math.floor(Math.random() * 4)load[BlackPosition] = 'black'var str = ''for (var i = 0; i < load.length; i++) {str += ` <div class='${load[i]}' ></div>`}app.innerHTML += `<div class='row' name='${game.list}'>${str}</div>`game.list++}, time)},

方块移动

遍历所有的行（.row），通过改变它的top值，来实现移动。
当超出大盒子，就清除了这一行。
遍历所有的黑色方块，放黑色方块碰到盒子底部，游戏结束，并且清除所有的计数器。

    // 移动rowMove() {rowMoves = setInterval(function () {// 遍历所有行 并且移动$.each($('.row'), (v, i) => {$(i).css('top', i.offsetTop + game.speed)// 当超出距离就删除这一行if ($(i).offset().top > $('#app').height()) {$(i).remove()}})// 遍历黑色块 当超出距离就清除计时器$.each($('.black'), (v, i) => {if ($(i).offset().top >= 458) {clearInterval(rowMoves)clearInterval(addRows)$('#app').hide()$('#gameOver').show()}})}, 20)},

点击消除黑色块

给一个鼠标抬起事件,并且加上事件代理t = e.target || window.event 兼容ie。
当点击的class名字为white 游戏结束，清除所有的计时器。
当点击的为黑色块时，并且是当前行,就让这个色块变为白色。定义的nowLstClick++ 。
nowLstClick判断是不是当前行，如果是就可以点击，否则不允许点击。
判断原理就是给每行都设置一个name属性，当前可点击的列的值等于name属性，就是当前行，可以消除黑色块，否则不允许。

   // 点击消除黑块removeBlack() {$(window).mouseup(function (e) {e = e || e.srcElementt = e.target || window.event //事件代理// 当点击为白色游戏结束if (t.className == 'white') {clearInterval(rowMoves)clearInterval(addRows)$('#app').hide()$('#gameOver').show()}if (//判断当点击的为黑块，并且当前为可点击状态 消除黑块t.className == 'black' &&$(t).parent().attr('name') == game.nowLstClick) {$(t).attr('class', 'white')game.nowLstClick++// 显示分数$('#score').html(game.nowLstClick)}})},

完整js代码

$(function () {game.init('app')
})
var game = {speed: 5, //定义速度list: 0, //一共多少列nowLstClick: 0,init() {this.addRows()this.rowMove()this.removeBlack()},// 连续添加addRows() {time = (20 * 150) / game.speedaddRows = setInterval(() => {// 加载4个白色，随机一个为黑色load = ['white', 'white', 'white', 'white']BlackPosition = Math.floor(Math.random() * 4)load[BlackPosition] = 'black'var str = ''for (var i = 0; i < load.length; i++) {str += ` <div class='${load[i]}' ></div>`}app.innerHTML += `<div class='row' name='${game.list}'>${str}</div>`game.list++}, time)},// 移动rowMove() {rowMoves = setInterval(function () {// 遍历所有行 并且移动$.each($('.row'), (v, i) => {$(i).css('top', i.offsetTop + game.speed)// 当超出距离就删除这一行if ($(i).offset().top > $('#app').height()) {$(i).remove()}})// 遍历黑色块 当超出距离就清除计时器$.each($('.black'), (v, i) => {if ($(i).offset().top >= 458) {clearInterval(rowMoves)clearInterval(addRows)$('#app').hide()$('#gameOver').show()}})}, 20)},// 点击消除黑块removeBlack() {$(window).mouseup(function (e) {t = e.target || window.event //事件代理// 当点击为白色游戏结束if (t.className == 'white') {clearInterval(rowMoves)clearInterval(addRows)$('#app').hide()$('#gameOver').show()}if (//判断当点击的为黑块，并且当前为可点击状态 消除黑块t.className == 'black' &&$(t).parent().attr('name') == game.nowLstClick) {$(t).attr('class', 'white')game.nowLstClick++// 显示分数$('#score').html(game.nowLstClick)}})},
}

总体实现非常简单，只封装了3个方法，如果对您有帮助，就请伸出您的贵手点个赞吧！！！祝您2021好运连连，桃花泛滥，天天无bug！

js小游戏-别踩白块儿相关推荐

QT 小游戏 : 别踩白块儿~
一.实现思路 QPainter 绘制游戏界面 PS:根据方块坐标链表绘制所有方块支持两种操作方式 PS:鼠标事件和键盘事件(Q,W,E,R,T) 定时器(10ms) 刷新方块坐标数据根据得 ...
初学JS——利用JS制作的别踩白块儿（街机模式）小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是 ...
python+opencv别踩白块儿游戏辅助，一天一个opencv小项目（已开源）
python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源) 见链接
基于Linux、QT、C++的“别踩白块儿”小游戏
基于Linux.QT.C++的"别踩白块儿"小游戏源码链接一.功能实现完善的游戏界面.游戏倒计时.得分记录.历史最高分显示二.功能描述 1.界面为4*4,一行中只有一个黑块 ...
傅小森的游戏制作之路-别踩白块儿
项目前言别踩白块儿这- 还用开发吗? 别人已经制作了呀触屏版本多的是是挺多的但是你见过按键版本的嘛? 没见过吧这就是需要开发出来 , 进入项目需求环节项目需求别踩白块儿顾名思义:不 ...
团队项目代码分析（Android游戏：别踩白块儿）
代码组成部分: 关键代码主要分为三大部分,如下图所示(用思维导图的形式展示): 代码调用关系通过MainActivity调用其他类❤,具体见核心代码分析! 核心代码分析 public class P ...
web学习(2)--别踩白块儿(js版)(web入门)
废话不多说,就是一个简单的网页版的别踩白块儿 (踩到白块会弹出窗口,手动点击确定才能继续游戏,达到耗费你的游戏时间的目的) HTML:(注意js文件的名字和所放位置,如果和我命名的不一样,注意在第六行 ...
c++游戏别踩白块课程设计
摘要: 别踩白块儿游戏是一款非常好玩的游戏.游戏课程设计提供了游戏的说明,设计者的简介,游戏功能的实现.游戏中实现音效,动画. 关键词:音乐,动画,功能一.概述 <别踩白块儿 Don't T ...
python 4399别踩白块儿脚本
持续无聊中,看到别踩白块儿觉得这个脚本貌似比较好写. 需要用到的python 库如下 import pyautogui from PIL import ImageGrab, Image import ...
Cocos别踩白块儿案列1
Cocos 版本3.10 1.游戏介绍: <别踩白块儿>是由 Umoni Studio (Umoni Entertainment Limited 的前身)"制作的一款休闲益智游 ...

js小游戏-别踩白块儿