update: 2026-03-28 20:59
This commit is contained in:
Binary file not shown.
BIN
InfoGenie-frontend/public/smallgame/别踩白方块/favicon.png
Normal file
BIN
InfoGenie-frontend/public/smallgame/别踩白方块/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
@@ -1,413 +0,0 @@
|
||||
var c = document.getElementById("piano");
|
||||
var context = c.getContext("2d");
|
||||
var b = document.getElementById("background");
|
||||
var context_back = b.getContext("2d");
|
||||
var a = document.getElementById("score_bar");
|
||||
var context_score = a.getContext("2d");
|
||||
|
||||
|
||||
var numOfTiles = 5;
|
||||
var myScore = 0;
|
||||
var eachState = [false,false,false,false,false];
|
||||
var myTiles = [];
|
||||
|
||||
var intervalTmp;
|
||||
var geneTmp;
|
||||
var gameSpeed = 1; // 游戏速度倍数，初始为1倍
|
||||
var baseInterval = 5; // 基础更新间隔（毫秒）
|
||||
var baseGenerateInterval = 600; // 基础生成间隔（毫秒）
|
||||
|
||||
paintWindow();
|
||||
paintScoreBar();
|
||||
|
||||
// 添加全局鼠标和触摸事件监听
|
||||
c.addEventListener('click', function(e) {
|
||||
handleClick(e);
|
||||
});
|
||||
|
||||
c.addEventListener('touchstart', function(e) {
|
||||
e.preventDefault();
|
||||
handleTouch(e);
|
||||
});
|
||||
|
||||
document.getElementById('start_btn').addEventListener('click',function(e){
|
||||
var content = document.getElementById('start_btn');
|
||||
if(content.innerHTML == "开始游戏" || content.innerHTML == "继续游戏"){
|
||||
startGame();
|
||||
}
|
||||
else{
|
||||
pauseGame();
|
||||
}
|
||||
});
|
||||
|
||||
// 重新开始按钮事件
|
||||
document.getElementById('restart-btn').addEventListener('click', function(){
|
||||
restartGame();
|
||||
});
|
||||
|
||||
function startGame(){
|
||||
var content = document.getElementById('start_btn');
|
||||
updateGameSpeed();
|
||||
document.getElementById('music').play();
|
||||
content.innerHTML = "暂停游戏";
|
||||
content.className = "game-btn pause-btn";
|
||||
}
|
||||
|
||||
// 更新游戏速度
|
||||
function updateGameSpeed() {
|
||||
// 清除现有定时器
|
||||
if (intervalTmp) clearInterval(intervalTmp);
|
||||
if (geneTmp) clearInterval(geneTmp);
|
||||
|
||||
// 保持正常1倍速度，不加速
|
||||
gameSpeed = 1;
|
||||
|
||||
// 设置新的定时器，优化性能
|
||||
intervalTmp = setInterval(upDate, Math.max(baseInterval / gameSpeed, 3));
|
||||
geneTmp = setInterval(geneBlock, Math.max(baseGenerateInterval / gameSpeed, 200));
|
||||
}
|
||||
|
||||
function pauseGame(){
|
||||
var content = document.getElementById('start_btn');
|
||||
document.getElementById('music').pause();
|
||||
window.clearInterval(intervalTmp);
|
||||
window.clearInterval(geneTmp);
|
||||
content.innerHTML = "继续游戏";
|
||||
content.className = "game-btn start-btn";
|
||||
}
|
||||
|
||||
function gameOver(){
|
||||
document.getElementById('music').pause();
|
||||
window.clearInterval(intervalTmp);
|
||||
window.clearInterval(geneTmp);
|
||||
|
||||
// 显示最终得分和达到的最高速度
|
||||
document.getElementById('final-score-value').innerHTML = myScore;
|
||||
document.getElementById('final-speed-value').innerHTML = gameSpeed.toFixed(1);
|
||||
// 渲染排行榜
|
||||
renderLeaderboard();
|
||||
|
||||
// 显示游戏结束弹窗
|
||||
document.getElementById('game-over-modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function restartGame(){
|
||||
// 重置游戏状态
|
||||
myScore = 0;
|
||||
gameSpeed = 1; // 重置游戏速度
|
||||
eachState = [false,false,false,false,false];
|
||||
myTiles = [];
|
||||
|
||||
// 清空画布
|
||||
context.clearRect(0,0,300,600);
|
||||
context_back.clearRect(0,0,300,600);
|
||||
context_score.clearRect(0,0,300,60);
|
||||
|
||||
// 重新绘制背景
|
||||
paintWindow();
|
||||
paintScoreBar();
|
||||
|
||||
// 隐藏弹窗
|
||||
document.getElementById('game-over-modal').style.display = 'none';
|
||||
|
||||
// 重置按钮状态
|
||||
var content = document.getElementById('start_btn');
|
||||
content.innerHTML = "开始游戏";
|
||||
content.className = "game-btn start-btn";
|
||||
}
|
||||
function paintScoreBar(){
|
||||
// 清空画布
|
||||
context_score.clearRect(0,0,300,60);
|
||||
|
||||
// 绘制黑色背景
|
||||
context_score.fillStyle = "#333";
|
||||
context_score.fillRect(0,0,300,60);
|
||||
|
||||
// 更新HTML显示
|
||||
document.getElementById('score-value').textContent = myScore;
|
||||
document.getElementById('speed-value').textContent = gameSpeed.toFixed(1);
|
||||
}
|
||||
function geneBlock(){
|
||||
var myRand = Math.floor(Math.random()*numOfTiles);
|
||||
var i;
|
||||
var flag = true;
|
||||
for( i = 0; i < numOfTiles; ++i){
|
||||
if(!eachState[i]){
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
if(flag)return;//if mytiles array didn't have false element, then return
|
||||
|
||||
while(eachState[myRand])
|
||||
myRand = Math.floor(Math.random()*numOfTiles);
|
||||
myTiles[myRand] = new Block(myRand);
|
||||
|
||||
}
|
||||
function paintWindow(){
|
||||
// 清空背景
|
||||
context_back.clearRect(0,0,300,600);
|
||||
|
||||
// 绘制白色背景
|
||||
context_back.fillStyle = "white";
|
||||
context_back.fillRect(0,0,300,600);
|
||||
|
||||
// 绘制分隔线
|
||||
context_back.strokeStyle = "#ddd";
|
||||
context_back.lineWidth = 2;
|
||||
|
||||
// 垂直分隔线
|
||||
context_back.beginPath();
|
||||
context_back.moveTo(75,0);
|
||||
context_back.lineTo(75,600);
|
||||
context_back.stroke();
|
||||
|
||||
context_back.beginPath();
|
||||
context_back.moveTo(150,0);
|
||||
context_back.lineTo(150,600);
|
||||
context_back.stroke();
|
||||
|
||||
context_back.beginPath();
|
||||
context_back.moveTo(225,0);
|
||||
context_back.lineTo(225,600);
|
||||
context_back.stroke();
|
||||
|
||||
// 可点击区域警戒线
|
||||
context_back.strokeStyle = "#ff4444";
|
||||
context_back.lineWidth = 3;
|
||||
context_back.beginPath();
|
||||
context_back.moveTo(0,250);
|
||||
context_back.lineTo(300,250);
|
||||
context_back.stroke();
|
||||
|
||||
// 底部失败线
|
||||
context_back.strokeStyle = "#ff4444";
|
||||
context_back.lineWidth = 3;
|
||||
context_back.beginPath();
|
||||
context_back.moveTo(0,470);
|
||||
context_back.lineTo(300,470);
|
||||
context_back.stroke();
|
||||
}
|
||||
function Block(index){
|
||||
if(!eachState[index])
|
||||
eachState[index] = true;
|
||||
|
||||
this.index = index;
|
||||
this.appearPos = Math.floor(Math.random()*4);
|
||||
|
||||
this.width = 75;
|
||||
this.height = 120;
|
||||
this.color = "black";
|
||||
switch(this.appearPos){
|
||||
case 0:
|
||||
this.x = 0;
|
||||
this.y = -120;
|
||||
break;
|
||||
case 1:
|
||||
this.x = 75;
|
||||
this.y = -120;
|
||||
break;
|
||||
case 2:
|
||||
this.x = 150;
|
||||
this.y = -120;
|
||||
break;
|
||||
case 3:
|
||||
this.x = 225;
|
||||
this.y = -120;
|
||||
break;
|
||||
}
|
||||
context.fillStyle = this.color;
|
||||
context.fillRect(this.x,this.y,this.width,this.height);
|
||||
this.live = true;
|
||||
|
||||
window.addEventListener('keydown',function(e){
|
||||
myTiles[index].keyCode = e.keyCode;
|
||||
});
|
||||
window.addEventListener('keyup',function(e){
|
||||
myTiles[index].keyCode = false;
|
||||
});
|
||||
}
|
||||
function move(index){
|
||||
if(myTiles[index].live){
|
||||
myTiles[index].y += Math.ceil(gameSpeed);
|
||||
// 绘制逻辑已移到upDate函数中，避免重复绘制
|
||||
}
|
||||
}
|
||||
function afterRight(index){
|
||||
myScore++;
|
||||
// 清除方块（在upDate中统一处理绘制）
|
||||
myTiles[index].live = false;
|
||||
eachState[index] = false;
|
||||
|
||||
// 立即更新得分显示
|
||||
paintScoreBar();
|
||||
|
||||
// 每次得分都更新游戏速度，实现平滑渐进加速
|
||||
updateGameSpeed();
|
||||
}
|
||||
// 处理鼠标点击事件
|
||||
function handleClick(e) {
|
||||
var rect = c.getBoundingClientRect();
|
||||
var x = e.clientX - rect.left;
|
||||
var y = e.clientY - rect.top;
|
||||
|
||||
checkHit(x, y);
|
||||
}
|
||||
|
||||
// ===== 排行榜逻辑 =====
|
||||
function formatDateYYYYMMDD() {
|
||||
var d = new Date();
|
||||
var y = d.getFullYear();
|
||||
var m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(d.getDate()).padStart(2, '0');
|
||||
return y + '-' + m + '-' + day;
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (typeof str !== 'string') return str;
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function renderLeaderboard(){
|
||||
var nowStr = formatDateYYYYMMDD();
|
||||
// 当前玩家数据（模拟）
|
||||
var me = {
|
||||
"名称": "我",
|
||||
"账号": "guest",
|
||||
"分数": myScore,
|
||||
"时间": nowStr,
|
||||
"__isMe": true
|
||||
};
|
||||
|
||||
// 合并现有数据与当前玩家
|
||||
var data = (typeof playerdata !== 'undefined' && Array.isArray(playerdata))
|
||||
? playerdata.slice() : [];
|
||||
data.push(me);
|
||||
|
||||
// 按分数降序排序
|
||||
data.sort(function(a, b){
|
||||
return (b["分数"] || 0) - (a["分数"] || 0);
|
||||
});
|
||||
|
||||
var tbody = document.getElementById('leaderboard-body');
|
||||
if (!tbody) return;
|
||||
tbody.innerHTML = '';
|
||||
|
||||
var myRank = -1;
|
||||
for (var i = 0; i < data.length; i++){
|
||||
var row = data[i];
|
||||
var tr = document.createElement('tr');
|
||||
if (row.__isMe){
|
||||
myRank = i + 1;
|
||||
tr.className = 'leaderboard-row-me';
|
||||
}
|
||||
|
||||
tr.innerHTML =
|
||||
'<td>' + (i + 1) + '</td>' +
|
||||
'<td>' + escapeHtml(row["名称"] || '') + '</td>' +
|
||||
'<td>' + (row["分数"] || 0) + '</td>' +
|
||||
'<td>' + escapeHtml(row["时间"] || '') + '</td>';
|
||||
|
||||
// 只展示前10名
|
||||
if (i < 10) tbody.appendChild(tr);
|
||||
}
|
||||
|
||||
// 更新我的数据摘要
|
||||
var rankEl = document.getElementById('my-rank');
|
||||
var scoreEl = document.getElementById('my-score');
|
||||
var timeEl = document.getElementById('my-time');
|
||||
if (rankEl) rankEl.textContent = myRank > 0 ? myRank : '-';
|
||||
if (scoreEl) scoreEl.textContent = myScore;
|
||||
if (timeEl) timeEl.textContent = nowStr;
|
||||
}
|
||||
|
||||
// 处理触摸事件
|
||||
function handleTouch(e) {
|
||||
var rect = c.getBoundingClientRect();
|
||||
var touch = e.touches[0];
|
||||
var x = touch.clientX - rect.left;
|
||||
var y = touch.clientY - rect.top;
|
||||
|
||||
checkHit(x, y);
|
||||
}
|
||||
|
||||
// 检查点击/触摸是否命中方块
|
||||
function checkHit(x, y) {
|
||||
// 检查是否点击到黑色方块
|
||||
for (var i = 0; i < numOfTiles; i++) {
|
||||
if (eachState[i] && myTiles[i].live) {
|
||||
// 检查点击位置是否在方块范围内
|
||||
if (x >= myTiles[i].x && x <= myTiles[i].x + 75 &&
|
||||
y >= myTiles[i].y && y <= myTiles[i].y + 120) {
|
||||
// 检查方块是否在可点击区域（提高到130像素以上）
|
||||
if (myTiles[i].y + 120 > 130) {
|
||||
afterRight(i);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果没有点击到任何黑色方块，且点击位置在游戏区域内，则游戏结束
|
||||
if (y > 130 && y < 600) {
|
||||
gameOver();
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function upDate(){//check keyCode whether correct
|
||||
var i;
|
||||
|
||||
// 清空整个游戏区域，避免重叠
|
||||
context.clearRect(0, 0, 300, 600);
|
||||
|
||||
// 移动并重绘所有活跃的方块
|
||||
for(i = 0; i < numOfTiles; ++i){
|
||||
if(eachState[i]){
|
||||
myTiles[i].y += Math.ceil(gameSpeed); // 使用整数移动，避免模糊
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(myTiles[i].x, myTiles[i].y, 75, 120);
|
||||
}
|
||||
}
|
||||
for(i = 0; i < numOfTiles; ++i){
|
||||
if( eachState[i] ){
|
||||
if(myTiles[i].y < 470 && myTiles[i].y >350){
|
||||
switch(myTiles[i].keyCode){
|
||||
case 65: //A
|
||||
if(myTiles[i].x == 0)
|
||||
afterRight(i);
|
||||
break;
|
||||
case 83: //S
|
||||
if(myTiles[i].x == 75)
|
||||
afterRight(i);
|
||||
break;
|
||||
case 68: //D
|
||||
if(myTiles[i].x == 150)
|
||||
afterRight(i);
|
||||
break;
|
||||
case 70: //F
|
||||
if(myTiles[i].x == 225)
|
||||
afterRight(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(myTiles[i].y > 470){
|
||||
// 方块到达底部，游戏结束
|
||||
myTiles[i].live = false;
|
||||
eachState[i] = false;
|
||||
gameOver();
|
||||
return; // 立即退出，避免继续处理
|
||||
}
|
||||
}
|
||||
else{//not alive
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
const playerdata = [
|
||||
{
|
||||
"名称":"树萌芽",
|
||||
"账号":"3205788256@qq.com",
|
||||
"分数":1232,
|
||||
"时间":"2025-09-08"
|
||||
},
|
||||
{
|
||||
"名称":"柚大青",
|
||||
"账号":"2143323382@qq.com",
|
||||
"分数":132,
|
||||
"时间":"2025-09-21"
|
||||
},
|
||||
{
|
||||
"名称":"牛马",
|
||||
"账号":"2973419538@qq.com",
|
||||
"分数":876,
|
||||
"时间":"2025-09-25"
|
||||
}
|
||||
]
|
||||
@@ -1,334 +1,102 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>别踩白方块</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc8 50%, #f1f8e9 100%);
|
||||
font-family: 'Arial', 'Microsoft YaHei', sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.game-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(46,125,50,0.3);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
border: 1px solid rgba(129,199,132,0.2);
|
||||
}
|
||||
|
||||
.game-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #1b5e20;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.score-display {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(46,125,50,0.3);
|
||||
}
|
||||
|
||||
.game-container {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
border: 3px solid #2e7d32;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8px 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 4px 12px rgba(46,125,50,0.2);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.game-btn {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
background: linear-gradient(45deg, #66bb6a, #4caf50);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(76,175,80,0.3);
|
||||
}
|
||||
|
||||
.start-btn:hover {
|
||||
background: linear-gradient(45deg, #4caf50, #388e3c);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(76,175,80,0.4);
|
||||
}
|
||||
|
||||
.pause-btn {
|
||||
background: linear-gradient(45deg, #81c784, #66bb6a);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(129,199,132,0.3);
|
||||
}
|
||||
|
||||
.pause-btn:hover {
|
||||
background: linear-gradient(45deg, #66bb6a, #4caf50);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(129,199,132,0.4);
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
color: #2e7d32;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 游戏结束弹窗 */
|
||||
.game-over-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.7);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 40px rgba(46,125,50,0.3);
|
||||
max-width: 300px;
|
||||
width: 90%;
|
||||
border: 1px solid rgba(129,199,132,0.3);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #c62828;
|
||||
margin-bottom: 15px;
|
||||
text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.final-score, .final-speed {
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
.final-speed {
|
||||
color: #2e7d32;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 10px 25px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.restart-btn {
|
||||
background: linear-gradient(45deg, #66bb6a, #4caf50);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(76,175,80,0.3);
|
||||
}
|
||||
|
||||
.restart-btn:hover {
|
||||
background: linear-gradient(45deg, #4caf50, #388e3c);
|
||||
box-shadow: 0 6px 16px rgba(76,175,80,0.4);
|
||||
}
|
||||
/* 排行榜样式 */
|
||||
.leaderboard {
|
||||
margin-top: 15px;
|
||||
background: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(129,199,132,0.3);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaderboard-title {
|
||||
background: linear-gradient(45deg, #66bb6a, #4caf50);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
.leaderboard-meta {
|
||||
color: #2e7d32;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid rgba(129,199,132,0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.leaderboard-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.leaderboard-table th, .leaderboard-table td {
|
||||
padding: 8px 6px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid rgba(129,199,132,0.2);
|
||||
color: #1b5e20;
|
||||
text-align: center;
|
||||
}
|
||||
.leaderboard-table th {
|
||||
background: rgba(129,199,132,0.2);
|
||||
font-weight: bold;
|
||||
color: #1b5e20;
|
||||
}
|
||||
.leaderboard-row-me {
|
||||
background: rgba(198,40,40,0.08);
|
||||
border-left: 3px solid #c62828;
|
||||
}
|
||||
.leaderboard-table tr:nth-child(even) {
|
||||
background: rgba(129,199,132,0.1);
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.game-wrapper {
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.game-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
width: 280px;
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.game-container {
|
||||
width: 260px;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-wrapper">
|
||||
<h1 class="game-title">别踩白方块</h1>
|
||||
|
||||
<div class="score-display">
|
||||
<canvas id="score_bar" width="300" height="60"></canvas>
|
||||
<div style="position: absolute; color: white; font-size: 14px; display: flex; justify-content: space-between; width: 260px; padding: 0 20px;">
|
||||
<span>得分: <span id="score-value">0</span></span>
|
||||
<span>速度: <span id="speed-value">1.0</span>x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container">
|
||||
<canvas id="background" width="300" height="600"></canvas>
|
||||
<canvas id="piano" width="300" height="600" style="position: absolute; top: 0; left: 0;"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<button id="start_btn" class="game-btn start-btn">开始游戏</button>
|
||||
<div class="instructions">
|
||||
<div>电脑端：使用 A S D F 键</div>
|
||||
<div>手机端：直接点击黑色方块</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 游戏结束弹窗 -->
|
||||
<div id="game-over-modal" class="game-over-modal">
|
||||
<div class="modal-content">
|
||||
<h2 class="modal-title">游戏结束</h2>
|
||||
<div class="final-score">最终得分: <span id="final-score-value">0</span></div>
|
||||
<div class="final-speed">最高速度: <span id="final-speed-value">1.0</span>x</div>
|
||||
<!-- 排行榜区域 -->
|
||||
<div class="leaderboard">
|
||||
<div class="leaderboard-title">排行榜</div>
|
||||
<div class="leaderboard-meta">
|
||||
<span>我的排名：第 <span id="my-rank">-</span> 名</span>
|
||||
<span>我的分数：<span id="my-score">0</span></span>
|
||||
<span>时间：<span id="my-time">--</span></span>
|
||||
</div>
|
||||
<table class="leaderboard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>名称</th>
|
||||
<th>分数</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="leaderboard-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button id="restart-btn" class="modal-btn restart-btn">重新开始</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio id="music" src="MUSIC.mp3" loop></audio>
|
||||
<script src="gamedata.js"></script>
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cmn-Hans">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>别踩白方块</title>
|
||||
<link rel="icon"
|
||||
href="favicon.png">
|
||||
<script>
|
||||
(function (doc, win) {
|
||||
var docEl = doc.documentElement
|
||||
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
|
||||
|
||||
function recalc() {
|
||||
var designWidth = 750
|
||||
var clientWidth = docEl.clientWidth
|
||||
if (!clientWidth || clientWidth > designWidth) {
|
||||
clientWidth = designWidth
|
||||
}
|
||||
docEl.style.fontSize = (100 * clientWidth / designWidth) + 'px'
|
||||
}
|
||||
|
||||
if (!doc.addEventListener) return
|
||||
win.addEventListener(resizeEvt, recalc, false)
|
||||
doc.addEventListener('DOMContentLoaded', recalc, false)
|
||||
recalc()
|
||||
})(document, window)
|
||||
</script>
|
||||
<link rel="stylesheet" href="./styles/basic.css?v=201902102023">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="modal white-bg" id="init-modal">
|
||||
<div class="init-modal-content">
|
||||
<!--<p class="title">别踩白方块</p>-->
|
||||
<div class="modal-btn" id="classics-btn">经典</div>
|
||||
<div class="modal-btn" id="topspeed-btn">极速</div>
|
||||
<div class="modal-btn disable" id="arcade-btn">街机</div>
|
||||
<div class="modal-btn" id="history-btn">历史记录</div>
|
||||
<a target="_blank" href="https://github.com/QiShaoXuan/dont-touch-white" class="modal-btn">原项目仓库</a>
|
||||
<a target="_blank" href="https://github.com/Firfr/dont-touch-white" class="modal-btn" style="background: #ebf4f4;">镜像制作仓库</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal dim-bg" id="score-modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<p class="title">游戏结束</p>
|
||||
<p class="content">得分：<span id="score"></span></p>
|
||||
<p class="content">历史最高分：<span id="history-score"></span></p>
|
||||
<div class="modal-btn" id="topspeed-reset" data-modal="#score-modal">重新开始</div>
|
||||
<div class="modal-btn back-btn" data-modal="#score-modal">返回首页</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal dim-bg" id="coding-modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<p class="title">正在开发 ...</p>
|
||||
<div class="modal-btn modal-close-btn" data-modal="#coding-modal">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal dim-bg" id="history-modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<p class="title">历史记录</p>
|
||||
<p class="content">极速模式：<span id="history-topspeed-score"></span></p>
|
||||
<p class="content">经典模式：<span id="history-classics-score">--</span></p>
|
||||
<div class="modal-btn back-btn" data-modal="#history-modal">返回首页</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topspeed-container hide">
|
||||
<div class="score-container topspeed">0</div>
|
||||
<div class="container topspeed" id="topspeed-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="classics-container">
|
||||
<div class="score-container classics">
|
||||
<div><span id="remaining-time">60</span>''</div>
|
||||
<!--<span id="classics-score">0</span>-->
|
||||
</div>
|
||||
<div class="container classics" id="classics-container"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div class="toggle-btn"></div>-->
|
||||
</body>
|
||||
<script src="./scripts/topspeed.js?v=201902102023"></script>
|
||||
<script src="./scripts/classics.js?v=201902102023"></script>
|
||||
<script src="./scripts/index.js?v=201902102023"></script>
|
||||
<script>
|
||||
// const btn = document.querySelector('.toggle-btn')
|
||||
//
|
||||
// btn.addEventListener('click', function () {
|
||||
// if (topspeed.status == 0) {
|
||||
// topspeed.start()
|
||||
// } else {
|
||||
// topspeed.pause()
|
||||
// }
|
||||
// })
|
||||
</script>
|
||||
</html>
|
||||
|
||||
1
InfoGenie-frontend/public/smallgame/别踩白方块/scripts/asset/jquery.js
vendored
Normal file
1
InfoGenie-frontend/public/smallgame/别踩白方块/scripts/asset/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
"use strict";var _createClass=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}();function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var Classics=function(){function e(t){_classCallCheck(this,e),this.container=document.querySelector(t.container),this.scoreContainer=document.querySelector(t.scoreContainer),this.timeContainer=document.querySelector(t.timeContainer),this.overModal=document.querySelector(t.over.modal),this.scoreSpan=document.querySelector(t.over.score),this.historyscoreSpan=document.querySelector(t.over.historyScore),this.containerHeight=this.container.getClientRects()[0].height,this.bodyHeight=document.body.getClientRects()[0].height,this.frame=null,this.status=0,this.score=0,this.second=30,this.historyScore=localStorage.getItem("donttouchwhiteClassics")?Number(localStorage.getItem("donttouchwhiteClassics")):0}return _createClass(e,[{key:"init",value:function(){var i=this;this.score=0,this.container.innerHTML="",this.timeContainer.innerText=this.second,this.container.onclick=function(t){t.stopPropagation();var e=[].indexOf.call(t.target.parentNode.parentNode.querySelectorAll(t.target.tagName),t.target.parentNode);t.target.classList.contains("cube")&&(t.target.classList.contains("black")&&5===e&&(i.updateScore(),i.animate()),t.target.classList.contains("black")||i.gameover())}}},{key:"updateScore",value:function(){this.score+=1}},{key:"timeout",value:function(t,e){var i=this,n=(e-.1).toFixed(1);0!==this.status&&(0<=n?setTimeout(function(){t.innerText=n,i.timeout(t,n)},100):this.gameover())}},{key:"animate",value:function(){this.container.appendChild(this.setRow()),this.container.removeChild(this.container.firstElementChild)}},{key:"gameover",value:function(){this.status=0,this.overModal.style.display="flex",this.score>this.historyScore&&(this.updateHistoryScore(this.score),this.historyScore=this.score),this.scoreSpan.innerHTML=this.score,this.historyscoreSpan.innerHTML=this.historyScore}},{key:"updateHistoryScore",value:function(t){localStorage.setItem("donttouchwhiteClassics",t)}},{key:"start",value:function(){this.status=1,this.init();for(var t=0;t<7;t++)this.container.appendChild(this.setRow());this.timeout(this.timeContainer,this.second)}},{key:"setRow",value:function(){var t=document.createElement("div");return t.innerHTML='<div class="row">'+this.setCube(this.getRandom())+"</div>",t.firstChild}},{key:"setCube",value:function(t){for(var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:4,i="",n=0;n<e;n++)i+='<div class="cube '+(n===t?"black":"")+'"></div>';return i}},{key:"getRandom",value:function(){return parseInt(4*Math.random(),10)}}]),e}();
|
||||
@@ -0,0 +1 @@
|
||||
"use strict";function $(e){return 1<arguments.length&&void 0!==arguments[1]&&arguments[1]?document.querySelectorAll(e):document.querySelector(e)}var gameType="";function initGame(e){switch(gameType=e){case"topspeed":$(".topspeed-container").classList.remove("hide"),$(".classics-container").classList.add("hide");break;case"classics":$(".topspeed-container").classList.add("hide"),$(".classics-container").classList.remove("hide")}}var topspeed=new Topspeed({container:"#topspeed-container",scoreContainer:".score-container.topspeed",over:{modal:"#score-modal",score:"#score",historyScore:"#history-score"}}),classics=new Classics({container:"#classics-container",timeContainer:"#remaining-time",scoreContainer:"#classics-score",over:{modal:"#score-modal",score:"#score",historyScore:"#history-score"}}),topSpeedBtn=$("#topspeed-btn"),classicsBtn=$("#classics-btn"),disableBtns=$(".modal-btn.disable",!0),closeBtns=$(".modal-close-btn",!0),backBtns=$(".back-btn",!0),resetBtn=$("#topspeed-reset"),historyBtn=$("#history-btn"),initModal=$("#init-modal");disableBtns.forEach(function(e){e.addEventListener("click",function(){$("#coding-modal").style.display="flex"})}),closeBtns.forEach(function(e){e.addEventListener("click",function(){$(this.dataset.modal).style.display="none"})}),topSpeedBtn.addEventListener("click",function(){initGame("topspeed"),initModal.style.display="none",topspeed.start()}),classicsBtn.addEventListener("click",function(){initGame("classics"),initModal.style.display="none",classics.start()}),backBtns.forEach(function(e){e.addEventListener("click",function(){$(this.dataset.modal).style.display="none",initModal.style.display="flex"})}),resetBtn.addEventListener("click",function(){switch($(this.dataset.modal).style.display="none",gameType){case"topspeed":topspeed.start();break;case"classics":classics.start()}}),historyBtn.addEventListener("click",function(){$("#history-modal").style.display="flex",$("#history-topspeed-score").innerHTML=topspeed.historyScore,$("#history-classics-score").innerHTML=classics.historyScore});
|
||||
@@ -0,0 +1 @@
|
||||
"use strict";
|
||||
@@ -0,0 +1 @@
|
||||
"use strict";var _createClass=function(){function s(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(e,t,i){return t&&s(e.prototype,t),i&&s(e,i),e}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var Topspeed=function(){function t(e){_classCallCheck(this,t),this.container=document.querySelector(e.container),this.scoreContainer=document.querySelector(e.scoreContainer),this.overModal=document.querySelector(e.over.modal),this.scoreSpan=document.querySelector(e.over.score),this.historyscoreSpan=document.querySelector(e.over.historyScore),this.containerHeight=this.container.getClientRects()[0].height,this.bodyHeight=document.body.getClientRects()[0].height,this.frame=null,this.step=4,this.status=0,this.score=0,this.historyScore=localStorage.getItem("donttouchwhiteTopspeed")?Number(localStorage.getItem("donttouchwhiteTopspeed")):0,this.increaseBasic=6,this.lastIncrease=0}return _createClass(t,[{key:"init",value:function(){var t=this;this.container.innerHTML="",this.container.appendChild(this.setRow()),this.step=3,this.increaseBasic=6,this.lastIncrease=0,this.score=0,this.scoreContainer.innerHTML=this.score,this.container.onclick=function(e){e.stopPropagation(),e.target.classList.contains("cube")&&(e.target.classList.contains("black")?t.isFirstLine(e.target.parentNode)&&(e.target.classList.remove("black"),e.target.classList.add("toGray"),t.updateScore(),t.checkIncreaseDifficulty()):e.target.classList.contains("toGray")||t.gameover())}}},{key:"isFirstLine",value:function(e){return!e.previousElementSibling||null===e.previousElementSibling.querySelector(".cube.black")}},{key:"updateScore",value:function(){this.score+=1,this.scoreContainer.innerHTML=this.score}},{key:"checkIncreaseDifficulty",value:function(){this.score-this.lastIncrease===this.increaseBasic&&(this.lastIncrease=this.score,this.increaseBasic+=1,this.step+=.5)}},{key:"start",value:function(){this.status=1,this.init(),this.animateTopspeed()}},{key:"animateTopspeed",value:function(){var i=this;this.checkToAppend();var e=this.container.querySelectorAll(".row"),t=this;e.forEach(function(e){var t=Number(e.dataset.y);e.style.transform="translateY("+(t+i.step)+"px)",e.dataset.y=t+i.step}),this.frame=requestAnimationFrame(function(){t.animateTopspeed()}),this.checkBlackToBottom(),this.checkToRemove()}},{key:"checkBlackToBottom",value:function(){var e=this.container.firstElementChild;Number(e.dataset.y)>this.bodyHeight&&1===[].filter.call(e.childNodes,function(e){return e.classList.contains("black")}).length&&this.gameover()}},{key:"gameover",value:function(){this.pause(),this.overModal.style.display="flex",this.score>this.historyScore&&(this.updateHistoryScore(this.score),this.historyScore=this.score),this.scoreSpan.innerHTML=this.score,this.historyscoreSpan.innerHTML=this.historyScore}},{key:"updateHistoryScore",value:function(e){localStorage.setItem("donttouchwhiteTopspeed",e)}},{key:"pause",value:function(){this.status=0,cancelAnimationFrame(this.frame)}},{key:"checkToAppend",value:function(){var e=this.container.lastElementChild;Number(e.dataset.y)+this.step>=this.containerHeight&&this.container.appendChild(this.setRow())}},{key:"checkToRemove",value:function(){var e=this.container.firstElementChild;Number(e.dataset.y)>this.bodyHeight+this.containerHeight&&this.container.removeChild(e)}},{key:"setRow",value:function(){var e=document.createElement("div");return e.innerHTML='<div class="row" data-y="0">'+this.setCube(this.getRandom())+"</div>",e.firstChild}},{key:"setCube",value:function(e){for(var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:4,i="",s=0;s<t;s++)i+='<div class="cube '+(s===e?"black":"")+'"></div>';return i}},{key:"getRandom",value:function(){return parseInt(4*Math.random(),10)}}]),t}();
|
||||
@@ -0,0 +1,36 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: '微软雅黑', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
font-size: .24rem;
|
||||
width: 100%;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none
|
||||
}
|
||||
281
InfoGenie-frontend/public/smallgame/别踩白方块/styles/basic.css
Normal file
281
InfoGenie-frontend/public/smallgame/别踩白方块/styles/basic.css
Normal file
@@ -0,0 +1,281 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: '微软雅黑', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
max-width: 7.5rem;
|
||||
margin: 0 auto;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
@media screen and (min-width:7.5rem) {
|
||||
html {
|
||||
background: #444
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent
|
||||
}
|
||||
|
||||
.topspeed-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.topspeed-container.hide {
|
||||
visibility: hidden;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.container.topspeed {
|
||||
height: 24%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.container.topspeed .row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #333;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.classics-container.hide {
|
||||
visibility: hidden;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.container.classics {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.container.classics .row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #333;
|
||||
height: 24%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transition: all .1s
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(2) {
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(1) {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(2) {
|
||||
transform: translateY(0%)
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(3) {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(4) {
|
||||
transform: translateY(-200%)
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(5) {
|
||||
transform: translateY(-300%)
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(6) {
|
||||
transform: translateY(-400%)
|
||||
}
|
||||
|
||||
.container.classics .row:nth-of-type(7) {
|
||||
transform: translateY(-500%)
|
||||
}
|
||||
|
||||
.cube {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
transition: all .3s
|
||||
}
|
||||
|
||||
.cube:not(:last-of-type) {
|
||||
border-right: 1px solid #333
|
||||
}
|
||||
|
||||
.cube.black {
|
||||
background: #333
|
||||
}
|
||||
|
||||
.cube.toGray {
|
||||
background: #ddd
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 100%;
|
||||
background: red;
|
||||
position: fixed;
|
||||
right: .2rem;
|
||||
bottom: .2rem;
|
||||
z-index: 100000
|
||||
}
|
||||
|
||||
.score-container {
|
||||
position: absolute;
|
||||
top: .15rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: .54rem;
|
||||
color: #cd4545;
|
||||
z-index: 999;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.score-container.classics {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.modal.white-bg {
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.modal.dim-bg {
|
||||
background: rgba(225, 225, 225, .7)
|
||||
}
|
||||
|
||||
.modal a {
|
||||
color: #00adb5;
|
||||
display: block
|
||||
}
|
||||
|
||||
.modal .init-modal-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: .6rem 0;
|
||||
text-align: center;
|
||||
line-height: 1.9rem
|
||||
}
|
||||
|
||||
.modal .init-modal-content .title {
|
||||
font-size: .64rem
|
||||
}
|
||||
|
||||
.modal .init-modal-content .modal-btn {
|
||||
font-size: .54rem;
|
||||
height: 1.9rem
|
||||
}
|
||||
|
||||
.modal .init-modal-content .modal-btn:nth-child(odd) {
|
||||
background: #333;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.modal .modal-content {
|
||||
width: 80%;
|
||||
padding: .15rem;
|
||||
border: 1px solid #333;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.modal .modal-content .title {
|
||||
font-size: .44rem;
|
||||
margin-bottom: .25rem
|
||||
}
|
||||
|
||||
.modal .modal-content .content {
|
||||
font-size: .34rem;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.modal .modal-content .content:last-of-type {
|
||||
margin-bottom: .15rem
|
||||
}
|
||||
|
||||
.modal .modal-content .modal-btn {
|
||||
width: 80%;
|
||||
padding: .1rem;
|
||||
margin: 0 auto .15rem;
|
||||
font-size: .32rem;
|
||||
border: 1px solid #333;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.modal .modal-content .modal-btn.disable {
|
||||
background: #ddd;
|
||||
border-color: #999
|
||||
}
|
||||
Reference in New Issue
Block a user