Newer
Older
2024-nobuki / game.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;

function startGame() {
    if (isGameRunning) return;
    
    isGameRunning = true;
    score = 0;
    timeLeft = 30;
    currentSize = 100;
    
    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 maxX = gameArea.clientWidth - shrinkBtn.offsetWidth;
    const maxY = gameArea.clientHeight - shrinkBtn.offsetHeight;
    
    shrinkBtn.style.left = `${Math.random() * maxX}px`;
    shrinkBtn.style.top = `${Math.random() * maxY}px`;
}

function shrinkButtonSize() {
    if (currentSize > 10) {
        currentSize -= 8; // 5%ずつ小さくする
        shrinkBtn.style.transform = `scale(${currentSize / 100})`;
    } else {
        // 最小サイズに達したらリセット
        currentSize = 100;
        shrinkBtn.style.transform = 'scale(1)';
    }
}

shrinkBtn.addEventListener('click', function(event) {
    event.stopPropagation();
    if (!isGameRunning) return;
    
    // ボタンを小さくする
    shrinkButtonSize();
    
    // ボタンの位置を更新
    updateButtonPosition();
    
    score++;
    updateDisplay();
});

gameArea.addEventListener('click', function() {
    if (!isGameRunning) return;
    // ゲームエリアをクリックしても何も起こらないようにする
});

startButton.addEventListener('click', startGame);

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