bogoreh/Project: Word game.html

helenach1n · 2025-12-06T11:56:39Z

<title>單字配對遊戲</title> <style> body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f0f2f5; }

    h1 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
    }
    
    .stats {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .stat {
        text-align: center;
    }
    
    .stat span {
        font-size: 24px;
        font-weight: bold;
        color: #2c3e50;
    }
    
    .game-area {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-bottom: 30px;
    }
    
    .card {
        background: white;
        border: 2px solid #ddd;
        border-radius: 6px;
        padding: 20px 10px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .card.selected {
        border-color: #3498db;
        background-color: #e3f2fd;
    }
    
    .card.matched {
        border-color: #2ecc71;
        background-color: #e8f5e9;
        cursor: default;
    }
    
    .controls {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    
    button {
        padding: 12px 25px;
        border: none;
        border-radius: 6px;
        background: #3498db;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    button:hover {
        background: #2980b9;
    }
    
    button#shuffleBtn {
        background: #9b59b6;
    }
    
    button#shuffleBtn:hover {
        background: #8e44ad;
    }
    
    button#resetBtn {
        background: #e74c3c;
    }
    
    button#resetBtn:hover {
        background: #c0392b;
    }
    
    .message {
        text-align: center;
        margin: 15px 0;
        padding: 10px;
        border-radius: 6px;
        display: none;
    }
    
    .message.success {
        background: #d4edda;
        color: #155724;
        display: block;
    }
    
    .message.error {
        background: #f8d7da;
        color: #721c24;
        display: block;
    }
    
    .timer {
        font-weight: bold;
        color: #e74c3c;
    }
</style>

英文單字配對遊戲

<div class="stats">
    <div class="stat">
        <div>得分</div>
        <span id="score">0</span>
    </div>
    <div class="stat">
        <div>已配對</div>
        <span id="matched">0</span>/<span id="total">45</span>
    </div>
    <div class="stat">
        <div>時間</div>
        <span class="timer" id="timer">00:00</span>
    </div>
</div>

<div class="game-area" id="gameArea">
    <!-- 卡片會在這裡生成 -->
</div>

<div class="controls">
    <button id="resetBtn">重新開始</button>
    <button id="shuffleBtn">重新打亂</button>
</div>

<div class="message" id="message"></div>

