このサイトはアフィリエイトリンクを含んでいます
スポンサーリンク

WordPressサイトでゲームのスコアを記録・表示する方法

Wordpress ゲームスコア サーバー 作ってみた！
スポンサーリンク

こんにちは、あんちゃんです！ 今日は、WordPressサイトでゲームを運営しているあなたにぴったりの方法をご紹介します。ユーザーのスコアを簡単かつ安全に記録して、サイト上にかわいく表示する方法をステップバイステップでお伝えしますね。準備が整ったら、一緒に始めましょう！

スポンサーリンク

サーバー側の準備

Wordpress ゲームスコア サーバー準備

まずはサーバー側の準備から始めましょう。スコアを保存するためのファイルとPHPスクリプトを作成して、適切に配置することが大切です。

スコア保存用のテキストファイルを作成して配置しよう

ファイルの作成方法:

  1. お使いのパソコンでテキストエディタ（例えば、Notepad++やVSCode）を開いてください。
  2. 新しい空のファイルを作成し、scores.txtという名前で保存します。
  3. ファイルの中身は空のままで大丈夫です。

ファイルのアップロード方法:

  1. FTPクライアント（例えば、FileZilla）やcPanelのファイルマネージャーを使って、scores.txtをWordPressがインストールされているディレクトリ（通常はpublic_htmlやwww）にアップロードします。
  2. 同じディレクトリにsubmit_score.phpとget_scores.phpも配置すると、ファイルのパスが簡単になりますよ！

スコアを送信するPHPスクリプトを作成して配置しよう

スクリプトの作成手順:

  1. テキストエディタを開いて、新しいファイルを作成します。
  2. 以下のコードをコピーして貼り付けてください。
<?php
// submit_score.php

// エラーログを有効にします
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');

// CORSヘッダーを設定します
header("Access-Control-Allow-Origin: https://yourdomain.com"); // あなたのドメインに変更してください
header("Content-Type: application/json; charset=UTF-8");

// POSTメソッドのみ許可します
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['status' => 'error', 'message' => 'Method Not Allowed']);
    exit;
}

// 入力データを取得します
$input = json_decode(file_get_contents('php://input'), true);

if (!isset($input['name']) || !isset($input['score'])) {
    http_response_code(400);
    echo json_encode(['status' => 'error', 'message' => 'Invalid Input']);
    exit;
}

// 入力データをサニタイズします
$name = substr(trim(strip_tags($input['name'])), 0, 5); // 5文字以内に制限
$score = intval($input['score']);

if (empty($name) || $score < 0) {
    http_response_code(400);
    echo json_encode(['status' => 'error', 'message' => 'Invalid Name or Score']);
    exit;
}

// スコアデータを整形します
$timestamp = date('Y-m-d H:i:s');
$score_entry = "{$name},{$score},{$timestamp}\n";

// スコアファイルに書き込みます
$file = 'scores.txt'; // scores.txtが同じディレクトリにあることを確認してください

if (file_put_contents($file, $score_entry, FILE_APPEND | LOCK_EX) === false) {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => 'Failed to write to file']);
    exit;
}

// 成功レスポンスを返します
echo json_encode(['status' => 'success', 'message' => 'Score submitted successfully']);
?>

ファイルの保存とアップロード:

  1. ファイルをsubmit_score.phpという名前で保存します。
  2. FTPクライアントやcPanelのファイルマネージャーを使って、submit_score.phpをWordPressがインストールされているディレクトリにアップロードします。

スコアを取得するPHPスクリプトを作成して配置しよう

スクリプトの作成手順:

  1. 新しいファイルを作成し、以下のコードをコピーして貼り付けます。
<?php
// get_scores.php

// エラーログを有効にします
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');

// CORSヘッダーを設定します
header("Access-Control-Allow-Origin: https://yourdomain.com"); // あなたのドメインに変更してください
header("Content-Type: application/json; charset=UTF-8");

// GETメソッドのみ許可します
if ($_SERVER['REQUEST_METHOD'] !== 'GET') {
    http_response_code(405);
    echo json_encode(['status' => 'error', 'message' => 'Method Not Allowed']);
    exit;
}

// スコアファイルを読み込みます
$file = 'scores.txt';

if (!file_exists($file)) {
    echo json_encode([]);
    exit;
}

