#134 【Vue.js】簡易的なクリックゲームを作成してみた

Posted at 2025-10-21

はじめに

今回は、Vue.jsを使って簡単なクリックゲームを作成してみました。
制限時間内に画像をクリックした回数を数える機能とクリック時に画面でアクションが起きるようにしています。

作ってみる

環境

今回は以下のPlayground環境を使って作成しました。
https://playcode.io/

準備

必要なファイルを用意します。

index.html : HTMLファイル
style.css : CSSファイル
app.js : ロジック用のJavaScriptファイル
neko.png : クリックしたい画像ファイル
nyao.mp3 : クリックしたときに流したい音声ファイル

今回は猫の画像をクリックするたびににゃーんと鳴かせたいので、「neko.png」「nyao.mp3」というファイルを使用しますが、各々使用するファイルに合った命名をし、コードに出現するファイル名やファイルの説明なども併せて修正してください。

ファイルの内容を書き換える

index.html

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>クリックゲーム</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <h1>クリックするゲーム</h1>
        <p v-if="!gameStarted">たくさんクリックしてね</p>
        <button v-if="!gameStarted" @click="startGame">スタート</button>
        <p v-else>残り時間: {{ remainingTime }}秒</p>
        <p>クリックした回数: {{ clicksNumber }}</p>
        <img v-if="gameStarted" src="neko.png" alt="猫の画像" @click="handleClick" class="target_img">
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

jsx

const { createApp } = Vue;

createApp({
    data() {
        return {
            clicksNumber: 0,  // クリックした回数
            remainingTime: 10,  // 残り時間
            gameStarted: false,  // ゲームが開始されたか
            timer: null,  // タイマー
            sound: new Audio('nyao.mp3') // 音声ファイルのパス
        };
    },
    methods: {
        startGame() {
            this.clicksNumber = 0;
            this.remainingTime = 10;
            this.gameStarted = true;
            // setIntervalを使って、1000ミリ秒（1秒）ごとに処理を繰り返す
            this.timer = setInterval(() => {
                // 残り時間を1秒減らす
                this.remainingTime--;
                if (this.remainingTime <= 0) {
                    this.endGame();
                }
            }, 1000);
        },
        handleClick() {
            if (this.gameStarted) {
                this.clicksNumber++;
                this.sound.play(); // 音声を再生

                // 画像の大きさを縮小する
                const image = document.querySelector('.target_img');
                image.style.transform = 'scale(0.9)';
                setTimeout(() => {
                    // 100ミリ秒（0.1秒）秒後に画像の大きさを元に戻す
                    image.style.transform = 'scale(1)';
                }, 100);
            }
        },
        endGame() {
            clearInterval(this.timer);
            this.gameStarted = false;
        }
    }
}).mount("#app");

説明

< data() の中身 >

clicksNumber: クリックした回数をカウントする
remainingTime: 表示用の残り時間をカウントする
gameStarted: ゲームが開始されたか
timer: setInterval が返すタイマーのIDを保持、clearIntervalで終了する
sound: 音声ファイルを読み込み

< 関数 >

startGame() : ゲーム開始時に呼び出し、残り時間を10秒に設定し、タイマーをスタートする。
handleClick() : 画像をクリックした時に呼び出し、「クリックした回数」のカウントを増やして、音声を再生。画像の大きさをクリック時に縮小し元に戻す。
endGame() : 残り時間が0になった時に呼び出し、タイマーを停止してゲームを終了する。

参考：https://www.sejuku.net/blog/24425

style.css

body {
    text-align: center;
    margin: 50px;
}

button {
    font-size: 18px;
    padding: 15px;
    cursor: pointer;
}

.target_img {
    width: 200px;
    cursor: grab;
}