2016年3月12日土曜日

Invader Block を HTML5 で作ってみた

ゲームはC言語で作る派のシーラカンス・プログラマな私ですが、一応Web系の企業に勤めているのでJSも書けますよというアピール的な意味で、Invader BlockをHTML5に移植してみました。

・PCブラウザ専用(Chrome推奨)
・カーソルキーで左右に移動
・ブロック崩しの要領で敵を倒す
・メダルを取るとスコアの基点が上がる
・連続してインヴェーダーを倒すと獲得スコアに倍率が掛かる(最大16倍)
・メダルを一定数取ると味方からの援護射撃(レーザー)が来る
・このレーザーはリアルでハードコアなものなので、当たるとプレイヤーも撃破される 

ソースコードを(9leapからもDLできるようにしていますが)GitHubでも公開しています。
https://github.com/suzukiplan/invader-block-5

ターミナルで以下のような感じでコマンドを叩けばローカルで遊べます。
$ git clone https://github.com/suzukiplan/invader-block-5.git
$ cd invader-block-5
$ open local-index.html

※ローカルプレイの場合はリプレイ時はブラウザリロードしてください

今回は、ソースだけでなく、画像や音声(全部自作)もリベラル・ライセンス(CC4)になっていますので、alt Invader Block を誰でも作れるというかなり誰得仕様にしてきました。

ひとつ注意点として、Chrome以外のブラウザでの動作は不完全です。
・Firefox: 音が鳴らない(プレイはできる)
・Safari: 音が鳴らない(プレイはできる)
・IE: 音が鳴らない(プレイはできる)
Edge: プレイできない(ロード中に止まる)
・スマホ: プレイできない

HTML5の普及がイマイチな原因のひとつがブラウザ依存ですね。性能的な面ならPCブラウザで十分ゲームが作れるけど、結局特定のブラウザでしか完全に動かないのであれば、(ゲームデベロッパ脳で考えると)ネイティブで作った方が性能が良いからネイティブで作るという結論になる。(スマホのWebViewは重すぎるし)

プログラミング環境としては、JavaScriptならC言語とだいたい同じノリで作れるから結構良い感じかもしれません。ゲーム本体のコードは下記で公開していますが、Cプログラマな方にとっては結構とっつき易い感じではないでしょうか。
https://github.com/suzukiplan/invader-block-5/blob/master/game.js
JavaScriptは、データ型と宣言の概念さえあれば、もっと普及した言語だったかも(そこら辺がバグ作り込みリスクがかなり高い)。宣言については use strict で解消できるけど、データ型の件はどうにもならない(だからtype scriptがそこそこ流行っている)という感じか。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

合理的ではないものを作りたい

ここ最近、実機版の東方VGSの開発が忙しくて、東方VGSの曲追加が滞っています。 東方VGS(実機版)のデザインを作りながら検討中。基本レトロUIベースですがシークバーはモダンに倣おうかな…とか pic.twitter.com/YOYprlDsYD — SUZUKI PLAN (...