$scores = file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$score_list = [];

foreach ($scores as $line) {
    list($name, $score, $timestamp) = explode(',', $line);
    $score_list[] = [
        'name' => htmlspecialchars($name, ENT_QUOTES, 'UTF-8'),
        'score' => intval($score),
        'timestamp' => $timestamp
    ];
}

// スコアを降順にソートします
usort($score_list, function($a, $b) {
    return $b['score'] - $a['score'];
});

// トップ10を取得します
$top10 = array_slice($score_list, 0, 10);

echo json_encode($top10);
?>

ファイルの保存とアップロード:

  1. ファイルをget_scores.phpという名前で保存します。
  2. 同じく、FTPクライアントやcPanelのファイルマネージャーを使って、get_scores.phpをWordPressディレクトリにアップロードします。

ファイルのパーミッション設定

scores.txtのパーミッション設定:

  1. FTPクライアントやcPanelのファイルマネージャーを使って、scores.txtのパーミッションを設定します。
  2. 推奨パーミッション: 664
  • 説明: オーナーとグループに読み書き権限を与え、その他のユーザーに読み取り権限を与えます。
  1. 設定方法（cPanelの場合）:
  • scores.txtを選択し、右クリックして「パーミッションを変更」または「パーミッション編集」を選びます。
  • 数字を664に設定して保存します。

submit_score.phpとget_scores.phpのパーミッション設定:

  1. PHPファイルは通常、644のパーミッションで問題ありません。
  2. ファイルを選択し、右クリックして「パーミッションを変更」または「パーミッション編集」を選びます。
  3. 数字を644に設定して保存します。

セキュリティ対策

CORS（クロスオリジンリソースシェアリング）の設定:

  • submit_score.phpとget_scores.php内のAccess-Control-Allow-Originヘッダーを、あなたのWordPressサイトのドメインに設定しましょう。
  • 例:
  header("Access-Control-Allow-Origin: https://yourdomain.com");
  • 注意: *を使用すると、全てのドメインからのリクエストを許可してしまうため、セキュリティリスクが高まります。必ず自分のドメインを指定してくださいね。

データのサニタイズとバリデーション:

  • サーバー側のPHPスクリプトでは、常に入力データをサニタイズし、バリデーションを行います。
  • 名前はHTMLタグを除去し、5文字以内に制限します。
  • スコアは整数値に変換し、負の値を許可しません。
  • 入力が有効でない場合は、エラーレスポンスを返します。

HTTPSの使用:

  • WordPressサイトがHTTPSを使用していることを確認しましょう。これにより、クライアントとサーバー間の通信が暗号化され、データの盗聴や改ざんを防ぎます。
  • 確認方法:
  • WordPressダッシュボードから「設定」 > 「一般」に移動します。
  • 「WordPressアドレス（URL）」と「サイトアドレス（URL）」がhttps://で始まっていることを確認します。
  • 多くのレンタルサーバーでは、無料のLet’s Encrypt証明書を提供しているので、必要に応じて有効化してくださいね。

クライアント側（ゲームのHTML/JavaScript）の設定

次に、ゲームのHTML/JavaScriptコードにスコア送信および取得機能を実装します。これで、ユーザーがゲームをプレイした後にスコアを記録し、トップスコアを表示できるようになります。

Wordpress ゲームスコア サーバー クライアント側 HTML Javascript

スコア送信機能の実装

sendScore関数を追加しましょう:
ゲームのJavaScriptコード内に、スコアを送信する関数を追加します。

// スコアを送信する関数
function sendScore(name, score) {
    fetch('https://yourdomain.com/submit_score.php', { // submit_score.phpのURLに変更してください
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: name, score: score })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            console.log('スコアが正常に保存されました');
            displayTopScores(); // トップスコアを更新します
        } else {
            console.error('スコア保存エラー:', data.message);
            alert("スコアの保存に失敗しました。後ほど再度お試しください。");
        }
    })
    .catch(error => {
        console.error('エラー:', error);
        alert("スコアの保存に失敗しました。後ほど再度お試しください。");
    });
}

ゲームオーバー時の処理を修正しましょう:
ゲームオーバー時にユーザーから名前を入力させ、そのスコアを送信するように修正します。

