ゲームライブラリ構築までの道 #2「ブロック崩し編」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

プログラミングでは、どうしてもスピードにこだわってしまう、下駄です。
 

いろいろな便利なライブラリを試す時に、どうしても処理速度が、遅く、パフォーマンスが出ない時に、ギアの再発明をしてしまいます。
 

「できりゃあ、良い」というテスト・パイロット的な考え方と相反して、効率的に安定運用ができるという製品レベルの思考は必ず必要になります。
 

これは、エンジニアの独特の観点なのかもしれないけれど、企業では優先順位が上位では無い場合が多いので、エンジニアがしっかりと考える必要があることを経験で学びました。
 

そして、安定性を度外視したシステムで、問題が発生した時に責任を負わされるのは、それを構築したエンジニアでもありますからね。

本日のIT謎掛け

「システムの安定性」と、かけまして、
 

「貴重なキャビアの物価」と、ときます。
 

そのココロは・・・
 

フカ(負荷と、サメの鱶)が、高くなります。

本日の目的

前回作った、基本画面の描画に対して、表示だけさせているボールを動かしてみたいと思います。
 

アニメーションなので、随時再描画を繰り返す事になりますが、効率のいいアニメーションのさせ方を追求してみたいと思います。

ソースコード

 

全体的に書き直した箇所があったので、jsファイル全部掲載しておきました。
 

ポイントは、アニメーション処理に、通常であれば、setIntervalやsettimeoutを使うところを、”requestAnimationFrame”という命令を使うと、デバイスのCPU処理に適した値で処理が進められるため、無駄に負荷が増えないというメリットがあります。
 

使い方は、かんたんで、setTimeoutの時間していをしないバージョンだと考えるとわかりやすいでしょう。
 

参考 : https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
 

普通に関数を数珠つなぎするのと何が違うのかと言うと、プログラムが止まらないと、アクセスを一切受け付けなくなるので、こうしたプログラムの切れ目を入れてあげるのがjavascriptでは必要なので、繰り返しの処理をする際などに、こうしたテクニックを覚えておくと良いでしょうね。
 

not canvas

本日のまとめ

今回は、ボールの挙動を作りたかったので、画面の下を壁に見立てていますが、カーソル操作を受け付けるようにすると、下に到着するとゲームオーバーになりますね。
 

次回は、そのカーソル操作をやりたいと思います。お楽しみに。
 

全体のソースは、githubにpushしているので、そちらから取得してください。
 

https://github.com/yugeta/game_block
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です