昔懐かし電撃イライラ棒系びっくりFlashゲームをReactで作る

はじめに

皆さんこんにちは。y_masuyamaと申します。

最近、Reactを学び始めたばかりですが、何かアプリを作ってみたいという思いが強くなってきました。そこで、昔懐かし電撃イライラ棒系びっくりFlashゲームを再現してみました。

作成したもの

• ソースコード（StackBlitzで公開）
  https://stackblitz.com/edit/maze-app-gf5ict?file=README.md

ゲーム内容

全3面の「電撃イライラ棒」系ゲームです。3面それぞれ細い迷路をクリアすると驚きの画像と音が表示されます。

使用技術

＊バージョンは package.json を参照

コードの解説

ここでは主要部分のみ解説します。詳細はソースコードをご覧ください。

ゲーム画面の遷移

ReactのuseStateフックで実装。

state

const [scene, setScene] = useState('title');

stateのset関数

const gameStart = () => setScene('game');
const gameOver  = () => setScene('title');
const viewEnding = () => setScene('ending');

タイトル画面

PlayボタンでgameStartを呼び出します。

export const Title = ({ handleClick }: Props) => (
  
    play
  
);

迷路ゲーム画面

以下のコンポーネント構成：

• Mazeコンポーネント（レベル切り替え）
• Level1, Level2, Level3コンポーネント（各ステージ）

迷路の切り替え

同様にuseStateで実装。

const [level, setLevel] = useState(1);

迷路の描画

canvas要素をuseRefで取得し、useEffect内で描画。

Canvas取得

const canvasRef = useRef(null);

useEffect(() => {
  const ctx = canvasRef.current?.getContext('2d');
  if (!ctx) return;
  // 描画処理...
}, []);

矩形描画（迷路・背景・ゴール）

// 背景
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);

// 迷路
ctx.fillStyle = 'aqua';
ctx.fillRect(x, y, w, h);

// ゴール
ctx.fillStyle = 'red';
ctx.fillRect(x, y, w, h);

文字描画

ctx.font = 'bold 24px verdana, sans-serif';
ctx.fillStyle = 'white';
ctx.fillText('Level1', 1050, 130);

ゲームオーバー・クリア判定

マウスポインタ位置をpointermoveで取得し、getImageDataで色を調べます。

マウスポインタ取得

 {
  const x = e.nativeEvent.offsetX;
  const y = e.nativeEvent.offsetY;
  // 色取得...
}} />

色取得・判定

const [r,g,b] = ctx.getImageData(x, y, 1, 1).data;
if (r===0 && g===0 && b===0) gameOver();
if (r===255 && g===0 && b===0) goNextLevel();

見えないゴール（最終面）

Canvas上に重ねた透明な

const sound = new Howl({ src:['./sound.wav'] });
sound.play();
Howler.volume(1);