// ゲームオーバー時の処理を修正
function displayGameOver(score) {
    const playerName = prompt("スコアを記録してください（5文字以内）:");
    if (playerName && playerName.trim().length > 0 && playerName.length <= 5) {
        sendScore(playerName.trim(), score);
    } else {
        alert("名前は1～5文字で入力してください。");
    }

    // 既存のゲームオーバー表示
    const finalScoreElement = document.getElementById("finalScore");
    finalScoreElement.innerText = `GAME OVER\nSCORE: ${score}`;
    finalScoreElement.style.display = "block";
}

トップスコア取得・表示機能の実装

displayTopScores関数を追加しましょう:
トップスコアを取得して画面に表示するための関数を追加します。

// トップスコアを取得して表示する関数
function displayTopScores() {
    fetch('https://yourdomain.com/get_scores.php') // get_scores.phpのURLに変更してください
        .then(response => response.json())
        .then(data => {
            const scoreList = document.getElementById("scoreList");
            scoreList.innerHTML = ""; // 既存のリストをクリアします

            if (data.length === 0) {
                const li = document.createElement("li");
                li.textContent = "スコアがまだありません。";
                scoreList.appendChild(li);
                return;
            }

            data.forEach((entry) => {
                const li = document.createElement("li");
                li.textContent = `${entry.name}: ${entry.score}`;
                scoreList.appendChild(li);
            });
        })
        .catch(error => {
            console.error('スコア取得エラー:', error);
            alert("トップスコアの取得に失敗しました。後ほど再度お試しください。");
        });
}

トップスコアの表示タイミングを設定しましょう:
ゲーム開始時やスコア送信後にdisplayTopScores関数を呼び出して、最新のトップスコアを表示します。

// ゲーム開始時やスコア送信後にトップスコアを更新します
function startGame() {
    // 既存のゲーム開始処理...
    displayTopScores(); // ゲーム開始時にトップスコアを更新します
}

document.addEventListener("DOMContentLoaded", (event) => {
    displayTopScores(); // ゲーム読み込み時にトップスコアを表示します
});

WordPress内でのスコア表示

WordPressの記事やページ内でスコアを表示するために、ショートコードを作成しましょう。これで、簡単にスコアリーダーボードを表示できるようになりますよ！

ショートコードの作成

functions.phpファイルを編集しましょう:

  1. WordPressテーマのfunctions.phpファイルを開きます。
  2. 以下のコードを追加します。
// functions.php

