javascript-原生javascript实现节奏大师小游戏

前言

课程实验要求，迫不得已看了一点javascript，实现这个类似“节奏大师”的小游戏，有计时，计分，对玩家成绩进行排序的小功能，感觉自己审美还是不行，还有感觉自己写的javascript好丑陋，没有数据结构的味道。
遇到卡壳的问题：javascript选择伪元素::after，代码中我用::after表示QWER四个键，js无法选择到伪元素，通过设置如下css代码，然后var crack = document.getElementsByClassName(‘crack’)[0]; 之后crack就是伪元素.crack::after。
```
.crack {pointer-events: none;
}/*伪元素样式*/
.crack::after {pointer-events: auto;
}
```
用到javascript知识：Dom，键盘事件，定时器等等=.=

效果

在这里插入图片描述

Code

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Game</title><link rel="stylesheet" href="src/css/play.css">
</head><body><div id="game-box"><div class="game-name"><span>游戏名: <span style="color: red;">节奏大师简化版</span></span>&nbsp&nbsp&nbsp<span>游戏时间：<span class="time"></span></span>&nbsp&nbsp&nbsp<span>积分：<span class="sorce">0</span></span>&nbsp&nbsp&nbsp<button onclick="gameTime()">开始游戏</button></div><div class="crack-box"><!-- 四个轨道 --><div class="crack"></div><div class="crack"></div><div class="crack"></div><div class="crack"></div></div><div class="prefect">prefect~<br>OvO<br>积分+2</div><div class="good">good~<br>OvO<br>积分+1</div><div class="miss">miss~<br>OvO<br>积分+0</div></div><div id="rank-rule"><div class="rankbox"><div class="rank-list"><table class="rank-table"><caption>游戏积分表Top5</caption><tr><th>玩家名</th><th>游戏积分</th></tr></table></div></div><div class="rulebox"><div style="color: red;font-size: 30px;">游戏规则</div><div style="color: white;font-size: 20px;">玩家通过点击“开始游戏”按钮进行游戏，通过键盘的按键QWER进行操作.<br>当小方块滑落到轨道末尾，点击对应按键，根据按键时机获取不同的分数.<br>游戏时间20s,在这时间内随机出现小方块.<br>系统会对玩家成绩进行排序，筛选top5的进行展示~</div></div></div><script src="/src/js/play.js"></script>
</body></html>

css

