インタラクティブなスクラッチカードのウェブゲームを作成する

はじめに

このプロジェクトでは、簡単なウェブベースのスクラッチカードゲームを作成するプロセスを案内します。このゲームでは、ユーザーが灰色のオーバーレイをこすることで、その下にある画像が表示されます。画像は「当選」または「また挑戦」のメッセージのどちらかになります。構造には HTML を、スタイルには CSS を、インタラクティビティには JavaScript を使用します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

HTML、CSS、JavaScript を使って基本的なウェブプロジェクトをセットアップする方法
HTML5 キャンバスを操作してインタラクティブなエフェクトを作成する方法
マウスクリックや移動などのユーザーインタラクションを JavaScript で処理する方法
ウェブ開発における画像の取り扱い方法（画像の読み込みと動的表示を含む）
ユーザーに対する結果をランダムに決定する簡単なゲームロジックを実装する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

HTML5 キャンバスとそのウェブベースのゲームやインタラクティブアプリケーションに対する機能について、十分な理解を示すことができる
JavaScript を使って動的なコンテンツを作成し、ユーザー入力に応答する能力を見せることができる
さまざまなウェブ技術を統合して、完全で機能するウェブアプリケーションを作成することができる
ウェブベースのゲーム用のシンプルで魅力的なユーザーインターフェイスをデザインすることができる
ランダムな結果やユーザーインタラクションなどの基本的なゲーム開発概念を適用することができる

HTML 構造を作成する

このステップでは、index.html のウェブページの基本構造をセットアップします。これには、DOCTYPE 宣言、html 要素、および head と body セクションが含まれます。文字セットを UTF-8 に定義して、全般的な文字認識を行い、レスポンシブデザイン用のビューポートを設定します。これにより、様々なサイズのデバイスでもスクラッチカードアプリケーションが良好に表示されるようになります。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scratch Card</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        Feeling Lucky? Try!
        <a href="#" onclick="window.location.reload()">Try Again</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

body の中で、アプリケーションのコンテナとして機能する id が "main" の div 要素を作成します。このコンテナの中に、ユーザーに運を試してみるように促す遊び心に富んだメッセージを表示するための class が "msg" の div を含めます。このメッセージには、クリックするとページを再読み込みするリンクも含まれており、ユーザーはブラウザを手動で更新することなく、スクラッチカードを再度試すことができます。

最後に、スクラッチカードのエフェクトが実装される canvas 要素を含め、アプリケーションのロジックが格納される外部の JavaScript ファイル "main.js" をリンクします。

この HTML 構造は、スクラッチカードアプリケーションに必要な基礎を提供し、テキストとスクラッチ可能な表面が表示される領域を定義します。

✨ 解答を確認して練習

キャンバスをスタイリッシュにする

main.js の JavaScript ファイルでは、まずキャンバス要素を選択して初期のスタイルを適用します。

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

キャンバスの backgroundColor を "transparent" に設定することで、キャンバスの背景が配置されているウェブページのどの部分も隠さないようにします。position を "absolute" に設定することで、必要に応じて他の要素の上にキャンバスを配置する際により柔軟性が得られます。

このステップは、キャンバス要素を準備するために重要であり、ウェブページの残りのデザインと円滑に統合され、次のステップで追加する動的要素に備えることができるようにします。

✨ 解答を確認して練習

スクラッチ画像を読み込む

ここでは、スクラッチカードの背景として使用するランダムな画像を読み込みます。

// main.js で続ける

// 表示する可能性のある画像の配列
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// 新しい Image オブジェクトを作成してソースを設定
const img = new Image();
img.src = selectedImage;

// 画像が読み込まれたら、キャンバスのサイズと背景を調整
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

表示する可能性のある画像のファイル名を含む images という配列を作成します。そして、Math.floor(Math.random() * images.length) を使ってこの配列からランダムに 1 つの画像を選択します。

新しい Image オブジェクトを作成し、そのソース (src) を選択された画像に設定します。onload イベントリスナーは、画像が完全に読み込まれた後にのみスクリプトの残りの部分を実行するようにします。これにより、完全にダウンロードされていない画像を操作しようとする際に発生する問題を防ぎます。