function display_leaderboard_shortcode() {
    // トップスコアを取得するためのJavaScript関数を呼び出します
    ob_start();
    ?>
    <div id="leaderboard">
        <h3>トップ10スコア</h3>
        <ol id="leaderboardList">
            <!-- スコアがここに挿入されます -->
        </ol>
    </div>

    <script>
        function fetchLeaderboard() {
            fetch('https://yourdomain.com/get_scores.php') // get_scores.phpのURLに変更してください
                .then(response => response.json())
                .then(data => {
                    const leaderboardList = document.getElementById("leaderboardList");
                    leaderboardList.innerHTML = ""; // 既存のリストをクリアします

                    if (data.length === 0) {
                        const li = document.createElement("li");
                        li.textContent = "スコアがまだありません。";
                        leaderboardList.appendChild(li);
                        return;
                    }

                    data.forEach((entry) => {
                        const li = document.createElement("li");
                        li.textContent = `${entry.name}: ${entry.score}`;
                        leaderboardList.appendChild(li);
                    });
                })
                .catch(error => {
                    console.error('スコア取得エラー:', error);
                    alert("トップスコアの取得に失敗しました。後ほど再度お試しください。");
                });
        }

        // ページ読み込み時にトップスコアを取得します
        document.addEventListener("DOMContentLoaded", (event) => {
            fetchLeaderboard();
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('leaderboard', 'display_leaderboard_shortcode');

コードの説明:

  • display_leaderboard_shortcode関数は、トップ10スコアを表示するHTMLとJavaScriptコードを生成します。
  • ショートコード[leaderboard]を使用することで、任意のページや投稿にリーダーボードを挿入できます。

ショートコードの使用方法

新しいページや投稿を作成しましょう:

  1. WordPressダッシュボードから「ページ」 > 「新規追加」または「投稿」 > 「新規追加」に移動します。
  2. タイトルを入力し、コンテンツエディター内に[leaderboard]と入力します。
  3. ページを公開し、実際にトップスコアが表示されているか確認します。
  4. 必要に応じてスタイルを調整し、デザインに統一感を持たせましょう。

セキュリティの詳細

スコアの送信と取得に関わるセキュリティ対策はとても大切です。以下に詳細な対策をご紹介しますね。

Wordpress ゲームスコア サーバー セキュリティ

CORS設定

目的:
異なるドメインやサブドメインからの不正なアクセスを防ぎ、信頼できるドメインからのみリクエストを許可します。

設定方法:

  1. submit_score.phpとget_scores.phpの両方において、Access-Control-Allow-Originヘッダーを設定します。
   header("Access-Control-Allow-Origin: https://yourdomain.com");
  1. 注意: ワイルドカード（*）を使用すると、全てのドメインからのリクエストを許可してしまうため、セキュリティリスクが高まります。必ず自分のドメインを指定してくださいね。

データのサニタイズとバリデーション

目的:
ユーザーからの入力データを安全に処理し、不正なデータや悪意のあるコードの注入を防ぎます。

実施方法:

  1. PHPスクリプト内で、strip_tags()を使用してHTMLタグを除去します。
  2. trim()で前後の空白を削除します。
  3. substr()で文字数を制限（例：5文字以内）。
  4. intval()を使用してスコアを整数値に変換します。
  5. 入力が有効かどうかをチェックし、不正なデータの場合はエラーレスポンスを返します。

HTTPSの使用

目的:
クライアントとサーバー間の通信を暗号化し、データの盗聴や改ざんを防ぎます。

実施方法:

  1. WordPressサイトがSSL証明書を使用していることを確認します。多くのレンタルサーバーでは、無料のLet’s Encrypt証明書を提供しています。
  2. WordPressダッシュボードから「設定」 > 「一般」に移動し、WordPressアドレス（URL）とサイトアドレス（URL）がhttps://で始まっていることを確認します。

デバッグ方法

実装中に問題が発生した場合、以下の方法で問題を特定し、解決しましょう。

Wordpress ゲームスコア サーバー デバッグ セキュリティ

PHPエラーログの確認

エラーログの有効化:

  1. submit_score.phpとget_scores.phpに以下のコードを追加して、エラーログを有効化します。
   ini_set('display_errors', 0);
   ini_set('log_errors', 1);
   ini_set('error_log', 'error.log'); // エラーログファイル名
  1. error.logファイルを作成し、同じディレクトリに配置します。
  2. ファイルのパーミッションを644に設定し、ウェブサーバーが書き込み可能であることを確認します。

エラーログファイルの確認:

  1. PHPスクリプトを実行した後、error.logファイルを確認して、エラーメッセージが出力されていないかチェックします。
  2. FTPクライアントやcPanelのファイルマネージャーを使用して、error.logファイルを確認します。
  3. エラーメッセージが記録されている場合は、コードの修正が必要です。

ブラウザの開発者ツールの活用

開発者ツールの起動方法:

  • Windows/Linux: F12キーまたはCtrl + Shift + I
  • macOS: Cmd + Option + I

Consoleタブの確認:

  1. JavaScriptエラーや警告が出ていないか確認します。
  2. fetchリクエストに関連するエラー（CORSエラー、ネットワークエラーなど）をチェックします。

Networkタブの確認:

  1. submit_score.phpとget_scores.phpへのリクエストが正しく送信され、期待通りのレスポンスが返ってきているか確認します。
  2. リクエストのステータスコードが200 OKであることを確認します。
  3. レスポンス内容が正しいJSON形式であることを確認します。

補足情報

Wordpress ゲームスコア サーバー 補足 デバッグ

パフォーマンスの考慮

現状:
.txtファイルを使用してスコアを保存・取得していますが、スコアが増加するとファイルのサイズが大きくなり、読み書きが遅くなる可能性があります。

対策:

  1. トップ10のみの読み込み:
  • get_scores.phpではトップ10のみを取得しているため、パフォーマンスへの影響は限定的です。
  1. キャッシュの導入:
  • サーバー側でキャッシュを利用し、頻繁なファイルアクセスを減らします。例えば、scores.txtの内容をメモリに保持する方法があります。
  1. データベースへの移行:
  • 将来的にスコアデータが大量になる場合、MySQLなどのデータベースを使用してスコアを管理することを検討します。これにより、パフォーマンスとデータ管理が向上します。

バックアップの重要性

目的:
scores.txtファイルが破損したり、誤って削除された場合に備えて、定期的なバックアップを行います。

方法:

  1. 手動バックアップ:
  • 定期的にscores.txtをダウンロードして保存します。
  1. 自動バックアップ:
  • スクリプトやサーバーの機能を利用して、自動的にバックアップを取得します。多くのレンタルサーバーでは、バックアップ機能が提供されています。

まとめ

WordPressサイトでゲームのスコアを記録・表示する方法について、サーバー側の準備からクライアント側の設定、そしてWordPress内での表示方法まで詳しくご紹介しました。以下に手順の流れをもう一度まとめますね。

Wordpress ゲームスコア サーバー インフォメーション まとめ

手順の流れ

  1. サーバー側の準備:
  • scores.txtファイルの作成と配置。
  • submit_score.phpとget_scores.phpの作成と配置。
  • ファイルのパーミッション設定。
  • CORS設定とセキュリティ対策の実施。
  1. クライアント側の設定:
  • ゲームのJavaScriptコードにスコア送信機能とトップスコア取得・表示機能を実装。
  1. WordPress内でのスコア表示:
  • ショートコードを作成し、ページや投稿内にリーダーボードを表示。
  1. セキュリティとパフォーマンスの維持:
  • データのサニタイズとバリデーションを徹底。
  • ファイルのパーミッションを最小限に設定。
  • HTTPSを使用し、通信の安全性を確保。
  • 定期的にバックアップを取得し、データの保護を行う。
  1. デバッグとメンテナンス:
  • PHPエラーログとブラウザの開発者ツールを活用して問題を特定・解決。
  • ファイルやスクリプトの更新時には、再度テストを実施。

利点

  • シンプルさ:
  • 専用プラグインを使用せず、最低限のPHPスクリプトとファイル操作でスコア管理が可能です。
  • コスト効率:
  • 追加のプラグイン購入や高度なサーバー設定が不要で、無料で始められます。
  • 柔軟性:
  • 必要に応じてPHPスクリプトやフロントエンドのJavaScriptコードをカスタマイズできます。

注意点

  • セキュリティ:
  • スコアデータの送受信には十分なセキュリティ対策が必要です。特にCORS設定やデータのサニタイズは徹底しましょう。
  • パーミッション設定:
  • 不適切なファイルパーミッションはセキュリティリスクを高めます。最低限必要な権限に設定することが重要です。
  • データの増加:
  • スコアデータが増加すると、.txtファイルの読み書きが遅くなる可能性があります。適宜、データベースへの移行を検討してください。

具体的な実装例

以下に、実際のファイル構成とコードの例をもう一度ご紹介しますね。

ファイル構成例

public_html/
├── submit_score.php
├── get_scores.php
└── scores.txt

submit_score.phpのコード例

<?php
// submit_score.php

// エラーログを有効にします
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');

// CORSヘッダーを設定します
header("Access-Control-Allow-Origin: https://yourdomain.com"); // あなたのドメインに変更してください
header("Content-Type: application/json; charset=UTF-8");

// POSTメソッドのみ許可します
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['status' => 'error', 'message' => 'Method Not Allowed']);
    exit;
}

// 入力データを取得します
$input = json_decode(file_get_contents('php://input'), true);

if (!isset($input['name']) || !isset($input['score'])) {
    http_response_code(400);
    echo json_encode(['status' => 'error', 'message' => 'Invalid Input']);
    exit;
}

// 入力データをサニタイズします
$name = substr(trim(strip_tags($input['name'])), 0, 5); // 5文字以内に制限
$score = intval($input['score']);

if (empty($name) || $score < 0) {
    http_response_code(400);
    echo json_encode(['status' => 'error', 'message' => 'Invalid Name or Score']);
    exit;
}

// スコアデータを整形します
$timestamp = date('Y-m-d H:i:s');
$score_entry = "{$name},{$score},{$timestamp}\n";

// スコアファイルに書き込みます
$file = 'scores.txt'; // scores.txtが同じディレクトリにあることを確認してください

if (file_put_contents($file, $score_entry, FILE_APPEND | LOCK_EX) === false) {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => 'Failed to write to file']);
    exit;
}

