เกมพิชิตตัวเชื่อมตรรกศาสตร์
by StealthStar23655 lines14.5 KB
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมพิชิตตัวเชื่อมตรรกศาสตร์</title>
<style>
* {
box-sizing: border-box;
font-family: "Arial", "Tahoma", sans-serif;
}
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(135deg, #5b4bdb, #00b4d8);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.game {
width: 100%;
max-width: 700px;
background: white;
border-radius: 25px;
padding: 30px;
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
h1 {
text-align: center;
color: #4935c9;
margin-top: 0;
}
.subtitle {
text-align: center;
color: #666;
margin-bottom: 25px;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: #f2f1ff;
padding: 12px 18px;
border-radius: 15px;
margin-bottom: 20px;
font-weight: bold;
}
.score {
color: #4935c9;
}
.timer {
color: #e63946;
}
.progress {
height: 10px;
background: #e5e5e5;
border-radius: 20px;
overflow: hidden;
margin-bottom: 25px;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #5b4bdb, #00b4d8);
width: 0%;
transition: 0.3s;
}
.question-number {
color: #777;
font-size: 16px;
margin-bottom: 10px;
}
.question {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
color: #222;
margin-bottom: 25px;
}
.answers {
display: grid;
gap: 12px;
}
.answer {
border: 3px solid #ddd;
background: white;
border-radius: 15px;
padding: 15px;
font-size: 18px;
cursor: pointer;
transition: 0.2s;
text-align: left;
}
.answer:hover {
border-color: #5b4bdb;
background: #f5f3ff;
transform: translateY(-2px);
}
.answer.correct {
background: #d8f8df;
border-color: #2a9d4b;
color: #176b2c;
}
.answer.wrong {
background: #ffe0e0;
border-color: #e63946;
color: #a51d2a;
}
.answer.disabled {
cursor: default;
pointer-events: none;
}
.next-btn,
.start-btn,
.restart-btn {
width: 100%;
border: none;
background: linear-gradient(135deg, #5b4bdb, #4935c9);
color: white;
padding: 15px;
border-radius: 15px;
font-size: 19px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
transition: 0.2s;
}
.next-btn:hover,
.start-btn:hover,
.restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(73,53,201,0.3);
}
.feedback {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 15px;
min-height: 30px;
}
.correct-text {
color: #2a9d4b;
}
.wrong-text {
color: #e63946;
}
.start-screen,
.result-screen {
text-align: center;
}
.big-icon {
font-size: 70px;
margin: 10px;
}
.result-score {
font-size: 55px;
font-weight: bold;
color: #4935c9;
margin: 10px;
}
.result-message {
font-size: 22px;
margin: 20px 0;
}
.hidden {
display: none;
}
.rules {
background: #f7f7ff;
border-radius: 15px;
padding: 15px;
margin: 20px 0;
text-align: left;
line-height: 1.8;
}
.operator {
font-size: 28px;
color: #4935c9;
font-weight: bold;
}
</style>
</head>
<body>
<div class="game">
<!-- หน้าเริ่มเกม -->
<div id="startScreen" class="start-screen">
<div class="big-icon">🧠</div>
<h1>พิชิตตัวเชื่อมตรรกศาสตร์</h1>
<p class="subtitle">
เกมทดสอบความรู้เรื่องตัวเชื่อมทางตรรกศาสตร์
</p>
<div class="rules">
<b>🎮 กติกา</b><br>
• มีทั้งหมด 8 ข้อ<br>
• ตอบถูกได้ 1 คะแนน<br>
• แต่ละข้อมีเวลา 15 วินาที<br>
• ตัวเชื่อมที่ใช้: ∧ ∨ → ↔ ¬
</div>
<button class="start-btn" onclick="startGame()">
🚀 เริ่มเกม
</button>
</div>
<!-- หน้าเกม -->
<div id="gameScreen" class="hidden">
<h1>🧠 Logic Challenge</h1>
<div class="top-bar">
<div class="score">
⭐ คะแนน: <span id="score">0</span>
</div>
<div class="timer">
⏱️ <span id="timer">15</span> วินาที
</div>
</div>
<div class="progress">
<div id="progressBar" class="progress-bar"></div>
</div>
<div class="question-number">
ข้อที่ <span id="questionNumber">1</span> / 8
</div>
<div id="question" class="question"></div>
<div id="answers" class="answers"></div>
<div id="feedback" class="feedback"></div>
<button id="nextButton"
class="next-btn hidden"
onclick="nextQuestion()">
ข้อต่อไป ➜
</button>
</div>
<!-- หน้าผลคะแนน -->
<div id="resultScreen" class="result-screen hidden">
<div class="big-icon">🏆</div>
<h1>จบเกม!</h1>
<p>คะแนนของคุณ</p>
<div class="result-score">
<span id="finalScore">0</span> / 8
</div>
<div id="resultMessage" class="result-message"></div>
<button class="restart-btn" onclick="restartGame()">
🔄 เล่นอีกครั้ง
</button>
</div>
</div>
<script>
const questions = [
{
question: "ถ้า p = จริง และ q = จริง แล้ว p ∧ q มีค่าเป็นอะไร?",
answers: [
"จริง",
"เท็จ",
"ขึ้นอยู่กับ p",
"ขึ้นอยู่กับ q"
],
correct: 0
},
{
question: "ข้อใดทำให้ p ∧ q เป็นเท็จ?",
answers: [
"p จริง และ q จริง",
"p จริง และ q เท็จ",
"p เท็จ และ q จริง",
"ถูกทั้งข้อ 2 และข้อ 3"
],
correct: 3
},
{
question: "ถ้า p = เท็จ และ q = เท็จ แล้ว p ∨ q เป็นอะไร?",
answers: [
"จริง",
"เท็จ",
"ทั้งจริงและเท็จ",
"ระบุไม่ได้"
],
correct: 1
},
{
question: "ข้อใดทำให้ p → q เป็นเท็จ?",
answers: [
"p จริง, q จริง",
"p จริง, q เท็จ",
"p เท็จ, q จริง",
"p เท็จ, q เท็จ"
],
correct: 1
},
{
question: "ถ้า 'ถ้าฝนตก แล้วถนนเปียก' โดยฝนตกจริง แต่ถนนไม่เปียก ประพจน์นี้เป็นอะไร?",
answers: [
"จริง",
"เท็จ",
"ไม่สามารถสรุปได้",
"เป็นทั้งจริงและเท็จ"
],
correct: 1
},
{
question: "p ↔ q จะเป็นจริงเมื่อใด?",
answers: [
"p และ q มีค่าความจริงเหมือนกัน",
"p และ q มีค่าความจริงต่างกัน",
"p เป็นจริงเท่านั้น",
"q เป็นจริงเท่านั้น"
],
correct: 0
},
{
question: "ถ้า p = เท็จ และ q = จริง แล้ว p ↔ q มีค่าเท่าใด?",
answers: [
"จริง",
"เท็จ",
"ขึ้นอยู่กับ p",
"ขึ้นอยู่กับ q"
],
correct: 1
},
{
question: "ถ้า p = จริง แล้ว ¬p มีค่าเป็นอะไร?",
answers: [
"จริง",
"เท็จ",
"ทั้งจริงและเท็จ",
"ไม่สามารถระบุได้"
],
correct: 1
}
];
let currentQuestion = 0;
let score = 0;
let timeLeft = 15;
let timerInterval;
let answered = false;
function startGame() {
currentQuestion = 0;
score = 0;
document.getElementById("startScreen")
.classList.add("hidden");
document.getElementById("resultScreen")
.classList.add("hidden");
document.getElementById("gameScreen")
.classList.remove("hidden");
document.getElementById("score").textContent = score;
showQuestion();
}
function showQuestion() {
clearInterval(timerInterval);
answered = false;
timeLeft = 15;
const q = questions[currentQuestion];
document.getElementById("questionNumber")
.textContent = currentQuestion + 1;
document.getElementById("question")
.textContent = q.question;
document.getElementById("timer")
.textContent = timeLeft;
document.getElementById("feedback")
.textContent = "";
document.getElementById("nextButton")
.classList.add("hidden");
const progress =
((currentQuestion) / questions.length) * 100;
document.getElementById("progressBar")
.style.width = progress + "%";
const answersContainer =
document.getElementById("answers");
answersContainer.innerHTML = "";
q.answers.forEach((answer, index) => {
const button = document.createElement("button");
button.className = "answer";
button.textContent =
String.fromCharCode(65 + index) + ". " + answer;
button.onclick = () =>
checkAnswer(index, button);
answersContainer.appendChild(button);
});
startTimer();
}
function startTimer() {
timerInterval = setInterval(() => {
timeLeft--;
document.getElementById("timer")
.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerInterval);
if (!answered) {
answered = true;
showCorrectAnswer();
document.getElementById("feedback").innerHTML =
'<span class="wrong-text">⏰ หมดเวลา!</span>';
document.getElementById("nextButton")
.classList.remove("hidden");
}
}
}, 1000);
}
function checkAnswer(selected, button) {
if (answered) return;
answered = true;
clearInterval(timerInterval);
const correct =
questions[currentQuestion].correct;
const allButtons =
document.querySelectorAll(".answer");
allButtons.forEach(btn =>
btn.classList.add("disabled")
);
if (selected === correct) {
score++;
document.getElementById("score")
.textContent = score;
button.classList.add("correct");
document.getElementById("feedback").innerHTML =
'<span class="correct-text">🎉 ถูกต้อง! +1 คะแนน</span>';
} else {
button.classList.add("wrong");
allButtons[correct]
.classList.add("correct");
document.getElementById("feedback").innerHTML =
'<span class="wrong-text">❌ ยังไม่ถูก ลองจำหลักนี้ไว้นะ!</span>';
}
document.getElementById("nextButton")
.classList.remove("hidden");
}
function showCorrectAnswer() {
const correct =
questions[currentQuestion].correct;
const allButtons =
document.querySelectorAll(".answer");
allButtons.forEach(btn =>
btn.classList.add("disabled")
);
if (allButtons[correct]) {
allButtons[correct]
.classList.add("correct");
}
}
function nextQuestion() {
currentQuestion++;
if (currentQuestion >= questions.length) {
endGame();
} else {
showQuestion();
}
}
function endGame() {
clearInterval(timerInterval);
document.getElementById("gameScreen")
.classList.add("hidden");
document.getElementById("resultScreen")
.classList.remove("hidden");
document.getElementById("finalScore")
.textContent = score;
let message = "";
if (score === 8) {
message =
"🏆 สุดยอด! คุณเป็นเซียนตรรกศาสตร์!";
} else if (score >= 6) {
message =
"🌟 เก่งมาก! เข้าใจตัวเชื่อมตรรกศาสตร์ได้ดี";
} else if (score >= 4) {
message =
"👍 ทำได้ดี! ลองทบทวนอีกนิดแล้วมาเล่นใหม่";
} else {
message =
"📚 ไม่เป็นไร! ทบทวนหลักตัวเชื่อมแล้วลองอีกครั้ง";
}
document.getElementById("resultMessage")
.textContent = message;
}
function restartGame() {
document.getElementById("resultScreen")
.classList.add("hidden");
document.getElementById("startScreen")
.classList.remove("hidden");
}
</script>
</body>
</html>Game Source: เกมพิชิตตัวเชื่อมตรรกศาสตร์
Creator: StealthStar23
Libraries: none
Complexity: complex (655 lines, 14.5 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-stealthstar23" to link back to the original. Then publish at arcadelab.ai/publish.