知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
Stage.js - 2D用のHTML5ゲームフレームワーク MOONGIFT
HTML5の実装が充実するのに合わせてWebブラウザ上で様々なアプリケーションが作られるようになっています。その一つとしてゲームがあります。Canvasなどを使うことでハイレベルなゲームが作れます。 ただしCanvasはこれまでのWebのように使うわけではなく、ごりごりコーディングしても効率的ではありません。そこで使いたいのがフレームワークです。今回はStage.jsを紹介します。 Stage.jsの使い方 Stage.jsの簡単なデモ。風車が回転します。 マウスの動きに合わせてオブジェクトの形が変わるデモ。 マルバツゲーム。 同じ色を合わせて消していくゲーム。 ブロック崩し。 Stage.jsは2Dゲームに対応しており、パズルゲームなどが向いていると思われます。タップ操作のゲームはiPhoneやタブレットでも遊べますので、多くの環境向けにゲームが開発できるでしょう。 Stage.jsHT
phina.js - tmlib.js後継の国産ゲーム開発ライブラリ MOONGIFT
ゲーム開発の難しいところは、単にライブラリを使ったからできるというわけではないということです。他の開発と違い、専用の覚えるべきポイントがたくさん存在します。 そうしたノウハウを詰め込んだ国産ゲームライブラリがphina.jsです。tmlib.jsの後継ライブラリとして開発されているゲームライブラリです。 phina.jsの使い方 phina.jsのデモです。アニメーションGIFなのでちょっと乱れていますが、実際に実行すると綺麗です。 マウスでクリックしたところを追従してくるキャラクター。 ブロック崩しのデモ。 phina.jsの主な特徴として、すでにある他のゲームフレームワーク（cocos2d-xやUnityなど）を実際に使っていく中でいいと思った機能を取り込んでいる点にあります。独りよがりにならず、他の開発者にとってもphina.jsを使うと気持ちがいい開発を行えるのではないでしょうか。
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python phina.js とは？ phina.js(フィナ ドット ジェイ・エス) は, JavaScript で作られた国産のゲームライブラリです. プログラミング初心者でも始めやすく, それでいて上級者のハイレベルな要求にも 応えられる, 柔軟な設計と豊富な機能を備えています. 使い方はカンタン! あなたの HTML ファイルに <script> タグで phina.js を読み込むだけ でで導入でき, あとは公式サイトで提示しているサンプルコードをベースに, あなたがやりたいことを追加していくだけです. p
小さなJavaScriptライブラリをガッチャンコしてゲームエンジンっぽいことをさせるのは可能なのか - ABAの日誌
ゲームを作る時にモノリシックなゲームエンジンを使う方法の他に、ブラウザゲームのプロトタイピングに役立つJavaScriptライブラリで述べたようなライブラリ群を機能ごとに組み合わせて作る、っていうアプローチも考えられる。そうした方が、グラフィックスはこれ、物理エンジンはこれ、という具合に自分が好きなAPIを使ってゲームを作れるし、一度に覚えなければならないことも少なくてすむ。 そういったライブラリを探すには、例えばhughsk/game-modulesというページがあって、ここにはゲーム向けの小さなライブラリがいっぱい挙げられている。これらから好きなモノをチョイスをして組み合わせれば、自分好みにカスタマイズしたゲームエンジンの出来上がりだ。 といけば簡単なのだが、実際はそんなに簡単ではない。ゲーム関連のライブラリは、requestAnimationFrame周りのフレームごとのアップデート
MegaJS - ロックマンをJavaScriptで再現
ロックマン（英語圏ではMegaman）は今なお色褪せることのない人気のゲームシリーズとなっています。今の高画質、高機能なロックマンも良いですが、やはり初代ファミコン時代のロックマンこそ至高、と思う方も多いのではないでしょうか。 そんな方にお勧めしたいのがMegaJS、HTML5/JavaScriptで再現されたロックマンです。ちゃんと遊べるレベルに仕上がっているのがすごいです。 MegaJSの使い方 操作はASWDで移動、O/Pキーでジャンプとビームです。 今のところ遊べるステージはFlash Manだけのようです。 遊んでいるところ。 MegaJSは時々ステージがなくなってハマったりする可能性がありますので注意してください。しかしJavaScriptでもファミコン時代のアクションゲームが十分に遊べるようになってきているというのはすごいですね。なお著作権上の問題はあるのでご注意ください。
Unreal Engine 4（アンリアルエンジン４）が無料化！ - どなたでも無料ダウンロード！将来のアップデートもすべて無料です！
Unreal Engine アセット アセット-Asset Physics Platformer Toolkit - Unreal Engi... 2025-05-27 Unreal Engine向け物理挙動チュートリアルでお馴染みLusiogenicから、物理演算を活用したプラットフォーマーツールキット「Physics Platformer Toolkit」がFab上でリリースされました！ 続きを読む 製品レビュー 製品＆ハードウェア-Product&Hardware 3Dconnexion SpaceMouse Review - 作業効率を次の次... 2025-05-24 3DconnexionのSpaceMouseシリーズは、独自の3Dマウス（6Dof入力）を備えた、3DモデリングやCAD作業における視点操作を直感的かつ効率的に行うためのデバイスです。今回主な3モデルである「Spa
[JS]懐かしい！あのテトリスがWebページに簡単に設置できるスクリプト -Blockrain.js
数行のコードをコピペするだけで、テトリスをWebページに簡単に設置できるjQueryのプラグインを紹介します。 テトリスは実際にプレイすることが可能で、スコア機能もついています。しかもレスポンシブ対応！ デモ：Try 操作は、キーボードのz, xで回転、矢印キーで移動です。 左右の矢印をクリックすると、テーマが変わります。 テーマはVim風、ゲームボーイ風、レトロ風など、いろいろ揃っています。 Blockrain.jsの使い方 Step 1: HTML テトリス用の空divを配置します。 <div class="game" style="width:250px; height:500px;"></div> Step 2: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="jquery.js">
![[JS]懐かしい！あのテトリスがWebページに簡単に設置できるスクリプト -Blockrain.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c65db02f5e2fa0d46a36f38cc21ca6129930400/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012001.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atlas.js