// 成功レスポンスを返します
echo json_encode(['status' => 'success', 'message' => 'Score submitted successfully']);
?>

get_scores.phpのコード例

<?php
// get_scores.php

// エラーログを有効にします
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');

// CORSヘッダーを設定します
header("Access-Control-Allow-Origin: https://yourdomain.com"); // あなたのドメインに変更してください
header("Content-Type: application/json; charset=UTF-8");

// GETメソッドのみ許可します
if ($_SERVER['REQUEST_METHOD'] !== 'GET') {
    http_response_code(405);
    echo json_encode(['status' => 'error', 'message' => 'Method Not Allowed']);
    exit;
}

// スコアファイルを読み込みます
$file = 'scores.txt';

if (!file_exists($file)) {
    echo json_encode([]);
    exit;
}

$scores = file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$score_list = [];

foreach ($scores as $line) {
    list($name, $score, $timestamp) = explode(',', $line);
    $score_list[] = [
        'name' => htmlspecialchars($name, ENT_QUOTES, 'UTF-8'),
        'score' => intval($score),
        'timestamp' => $timestamp
    ];
}

// スコアを降順にソートします
usort($score_list, function($a, $b) {
    return $b['score'] - $a['score'];
});

// トップ10を取得します
$top10 = array_slice($score_list, 0, 10);

