shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync local changes (2026-03-12)

Browse Source
This commit is contained in:
树萌芽
2026-03-12 18:58:26 +08:00
parent 04a4cb962a
commit 939442e061
348 changed files with 91638 additions and 92091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

824
InfoGenie-frontend/public/smallgame/别踩白方块/game.js
View File

@@ -1,413 +1,413 @@
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, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
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
}
}
}
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, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
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
}
}
}