* {margin: 0;padding: 0;
}body {background-image: url(../img/last.jpg);background-repeat: no-repeat;background-size: 100%;background-attachment: fixed;
}#game-box {position: absolute;left: 0;top: 0;width: 50%;height: 100vh;border: 2px solid black;overflow: hidden;/*因为设置为绝对定位，后面设置子元素的高度大小100%会溢出，使得子元素超出的部分隐藏*/
}#rank-rule {position: absolute;right: 0;top: 0;width: 50%;height: 100vh;
}.game-name {text-align: center;margin-top: 20px;color: aliceblue;font-size: larger;font-weight: 800;
}/* 四个轨道的区域 */
.crack-box {width: 100%;height: 100%;/* border: 1px solid white; */display: flex;margin: 0 auto;margin-top: 10px;margin-bottom: 10px;width: 80%;height: 90%;background-color: rgba(2, 8, 37, 0.3);position: relative;
}/* 轨道 */
.crack-box div {position: relative;width: 25%;height: 100%;border: 1px solid rgba(0, 0, 0, 0.347);cursor: pointer;
}/* 滑落的方块样式 */
.crack-box .crack div {position: absolute;/* 设置脱离文档流，这样生成的小方块不会互相干扰 */width: 100%;height: 10%;background-color: aliceblue;border-radius: 10%;}/* 作为轨道的按钮 */
.crack:nth-child(1)::after {content: "Q";
}.crack:nth-child(2)::after {content: "W";
}.crack:nth-child(3)::after {content: "E";
}.crack:nth-child(4)::after {content: "R";
}.crack {pointer-events: none;/* 这样才能使用js选择.crack::after */
}/*伪元素样式*/
.crack::after {pointer-events: auto;/* 这样才能使用js选择.crack::after */display: flex;justify-content: center;align-items: center;position: absolute;bottom: 0;width: 100%;height: 10%;box-shadow: -5px -5px 10px rgba(138, 177, 167, 0.496);background-color: rgba(187, 186, 186, 0.476);cursor: pointer;font-size: 30px;font-weight: 900;color: rgba(245, 11, 11, 0.625);
}/* 伪元素点击时的属性 */
.onclick::after {content: "";background-color: red;color: black;
}.prefect {position: absolute;margin: 0 auto;width: auto;height: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);/*调节位置,使得居中*/text-align: center;font-size: 2rem;font-weight: 900;font-family: fantasy;color: rgba(247, 31, 31, 0.7);background-color: rgba(136, 233, 127, 0);z-index: 99;display: none;
}.good {position: absolute;margin: 0 auto;width: auto;height: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);/*调节位置,使得居中*/text-align: center;font-size: 2rem;font-weight: 900;font-family: fantasy;color: rgba(38, 18, 212, 0.676);background-color: rgba(136, 233, 127, 0);z-index: 99;display: none;
}.miss {position: absolute;margin: 0 auto;width: auto;height: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);/*调节位置,使得居中*/text-align: center;font-size: 2rem;font-weight: 900;font-family: fantasy;color: rgba(240, 225, 23, 0.598);background-color: rgba(136, 233, 127, 0);z-index: 99;display: none;
}/* //开始游戏按钮样式 */
button {border-radius: 10px;text-shadow: 0px 1px 0px #2f6627;box-shadow: 0px 0px 0px 2px #9fb4f2;font-family: Arial;color: #ffffff;/* font-size: 10px; */background: #44c76776;padding: 12px 30px 12px 30px;border: solid #18ab29 1px;text-decoration: none;
}
button:hover {color: #ffffff;background: #e92311af;text-decoration: none;
}.rank-list{color: white;font-size: 20px;height: 60%;width: 100%;/* border: 2px solid red; */position: absolute;top: 5px;right: 0;}/* rank表样式 */
.rank-list table caption{font-size: 40px;color: red;
}
.rank-list table{width: 100%;/* height: 200px; 如果指定了这个高度，td行就会根据这个高度进行分布，到时候删除行的时候就会很丑*/border-top: 1px solid rgba(255, 255, 255, 0.5);/* border-left: 1px solid rgba(255, 255, 255, 0.5); */text-align: center;vertical-align: center;table-layout: fixed;}
.rank-list table th{border-right: 1px solid rgba(255, 255, 255, 0.5);border-bottom: 1px solid rgba(255, 255, 255, 0.5);padding: 8px;
}.rank-list table td{padding: 8px;border-right: 1px solid rgba(255, 255, 255, 0.5);border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}.rulebox{position: relative;right: 0;top: 70%;text-align: center;
}
/**问题：*设置高度宽度为百分号时，是根据第一个position不是static的父元素的大小进行设置的 *设置伪元素的伪类效果：p:hover::after，跟正常的思维相反。。*但是p:focus::after就不启作用，由于js不能选取到伪元素，所以设置如下属性，这样选取到.crack，其实是选中了.crack::after.crack{pointer-events: none;}.crack::after{pointer-events: auto;}
*/

javascript

