使用jquery实现别踩白块小游戏的方法实例
目录
- 前言
- html
- 首页字体
- 中间的表格
- 实现每一行的黑块随机显示
- 按键事件
- key事件
- adds
- speedup
- 源码
- 总结
前言
掘金真的是太懂了，写游戏的活动，想不参加都难！第一个，别踩白块！
先来看效果~
如上图所示，jkl三个键对应三列，左上是得分，得分右边是时间（没做倒计时。。。）敲击对应的按键来进行游戏，如果敲错了就会弹出得分与所用时间
接下来就开始肢解这个小游戏，来一步一步的分析究竟是怎么实现的，let's go~
html
<body>
<div class="main">
<div id="score">0</div>
<div id="time">00:00:00</div>
</div>
<div class="caption">别踩白块!</div>
<div class="container">
<table id="tab">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<span class="font one">J</span>
<span class="font two">K</span>
<span class="font three">L</span>
</div>
</body>
其他地方就是普通的div，中间的主体部分是用表格实现的，jkl置于表格的上方显示
首页字体
width: 300px; font-size: 60px; font-weight: bold; text-align: center; position: relative; margin: 0 auto; -webkit-text-fill-color: transparent; /*文字的填充色*/ -webkit-text-stroke: 1.2px white;
重点的两个属性：最后两个属性-webkit-text-fill-color和-webkit-text-stroke，第一个是文字的填充颜色，第二个是文字的边框颜色，最终形成这种效果
中间的表格
主体用的是table做的，四行三列，每一行都有一个黑块在随机的一列生成
Math.ceil(Math.random() * 3) - 1
Math.random()会取0-1的随机小数，乘3是为了获取1-3内的随机小数，Math.ceil()向上取整，在减1，最后可以拿到三个可能的结果：0 1 2
实现每一行的黑块随机显示
新建dom元素hang
var Game={
...
hang: document.getElementsByTagName('tr');
...
}
为每一行的随机列添加黑块
//获取列--------------------------------------------- Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black'; Game.hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black'; Game.hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black'; Game.hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
按键事件
键盘按下事件调用了两个方法，一个是主方法key事件，另外一个是负责显示jkl的color事件
key事件
key: function () {
onkeydown = function (event) {
if (Game.bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
Game.int = setInterval(Game.times, 10);
Game.bool = false;
}
switch (event.key) {
case 'j':
if (Game.hang[3].children[0].style.background == 'black') {
Game.speed();
Game.scores();
} else {
Game.over();
Game.begin()
}
break;
case 'k':
if (Game.hang[3].children[1].style.background == 'black') {
Game.speed();
Game.scores();
} else {
Game.over();
Game.begin()
}
break;
case 'l':
if (Game.hang[3].children[2].style.background == 'black') {
Game.speed();
Game.scores();
} else {
Game.over();
begin()
}
break;
}
Game.color();
}
}
第一块if语句负责控制游戏的开始和结束，当按下的按键是jkl的时候游戏开始，Game.times是一个计时器的方法，每一秒去执行一下
times
times: function () {
Game.mis += 1;
if (Game.mis > 99) {
Game.mis = 0;
Game.sec += 1;
}
if (Game.sec > 59) {
Game.sec = 0;
Game.min += 1;
}
if (Game.min > 23) {
Game.min = 0;
}
Game.begin();
},
switch语句里为主要逻辑，每个按键分为成功和失败，如果当前按下的按键为黑色的话，执行speed方法和score方法
speed方法
speed: function () {
Game.adds();
Game.speedup();
// 下面有介绍
},
score方法
scores: function () {
Game.score += 1;
Game.sco.innerHTML = Game.score;
},
将已经定好的score +1，返回给页面
如果判断按下的按钮不是黑块的话，执行结束的操作，即调用over()和begin()
over方法
over: function () {
alert('游戏结束,得分：' + Game.score + ';用时' + Game.time.innerHTML);
clearInterval(Game.int);
Game.mis = 0;
Game.sec = 0;
Game.min = 0;
Game.score = 0;
Game.sco.innerHTML = Game.score;
Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min : Game.min) + ":" + (Game.sec < 10 ? "0" + Game.sec : Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis : Game.mis);
Game.bool = true;
},
显示游戏结束的提示，将计时器，分数，游戏状态置为初始化，以便下次的重新开始
adds
adds: function () {
Game.tab.insertRow(0);
for (var i = 0; i < 3; i++) {
Game.hang[0].insertCell();
}
Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
},
此方法与下面的方法就是表格往下移动的主要函数
- 在最上面新增一行tr
- 给tr循环插入三个td
- 给三个td的随机一个设置为黑色
speedup
speedup: function () {
if (Game.btn == 0 || Game.btn % 150 != 0) {
Game.tab.style.bottom = -Game.btn - 5 + 'px';
Game.btn += 5;
setTimeout(Game.speedup, 1);
} else {
clearTimeout(Game.speedup);
Game.btn += 5;
}
},
speedup方法给予了向下移动时的动画效果
源码
直接扔进一个html里就能玩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
background: linear-gradient(-45deg, purple, blue);
}
.container {
margin: 0 auto;
width: 470px;
height: 630px;
overflow: hidden;
position: relative;
}
table {
width: 464px;
height: 612px;
position: absolute;
right: 0;
bottom: 0;
border-collapse: collapse;
}
td {
width: 150px;
height: 150px;
border: 6px solid pink;
}
.main {
color: white;
text-align: center;
/* vertical-align: middle; */
font-size: 50px;
position: absolute;
top: 0;
left: 0;
}
#score {
display: inline-block;
padding-right: 200px;
}
#time {
display: inline-block;
}
.caption {
width: 300px;
font-size: 60px;
font-weight: bold;
text-align: center;
position: relative;
margin: 0 auto;
-webkit-text-fill-color: transparent;
/*文字的填充色*/
-webkit-text-stroke: 1.2px white;
}
.font {
color: transparent;
display: inline-block;
font-size: 60px;
font-weight: bold;
position: absolute;
}
.one {
left: 14.5%;
top: 81%;
}
.two {
left: 45%;
top: 81%;
}
.three {
left: 79%;
top: 81%;
}
</style>
</head>
<body>
<div class="main">
<div id="score">0</div>
<div id="time">00:00:00</div>
</div>
<div class="caption">别踩白块!</div>
<div class="container">
<table id="tab">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<span class="font one">J</span>
<span class="font two">K</span>
<span class="font three">L</span>
</div>
</body>
<script>
var Game = {
// 属性
int: null,
mis: 0,
sec: 0,
min: 0,
score: 0,
bool: true,
btn: 0,
tab: document.getElementsByTagName('table')[0],
font: document.getElementsByTagName('span'),
sco: document.getElementById('score'),
time: document.getElementById('time'),
hang: document.getElementsByTagName('tr'),
// 方法
times: function () {
Game.mis += 1;
if (Game.mis > 99) {
Game.mis = 0;
Game.sec += 1;
}
if (Game.sec > 59) {
Game.sec = 0;
Game.min += 1;
}
if (Game.min > 23) {
Game.min = 0;
}
Game.begin();
},
color: function () {
if (Game.hang[3].children[0].style.background == 'black') {
Game.font[0].style.color = 'white';
} else {
Game.font[0].style.color = 'transparent';
}
if (Game.hang[3].children[1].style.background == 'black') {
Game.font[1].style.color = 'white';
} else {
Game.font[1].style.color = 'transparent';
}
if (Game.hang[3].children[2].style.background == 'black') {
Game.font[2].style.color = 'white';
} else {
Game.font[2].style.color = 'transparent';
}
},
adds: function () {
Game.tab.insertRow(0);
for (var i = 0; i < 3; i++) {
Game.hang[0].insertCell();
}
Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
},
speedup: function () {
if (Game.btn == 0 || Game.btn % 150 != 0) {
Game.tab.style.bottom = -Game.btn - 5 + 'px';
Game.btn += 5;
setTimeout(Game.speedup, 1);
} else {
clearTimeout(Game.speedup);
Game.btn += 5;
}
},
speed: function () {
Game.adds();
Game.speedup();
},
scores: function () {
Game.score += 1;
Game.sco.innerHTML = Game.score;
},
over: function () {
alert('游戏结束,得分：' + Game.score + ';用时' + Game.time.innerHTML);
clearInterval(Game.int);
Game.mis = 0;
Game.sec = 0;
Game.min = 0;
Game.score = 0;
Game.sco.innerHTML = Game.score;
Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min : Game.min) + ":" + (Game.sec < 10 ? "0" + Game.sec : Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis : Game.mis);
Game.bool = true;
},
key: function () {
onkeydown = function (event) {
if (Game.bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
Game.int = setInterval(Game.times, 10);
Game.bool = false;
}
switch (event.key) {
case 'j':
if (Game.hang[3].children[0].style.background == 'black') {
Game.speed();
Game.scores();
} else {
Game.over();
}
break;
case 'k':
if (Game.hang[3].children[1].style.background == 'black') {
Game.speed();
Game.scores();
} else {
Game.over();
}
break;
case 'l':
if (Game.hang[3].children[2].style.background == 'black') {
Game.speed();
Game.scores();
} else {
Game.over();
}
break;
}
Game.color();
}
}
}
//获取列---------------------------------------------
Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
//--------------------------------------------------
//键盘按下事件----------------------------------------
Game.color();
Game.key();
//---------------------------------------------------
</script>
</html>
至此这个小游戏也就完成了啦，希望对你有所帮助，再见~
总结
到此这篇关于使用jquery实现别踩白块小游戏的文章就介绍到这了,更多相关jquery别踩白块小游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
jQuery实现别踩白块儿网页版小游戏
大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点,基本的思路都差不多. 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路 这个小游戏可以抽象化分为3层 ◆最底下的一层是基本的样式(可见的) ◆中间的层是最主要的,是一个4x3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的) ◆最上面
-
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
-
jquery之别踩白块游戏的简单实现
前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048.然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束.游戏实现起来不难,都是一些小知识点.当时写的时候,脑
-
使用jquery实现别踩白块小游戏的方法实例
目录 前言 html 首页字体 中间的表格 实现每一行的黑块随机显示 按键事件 key事件 adds speedup 源码 总结 前言 掘金真的是太懂了,写游戏的活动,想不参加都难!第一个,别踩白块! 先来看效果~ 如上图所示,jkl三个键对应三列,左上是得分,得分右边是时间(没做倒计时...)敲击对应的按键来进行游戏,如果敲错了就会弹出得分与所用时间 接下来就开始肢解这个小游戏,来一步一步的分析究竟是怎么实现的,let's go~ html <body> <div class=&quo
-
js实现一款简单踩白块小游戏(曾经很火)
效果图如下所示: html <div class="bigbox"> <!-- 显示游戏的区域 --> <div class="gamequyu"> <!-- 上面显示一个游戏开始的按钮 --> <div class="start">游戏开始</div> <!-- 再显示一个游戏的主体部分 --> <div class="zhuti"&g
-
Matlab实现别踩白块小游戏的示例代码
目录 游戏效果 游戏说明 完整代码 pianoKeys.m(主函数) getMusic.m(用于获取音乐数据) 游戏效果 游戏说明 ‘A’,‘S’,‘D’,F’按键代表四条通路(点击S开始),按错按钮或黑块接触底限均为失败. 完整代码 分两个m文件,应放在同一文件夹 pianoKeys.m(主函数) function pianoKeys %======================%======== [v1,notes,fs]=getMusic;%读取音乐 %=================
-
javascript实现别踩白块儿小游戏程序
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中
-
原生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:
-
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
-
go语言实现猜数字小游戏的方法
本文实例讲述了go语言实现猜数字小游戏的方法.分享给大家供大家参考.具体分析如下: 随机生成一个数字,输入一个数字看是否匹对,匹配则结速,反之提示是大了还是小了 复制代码 代码如下: package main import ( "bufio" "fmt" "math/rand" "os" "strconv" "time" ) var (