Newer
Older
2024-nobuki / game2.js
const gameArea = document.getElementById('gameArea');
const shrinkBtn = document.getElementById('shrinkButton');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timeLeft');
const startButton = document.getElementById('startButton');

let currentSize = 100;
let score = 0;
let timeLeft = 30;
let gameInterval;
let isGameRunning = false;
let gameAreaRect;

function startGame() {
    if (isGameRunning) return;
    
    isGameRunning = true;
    score = 0;
    timeLeft = 30;
    currentSize = 100;
    
    gameAreaRect = gameArea.getBoundingClientRect();
    
    updateDisplay();
    updateButtonPosition();
    shrinkBtn.style.display = 'block';
    startButton.disabled = true;

    gameInterval = setInterval(() => {
        timeLeft--;
        updateDisplay();
        if (timeLeft <= 0) {
            endGame();
        }
    }, 1000);
}

function endGame() {
    clearInterval(gameInterval);
    isGameRunning = false;
    shrinkBtn.style.display = 'none';
    startButton.disabled = false;
    alert(`ゲーム終了!最終スコア: ${score}`);
}

function updateDisplay() {
    scoreDisplay.textContent = score;
    timerDisplay.textContent = timeLeft;
}

function updateButtonPosition() {
    const buttonRect = shrinkBtn.getBoundingClientRect();
    const maxX = gameAreaRect.width - buttonRect.width;
    const maxY = gameAreaRect.height - buttonRect.height;
    
    let newX = Math.random() * maxX;
    let newY = Math.random() * maxY;
    
    newX = Math.max(0, Math.min(newX, maxX));
    newY = Math.max(0, Math.min(newY, maxY));
    
    shrinkBtn.style.left = `${newX}px`;
    shrinkBtn.style.top = `${newY}px`;
}

function shrinkButtonSize() {
    if (currentSize > 10) {
        currentSize -= 5;
        shrinkBtn.style.transform = `scale(${currentSize / 100})`;
    } else {
        currentSize = 100;
        shrinkBtn.style.transform = 'scale(1)';
    }
}

function resetScore() {
    score = 0;
    updateDisplay();
    // 視覚的フィードバック
    gameArea.style.backgroundColor = '#ffcccc';
    setTimeout(() => {
        gameArea.style.backgroundColor = '';
    }, 200);
}

shrinkBtn.addEventListener('click', function(event) {
    event.stopPropagation();
    if (!isGameRunning) return;
    
    shrinkButtonSize();
    updateButtonPosition();
    
    score++;
    updateDisplay();
});

gameArea.addEventListener('click', function(event) {
    if (!isGameRunning) return;
    if (event.target === shrinkBtn) return; // ボタンクリック時は何もしない
    
    resetScore();
    updateButtonPosition();
});

startButton.addEventListener('click', startGame);

// 初期状態でボタンを非表示にする
shrinkBtn.style.display = 'none';