ブロック崩し
HTML5対応Webブラウザ用のブロック崩しです。 ゲーム画面下の方のメニューでレベルを選択し、開始ボタンをクリックしてゲームを始めてください。弾保持中は、上キーで発射、バーの上面に弾が接触した状態で下キーを押すと弾を保持することができます。 弾は、接触を繰り返すとスピードアップするので、追いきれなくなってきたら一度保持すると良いでしょう。保持する位置によって、弾の発射角度が異なります。 弾を下の方に落とすとゲームオーバー、すべてのブロックを崩すとクリアです。 ブロック崩し操作法 上キー／保持中の弾を発射 下キー／バーに接触している弾を保持 本ソフトは、HTML5対応Webブラウザ用にJavaScriptで記述されたフリーソフトです。無料で自由にご利用いただけます。 ブロック崩し開発メモ
canvasでサークル同士の衝突や壁面衝突。
今年の頭にちょくちょく書いていた canvasでのパーティクルシリーズだが、 最近またちょびちょびいじっているので、久方ぶりにブログに書いておく。 新しく作ったのは以下の2つだ。 particle6 particle7 particle6については壁とボール、particle7については それに加えてボールとボールの衝突をさせている。 また、参照にさせていただいたサイトは今までと同じ以下のサイトになる。 衝突判定編 平面幾何におけるベクトル演算 Flashゲーム講座＆ASサンプル集【衝突の計算について】 これまでの物で気になっていためり込み補正、わりと楽観的に考えていたのだけれども 単なる線分でも太さとかを考慮すると、結局四角形となり4辺プラス頂点からの90度分を 調整しなければならす、予想以上のやっかいさだった。 今回もこれまでに引き続き壁づりベクトルを使用したが、 こちらにあったボール
EaselJSの基本と簡易物理シミュレート入門 | Fuzz blog
この記事では、EaselJSを使って、ボールが跳ねる動作の簡易物理シミュレートをしながら、EaselJSとアニメーションのプログラミングの基本をなぞってみます。 今記事の、目指すべき完成形はこちらです。 完成形デモページ ボールがポーンと跳ねる動きを作成していきます。 目次 EaselJSについて EaselJSの基本的な扱い 1.ボールの作成と等速直線運動 2.ボールの跳ね返り 3.重力を与える 4.摩擦を与える まとめ EaselJSについて EaselJSについてはたくさんのブログで詳細に説明されていますが、簡潔に言えば「Canvasの2Dアニメーションがより作成しやすくなるライブラリ」と言った感じでしょうか。 FlashのAS3やっていた方は各クラスの構成など書き方や扱い方が類似しているので馴染みやすいかと思います。 公式ドキュメントが大変見やすく、参考になります。
CreateJSを試す2 キャラクタを配置してみる
前回に引き続きCreateJSを試してみています。 今回は、前回よりゲームっぽいものをということでキャラクタを配置してキーボードで動かせるようにしてみました。 →サンプル PC限定ですが、カーソルキーで移動できます。 素材はFirstSeedMaterialさんの素材を透過部分など一部加工して使用しています(二次使用禁止)。(RPGツクールをやっていた方ならお馴染み？ですかね) →First Seed Material 素材を切り取って配置する方法は以下のようにしています。 var el = $("#stage").get(0); _stage = new createjs.Stage(el); createjs.Ticker.setFPS(24); createjs.Ticker.addEventListener("tick", loop); var charData = { image
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Canvas Game: 2D Collision Detection |
Product Tips • Toggl Blog
