js实现-别踩白块儿

简介

在js类的学习的时候，做的一款js小游戏。难度不高。具体实现看代码，写了注释

需求

游戏需求：游戏开始、游戏中、游戏结束

游戏开始：界面初始化、开始界面

游戏中：判断游戏状态、生成方块、分数显示与加分

游戏结束：结束界面、重新开始

实现

定义游戏容器类 Block 存放游戏内容

类属性：

container //游戏容器

timer //计时器

state //游戏状态

speed //移动速度

sum //游戏分数

top //容器顶部，控制容器

lastRowChilds //最后一行

方法：

// start()

游戏开始，创建游戏初始状态，开始监听全局

// createRow()

创建新行，先创建一行，然后将行添加到container的首子节点，随机生成黑块

// move()

container移动，通过top控制整个container，使用speed来改变top的值

// judge()

判断游戏状态，显示得分;当container到达底部时判断是否存在黑块，是则游戏结束，否则删除末尾行

// flash()

显示得分，在页面中插入分数

// clickEvent()

点击监听，监听container容器的点击，在script中调用。

// gameOver()

游戏结束，清除定时器，更改游戏状态

// again()

重新开始，重置类，同时调用start()

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/block.css"><script src="js/block.js"></script><title>Piano_Tiles_es6</title>
</head>
<body><!-- 游戏区域 --><div class="wrapper"><!-- 分数 --><p id="score">0</p><!-- 游戏区域 --><div id="main"></div><!-- 开始界面 --><div class="curtain_start" id="curtain_start"><p>别踩白块儿</p><span id="start">开始</span></div><!-- 重新开始 --><div class="curtain_end" id="curtain_end" style="display: none"><p>游戏结束!</p><h4 id="res">得分: 0</h4><span id="again">重新开始</span></div></div>
<script>const curtain_start = document.getElementById('curtain_start');const main = document.getElementById('main');const start = document.getElementById('start');const again = document.getElementById('again');var gamer = new Block(main);      //创建游戏实例gamer.clickEvent();     //点击监听start.onclick = function() {console.log('点击了开始');curtain_start.style.display = 'none';// 游戏开始gamer.start();}again.onclick = function() {console.log('点击了重玩');curtain_end.style.display = 'none';// 游戏开始gamer.again();}</script>
</body>
</html>

block.css

* {margin: 0;padding: 0;
}.wrapper {width: 400px;height: 600px;position: relative;left: 0;margin: auto;border: 2px solid #000000;
}#main {width: 400px;height: 900px;top: -150px;position: relative;
}#score {position: absolute;top: 10px;left: 15px;font-size: 23px;z-index: 1;}.curtain_start,.curtain_end {width: 400px;height: 600px;background-color: rgb(0, 0, 0, .3);position: absolute;top: 0;
}.curtain_start p,
.curtain_end p {color: #fff;line-height: 35px;font-size: 35px;position: absolute;top: 200px;left: 120px;
}.curtain_start span,
.curtain_end span {display: block;width: 100px;height: 50px;font-size: 20px;text-align: center;line-height: 50px;position: absolute;top: 300px;left: 150px;background: #6cd966;color: #fff;border-radius: 6px;cursor: pointer;
}.curtain_end h4 {color: #fff;line-height: 35px;font-size: 35px;position: absolute;top: 250px;left: 140px;
}.row {width: 400px;height: 150px;
}.block {width: 98px;height: 148px;background-color: #ffffff;border: 1px solid #000000;float: left;
}.black {width: 98px;height: 148px;border: 1px solid #000000;float: left;background-color: #000000;cursor: pointer;
}

block.js

