Casual Arcade(byatsushi)— JavaScriptだけで遊べる、癒し系カジュアルゲームポータルを作りました

Cover Image for Casual Arcade(byatsushi)— JavaScriptだけで遊べる、癒し系カジュアルゲームポータルを作りました

Casual Arcade(byatsushi)を作りました

「思いついたゲームを、すぐ遊べる形で並べていく場所がほしい」。そんな動機から、ブラウザだけで動くカジュアルゲームを集めたWebポータルとして Casual Arcade を作りました。モバイル前提で、触っているだけで少し気持ちが落ち着くような、ピースフルな緑基調のデザインを目指しています。合言葉は “目指せ100ゲーム” です。

Casual Arcadeのスクリーンショット

どんなサイト?

Casual Arcadeは、JavaScriptのみで動く(=インストール不要) ゲームを掲載していくポータルです。ページを開いたらすぐ遊べる体験を最優先にし、ゲームごとにルール説明やUIを整えながら、少しずつタイトルを増やしていく構成にしています。

  • モバイル前提: 片手でも迷わない導線・余白・ボタンサイズを意識
  • 癒しの体験: 派手さよりも、触り心地・色・テンポの気持ちよさを重視
  • “遊んで満足できるUI”: ただ動く、ではなく「綺麗にまとまっている」完成度を狙う

初期リリースのゲーム(2タイトル)

まずはCanvasゲームを2つ用意しました。

バウンスして上に登っていくゲーム

反射やタイミングを楽しみながら、少しずつ上を目指すタイプのカジュアルアクション。短時間でリトライできるテンポ感を大事にしています。

ブロック崩し

直感操作で気持ちよく遊べる定番ジャンル。ボールの動き・当たり判定・スピード感など、触っていて気持ちいい調整を意識しました。

技術スタックと構成

Vite + React

ルーティングやページ構成など「ポータルサイトとしての器」をReactで作り、ゲーム本体はCanvasで描画して載せる構成にしました。開発体験が軽く、追加実装のサイクルを回しやすいのが魅力です。

Canvas API

各ゲームはCanvas上で描画・更新(ループ)して成立させています。UI(ページ側)とゲーム(Canvas)を分けることで、見せ方の改善もしやすくしています。

Netlify(SPAルーティング対応)

静的ホスティングで公開し、SPAとしてのルーティングも問題なく動くように設定して運用しています。更新を素早く反映できるのも、継続的にゲームを増やす方針と相性が良いです。

これからやりたいこと

このサイトのゴールは、ゲームを“置く”だけではなく、遊び心地と見た目の満足感がちゃんとある状態で積み上げていくことです。

  • 新作ゲームを継続追加(100本目標)
  • UI/演出の磨き込み(触っていて癒される方向へ)
  • 遊びの記録(スコアや達成感)を気持ちよく残す仕組み

最後に

Casual Arcadeは、「ちょっとだけ遊ぶ」が気持ちよく成立する場所を目指して作っています。ゲーム自体の手触りと、ポータルとしての見やすさ・美しさの両方を育てながら、少しずつタイトルを増やしていく予定です。