JS实现别踩白块游戏的示例代码
目录
- 实现思路
- 核心代码
- HTML代码
- CSS代码
- JS代码
实现思路
1、offsetTop，与style.top
2、我们看到的是白块在向下运动，其实不是，政治运动的是装着白块的盒子，白块只是被装在了盒子里面被带着向下，而向下运动也只是改变top值。同事盒子total的高度也不是无限长的能一直向下运动，所以肯定是运动到某个地方他又回去了。
childNodes：由childNodes属性返回的数组中包含着所有类型的节点，所有的属性节点和文本节点也包含在其中。（不能乱用）
JS获取元素的left和top值：
核心代码
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">
<title>Document</title>
<link rel="stylesheet" href="3.css" rel="external nofollow" >
</head>
<body>
<h2>
<span>分数：</span>
<span id="score">0</span>
</h2>
<!-- 游戏区 -->
<div id="main">
<div id="con">
</div>
</div>
<div class="btn"><button id="start">开始游戏</button></div>
<script src="3.js"></script>
</body>
</html>
CSS代码
* {
margin: 0;
padding: 0
}
#main {
width: 408px;
height: 408px;
margin: 0 auto;
background: white;
border: 2px solid gray;
overflow: hidden;
}
#con {
width: 100%;
height: 400px;
position: relative;
border-collapse: collapse;
top: -100px;
}
/* 行 */
.row {
height: 100px;
width: 100%;
}
/* 一个块 */
.cell {
height: 100px;
width: 100px;
float: left;
border: rgb(54, 74, 129) 1px solid;
}
/* 黑块 */
.black {
background: black;
}
.btn {
width: 100%;
text-align: center;
}
button {
width: 250px;
height: 60px;
border: 1px solid grey;
margin-top: 20px;
margin-bottom: 10px;
background-color: rgb(162, 223, 146);
font-size: 30px;
}
span {
display: inline-block;
width: 100%;
cursor: pointer;
background-color: #fff;
font-size: 20px;
text-align: center;
}
JS代码
window.onload = function() {
//1、首先是点击开始游戏，里面的开始运动
///1、动态生成每一行(createrow())，里面有4个小的div。需要点击，当总的行数大于5的时候，就删除最下面的哪一行
///2、点击黑色的div，就删除所在的这一行。并且score分数加一
///3、判断点击了白色盒子的话，游戏结束
///4、当有包含黑色的行超过范围区域时，游戏也结束fail()
var score = document.querySelector('#score')
var con = document.querySelector('#con')
var start = document.querySelector('#start')
start.innerHTML = '游戏开始'
//需要给按钮加一个节流阀
var flag = 0
var timer = null //将timer变为一个全局变量
start.addEventListener('click', function() {
if (start.innerHTML == '游戏开始' && flag == 0) {
//用一个定时器，每50毫秒调用move（）
timer = setInterval(move, [60])
timer
con.addEventListener('click', function(ec) {
// console.log(ec.target);
console.log(ec.target.parentNode);
if (ec.target.className == 'cell black') {
ec.target.className = 'cell'
addscore()
ec.target.parentNode.pass = 1 //表示我这一行的黑块元素已经被点击了
} else if (ec.target.className = 'cell') {
fail()
}
})
flag = 1
}
})
var speed = 3
var scorenumber = 0
function addscore() {
scorenumber += 1
score.innerHTML = scorenumber
if (scorenumber % 10 == 0) {
speed += 2
}
}
function move() {
//什么时候开始创建行呢？就是当con的top值等于0的时候就创建一行
var top = parseInt(window.getComputedStyle(con, null)['top']);
if (speed + top > 0) {
top = 0
} else {
top = top + speed
}
con.style.top = top + 'px'
if (top == 0) {
createrow()
con.style.top = '-100px'
} else {
top = top + speed
}
//最多只让row的数量等于5
if (con.children.length >= 6) {
con.removeChild(con.lastChild)
}
over()
//什么情况下游戏结束--点击了白色方块，或者黑色方块触底
}
//动态创建行
function createrow() {
length = parseInt(con.children.length)
var row = document.createElement('div')
row.className = 'row'
var nun = Math.floor(Math.random() * 4)
for (i = 0; i < 4; i++) {
var idiv = document.createElement('div')
if (i == nun) {
idiv.className = 'cell black'
} else {
idiv.className = 'cell'
}
row.appendChild(idiv)
}
if (length == 0) {
con.appendChild(row)
} else {
con.insertBefore(row, con.firstChild)
}
}
//黑色方块触底
function over() {
var rows = document.querySelectorAll('.row')
if ((rows.length == 5) && (rows[rows.length - 1].pass != 1)) //怎么忽略掉已经黑块被点击了的行
{ //因为如果点击和黑色块，就会将这一行删除，如果没有点击操作，就说明没有删除行，那么就会多一行，因此当长度等于6的时候就说明有黑色块触底
fail()
}
}
//黑色块的点击时间，其实是委托给row上面，倒不如直接再委托到con上面，用事件对象
function fail() {
clearInterval(timer)
score.innerHTML = 0
con.innerHTML = ''
flag = 0
speed = 3
start.innerHTML = '游戏结束，得分' + scorenumber
}
}
到此这篇关于JS实现别踩白块游戏的示例代码的文章就介绍到这了,更多相关JS别踩白块内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
原生JS实现《别踩白块》游戏（兼容IE）
兼容了IE,每得20分就加速一次!!! 效果如下: 图(1) 游戏初始 图(2) 游戏开始 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .box { margin: 50px auto 0 auto; width: 400px; height:
-
Javascript别踩白块儿（钢琴块儿）小游戏实现代码
游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,这里根据方向键来踩白块 在规定时间内,每走一次分数加100 游戏内的每一排都是一个有四个元素的数组,当正确的踩到黑块前进后,前一个数组内所有的对象样式属性(backgroundColor)赋值给其后一个数组内的对应位置处的对象,便实现了前进的功能,很简单的思想 <!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8&
-
javascript实现别踩白块儿小游戏程序
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中
-
JS实现别踩白块游戏的示例代码
目录 实现思路 核心代码 HTML代码 CSS代码 JS代码 实现思路 1.offsetTop,与style.top 2.我们看到的是白块在向下运动,其实不是,政治运动的是装着白块的盒子,白块只是被装在了盒子里面被带着向下,而向下运动也只是改变top值.同事盒子total的高度也不是无限长的能一直向下运动,所以肯定是运动到某个地方他又回去了. childNodes:由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中.(不能乱用) JS获取元素的lef
-
PyQt5实现类似别踩白块游戏
本文实例为大家分享了PyQt5实现类似别踩白块游戏的具体代码,供大家参考,具体内容如下 #引入可能用到的库 from PyQt5.QtWidgets import (QWidget, QApplication,QPushButton,QMessageBox,QLabel,QDesktopWidget,QMainWindow) from PyQt5.QtCore import Qt,QRect,QSize,QPoint,QTimer from PyQt5.QtGui import QPainter
-
jquery之别踩白块游戏的简单实现
前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048.然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束.游戏实现起来不难,都是一些小知识点.当时写的时候,脑
-
基于JS编写开心消消乐游戏的示例代码
目录 展示 游戏背景 游戏规则 源码部分 对关卡的地图设置 介绍一下游戏中的一些功能 展示 游戏背景 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近,种子落地后吸收了池塘的水分,迅速成长,一夜之间变成参天大藤蔓…… 第二天早上,村民们醒来后看到巨大的藤蔓都惊呆了,聚在一起议论纷纷.有人说他似乎看到村长的房子在高耸入云的藤蔓上,房子似乎还在上升,有人号召说应该爬上去救村长,玩家需要爬到藤曼顶部救出村长 游戏规则 把三个颜色相同的小动物连成一条直线,即可消除.达到指定的目标通
-
基于JS实现的消消乐游戏的示例代码
目录 前言 游戏的准备工作 总结一下 棋盘 渲染画面 动画效果 genCollapse() genDownfall() genEmerge() 整合效果 genLoop() genSwap() 前言 一直对小游戏挺感兴趣的,也尝试着做过一些小游戏,实现游戏是一个不错的提高代码基础水平的方式,因此这次挑战了一个较为困难的小游戏:消消乐. 如果仅仅是从消除方面来制作一个静态的消消乐(只有消除和补充方块的过程,但是没有任何交互和动画)其实并不算太难,只要我们能够想通方块消除(主要是三消)的原理和方块下
-
jQuery实现的别踩白块小游戏完整示例
本文实例讲述了jQuery实现的别踩白块小游戏.分享给大家供大家参考,具体如下: 首先引入jquery.js 1.css html, body, .contain { width: 100%; height: 96%; overflow: hidden; background-color: #FFFFCC; } .text-center { text-align: center; } .score { font-size: 25px; color: #CB2D01; margin-top: 20
-
js实现踩五彩块游戏
本文实例为大家分享了js实现踩五彩块游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt
-
Matlab实现别踩白块小游戏的示例代码
目录 游戏效果 游戏说明 完整代码 pianoKeys.m(主函数) getMusic.m(用于获取音乐数据) 游戏效果 游戏说明 ‘A’,‘S’,‘D’,F’按键代表四条通路(点击S开始),按错按钮或黑块接触底限均为失败. 完整代码 分两个m文件,应放在同一文件夹 pianoKeys.m(主函数) function pianoKeys %======================%======== [v1,notes,fs]=getMusic;%读取音乐 %=================
-
js实现一款简单踩白块小游戏(曾经很火)
效果图如下所示: html <div class="bigbox"> <!-- 显示游戏的区域 --> <div class="gamequyu"> <!-- 上面显示一个游戏开始的按钮 --> <div class="start">游戏开始</div> <!-- 再显示一个游戏的主体部分 --> <div class="zhuti"&g
-
使用jquery实现别踩白块小游戏的方法实例
目录 前言 html 首页字体 中间的表格 实现每一行的黑块随机显示 按键事件 key事件 adds speedup 源码 总结 前言 掘金真的是太懂了,写游戏的活动,想不参加都难!第一个,别踩白块! 先来看效果~ 如上图所示,jkl三个键对应三列,左上是得分,得分右边是时间(没做倒计时...)敲击对应的按键来进行游戏,如果敲错了就会弹出得分与所用时间 接下来就开始肢解这个小游戏,来一步一步的分析究竟是怎么实现的,let's go~ html <body> <div class=&quo