Skip to content

Commit

Permalink
modify bugs with the model
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xinqwq
Xinqwq committed Nov 12, 2024
1 parent 24a0043 commit 03dd164
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 21 deletions.
14 changes: 5 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
<title>Christmas Cat Hunt</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
#win-message {
display: none !important;
}
</style>
</head>
<body>
<div class="game-container">
Expand All @@ -37,11 +32,12 @@
<span>Start Game</span>
</button>
</div>
<div id="win-message" style="display: none;">
<div id="win-message" class="hidden">
<div class="win-content">
Congratulations! You found all the cats! 哇哦，你真棒！<br>想知道阿瓦隆胜利的秘诀吗：下局阿瓦隆开局点E小调莫甘娜ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧! <br>
Time: <span id="win-time"></span><br>
<span id="record-message" class="new-record hidden">New Record!</span><br>
<h2>Congratulations! You found all the cats! 哇哦，你真棒！</h2>
<p>想知道阿瓦隆胜利的秘诀吗：下局阿瓦隆开局点E小调莫甘娜ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧!</p>
<p>Time: <span id="win-time"></span></p>
<p id="record-message" class="new-record hidden">New Record!</p>
<div class="button-container">
<button id="play-again-btn" class="control-item">
<i class="fas fa-redo"></i>
Expand Down
30 changes: 21 additions & 9 deletions scripts/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,22 +330,34 @@ class CatGame {
}

// 显示胜利消息
this.winMessage.style.display = 'flex';

// 修改按钮文本
const restartBtn = document.getElementById('restart-btn');
if (restartBtn) {
restartBtn.innerHTML = '<i class="fas fa-redo"></i><span>Restart</span>';
const winMessage = document.getElementById('win-message');
if (winMessage) {
// 移除所有可能的隐藏样式
winMessage.style.removeProperty('display');
winMessage.style.removeProperty('visibility');
winMessage.classList.remove('hidden');

// 强制显示
winMessage.style.display = 'flex';
winMessage.style.visibility = 'visible';

// 确保在 DOM 更新后显示
requestAnimationFrame(() => {
winMessage.style.display = 'flex';
winMessage.style.visibility = 'visible';
});
}
}

restart() {
// 停止计时器
this.stopTimer();

// 确保胜利消息是隐藏的
if (this.winMessage) {
this.winMessage.style.display = 'none';
// 隐藏胜利消息
const winMessage = document.getElementById('win-message');
if (winMessage) {
winMessage.style.display = 'none';
winMessage.style.visibility = 'hidden';
}

// 清空游戏区域
Expand Down
149 changes: 146 additions & 3 deletions styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
z-index: 9999;
}

.win-content {
Expand All @@ -86,6 +86,8 @@
text-align: center;
font-size: 24px;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
max-width: 80%;
margin: 20px;
}

.button-container {
Expand Down Expand Up @@ -416,7 +418,7 @@
@media (max-width: 768px) {
#game-area {
height: 100vh; /* 使用视口高度 */
width: 100vw; /* 使用视口宽度 */
width: 100vw; /* 使用口宽度 */
background-size: cover; /* 改为cover确保背景完全覆盖 */
margin: 0;
padding: 0;
Expand Down Expand Up @@ -465,4 +467,145 @@
width: 40px;
height: 40px;
}
}

/* 保持原有的桌面端样式不变 */

/* 只针对移动端的样式修改 */
@media (max-width: 768px) {
.game-container {
width: 100%;
height: 100vh;
max-width: none; /* 移除最大宽度限制 */
margin: 0;
padding: 0;
overflow: hidden;
}

#game-area {
width: 100vw; /* 使用视口宽度 */
height: calc(100vh - 60px); /* 减去控制栏高度 */
background-image: url('../assets/bg_Iphone.svg');
background-size: contain; /* 改为 contain 以保持图片比例 */
background-position: center center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
left: 0;
right: 0;
}

/* 移动端的控制栏样式 */
.game-controls {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 5px;
background: rgba(44, 62, 80, 0.95);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
z-index: 1000;
}

.control-item {
padding: 8px 12px;
font-size: 14px;
flex: 0 1 auto; /* 允许按钮自动调整大小 */
}

/* 移动端的猫咪尺寸 */
.cat {
width: 50px;
height: 50px;
}

/* 移动端的音乐选择器 */
#bgm-select {
max-width: 100px;
font-size: 12px;
}

/* 移动端的胜利消息 */
.win-content {
padding: 20px;
margin: 0 20px;
font-size: 16px;
}
}

/* 特别处理小屏幕手机 */
@media (max-width: 480px) {
#game-area {
background-size: contain; /* 保持图片比例 */
background-position: center center;
}

.game-controls {
padding: 5px;
}

.control-item {
padding: 6px 10px;
font-size: 12px;
}

.cat {
width: 40px;
height: 40px;
}
}

/* 处理横屏模式 */
@media (orientation: landscape) and (max-width: 768px) {
#game-area {
height: calc(100vh - 50px);
background-size: contain;
}

.game-controls {
height: 50px;
padding: 5px;
}
}

/* 修改胜利消息的样式 */
#win-message {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}

.win-content {
background: rgba(255, 255, 255, 0.95);
padding: 30px 50px;
border-radius: 15px;
text-align: center;
font-size: 24px;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
max-width: 80%;
margin: 20px;
}

/* 移动端的胜利消息样式 */
@media (max-width: 768px) {
.win-content {
padding: 20px;
font-size: 18px;
max-width: 90%;
}
}

/* 确保胜利消息在显示时正确显示 */
#win-message.show {
display: flex !important;
}

0 comments on commit 03dd164

Please sign in to comment.