echo json_encode($top10);
?>

ゲームのJavaScriptコードに追加する機能の完全なコード例

こちらは、sendScore関数とdisplayTopScores関数を含む、ゲームの完全なJavaScriptコードの例です。

// スコアを送信する関数
function sendScore(name, score) {
    fetch('https://yourdomain.com/submit_score.php', { // submit_score.phpのURLに変更してください
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: name, score: score })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            console.log('スコアが正常に保存されました');
            displayTopScores(); // トップスコアを更新します
        } else {
            console.error('スコア保存エラー:', data.message);
            alert("スコアの保存に失敗しました。後ほど再度お試しください。");
        }
    })
    .catch(error => {
        console.error('エラー:', error);
        alert("スコアの保存に失敗しました。後ほど再度お試しください。");
    });
}

// ゲームオーバー時の処理を修正
function displayGameOver(score) {
    const playerName = prompt("スコアを記録してください（5文字以内）:");
    if (playerName && playerName.trim().length > 0 && playerName.length <= 5) {
        sendScore(playerName.trim(), score);
    } else {
        alert("名前は1～5文字で入力してください。");
    }

    // 既存のゲームオーバー表示
    const finalScoreElement = document.getElementById("finalScore");
    finalScoreElement.innerText = `GAME OVER\nSCORE: ${score}`;
    finalScoreElement.style.display = "block";
}

// トップスコアを取得して表示する関数
function displayTopScores() {
    fetch('https://yourdomain.com/get_scores.php') // get_scores.phpのURLに変更してください
        .then(response => response.json())
        .then(data => {
            const scoreList = document.getElementById("scoreList");
            scoreList.innerHTML = ""; // 既存のリストをクリアします

            if (data.length === 0) {
                const li = document.createElement("li");
                li.textContent = "スコアがまだありません。";
                scoreList.appendChild(li);
                return;
            }

            data.forEach((entry) => {
                const li = document.createElement("li");
                li.textContent = `${entry.name}: ${entry.score}`;
                scoreList.appendChild(li);
            });
        })
        .catch(error => {
            console.error('スコア取得エラー:', error);
            alert("トップスコアの取得に失敗しました。後ほど再度お試しください。");
        });
}

// ゲーム開始時やスコア送信後にトップスコアを更新します
function startGame() {
    // 既存のゲーム開始処理...
    displayTopScores(); // ゲーム開始時にトップスコアを更新します
}

document.addEventListener("DOMContentLoaded", (event) => {
    displayTopScores(); // ゲーム読み込み時にトップスコアを表示します
});

WordPressショートコード[leaderboard]の使用例

リーダーボード表示用ページを作成しましょう:

  1. WordPressダッシュボードから「ページ」 > 「新規追加」に移動します。
  2. ページタイトルを「リーダーボード」とします。
  3. コンテンツエディター内に[leaderboard]と入力します。
  4. ページを公開します。

