Javascript别踩白块儿（钢琴块儿）小游戏实现代码
发布时间 - 2026-01-11 02:26:11 点击率：次游戏唯一的一个规则，我们只需要不断踩着黑色方块前进即可，这里根据方向键来踩白块
在规定时间内，每走一次分数加100
游戏内的每一排都是一个有四个元素的数组，当正确的踩到黑块前进后，前一个数组内所有的对象样式属性（backgroundColor）赋值给其后一个数组内的对应位置处的对象，便实现了前进的功能，很简单的思想
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;
margin: 0;
}
.div_bg {
width: 410px;
height: 512px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 0px 0px 20px #102327;
}
#score{
margin-top: 10px;
color: #365669;
margin:0 auto;
width: 350px;
height: 80px;
}
.span_1 {
font-size: 3em;
}
.box_list {
border-radius: 100%;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.box_list_1 {
border-radius: 100%;
box-shadow: 0px 0px 20px #ff5026;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.img{
margin: 0 auto;
margin-top: 15px;
}
.over{
border: 2px solid #23f00f;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px white;
top: 200px;
left: 50%;
margin-left: -150px;
color: black;
line-height: 50px;
text-align: center;
font-size: 20px;
}
.newGame{
border: 2px solid #23fdff;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px green;
top: 350px;
left:50%;
margin-left: -50px;
color: white;
font-size: 16px;
z-index: 9999;
}
.newGame:hover{
border: 2px solid #c05e8c;
color: #A1FEDC;
}
#clock{
font-size: 4em;
color: red;
margin:0 auto;
width: 350px;
height: 80px;
}
</style>
</head>
<body>
<div style="width: 410px;margin: 0 auto;">
<div class="div_bg">
</div>
<div id="clock">00:00:20:00</div>
<div id="score">
<p class="span_1"></p>
</div>
</div>
<script>
var box;
var sum = 0;//全局变量 分数
var oclock=document.getElementById("clock");
var start1 = oclock.innerHTML;
var finish = "00:00:00:00";
var timer = null;//
var Over=new over();//实例化对象结束游戏框
var NewGame=new newGame();//实例化重新开始游戏按钮
var index=false;//标志位哦（用于控制结束游戏框重复出现）
var again=true;//标志位（用于结束游戏后控制无法再踩白块）
box = new showbox();//实例化对象
box.show();//构造游戏白块
window.onkeydown = function (e) {
box.clickinfo(e.keyCode);//获取方向键keyCode值并传参调用函数
}
function onTime()//定义倒计时秒表函数
{
if (start1 == finish)//到达时间执行
{ index=true;
clearInterval(timer);
if(index==true){
//由于后续定时器一直执行，当点击重新开始游戏后会重复出现结束框，所以设置标志位控制只出现一次
Over.createOver();
index=false;
}
return;
}
var hms = new String(start1).split(":");//以:作为分隔符号取字符串内的数据
var ms = new Number(hms[3]);//给每个数据定义对象
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;//每次执行ms减10
if (ms < 0)//判断时间并进行变化
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;//如果出现个位数给个位数前面添加0
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start1 = sh + ":" + sm + ":" + ss + ":" + ms;
oclock.innerHTML = start1;//重新给oclock赋值
clearInterval(timer);
timer =setInterval("onTime()", 100);
}
function run() {//开始倒计时函数
timer =setInterval("onTime()", 100);
}
function showbox() {//定义构造函数创建白块
this.width = 100;
this.height = 100;
this.border = "1px solid black";
this.float = "left";
this.color = "black";
this.body = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]];
/*定义一个二维数组，每一个数组中存放的元素代表每一个白块对象一排四个一共五排*/
this.show = function () {
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;//初始化分数
for (var i = 0; i < this.body.length; i++) {//两重循环动态创建白块和黑块
var ran_num = Math.floor(Math.random() * 4);//去一个（0~3）的随机数，使每一行随机位置出现一个黑块
for (var k = 0; k < this.body[i].length; k++) {
if (this.body[i][k] == null) {//事先判断一下是否已近存在该对象，防止产生多余对象（后续会多次调用该方法）
this.body[i][k] = document.createElement("div");
this.body[i][k].style.width = this.width + "px";//给对象添加属性
this.body[i][k].style.height = this.height + "px";
this.body[i][k].style.border = this.border;
this.body[i][k].style.float = this.float;//让每一个白块浮动
if (k == ran_num) {//随机黑块位置
this.body[i][k].className = "box_list";
this.body[i][k].style.backgroundColor = this.color;
} else {
this.body[i][k].className = "box_list_1";
this.body[i][k].style.backgroundColor = "white";
}
}
document.getElementsByClassName("div_bg")[0].appendChild(this.body[i][k]);
}
}
for(var i=0;i<this.body.length;i++){//两重循环给黑块添加方向键图片（这里是页面加载后执行）
for(var j=0;j<this.body[i].length;j++){
if(this.body[i][j].style.backgroundColor=="black"){
this.body[i][j].innerHTML="<img class=img src='image/direct"+j+".png'/>";
//这里我给图片direct0（方向左）direct1（方向上）direct2（方向下）direct3（方向右）命名
}
}
}
}
this.clickinfo = function (code) {//code：传的方向键keyCode值
for (var i = 0; i < 4; i++) {//给最下面一行索引赋值
this.body[4][i].index = i;
}
if (code == 37) {
if (this.body[4][0].style.backgroundColor == "black") {//判断若是方向左键且当前是黑块
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;//变动分数
clearInterval(timer);
Over.createOver();//现实游戏结束框
again=false;
}
}
if (code == 38) {
if (this.body[4][1].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
if (code == 40) {
if (this.body[4][2].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
if (code == 39) {
if (this.body[4][3].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
for(var i=0;i<this.body.length;i++){//再一次两重循环给黑块添加方向键图片（这里是在游戏过程中）
for(var j=0;j<this.body[i].length;j++){
this.body[i][j].innerHTML="";
if(this.body[i][j].style.backgroundColor=="black"){
this.body[i][j].innerHTML="<img class=img src='image/direct"+j+".png'/>";
}
}
}
}
this.moveinfo = function () {//踩白块前进功能函数
if (again == true) {
clearInterval(timer);//先清除一次定时器因为后面会再次调用，多余的定时器会让时间加速倒计时
sum += 100;//每走一次加100分
run();//开启倒计时（当第一次走的时候 开始倒计时，标志着游戏开始了）
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;//每走一次都要动态改变一下当前分数
for (var k = 4; k > 0; k--) {
//把后一排所有块的样式属性变为其前一排块和其相对应位置块的样式属性
// 这里注意：要从最后一排开始赋值，并且第一排的块不算进去
for (var i = 0; i < 4; i++) {
this.body[k][i].style.backgroundColor = this.body[k - 1][i].style.backgroundColor;
}
}
var ran_num = Math.floor(Math.random() * 4);
//取随机数创建第一排黑白块
for (var i = 0; i < 4; i++) {
if (i == ran_num) {
this.body[0][i].style.backgroundColor = "black";
}
else {
this.body[0][i].style.backgroundColor = "white";
}
}
this.show();//每一次踩白块都要调用一下show让全局改变一下
}
}
}
function over(){//定义结束游戏框构造函数
this.width="300px";
this.height="100px";
this.bgColor="#ccc";
this.position="absolute";
this._over=null;
this.className="over";
this.createOver=function(){
if(this._over==null){
this._over=document.createElement("div");
this._over.style.width=this.width;
this._over.style.height=this.height;
this._over.style.backgroundColor=this.bgColor;
this._over.style.position=this.position;
this._over.className=this.className;
this._over.innerHTML="<span>游戏结束</br>得分："+sum+"</span>";
document.body.appendChild(this._over);
NewGame.createNewGame();
}
}
}
function newGame(){//定义重新开始按钮构造函数
this.width="100px";
this.height="40px";
this.bgColor="#4D5260";
this.position="absolute";
this._newGame=null;
this.className="newGame";
this.createNewGame=function(){
if(this._newGame==null){
this._newGame=document.createElement("button");
this._newGame.style.width=this.width;
this._newGame.style.height=this.height;
this._newGame.style.backgroundColor=this.bgColor;
this._newGame.style.position=this.position;
this._newGame.className=this.className;
this._newGame.innerHTML="<span>重新开始</span>";
document.body.appendChild(this._newGame);
}
var oNewGame=document.getElementsByClassName("newGame")[0];//获取创建后的重新开始按钮
oNewGame.onclick=function(){//添加点击事件 初始各种对象
sum=0;
again=true;
document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
document.getElementById("clock").innerHTML="00:00:20:00";
start1="00:00:20:00";
document.getElementsByClassName("newGame")[0].remove();//移除重新开始按钮
document.getElementsByClassName("over")[0].remove();//移除结束游戏框
NewGame._newGame=null;
Over._over=null;
}
}
}
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的Javascript别踩白块儿（钢琴块儿）小游戏实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
# js
# 实现别踩白块儿游戏
# 钢琴游戏
# JS实现音乐钢琴特效
# js钢琴按钮波浪式图片排列效果代码分享
# javascript实现简单小钢琴有声弹奏效果
# 方向键
# 倒计时
# 随机数
# 都要
# 小编
# 移除
# 都是
# 第一排
# 是在
# 在此
# 时间内
# 给大家
# 很简单
# 会让
# 我给
# 为其
# 只需要
# 后会
# 标志着
# 左键
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载
浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】
如何用好域名打造高点击率的自主建站？
Laravel如何实现密码重置功能_Laravel密码找回与重置流程
Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程
b2c电商网站制作流程,b2c水平综合的电商平台？
C++时间戳转换成日期时间的步骤和示例代码
教你用AI润色文章，让你的文字表达更专业
南京网站制作费用,南京远驱官方网站？
如何在Windows服务器上快速搭建网站？
实例解析angularjs的filter过滤器
如何在万网利用已有域名快速建站？
HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】
Laravel API资源类怎么用_Laravel API Resource数据转换
js代码实现下拉菜单【推荐】
简单实现Android验证码
免费网站制作appp,免费制作app哪个平台好？
Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】
LinuxShell函数封装方法_脚本复用设计思路【教程】
HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】
Laravel如何自定义错误页面（404, 500）？（代码示例）
动图在线制作网站有哪些,滑动动图图集怎么做？
免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？
公司网站制作价格怎么算,公司办个官网需要多少钱？
HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】
如何在建站宝盒中设置产品搜索功能？
简历在线制作网站免费版,如何创建个人简历？
Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程
如何在景安云服务器上绑定域名并配置虚拟主机？
nodejs redis 发布订阅机制封装实现方法及实例代码
Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】
iOS中将个别页面强制横屏其他页面竖屏
高端智能建站公司优选：品牌定制与SEO优化一站式服务
C语言设计一个闪闪的圣诞树
智能起名网站制作软件有哪些,制作logo的软件？
Laravel中的withCount方法怎么高效统计关联模型数量
详解Android——蓝牙技术 带你实现终端间数据传输
如何在腾讯云免费申请建站？
Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验
如何在万网自助建站平台快速创建网站？
Swift中switch语句区间和元组模式匹配
Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】
Swift中swift中的switch 语句
Laravel如何与Pusher实现实时通信？（WebSocket示例）
Laravel怎么解决跨域问题_Laravel配置CORS跨域访问
Win11怎么开启自动HDR画质_Windows11显示设置HDR选项
详解阿里云nginx服务器多站点的配置
Laravel如何处理表单验证？（Requests代码示例）
手机网站制作与建设方案,手机网站如何建设？
Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转