// 游戏容器类 Block
class Block {constructor(container) {this.container = container;     //游戏容器this.timer = null;              //计时器this.state = false;             //游戏状态this.speed = 2;                 //游戏速度this.sum = 0;                   //游戏分数this.top = -150;                //容器顶部this.lastRowChilds = null;      //最后一行}//开始游戏start() {let _this = this;this.state = true;//创建行for (let i = 0; i < 4; i++) {this.createRow();console.log('创建行');}//每单位时间处理事件this.timer = setInterval(() => {_this.move();_this.judge();}, 30);}//创建新行createRow() {// const contain = this.container;//添加内容从首子节点开始添加let firstChild = this.container.firstChild;let rowDiv = document.createElement('div');rowDiv.className = 'row';// 行内方块，随机黑色let blocks = ['block', 'block', 'block', 'block'];let random = Math.floor(Math.random() * 4);blocks[random] = 'black';// 添加进入行for (let i = 0; i < 4; i++) {let block = document.createElement('div');block.className = blocks[i];rowDiv.appendChild(block);}if (firstChild == null) {//没有行，添加this.container.appendChild(rowDiv);} else {//有行，添加到一号子节点this.container.insertBefore(rowDiv, firstChild);}}//界面移动move() {this.top += this.speed;     //随速度累加this.container.style.top = this.top + 'px';}//判断游戏状态judge() {// 容器出框，创建行//获取容器所有行let rowChilds = document.getElementsByClassName('row');this.lastRowChilds = rowChilds[rowChilds.length - 1];if (this.top >= 0) {// 到达底部自动生成块this.createRow();// 容器视图回到-150pxthis.top = -150;this.container.style.top = '-150px';console.log('回到位置:', this.container.offsetTop);// 在最后一行的所有块中遍历for (let i = 0; i < this.lastRowChilds.childNodes.length; i++) {// 游戏自动进行时游戏状态if (this.lastRowChilds.childNodes[i].className == 'black') {console.log('有黑的，游戏结束');this.gameOver();} else if(rowChilds.length == 6){      //除了游戏开始，让容器适中存在五行this.container.removeChild(this.lastRowChilds);}}}this.flash();}//显示得分flash() {let score = document.getElementById('score');score.innerHTML = this.sum;let res = document.getElementById('res');res.innerHTML = `得分: ${this.sum}`;}// 点击监听clickEvent() {console.log('执行了clickEvent');let _this = this;// 为容器添加点击监听this.container.addEventListener('click', (e) => {console.log(e.target);let tag = e.target;if (tag.className == 'black') {_this.sum++;            //点击黑块得分增加_this.speed += 0.4;     //速度增加console.log('点到了黑块,速度增加为:', _this.speed);tag.className = 'block';} else {console.log('点到了白块');this.gameOver();         //游戏结束}})}// 游戏结束gameOver() {this.state = false;      //游戏状态置为falseclearInterval(this.timer);         //清空定时器const curtain_end = document.getElementById('curtain_end'); //展示页面curtain_end.style.display = 'block';}//重新开始again() {this.timer = null;              //计时器this.state = false;             //游戏状态this.speed = 2;                 //游戏速度this.sum = 0;                   //游戏分数this.top = -150;                //容器顶部this.lastRowChilds = null;      //最后一行this.container.innerHTML = '';  //将容器置空this.start();}
}

效果

开始

游戏

游戏结束：

js实现-别踩白块儿-类相关推荐

使用js实现“别踩白块儿”游戏
界面如下: 点击"开始游戏","白格"将开始向下移动,此后再每一行上开始出现一个"黑格",对应列上按下对应的键即可消除黑格,但不可跨行消除( ...
初学JS——利用JS制作的别踩白块儿（街机模式）小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是 ...
web学习(2)--别踩白块儿(js版)(web入门)
废话不多说,就是一个简单的网页版的别踩白块儿 (踩到白块会弹出窗口,手动点击确定才能继续游戏,达到耗费你的游戏时间的目的) HTML:(注意js文件的名字和所放位置,如果和我命名的不一样,注意在第六行 ...
QT 小游戏 : 别踩白块儿~
一.实现思路 QPainter 绘制游戏界面 PS:根据方块坐标链表绘制所有方块支持两种操作方式 PS:鼠标事件和键盘事件(Q,W,E,R,T) 定时器(10ms) 刷新方块坐标数据根据得 ...
Cocos别踩白块儿案列1
Cocos 版本3.10 1.游戏介绍: <别踩白块儿>是由 Umoni Studio (Umoni Entertainment Limited 的前身)"制作的一款休闲益智游 ...
团队项目代码分析（Android游戏：别踩白块儿）
代码组成部分: 关键代码主要分为三大部分,如下图所示(用思维导图的形式展示): 代码调用关系通过MainActivity调用其他类❤,具体见核心代码分析! 核心代码分析 public class P ...
JS 实现别踩白块功能
使用JS实现别踩白块功能.自己尚未完成.后序会继续完成的.该项目地址http://study.163.com/course/courseMain.htm?courseId=652005 <!DO ...
原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼案例效果原生 JavaScript 实现的别踩方块小游戏案例效果如下所示: 案例分析静态页面将这个静态页面可以划分为四个部分,如下图 ...
傅小森的游戏制作之路-别踩白块儿
项目前言别踩白块儿这- 还用开发吗? 别人已经制作了呀触屏版本多的是是挺多的但是你见过按键版本的嘛? 没见过吧这就是需要开发出来 , 进入项目需求环节项目需求别踩白块儿顾名思义:不 ...
原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...

js实现-别踩白块儿-类

js实现-别踩白块儿

目录

简介

需求

实现

代码

效果

js实现-别踩白块儿-类相关推荐

最新文章

热门文章