Skip to content

Commit

Permalink
改變選擇難度與結束提醒的機能
Browse files Browse the repository at this point in the history 
Co-Authored-By: 影凌 <[email protected]>
  • Loading branch information
@RRAaru @KageRyo
RRAaru and KageRyo committed Apr 12, 2023
1 parent 6d44eb1 commit b25db20
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 37 deletions.
64 changes: 32 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<h1>記憶力翻牌小遊戲</h1>
</div>
<!-- 難度選擇-->
<div class="ts-wrap is-center-aligned">
<div class="ts-wrap is-center-aligned" style="font-family: Pixel;">
<div class="ts-wrap">
<button class="ts-button is-large" id="easy">簡單</button>
<button class="ts-button is-large" id="normal">普通</button>
Expand All @@ -31,169 +31,169 @@ <h1>記憶力翻牌小遊戲</h1>
<!-- 卡片 -->
<div class="div">
<section class="memory-game-normal" id="difficulty" >
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/001.gif" alt="card01" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/001.gif" alt="card01" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/002.gif" alt="card02" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/002.gif" alt="card02" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/003.gif" alt="card03" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/003.gif" alt="card03" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/004.gif" alt="card04" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/004.gif" alt="card04" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/005.gif" alt="card05" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/005.gif" alt="card05" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/006.gif" alt="card06" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/006.gif" alt="card06" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/007.gif" alt="card07" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/007.gif" alt="card07" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/008.gif" alt="card08" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/008.gif" alt="card08" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/009.gif" alt="card09" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/009.gif" alt="card09" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/010.gif" alt="card10" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/010.gif" alt="card10" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/011.gif" alt="card11" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/011.gif" alt="card11" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/012.gif" alt="card12" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/012.gif" alt="card12" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/013.gif" alt="card13" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/013.gif" alt="card13" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/014.gif" alt="card14" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<div class="show">
<div class="none">
<div class="memory-card" >
<img class="front-face" src="img/014.gif" alt="card14" />
<img class="back-face" src="img/card.png" alt="Memory Card" />
Expand Down Expand Up @@ -271,12 +271,12 @@ <h1>記憶力翻牌小遊戲</h1>
<img class="back-face" src="img/card.png" alt="Memory Card" />
</div>
</div>
<a class="none" id="end">已破關</a>
<a class="text" id="end">選擇難度</a>
</section>
</div>
<!-- 重置和偷看 -->
<div class="ts-wrap is-center-aligned">
<div class="ts-wrap">
<div class="none" id="reset_look">
<div class="ts-wrap" style="font-family: Pixel;">
<button class="ts-button is-large" id="reset">重置</button>
<div>
<button class="ts-button is-large" id="look">偷看</button>
Expand Down
14 changes: 9 additions & 5 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,15 @@ const reset = document.getElementById('reset');
// 偷看
const look = document.getElementById('look');
const end = document.querySelector("#end");
const resetEndlook =document.querySelector("#reset_look");

// 初始設定
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let cardNum = 28;
let mathedCard = 0;
let gamemode=2;
// 洗牌
shuffle();
alert("歡迎遊玩，預設為普通模式。");
let gamemode=0;

function flipCard() {
// 翻牌
Expand Down Expand Up @@ -56,6 +54,7 @@ function disableCards() {
setTimeout(() => {
const hide = document.querySelectorAll('.hide');
hide.forEach(card => card.classList='none');
end.innerHTML="已過關"
end.classList="text"
// 破關後重置遊戲
// resetGame();
Expand Down Expand Up @@ -94,14 +93,16 @@ function resetCard(){
}

function difficultyChoose() {
if(gamemode===0){resetEndlook.classList="ts-wrap is-center-aligned";}
// 難易度選擇
if(this.id === 'easy') {
if(gamemode!=1){
gamemode=1;
document.querySelector("#difficulty").classList="memory-game-easy";
cardNum = 16;
mathedCard = 0;
resetCard();
alert("切換為簡單模式。");
alert("切換為簡單模式。");
}else{
alert("已經是簡單模式了。");
}
Expand All @@ -110,6 +111,7 @@ function difficultyChoose() {
gamemode=2;
document.querySelector("#difficulty").classList="memory-game-normal";
cardNum = 28;
mathedCard = 0;
resetCard();
alert("切換為普通模式。");
}else{
Expand All @@ -120,6 +122,7 @@ function difficultyChoose() {
gamemode=3;
document.querySelector("#difficulty").classList="memory-game-hard";
cardNum = 40;
mathedCard = 0;
resetCard();
alert("切換為困難模式。");
}else{
Expand All @@ -146,6 +149,7 @@ function lookCard() {
function resetGame() {
// 重置遊戲
alert("重置遊戲。");
mathedCard = 0;
resetCard();
shuffle();
}
Expand Down

0 comments on commit b25db20

Please sign in to comment.