<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>圣经金句记忆闯关游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #000033;
color: #FFE4B5; /* 淡橙色前景色 */
}
.game-container {
width: 80%;
margin: 50px auto;
background-color: #222;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.welcome-screen {
display: block;
margin-bottom: 20px;
}
.welcome-screen h1 {
font-size: 36px;
}
.start-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #0099ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.start-button:active::after {
content: “”;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
animation: ripple 1s ease-out;
}
@keyframes ripple {
to {
width: 200px;
height: 200px;
opacity: 0;
}
}
.start-button:hover {
background-color: #0077e6;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.level {
margin-bottom: 20px;
}
.level h2 {
font-size: 24px;
}
.word-blocks {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.word-block {
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
background-color: #333;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.word-block:active {
background-color: #222;
}
.word-block:hover {
background-color: #444;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.correct-answer {
display: none;
margin-top: 20px;
font-size: 18px;
}
.congratulations {
display: none;
font-size: 72px;
color: red;
font-family: Arial, sans-serif;
font-weight: bold;
margin-top: 50px;
}
.gold-cup {
display: none;
font-size: 100px;
margin: 20px auto;
}
.selected {
background-color: #555;
}
.correct {
background-color: green;
}
.incorrect {
background-color: red;
}
.flash {
animation: flash 1s linear infinite;
}
.big-x {
font-size: 100px;
color: red;
display: none;
margin-top: 20px;
}
@keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.coins-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
pointer-events: none;
}
.coin {
position: absolute;
font-size: 30px;
animation: tossAndFall 3s ease-out forwards, fadeOut 3s ease-out forwards; /* 修改动画名称 */
}
@keyframes tossAndFall {
0% {
top: 10%; /* 从上方10%位置开始抛洒 */
transform: translateY(-50%) translateX(calc((Math.random() – 0.5) * 200px)); /* 随机横向偏移模拟抛洒 */
}
50% {
top: 40%; /* 先上升到40%位置 */
}
100% {
top: calc(75% – 30px); /* 最终下落到75%位置消失 */
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fireworks-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
pointer-events: none;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
animation: firework 3s ease-out;
}
@keyframes firework {
0% {
transform: translateY(0);
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(-100px) scale(0);
opacity: 0;
}
}
.restart-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: block;
margin-left: auto;
margin-right: auto; /* 重新挑战按钮居中显示 */
}
.restart-button:hover {
background-color: #e60000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class=”game-container”>
<div class=”welcome-screen”>
<h1 id=”welcome-message”></h1>
<button class=”start-button” id=”start-button”>挑战开始</button>
</div>
<div id=”game”></div>
<div class=”congratulations”>恭喜挑战成功</div>
<div class=”gold-cup” id=”gold-cup”></div>
<button class=”restart-button” id=”restart-button” style=”display: none;”>重新挑战</button>
</div>
<div class=”coins-container” id=”coins-container”></div>
<div class=”fireworks-container” id=”fireworks-container”></div>
<script>
const gameContainer = document.getElementById(‘game’);
const welcomeMessage = document.getElementById(‘welcome-message’);
const startButton = document.getElementById(‘start-button’);
const data = `
【创1:3】 神说：“要有光”，就有了光。
【创1:4】神看光是好的，就把光暗分开了。
【创1:5】神称光为昼，称暗为夜。有晚上，有早晨，这是头一日。
`;
const lines = data.trim().split(‘\n’).map(line => line.trim()).filter(line => line);
let currentLevel = 0;
let correctAnswer;
let selectedBlocks = [];
let originalBlocks = [];
welcomeMessage.textContent = `欢迎开始圣经金句挑战之旅，本次共有关卡 ${lines.length} 关，准备好了吗？`;
startButton.addEventListener(‘click’, () => {
const welcomeScreen = document.querySelector(‘.welcome-screen’);
welcomeScreen.style.display = ‘none’;
createLevel();
});
function createLevel() {
const level = document.createElement(‘div’);
level.classList.add(‘level’);
level.id = `level-${currentLevel}`;
const levelTitle = document.createElement(‘h2’);
const match = lines[currentLevel].match(/【.*?】/);
levelTitle.textContent = `第 ${currentLevel + 1} 关 ${match? match[0] : ”}`;
level.appendChild(levelTitle);
const wordBlocks = document.createElement(‘div’);
wordBlocks.classList.add(‘word-blocks’);
const text = lines[currentLevel].replace(/【.*?】/, ”).trim();
const splitText = text.split(/[\p{P}\s]+/u).filter(word => word);
correctAnswer = splitText.join(‘ ‘);
originalBlocks = splitText.map(word => {
const block = document.createElement(‘div’);
block.classList.add(‘word-block’);
block.textContent = word;
block.addEventListener(‘touchstart’, function (e) {
e.preventDefault();
handleClick(block);
});
block.addEventListener(‘click’, function () {
handleClick(block);
});
return block;
});
const shuffledBlocks = shuffleArray([…originalBlocks]);
shuffledBlocks.forEach(block => wordBlocks.appendChild(block));
level.appendChild(wordBlocks);
const correctAnswerDiv = document.createElement(‘div’);
correctAnswerDiv.classList.add(‘correct-answer’);
correctAnswerDiv.textContent = `本关卡正确内容：${correctAnswer}`;
level.appendChild(correctAnswerDiv);
gameContainer.appendChild(level);
}
function shuffleArray(array) {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function handleClick(block) {
if (!block.classList.contains(‘correct’) &&!block.classList.contains(‘incorrect’)) {
if (block.classList.contains(‘selected’)) {
block.classList.remove(‘selected’);
selectedBlocks = selectedBlocks.filter(b => b!== block);
} else {
block.classList.add(‘selected’);
selectedBlocks.push(block);
}
}
const isLastBlock = selectedBlocks.length === correctAnswer.split(‘ ‘).length;
if (isLastBlock) {
const selectedText = selectedBlocks.map(b => b.textContent).join(‘ ‘);
if (selectedText === correctAnswer) {
selectedBlocks.forEach(b => {
b.classList.add(‘correct’);
b.style.backgroundColor = ‘green’;
});
const correctAnswerDiv = document.getElementById(`level-${currentLevel}`).querySelector(‘.correct-answer’);
correctAnswerDiv.style.display = ‘block’;
correctAnswerDiv.classList.add(‘flash’);
setTimeout(() => {
selectedBlocks.forEach(b => {
b.classList.remove(‘correct’);
b.classList.remove(‘selected’);
b.style.backgroundColor = ”;
});
correctAnswerDiv.classList.remove(‘flash’);
correctAnswerDiv.style.display = ‘none’;
if (currentLevel < lines.length – 1) {
showCoinsEffect();
} else {
showFireworksEffect();
showCongratulationsPage();
}
}, 2000);
} else {
selectedBlocks.forEach(b => {
b.classList.add(‘incorrect’);
b.style.backgroundColor =’red’;
});
const bigX = document.createElement(‘div’);
bigX.classList.add(‘big-x’);
bigX.textContent = ‘X’;
const levelDiv = document.getElementById(`level-${currentLevel}`);
levelDiv.appendChild(bigX);
bigX.style.display = ‘block’;
setTimeout(() => {
selectedBlocks.forEach(b => {
b.classList.remove(‘incorrect’);
b.classList.remove(‘selected’);
b.style.backgroundColor = ”;
});
bigX.style.display = ‘none’;
levelDiv.removeChild(bigX);
restartLevel();
}, 1000);
}
}
}
function showCoinsEffect() {
const coinsContainer = document.getElementById(‘coins-container’);
coinsContainer.innerHTML = ”;
const numCoins = Math.floor(Math.random() * (7 – 3 + 1)) + 3; // 金币数量在3到7之间随机
for (let i = 0; i < numCoins; i++) {
const coin = document.createElement(‘span’);
coin.classList.add(‘coin’);
coin.textContent = ‘💰’;
const left = Math.random() * window.innerWidth;
const startDelay = Math.random() * 2000; // 每个金币抛洒时间在两秒内随机
setTimeout(() => {
coin.style.left = left + ‘px’;
coin.style.top = ‘10%’;
coinsContainer.appendChild(coin);
}, startDelay);
}
setTimeout(() => {
nextLevel();
}, 3000);
}
function showFireworksEffect() {
const fireworksContainer = document.getElementById(‘fireworks-container’);
fireworksContainer.innerHTML = ”;
const numFireworks = 50;
for (let i = 0; i < numFireworks; i++) {
const firework = document.createElement(‘div’);
firework.classList.add(‘firework’);
firework.style.backgroundColor = getRandomColor();
const left = Math.random() * window.innerWidth;
const top = Math.random() * window.innerHeight;
firework.style.left = left + ‘px’;
firework.style.top = top + ‘px’;
fireworksContainer.appendChild(firework);
}
}
function showCongratulationsPage() {
const congratulations = document.querySelector(‘.congratulations’);
const goldCup = document.getElementById(‘gold-cup’);
const restartButton = document.getElementById(‘restart-button’);
const currentLevelDiv = document.getElementById(`level-${currentLevel}`);
currentLevelDiv.style.display = ‘none’;
congratulations.style.display = ‘block’;
goldCup.style.display = ‘block’;
goldCup.textContent = ‘🏆’;
restartButton.style.display = ‘block’;
restartButton.addEventListener(‘click’, () => {
location.reload();
});
}
function nextLevel() {
currentLevel++;
if (currentLevel < lines.length) {
const currentLevelDiv = document.getElementById(`level-${currentLevel – 1}`);
currentLevelDiv.style.display = ‘none’;
createLevel();
selectedBlocks = [];
}
}
function restartLevel() {
const level = document.getElementById(`level-${currentLevel}`);
const wordBlocks = level.querySelector(‘.word-blocks’);
wordBlocks.innerHTML = ”;
originalBlocks.forEach(block => {
block.classList.remove(‘selected’, ‘correct’, ‘incorrect’);
wordBlocks.appendChild(block);
});
const correctAnswerDiv = level.querySelector(‘.correct-answer’);
correctAnswerDiv.style.display = ‘none’;
selectedBlocks = [];
}
function getRandomColor() {
const letters = ‘0123456789ABCDEF’;
let color = ‘#’;
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>