<script>
    // 遊戲資料 - 包含所有生字
    const words = [
        // 第一組
        { word: "regenerate", definition: "To grow again; to restore to a former state" },
        { word: "temper", definition: "To make less intense; to moderate" },
        { word: "unsustainable", definition: "Not able to be maintained at the current rate or level" },
        { word: "overpopulation", definition: "An excessive number of people/animals in a particular area" },
        { word: "overconsumption", definition: "Excessive use or purchase of goods/services" },
        
        // 第二組
        { word: "sociopolitical", definition: "Relating to the combination of social and political factors" },
        { word: "unrest", definition: "A state of dissatisfaction and disturbance, especially in politics" },
        { word: "increment", definition: "An increase in amount, value, or number" },
        { word: "non-renewable", definition: "Cannot be replaced or replenished naturally" },
        { word: "mortality", definition: "The rate of death in a particular group" },
        
        // 第三組
        { word: "underutilized", definition: "Not used to its full potential" },
        { word: "lifespan", definition: "The length of time a living thing lives" },
        { word: "norm", definition: "A standard or pattern that is typical" },
        { word: "misconception", definition: "A wrong idea or belief" },
        { word: "adverse", definition: "Harmful; unfavorable" },
        
        // 第四組
        { word: "ripple effect", definition: "A series of indirect effects caused by an action" },
        { word: "fertility", definition: "The ability to produce offspring" },
        { word: "mitigate", definition: "To make less severe or intense" },
        { word: "strain", definition: "Force that stretches/twists; to stretch/twist forcefully" },
        { word: "degradation", definition: "The process of becoming worse in quality or condition" },
        
        // 第五組
        { word: "pandemic", definition: "A disease that spreads over a whole country or the world" },
        { word: "alleviate", definition: "To make pain/suffering less severe" },
        { word: "family planning", definition: "Controlling the number/timing of children via contraception/education" },
        { word: "contraceptive", definition: "A device/drug to prevent pregnancy; relating to birth control" },
        { word: "sue", definition: "To take legal action against someone" },
        
        // 第六組
        { word: "authority", definition: "Power to make decisions; the people/organizations in charge" },
        { word: "discriminate", definition: "To treat someone unfairly based on group; favor one group over another" },
        { word: "allege", definition: "To claim something without proof" },
        { word: "allegedly", definition: "Used to say something is claimed but not proven" },
        { word: "prospect", definition: "A hope/expectation; a likely future event/opportunity" },
        
        // 第七組
        { word: "par", definition: "Equal status/value" },
        { word: "on a par with", definition: "Having the same level of importance/quality" },
        { word: "counterpart", definition: "A person/thing that has the same function as another in a different place" },
        { word: "gender", definition: "The state of being male or female" },
        { word: "discrimination", definition: "Unfair treatment of a group based on race/gender etc." },
        
        // 第八組
        { word: "workplace", definition: "A place where people work" },
        { word: "obstacle", definition: "Something that blocks progress" },
        { word: "glass ceiling", definition: "An unacknowledged discriminatory barrier preventing women/minorities from top positions" },
        { word: "old-boy network", definition: "A network of former male classmates/colleagues that helps each other" },
        { word: "old boy/girl", definition: "A former student of a school" },
        
        // 第九組
        { word: "chauvinist", definition: "A person with excessive loyalty to their group; relating to chauvinism" },
        { word: "chauvinism", definition: "Excessive and unreasonable loyalty to one's group" },
        { word: "insecurity", definition: "A feeling of being unsafe or uncertain" },
        { word: "women's movement", definition: "A grassroots movement for women's liberation" },
        { word: "menial", definition: "Requiring little skill and considered low-status" },
        
        // 第十組
        { word: "feminist", definition: "A person who supports feminism" },
        { word: "feminism", definition: "The belief that women should have equal rights to men" },
        { word: "sexism", definition: "Discrimination based on gender" },
        { word: "sexist", definition: "A person who is sexist; relating to sexism" },
        { word: "positive discrimination", definition: "Policies favouring disadvantaged groups" },
        
        // 最後五個
        { word: "job-sharing", definition: "Two part-time employees do one full-time job and share pay" },
        { word: "parity", definition: "Equality, especially in pay" },
        { word: "disparity", definition: "A great difference between two things" }
    ];

    // 遊戲狀態
    let selectedCards = [];
    let matchedPairs = 0;
    let score = 0;
    let time = 0;
    let timerInterval;
    let totalPairs = words.length;

    // DOM 元素
    const gameArea = document.getElementById('gameArea');
    const scoreElement = document.getElementById('score');
    const matchedElement = document.getElementById('matched');
    const totalElement = document.getElementById('total');
    const timerElement = document.getElementById('timer');
    const messageElement = document.getElementById('message');
    const resetBtn = document.getElementById('resetBtn');
    const shuffleBtn = document.getElementById('shuffleBtn');

    // 初始化遊戲
    function initGame() {
        // 重置狀態
        selectedCards = [];
        matchedPairs = 0;
        score = 0;
        time = 0;
        
        // 更新顯示
        updateScore();
        totalElement.textContent = totalPairs;
        
        // 清空前計時器
        clearInterval(timerInterval);
        
        // 開始計時
        timerInterval = setInterval(() => {
            time++;
            updateTimer();
        }, 1000);
        
        // 清空訊息
        hideMessage();
        
        // 清空遊戲區域
        gameArea.innerHTML = '';
        
        // 創建卡片
        createCards();
    }

    // 創建卡片
    function createCards() {
        // 創建單字卡片和定義卡片
        let allCards = [];
        
        words.forEach(item => {
            // 單字卡片
            allCards.push({
                type: 'word',
                content: item.word,
                match: item.definition,
                id: 'word_' + item.word
            });
            
            // 定義卡片
            allCards.push({
                type: 'definition',
                content: item.definition,
                match: item.word,
                id: 'def_' + item.word
            });
        });
        
        // 隨機打亂卡片順序
        allCards = shuffleArray(allCards);
        
        // 生成卡片元素
        allCards.forEach(card => {
            const cardElement = document.createElement('div');
            cardElement.className = 'card';
            cardElement.textContent = card.content;
            cardElement.dataset.type = card.type;
            cardElement.dataset.content = card.content;
            cardElement.dataset.match = card.match;
            cardElement.dataset.id = card.id;
            
            cardElement.addEventListener('click', () => selectCard(cardElement));
            gameArea.appendChild(cardElement);
        });
    }

    // 選擇卡片
    function selectCard(card) {
        // 如果卡片已經配對，則不能選擇
        if (card.classList.contains('matched')) return;
        
        // 如果已經選擇了兩張卡片，則不能選擇更多
        if (selectedCards.length >= 2) return;
        
        // 如果卡片已經被選擇，則取消選擇
        if (selectedCards.includes(card)) {
            card.classList.remove('selected');
            selectedCards = selectedCards.filter(c => c !== card);
            return;
        }
        
        // 選擇卡片
        card.classList.add('selected');
        selectedCards.push(card);
        
        // 如果選擇了兩張卡片，檢查是否匹配
        if (selectedCards.length === 2) {
            setTimeout(checkMatch, 500);
        }
    }

    // 檢查匹配
    function checkMatch() {
        if (selectedCards.length !== 2) return;
        
        const card1 = selectedCards[0];
        const card2 = selectedCards[1];
        
        const type1 = card1.dataset.type;
        const type2 = card2.dataset.type;
        const content1 = card1.dataset.content;
        const content2 = card2.dataset.content;
        const match1 = card1.dataset.match;
        const match2 = card2.dataset.match;
        
        // 檢查是否匹配
        const isMatch = (type1 !== type2) && (
            (type1 === 'word' && content2 === match1) ||
            (type2 === 'word' && content1 === match2)
        );
        
        if (isMatch) {
            // 匹配成功
            card1.classList.remove('selected');
            card1.classList.add('matched');
            card2.classList.remove('selected');
            card2.classList.add('matched');
            
            // 更新分數
            matchedPairs++;
            score += 10;
            updateScore();
            
            // 顯示成功訊息
            showMessage(`✓ 配對成功！ (${matchedPairs}/${totalPairs})`, 'success');
            
            // 檢查遊戲是否完成
            if (matchedPairs === totalPairs) {
                endGame();
            }
        } else {
            // 匹配失敗
            card1.classList.add('selected');
            card2.classList.add('selected');
            
            // 顯示錯誤訊息
            showMessage('✗ 配對錯誤，請再試一次', 'error');
            
            // 扣分
            if (score > 0) {
                score -= 2;
                updateScore();
            }
            
            // 0.8秒後取消選擇
            setTimeout(() => {
                card1.classList.remove('selected');
                card2.classList.remove('selected');
                selectedCards = [];
            }, 800);
        }
        
        // 重置選擇
        selectedCards = [];
    }

    // 重新打亂卡片
    function shuffleCards() {
        const unmatchedCards = Array.from(document.querySelectorAll('.card:not(.matched)'));
        const shuffled = shuffleArray(unmatchedCards);
        
        // 重新排列卡片
        shuffled.forEach(card => {
            gameArea.appendChild(card);
        });
        
        showMessage('卡片已重新打亂！', 'success');
    }

    // 更新分數
    function updateScore() {
        scoreElement.textContent = score;
        matchedElement.textContent = matchedPairs;
    }

    // 更新計時器
    function updateTimer() {
        const minutes = Math.floor(time / 60);
        const seconds = time % 60;
        timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    // 顯示訊息
    function showMessage(text, type) {
        messageElement.textContent = text;
        messageElement.className = `message ${type}`;
    }

    // 隱藏訊息
    function hideMessage() {
        messageElement.className = 'message';
    }

    // 結束遊戲
    function endGame() {
        clearInterval(timerInterval);
        showMessage(`🎉 恭喜完成遊戲！ 用時: ${timerElement.textContent}，得分: ${score}分`, 'success');
    }

    // 工具函數：打亂數組
    function shuffleArray(array) {
        const newArray = [...array];
        for (let i = newArray.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
        }
        return newArray;
    }

    // 事件監聽器
    resetBtn.addEventListener('click', initGame);
    shuffleBtn.addEventListener('click', shuffleCards);

    // 初始化遊戲
    window.onload = initGame;
</script>

yusifisayec36-pixel · 2026-01-17T21:07:46Z

He

yusifisayec36-pixel · 2026-01-17T21:08:04Z

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Project: Word game </title>
	<style>
	body {
	font-family: Arial, sans-serif;
	}
	form {
	font-size: 1.5em;
	}
	.scrambled, input, button {
	font-family: monospace;
	font-size: 2em;
	}

	</style>
	</head>
	<body>

	<h1>Word game!</h1>
	<form id="joke-form">
	<label>
	Unscramble these letters to form a word:<Br>
	<span class="scrambled">REYJUQ</span>
	<br>
	<input type="text" size="10">
	</label>
	<button type="submit">Check</button>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	//add instruction for user
	$("<p>")
	.appendTo("h1")
	.css("font-size", "15" + "px")
	.text("Please use all caps.");
	// add element for result
	$("<p>")
	.addClass("result")
	.appendTo("body");
	// when the user submits the form,
	$("#joke-form").on("submit", function(event) {
	event.preventDefault();
	var $sub = $(this).find("[type=text]");
	var answer = $sub.val();
	// check that their answer is correct
	if (answer === "JQUERY") {
	// and show them appropriate message
	$(".result")
	.css("color", "blue")
	.css("text-align", "center")
	.text("You Win!");
	var but = $("<button>")
	.addClass("next")
	.attr("type", "reset")
	.css("margin", "10" + "px")
	.text("Next")
	.appendTo(".result");
	} else {
	$(".result")
	.css("color", "red")
	.css("text-align", "center")
	.text("Try Again!");
	}
	$(".result").on("click", function(event) {
	event.preventDefault();
	console.log("buttonworks");
	$('input[type="text"]').val("");
	// RAASTCPIJV JAVASCRIPT
	$(".scrambled").text("RAASTCPIJV");
	$("#joke-form").on("submit", function(event) {
	event.preventDefault();
	var $sub = $(this).find("[type=text]");
	var answer = $sub.val();
	// check that their answer is correct
	if (answer === "JAVASCRIPT") {
	// and show them appropriate message
	$(".result")
	.css("color", "blue")
	.css("text-align", "center")
	.text("You Win!");
	var but = $("<button>")
	.addClass("next")
	.attr("type", "reset")
	.css("margin", "10" + "px")
	.text("Reset")
	.insertAfter("button[type=submit]");
	$(".next").on("click", function() {
	$(".result").text("Reload to play again!");
	});
	} else {
	$(".result")
	.css("color", "red")
	.css("text-align", "center")
	.text("Try Again!");
	}
	});
	});
	});

	</script>
	</body>
	</html>

bogoreh/Project: Word game.html

Select an option

No results found

Select an option

No results found

helenach1n commented Dec 6, 2025

Uh oh!

yusifisayec36-pixel commented Jan 17, 2026

Uh oh!

yusifisayec36-pixel commented Jan 17, 2026

Uh oh!