スマホゲーム作成【ジャンケン】

HandY

2024年10月20日 06:21

JavaScript（Webベースのアプリ）、HTML、CSSを使ったジャンケンゲームの作り方を紹介します。

これは、スマホで動作するWebアプリとして簡単に実装できる方法です。

手順 1

基本のHTML構造を作成

まず、ジャンケンゲームの基本的なHTML構造を作成します。

HTMLは、ゲーム画面の見た目やボタンを定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ジャンケンゲーム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>ジャンケンゲーム</h1>
        <p>あなたの手を選んでください：</p>
        <button id="rock">グー</button>
        <button id="paper">パー</button>
        <button id="scissors">チョキ</button>
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

手順 2

CSSでスタイリング

ゲームの外観を整えるためにCSSを使用します。

スタイリングはスマホ向けにレスポンシブデザインを意識します。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    cursor: pointer;
}

button:hover {
    background-color: #ddd;
}

手順 3

JavaScriptでロジックを作成

次に、JavaScriptを使用してゲームのロジックを実装します。

プレイヤーの選択に応じてコンピュータが手を選び、結果を表示します。

document.addEventListener("DOMContentLoaded", () => {
    const choices = ["グー", "チョキ", "パー"];
    
    const playerButtons = {
        rock: "グー",
        paper: "パー",
        scissors: "チョキ"
    };

    const resultElement = document.getElementById('result');
    
    // プレイヤーの手がクリックされたときの処理
    Object.keys(playerButtons).forEach(id => {
        document.getElementById(id).addEventListener("click", () => {
            const playerChoice = playerButtons[id];
            const computerChoice = choices[Math.floor(Math.random() * 3)];
            const result = getResult(playerChoice, computerChoice);
            resultElement.textContent = `あなた: ${playerChoice} | コンピュータ: ${computerChoice} | 結果: ${result}`;
        });
    });

    // 勝敗判定
    function getResult(player, computer) {
        if (player === computer) {
            return "引き分け";
        } else if (
            (player === "グー" && computer === "チョキ") ||
            (player === "チョキ" && computer === "パー") ||
            (player === "パー" && computer === "グー")
        ) {
            return "あなたの勝ち";
        } else {
            return "コンピュータの勝ち";
        }
    }
});

手順 4

ファイルを保存して動作確認

・index.html（HTMLファイル）
・styles.css（CSSファイル）
・script.js（JavaScriptファイル）

これらのファイルを作成し、すべてを同じフォルダに保存します。

次に、スマホのブラウザやローカルサーバーでHTMLファイルを開けば、ジャンケンゲームが動作します。

手順 5

モバイルでのテストと調整

スマホで実際にテストして、ボタンの大きさやデザインなどがうまく表示されているかを確認します。

必要に応じてCSSを調整して、スマホで快適に操作できるようにしましょう。

応用

スコア機能の追加

もっと複雑にしたい場合、プレイヤーとコンピュータの勝ち負けを記録して、スコアを表示する機能を追加することも可能です。