👩‍💻

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

に公開
JavaScript
Vue.js
tech

はじめに

今回は、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;
}

ゲームを画面の中央に表示する設定、スタートボタンやクリックする画像の大きさの設定などをしています。

今回はcursorでそれぞれ対象をホバーしたときのカーソルの形を指定しました。
button の cursor: pointer; は人差し指の形、target_img の cursor: grab; は手のひらを広げたような形のカーソルになります。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/cursor

注意点

ブラウザの設定によっては、音声の再生が制限されている場合があります。
音声が再生できない場合には「サイトの設定」などから使用しているブラウザの制限を確認してみてください。

動かしてみる

初期表示

スタートを押下でゲーム開始

クリックすると回数がカウントされて猫が鳴きます。

ゲーム終了


始めの画面に戻ります。
前回のクリックした回数は結果として表示されたままになります。

追記（2025/03/03）

codepenで実際に動かせるようにしてみました。

最後に

今回は、Vue.jsを使って簡単なクリックゲームを作成してみました。
画像と音声の組み合わせを変えるだけでもアイデア次第で色々できそうですね。
最後までご覧いただきありがとうございました。

Discussion