無職のプログラミング

久しぶりにアクションゲームを作った。

Jump Jump Shooting

使用した画像はTOP画面と背景画像のみ。
プレイヤー、敵、障害物は全てHTML5 Canvasで描画している。

ヘルプ画面も作ってみた。

ヘルプ画面でも画像は一切使っていない。
文字列もfillText()を使っているので、選択してコピーができない。

当初は空中ジャンプして障害物を避けるだけのつもりだったが、いつの間にかシューティングゲームになっていた。
ジャンプだけだと制御が難しかったので、ダッシュ機能もつけた。
深く考えていなかったが、ダッシュのおかげでゲームらしくなったと思う。

レベルデザインにあまり時間をかけなかったので、難易度がレベルに比例していない気がする。
でも最終面が一番難しいのは確実だからいいか。

久しぶりにゲームを作った。

バトルdeチンチロリン


チンチロリンで敵と戦うゲーム。


敵を倒して得たお金でサイコロを改造できる。


あの456サイも作れる。



今回はボタンもHTML5 Canvasで作った。バインドしたイベントはCanvasのクリックイベントだけ。
レベルデザインと言うか、難易度調整に苦労した。サイコロを改造するとプレイヤーが強くなりすぎるため、高レベルの敵も改造サイコロを使用するようにした。
なるべく説明がなくてもわかる画面にしたかったが、改造画面がどうもわかりにくい気がする。

セーブデータはWeb Storageに保存しているので、IE7以下ではセーブできない。データ量はたいしたことないので、cookieに保存するようにもできるがどうしようか。

先月からチョコチョコと作っていた囲碁定石勉強用プログラムが、やっと公開できる状況になった。

囲碁定石トレーニング


自分が打った手に対して、プログラムが定石に従った応手をする。
応手パターンは複数あり、ランダムに選択される。

作成した機能についての感想
・候補手表示
  プログラムが想定した手に対してだけ反応するため、ハズレの手ばかり打っていると進まなくてイライラする。
  そこで、想定した手を表示する機能をつけた。分岐を考慮したデータ構造のため、機能作成はあまり苦労しなかった。

・前に戻る
  最初は「一手戻る」だったのだが、候補手が１つしか無い場合、戻っても意味が無い。そのため、候補手が複数ある状態まで戻るようにした。
  取られた石を復活したり、コウ判定情報を回復したりするため、戻るためのデータを待避する必要がある。とりあえず待避データは１つにして、２回連続では戻れないようにした。
  待避データの取得やクリアのタイミングを網羅するのに苦労した。まだバグがありそうな気がする。
  何百手でも戻れる棋譜再生プログラムはどうやって履歴管理しているんだろう。あとでソースを読んでみるか。

高目定石しかなくて寂しいので、定石データを追加する作業を優先しよう。

英単語のsynonym(類義語)をタイピングするゲームを作った。

Synonym Typing Game | 無職のHTML5 Canvas


流れてくる英単語の中から、synonymを選んでタイプするだけのゲーム。
英語の勉強なら別にタイプする必要無いな と自分でプレイしてみて思った。タイピングの練習にもならないし。
そもそも何でこれを作ろうとしたのか、自分でもよくわからない。

今後やりたい機能追加
・問題を追加する
・音を出す

まずは問題を追加するか。
問題は辞書サイトを利用して自分で作っているのだが、これが結構時間かかる。
正解以外の単語を深く考えずに選べば簡単なのだが、色々とこだわるから時間を食ってしまう。

HTML5 Canvasでサイコロを描くプログラムを使って、チンチロリンのゲームを作った。

勝手にチンチロリン | 無職のHTML5 Canvas


とりあえず賭金固定で作ったので、スタートボタンを押したら何もすることが無い。
ゲームじゃないなこれは。
そのうち賭金を指定できるように修正しよう。

<関連エントリ>
サイコロを改造してチンチロリンで敵と戦うゲームを公開した

このような積み上げ棒グラフを表示するJavaScriptライブラリを公開した。


使用方法の説明、ライブラリのダウンロードは以下からどうぞ。
積み上げ棒グラフ作成 | 無職のHTML5 Canvas

かなり詳しい使用方法をReadmeに書いたのだが、書いてる途中で「ここまで詳しく書く必要があるのだろうか」と思った。
それ以前に、自分の説明でちゃんと理解してもらえるんだろうか。
孤独なプログラマーなので、客観的な意見をくれる人が周りにいない。

次は縦棒も表示できるように機能追加しようかな。

11月から始めたGoogle App Engine。
途中で脱線してHTML5 Canvasでゲームを作ったりしたが、やっとGoogle App Engine上で動くプログラムを公開することができた。

公開したのはこれ → けいさんマスター にがてをなくそう
11月に作った掛け算九九の特訓ページをベースにしている。