リーダーボードを確認しましょう:

  1. 作成したページにアクセスし、トップ10スコアが正しく表示されているか確認します。
  2. 必要に応じて、CSSを調整し、デザインをカスタマイズしましょう。

以上の手順とコードをしっかりと実施することで、WordPressサイト内でかわいくゲームのスコアを記録・表示することができますよ！

【HTML/CSS/JS】レスポンシブ対応テトリスゲームの作り方を解説！スマホでも遊べる！ (ver1.9.9)
HTML、CSS、JavaScriptを使って、PCやスマホで快適に遊べるテトリスゲームを自作する方法を解説。ver1.9.9のモバイルフレンドリーなデザインと実装ポイントを初心者向けに紹介します。
tokodomo.xyz
2024.09.17
【HTML/JavaScript】テトリスゲームに効果音を実装して楽しもう！ (ver1.7.0 → ver1.8.8 アップデート解説)
HTMLとJavaScriptを使って、シンプルなテトリスゲームに効果音を追加する方法を解説。ver1.7.0からver1.8.8へのアップデートで効果音がどのように実装されたか、初心者でもわかりやすいコード例とともに詳しく説明します。ゲームの臨場感を高めるための効果音実装を学びましょう。
tokodomo.xyz
2024.09.13
HTMLテトリスの作り方解説！難易度とレベルアップの実装方法【ver1.7.0対応】
「HTML5とJavaScript、Canvasを使ってテトリスゲームを作成する方法を徹底解説！Ver1.7.0で追加されたレベルアップ機能や難易度調整の実装方法を、初心者でもわかりやすいソースコード付きで紹介します。」
tokodomo.xyz
2024.09.08
HTMLテトリスにBGMを実装する方法【Sunoで生成したBGMでさらに楽しく！Ver1.6アップデート解説】
HTMLとJavascriptで作るテトリスゲームに、BGMを追加する方法を解説します。音楽生成AI「Suno」で作成したBGMを、Ver1.6アップデートで追加する方法を紹介します。初心者の方でも簡単に実装できます。
tokodomo.xyz
2024.09.04
HTMLテトリスでNextブロックを表示する方法【ver1.4.6→ver1.5.15コード解説】
HTMLとJavaScriptでテトリスゲームを開発しよう！バージョン1.5.15で追加されたNextブロック表示機能の実装方法を、初心者向けに分かりやすく解説。描画関数の変更点や新しいcanvas要素の追加について詳しく説明します。
tokodomo.xyz
2024.08.26
スマホで遊べるHTMLテトリスを作ろう！JavaScriptソースコード解説付き【Ver1.4】
HTMLとJavaScriptで作るテトリスゲームの詳細ガイド。スマホ対応の操作方法やシンプルなコード解説で、初心者でも簡単にゲーム開発を学べます。ゲーム画面と操作方法、ブロックのデザインやスピード調整、背景画像の変更方法も詳しく説明しています。
tokodomo.xyz
2024.08.05
JavaScriptとHTMLで作るテトリス：ステップバイステップガイド
JavaScriptとHTMLを使ってクラシックなテトリスゲームを自作しよう！初心者でも簡単に理解できるステップバイステップのガイドで、基本の実装から応用まで詳しく解説。プログラミングスキルを楽しみながら向上させましょう。
tokodomo.xyz
2024.06.11
HTMLとJavaScriptで作るテトリス
初心者から中級者向けに、HTMLとJavaScriptを使ってテトリスを作成する方法を詳しく解説。キャンバスの設定からテトリミノの動きまで、全てのステップを網羅した完全ガイドです。
tokodomo.xyz
2024.05.30
改良版テトリス：新機能と操作性の向上
改良版テトリス (tetris_ver1.3.html) について詳しく紹介します。新しい機能や操作性の向上により、さらに楽しく遊べるようになりました。この記事では、操作方法、ゲームの概要、画面の最適化、ゲームバランスの調整などについて解説します。
tokodomo.xyz
2024.05.19
HTMLとJavaScriptで作るテトリス：初心者向け完全ガイド
HTMLとJavaScriptでテトリスを作ってみました。制作秘話から操作方法、今後の改良点まで、詳しく解説します。新しい機能や操作性の向上により、さらに楽しく遊べるようになったテトリスをお楽しみください。
tokodomo.xyz
2024.05.19

コメント

タイトルとURLをコピーしました