var socre = 0; //分数
var num = 1; //玩家编号
var items = new Array(); //玩家积分数组// 随机在四个轨道内生成小方块
function CreateBlock() {var crackNumber = Math.floor(Math.random() * 4); //轨道编号var blockNum = Math.floor(Math.random() * 3 + 1); //轨道滑落方块数量，1~3块var fatherBox = document.getElementsByClassName("crack")[crackNumber]; //找到父级元素for (var i = 0; i < blockNum; i++) {var block = document.createElement('div');fatherBox.appendChild(block);block.timer = null;//获取轨道的长度var target = fatherBox.offsetHeightstartMove(block, target);}
}// 小方块向下滑落，然后消失
function startMove(obj, target) {clearInterval(obj.timer); //清除计时器var y = 1;var top = 0;obj.timer = setInterval(function () {if (top < target - obj.offsetHeight) {top += y; //每次滑落1pxobj.style.top = top + "px";} else {obj.remove();clearInterval(obj.timer); //清除计时器}}, 10);
}// QWER健按下事件
document.onkeydown = function (event) {if (event.keyCode == 81) {var crack = document.getElementsByClassName('crack')[0];crack.classList.add('onclick');addSorce(crack);showSorces();}if (event.keyCode == 87) {var crack = document.getElementsByClassName('crack')[1];crack.classList.add('onclick');addSorce(crack);showSorces();}if (event.keyCode == 69) {var crack = document.getElementsByClassName('crack')[2];crack.classList.add('onclick');addSorce(crack);showSorces();}if (event.keyCode == 82) {var crack = document.getElementsByClassName('crack')[3];crack.classList.add('onclick');addSorce(crack);showSorces();}
}
// QWER健按下事件
document.onkeyup = function (event) {if (event.keyCode == 81) {var crack = document.getElementsByClassName('crack')[0];crack.classList.remove('onclick');}if (event.keyCode == 87) {var crack = document.getElementsByClassName('crack')[1];crack.classList.remove('onclick');}if (event.keyCode == 69) {var crack = document.getElementsByClassName('crack')[2];crack.classList.remove('onclick');}if (event.keyCode == 82) {var crack = document.getElementsByClassName('crack')[3];crack.classList.remove('onclick');}
}
//判断按钮点击，小方块在什么位置，进而加多少分
function addSorce(crack) {var firstBlock = crack.firstChild; //获取该轨道的第一个小方块if (firstBlock) { //如果该轨道存在小方块var blockTop = firstBlock.offsetTop;var blockHeight = firstBlock.offsetHeight;var crackHeight = crack.offsetHeight;// console.log(blockTop,blockHeight,crackHeight);var prefect = document.getElementsByClassName("prefect")[0];var good = document.getElementsByClassName("good")[0];var miss = document.getElementsByClassName("miss")[0];// console.log(blockTop, blockHeight,crackHeight);if (blockTop <= crackHeight - blockHeight && blockTop >= crackHeight - blockHeight * 1.3) {socre += 2; //加2分prefect.style.display = "block";firstBlock.remove();} else if (blockTop >= crackHeight - blockHeight * 1.8 && blockTop < crackHeight - blockHeight * 1.3) {socre += 1;good.style.display = "block";} else {miss.style.display = "block";}}
}// 每隔一段时间去除miss,prefect.good的样式
function remove() {var prefect = document.getElementsByClassName("prefect")[0];var good = document.getElementsByClassName("good")[0];var miss = document.getElementsByClassName("miss")[0];prefect.style.display = "none";good.style.display = "none";miss.style.display = "none";
}//显示分数
function showSorces() {var elem = document.getElementsByClassName("sorce")[0];elem.innerHTML = socre;elem.style.color = 'red';
}//"开始游戏"按钮函数
function gameTime() {var time = 20;var eleTime = document.getElementsByClassName('time')[0];var timer = setInterval(function () {if (time >= 0) {CreateBlock();eleTime.innerHTML = time + "s";eleTime.style.color = "red"time--;} else {clearInterval(timer);//到时间，清空还在轨道上的方块var blocks = document.getElementsByClassName('crack');for (var i = 0; i < blocks.length; i++) {while (blocks[i].hasChildNodes()) {blocks[i].removeChild(blocks[i].firstChild);}}alert("time is run out")var player = {name: "玩家" + num,socre: socre};items.push(player);items.sort(function (a, b) { //默认是按照字符串大小排序，改成按数字return (b.socre - a.socre); //降序});num++; //玩家编号+1socre = 0; //重置showSorces(); //重置分数showRankList(); //展示分数top5}}, 1000)
}//展示积分表
function showRankList() {var table = document.getElementsByClassName("rank-table")[0];console.log(table.rows.length);if (table.rows.length > 0) { //先把所有的行删除for (var i = table.rows.length - 1; i > 0; i--) {table.deleteRow(i);}}//从数组中读取数组，写到积分表中var maxLength = 5; //top5if (items.length < 5) {maxLength = items.length; //最多读出5个}for (var i = 0; i < maxLength; i++) {var row = document.getElementsByClassName("rank-table")[0].insertRow(i + 1); //i+1是表示插入在th后面var name = row.insertCell(0);var socre = row.insertCell(1);name.innerHTML = items[i].name;socre.innerHTML = items[i].socre;}
}setInterval(remove, 800); //定时清理prefect,miss,good的标志

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Metrics监控工具介绍与使用
目录Metrics介绍使用Metric Registries Gauges Counter Histograms Meters Timers 监控输出方式Metrics介绍监控工具。Metrics提供了强大的工具用于监控重要组件的行为。Metrics依赖Jetty, Logback, Log4j, Apache HttpClient, Ehcache, JDBI, Jersey和Graphite，提供一个可视…...
2024/4/24 7:31:37
离散数学(傅彦)思维导图第二篇：数理逻辑
...
2024/4/24 7:31:37
idea所有依赖都有，单项目全爆红，运行正常
解决办法执行idea工具栏上下面的菜单： File -> Invalidate Caches/Restart...
2024/4/24 7:31:35
【剑指offer】-数组汇总出现次数超过一半的数字-27/67
一、题目描述数组中有一个数字出现的次数超过数组长度的一半，请找出这个数字。例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}。由于数字2在数组中出现了5次，超过数组长度的一半，因此输出2。如果不存在则输出0。二、题目分析这个数字存在次数一定是最多的，我们可以用守…...
2024/4/24 7:31:34
水库水位-库容曲线线性插值python程序
水位-库容曲线是进行水库调度的基本数据资料。具体用途就是，给定一个水库水位z，求其对应的库容v，或者给定一个库容v，求其对应的水位z。比较靠谱的方法就是线性插值。以下给出一个本人自定义的进行水库水位库容曲线线性插值的python函数。def Linterpo(x,y,xi):#参数：一组升…...
2024/4/24 7:31:41
基于Java的动态代理
动态代理特点：字节码随用随创建，随用随加载作用：不修改源码的基础上对方法增强分类：基于接口的动态代理基于子类的动态代理基于接口的动态代理：涉及的类：Proxy 提供者：JDK 如何创建代理对象：使用Proxy类中的newProxyInstance方法。创建代理对象的要求：被代理类至…...
2024/4/24 7:31:34
03-Linux基础——服务与进程及网络连接
本系列基于Centos7编写，带大家了解Liunx基础命令，本系列有四篇文章Linux启动过程运行级别：运行级别的设置由/etc/systemd/system/default.target文件来控制，default.target指向哪个运行级别的文件就启动哪个级别，7个运行级别对应7个target文件，在/lib/systemd/system下ru…...
2024/4/24 7:31:31
jsp标签
jsp标签标签的分类标签内部标签的意思 jsp标签的生命周期标签的分类开始标签结束标签空标签 ui标签控制标签数据标签写自定义jsp标签前，必须导入的jar包jar包导入之后，想要使用jsp标签，此代码必不可少 jar包导入之后，想要使用jsp标签，此代码必不可少按ctrl键点击 ht…...
2024/4/24 7:31:30
损失函数
TensorFlow以及Keras里面在处理多分类时有sparse_categorical_crossentropy和categorical_crossentropy。两者的区别在于训练的Label的形态：one-hot： categorical_crossentropy Integer number: sparse_categorical_crossentropy另外tensorflow官方源码中列举了相关参数：Arg…...
2024/4/24 7:31:32
Java 8系列之重新认识HashMap
转载知乎 https://zhuanlan.zhihu.com/p/21673805 摘要 HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型。随着JDK（Java Developmet Kit）版本的更新，JDK1.8对HashMap底层的实现进行了优化，例如引入红黑树的数据结构和扩容的优化等。本文结合JDK1.7和JDK1…...
2024/4/24 7:31:37
08-图9 关键活动 (30分)
08-图9 关键活动 (30分) 假定一个工程项目由一组子任务构成，子任务之间有的可以并行执行，有的必须在完成了其它一些子任务后才能执行。“任务调度”包括一组子任务、以及每个子任务可以执行所依赖的子任务集。比如完成一个专业的所有课程学习和毕业设计可以看成一个本科生要…...
2024/4/24 7:31:27
idea2020.1详细安装步骤
最新版的idea2020.1详细安装步骤下载安装步骤点击原文链接: https://blog.csdn.net/weixin_40845165/article/details/80914845....
2024/4/20 11:40:30
高防IP原理
高防ip就是指高防主机房所提供的ip段，主要是通过对于中国互联网中的DDoS攻击方式开展进行维护。高防IP是一种知识付费用户个性化发展服务，对于我国互联网信息技术企业网络系统服务器在遭到大流量的DDoS攻击后造成社会服务建设项目不能用的状况下应用，客户管理能够可以根据攻…...
2024/5/1 20:25:09
git、gitlab、IDEA、vscode使用（三）
目录五、vscode中新建项目提交到gitlab5.1、在gitlab服务器上面创建一个简单空项目5.2、按照提示信息进行操作5.3、执行命令六、vscode中修改或新增的文件提交到gitlab6.1、执行暂存修改6.2、执行提交6.3、执行推送五、vscode中新建项目提交到gitlab5.1、在gitlab服务器上面创建…...
2024/4/19 19:20:45
Spring Boot 2.x 实践记：发送邮件
目录Maven 依赖 SMTP配置发送简单邮件发送带附件邮件发送HTML格式邮件实战测试小结TL;DR 本文是实践如何在Spring Boot 2中使用JavaMailSender发送邮件：发送简单邮件发送带附件邮件发送HTML格式邮件1. Maven 依赖 <dependencies><dependency><groupId&…...
2024/4/16 19:54:02
Java程序员的两项通用能力
工作这几年来，经历了很多。从小白到中级(手机里有一款叫中国象棋的游戏，里面给对弈中电脑水平分为小白、菜鸟、新手、入门、初级、中级、高级、大师、特级大师，编程我暂且按照这样来区分)。学校教给我的是从小白到入门(当然也不乏某些学霸直接跳过这些成为高级甚至大师级别，…...
2024/4/27 8:23:42
前端之未来
简介：编程是一种修行，用心写下你的每行代码。作者 | 平侠引言近期学到一个词：Digital Twin(数字孪生)，简单来讲就是在计算机世界给现实世界的物体（飞船/城市）、系统（电力/交通）建立数字化镜像，让数字世界和物理世界更好地交互，数字大屏也可以算这种技术一种应用场景…...
2024/4/24 7:31:28
【哈工大版】Dynamic ReLU：Adaptively Parametric ReLU及Keras代码（调参记录4）
本文介绍哈工大团队提出的一种Dynamic ReLU激活函数，即自适应参数化ReLU激活函数，能够让每个样本有自己独特的ReLU参数，在2019年5月3日投稿至IEEE Transactions on Industrial Electronics，2020年1月24日录用，2020年2月13日在IEEE官网公布。续上一篇：【哈工大版】Dynami…...
2024/4/24 7:31:32
Map与WeakMap
Map与WeakMap Map对象用来保存键值对，并且能够记住键的原始插入顺序，任何对象或者原始值都可以作为键或者是值。 WeakMap对象同样用来保存键值对，对于键是弱引用的而且必须为一个对象，而值可以是任意的对象或者原始值。 Map 描述 Map对象类似于一个普通的键值对的Object对象…...
2024/4/27 1:14:31
详解JavaScript Date对象
文章目录一、何为Date？二、根据Date返回年、月、日、时、分、秒、毫秒、周几2.1 getFullYear() 返回年2.2 getMonth() 返回月2.3 getDate() 返回日2.4 getHours() 返回小时2.5 getMinutes() 返回分钟2.6 getSeconds() 返回秒2.7 getMilliseconds() 返回毫秒2.8 getDay() 返回…...
2024/4/24 7:31:22

javascript-原生javascript实现节奏大师小游戏

前言

效果

Code

html

css

javascript

相关文章

最新文章