このブログを始めた頃は「PHPでサーバーサイドのプログラミングをしたい」と思っていた。
無料でPHPを動かせる@PAGESにアカウントを作っのだが、一部のページ以外ではhttpヘッダを修正できないためAjaxが使えない。

そのためPythonを勉強してGoogle App Engineを使うことになり、やっと公開することができた。
今までも@PAGESでプログラムを公開してきたのだが、データベースにデータを格納するプログラムは今回が初めてだ。

データを削除する機能をまだ作っていないので、cron ジョブとして動かすデータ削除プログラムを作ろう。

今まで@PAGESに公開したプログラムも、少しづつGoogle App Engineに移行するかな。

前回と前々回の記事で書いた、「戦車が勝手に戦うゲームみたいなもの」がやっとできた。
こちらで公開しています → HTML5 Canvas Tank Battle Game
英語としておかしい気もするが気にしない。

今日は難易度調整ばかりしてた。パラメーターで調整できればいいのだが、そうはいかないところもありソースコードをチョコチョコ修正した。
自分がクリアできるレベルに調整したので、かなり易しくなった気がする。

グラフィックがショボいので画像の解説文も載せた。
ゲームのやり方も見ただけではわかりにくいかと思って遊び方の説明文を書いたが、説明文が長い。
他の人たちのシンプルなゲームは1,2行で済んでるのに、何でこんなに長いんだろう。

戦車が目的地に向かって進むときの経路探索にはA*(エースター)アルゴリズムを使用した。
やっててよかったA*。この前作ったソースコードがほとんど流用できた。

Internet Explorerでの動作が重いため、明日はIE用にちょっと修正しよう。

8月に小学校低学年向け計算練習ページを作ったときに、「かけ算九九のも作って」と言われていたのだが、やっと掛け算九九の特訓ページを作った。

こちらからどうぞ　→　作ったもの一覧ページ

問題と答え表示、かかった時間一覧画面は、前回作った足し算引き算プログラム(の共用部分)を使ったので時間はかからなかったのだが、メニュー画面の作成に時間がかかった。
チェックボックス、ラジオボタン、セレクトボックスの値を取得したり操作したりする方法をいちいち調べた。
また、一度設定した項目をCookieに保存して、再度ページを開いたときに反映するようにした。
今回初めてJavaScriptでCookieを使ったが、思ったよりも簡単だった。暗号化とかしない単純な使い方だからだろう。

前回作った足し算引き算プログラムも、細かいところをチョコチョコと修正した。
「作ったもの一覧ページへ戻る」以外は、小学二年生までに習う漢字だけ使うようにした。

今回作ったのは問題と答えを表示するだけなので、次は答えを入力できるようにしよう。

HTML5 Canvas で簡単なゲームを作ってみようと思い立ち、8日目にしてやっと公開できるモノができた。
こちらに公開してます → 迫ってくるブロックをジャンプして飛び越える
sキーを押してスタートしてください。

できるまでの8日間を振り返ってみる。

1日目
  「スペースキーを押したら丸が放物運動をする」ものを作る。

2日目
  1日目に作ったものを、「スペースキーを押すまでは地面が等速で動いて、スペースキーを押したら地面が止まって丸が放物運動をする」ようにした。
  作ったものをここに公開。

3日目
  プログラミングはせず、ネットでゲームプログラミングについて調べた。
  ジャンル別ゲームの作り方とアルゴリズムまとめを見つけた。

4日目
  マリオのジャンプ実装法とVerlet積分(実践編)で紹介されていたVerlet法について調べる。
  みその計算物理学というすごいサイトを見つける。

5日目
  Verlet法を使って、キーを押した長さに応じてジャンプの高さが変わるプログラムを作成。
  作ったものをここに公開。

6日目
  ブロックが右から左へ移動するアニメーションと、キャラクターとブロックの当たり判定をプログラミング。ゲームっぽくなる。

7日目
  ブロックの位置や高さを記述した文字列を読み込んで、ブロックを配置する部分をプログラミング。
  スタート／クリアメッセージ画像をGIMP2で作成。
  テストと難易度の調整。

8日目(今日)
  引き続きテストと難易度を調整し、Internet Explorer対応をして公開。

「迫ってくる物体をジャンプして飛び越える」というゲームのイメージは1日目からあったが、そのために必要な「キーを押した長さに応じてジャンプの高さを変える」プログラムを作るのに5日かかった。時間がかかった割には、他に応用できそうな気がしない。
テストと難易度の調整に2日かかった。keyupイベントが拾われなかった場合のバグに公開直前に気づくなど、パスを網羅しても見つけられない部分のテストが難しい。
自分で作ったステージをクリアできなかったため、ジャンプ力を表示したり地面に等間隔に印をつけたりした。

次は音が出るようにしよう。