このステップは、スクラッチカードの動的な性質にとって重要です。なぜなら、これによりアプリケーションが読み込まれたり更新されたりするたびに、変化と驚きがもたらされるからです。ランダムな画像を読み込むことで、本物のスクラッチカードの不確定な結果を模倣し、ユーザー体験を向上させます。

✨ 解答を確認して練習

スクラッチ層を準備する

キャンバスに選択された画像を読み込んだ後、スクラッチ層を準備する必要があります。これは、グレーの四角形でキャンバス全体を覆うことで達成されます。このグレーの層は、ユーザーが操作して下の画像を表示するためのスクラッチ可能な表面として機能します。

// main.js で続ける

// キャンバスをグレーの四角形で覆ってスクラッチ層として機能させる
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h);

// スクラッチエフェクト用にキャンバスを準備する
ctx.globalCompositeOperation = "destination-out";

このステップでは、塗りつぶしスタイルをグレーに設定し、キャンバス全体を覆う四角形を描画して、選択された画像の上にスクラッチオフ層を作成します。globalCompositeOperation を "destination-out" に設定することで、キャンバス上の新しい描画が下の層を透明にするようになり、ユーザーがスクラッチした場所で下の画像が表示されるようになります。

✨ 解答を確認して練習

スクラッチ関数を作成する

スクラッチエフェクトを実装するために、ユーザーがキャンバスとやり取りするたびに呼び出される draw 関数を定義します。この関数は、ユーザーが現在描画しているかどうか (isDrawing フラグ) を確認し、その後、キャンバスに対するカーソルまたはタッチの位置を計算します。そして、この位置にグレー層を透明にする合成演算を使って円を描画し、下の画像を表示します。

// main.js で続ける

let isDrawing = false;

// スクラッチをシミュレートする関数を定義
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // カーソルまたはタッチ位置に円を描画
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

この関数はまず、isDrawing フラグが true であることを確認します。これは、ユーザーがスクラッチアクションを開始したことを示しています。その後、スクラッチが発生している正確な位置を計算し、その位置に円を描画します。これにより、グレー層を実際にスクラッチオフして、下の画像の一部を表示します。

✨ 解答を確認して練習

スクラッチアクション用のイベントリスナーを追加する

最後に、ユーザーがキャンバス上でアクションを行ったときにスクラッチエフェクトをトリガーするように検出する必要があります。

// main.js で続ける

  // マウスとタッチのインタラクションを処理するイベントリスナー
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

mousedown、mousemove、mouseup、touchstart、touchmove、および touchend 用のイベントリスナーを追加します。これらのリスナーは isDrawing フラグを設定し、対応するように draw 関数を呼び出して、インタラクティブなスクラッチエフェクトを作成します。

ユーザーがマウスボタンを押すか、画面に触れる (mousedown または touchstart) とき、isDrawing を true に設定して、スクラッチエフェクトを作成するために彼らの動きを追跡し始めます。彼らがボタンを離すか、画面から触れるのを止める (mouseup または touchend) とき、isDrawing を false に設定して、スクラッチアクションを停止します。mousemove と touchmove イベントは、isDrawing が true の間、draw 関数を継続的に呼び出します。これにより、ユーザーがマウスまたは指をキャンバス上を動かすときに、グレー層をスクラッチオフして下の画像を表示できるようになります。

次のエフェクトを見るには、WebIDE の右下隅の Go Live ボタンをクリックし、「Web 8080」タブに切り替えてください。

✨ 解答を確認して練習

まとめ

このプロジェクトでは、ユーザーが層をスクラッチして隠されたメッセージを表示できるシンプルなスクラッチカードゲームを作成しました。HTML 構造を設定し、JavaScript でキャンバスを初期化し、画像を読み込んで表示し、キャンバス API を使ってスクラッチエフェクトを実装しました。このプロジェクトは、ウェブページに面白い要素として追加でき、さまざまな方法で拡張できます。たとえば、より多くの画像を追加したり、デザインを改善したり、より大きなゲームに統合したりです。