ChatDev/WareHouse/CatchGoldHTMLGame_THUNLP_202310181636/script.js

// Game Constants
const CANVAS_WIDTH = 800;
const CANVAS_HEIGHT = 600;
const CONTAINER_WIDTH = 100;
const CONTAINER_HEIGHT = 20;
const COIN_RADIUS = 10;
const COIN_SPEED = 3;
const COIN_VALUES = [1, 10, 100];
const GAME_DURATION = 15; // in seconds
// Game Variables
let canvas, ctx;
let containerX, containerY;
let coins = [];
let score = 0;
let gameStarted = false;
let gameTimer;
let gameOverScreen;
let finalScoreElement;
let restartButton;
let countdownElement;
let countdownTimer;
// Initialize the game
function init() {
    canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;
    containerX = CANVAS_WIDTH / 2 - CONTAINER_WIDTH / 2;
    containerY = CANVAS_HEIGHT - CONTAINER_HEIGHT;
    gameOverScreen = document.getElementById("gameOverScreen");
    finalScoreElement = document.getElementById("finalScore");
    restartButton = document.getElementById("restartButton");
    countdownElement = document.createElement("div");
    countdownElement.id = "countdown";
    document.body.appendChild(countdownElement);
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);
    restartButton.addEventListener("click", restartGame);
    startGame();
}
// Start the game
function startGame() {
    gameStarted = true;
    score = 0;
    coins = [];
    countdownTimer = GAME_DURATION;
    gameTimer = setInterval(updateGame, 1000 / 60); // 60 FPS
    countdownElement.innerText = countdownTimer;
    setTimeout(endGame, GAME_DURATION * 1000);
}
// End the game
function endGame() {
    gameStarted = false;
    clearInterval(gameTimer);
    canvas.style.display = "none";
    gameOverScreen.style.display = "block";
    finalScoreElement.innerText = "Final Score: " + score;
}
// Restart the game
function restartGame() {
    canvas.style.display = "block";
    gameOverScreen.style.display = "none";
    init();
}
// Update the game state
function updateGame() {
    clearCanvas();
    updateContainer();
    updateCoins();
    renderContainer();
    renderCoins();
    renderScore();
    updateCountdown();
}
// Clear the canvas
function clearCanvas() {
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}
// Update the container position based on user input
function updateContainer() {
    if (leftKeyPressed && containerX > 0) {
        containerX -= 5;
    }
    if (rightKeyPressed && containerX + CONTAINER_WIDTH < CANVAS_WIDTH) {
        containerX += 5;
    }
}
// Update the coin positions and check for collisions
function updateCoins() {
    for (let i = coins.length - 1; i >= 0; i--) {
        const coin = coins[i];
        coin.y += COIN_SPEED;
        if (coin.y + COIN_RADIUS > containerY && coin.x > containerX && coin.x < containerX + CONTAINER_WIDTH) {
            coins.splice(i, 1);
            score += coin.value;
        }
        if (coin.y + COIN_RADIUS > CANVAS_HEIGHT) {
            coins.splice(i, 1);
        }
    }
    if (Math.random() < 0.02) {
        const coin = {
            x: Math.random() * (CANVAS_WIDTH - COIN_RADIUS * 2) + COIN_RADIUS,
            y: -COIN_RADIUS,
            value: COIN_VALUES[Math.floor(Math.random() * COIN_VALUES.length)]
        };
        coins.push(coin);
    }
}
// Render the container
function renderContainer() {
    ctx.fillStyle = "blue";
    ctx.fillRect(containerX, containerY, CONTAINER_WIDTH, CONTAINER_HEIGHT);
}
// Render the coins
function renderCoins() {
    ctx.fillStyle = "gold";
    for (const coin of coins) {
        ctx.beginPath();
        ctx.arc(coin.x, coin.y, COIN_RADIUS, 0, 2 * Math.PI);
        ctx.fill();
    }
}
// Render the score
function renderScore() {
    ctx.fillStyle = "black";
    ctx.font = "20px Arial";
    ctx.fillText("Score: " + score, 10, 30);
}
// Update the countdown timer
function updateCountdown() {
    countdownTimer -= 1 / 60;
    if (countdownTimer <= 0) {
        countdownTimer = 0;
    }
    countdownElement.innerText = Math.ceil(countdownTimer);
}
// Handle keydown events
let leftKeyPressed = false;
let rightKeyPressed = false;
function handleKeyDown(event) {
    if (event.key === "ArrowLeft") {
        leftKeyPressed = true;
    }
    if (event.key === "ArrowRight") {
        rightKeyPressed = true;
    }
}
// Handle keyup events
function handleKeyUp(event) {
    if (event.key === "ArrowLeft") {
        leftKeyPressed = false;
    }
    if (event.key === "ArrowRight") {
        rightKeyPressed = false;
    }
}
// Start the game when the page is loaded
window.onload = init;