ツール・サービス 公開・運用中 2026年7月
ブラウザゲーム4本 + オンラインスコアAPI(clvr.lol/play)
SNAKE・2048・タイピング・パスワード推理の4本を公開中。実績解除システムつき。ハイスコアはNode.js製の自作APIを自前VPSで運用して保存。
TypeScript Canvas API Node.js nginx
サイトを見る https://clvr.lol/play/
運営中の技術ブログ clvr.lol に併設している、実際に遊べるブラウザゲームのコーナーです。
SNAKE・2048・タイピング・パスワード推理の4本と実績解除システムを公開しています。
フロントのゲーム実装だけでなく、ハイスコアを保存するAPIサーバーも自作し、自前のVPSで運用しています。
デザインのポイント
ゲーム一覧を「ターミナルの ls -la 出力」に見立て、ブログ本体のシンセウェイブ調と世界観を揃えました。
各ゲームはインストール不要・その場で起動。PCのキーボード操作とスマホのスワイプ操作の両方に対応しています。
工夫した点
01
ゲームロジックを自前実装
衝突判定・盤面合成・落下物のスポーン制御など、ライブラリに頼らずCanvas APIとTypeScriptで実装
02
オンラインスコアAPIも自作
Node.js製のAPIサーバーをPM2 + nginxで常時運用(cleverlab.lol/clvr-scores/)。フロントからバックエンド、サーバー運用まで一気通貫で自分で持っています
03
実績解除システム
プレイ状況に応じて実績がアンロックされる仕組みを実装し、再訪の動機を設計
04
操作の二重対応
矢印キー/WASDとタッチスワイプを同じロジックに集約し、デバイスを問わず遊べるようにしています