「たった5日で何ができるかゲーム」 ④ 冒険者たち Ver. 1.1.1 作成者:瞬希(灰色の棚) スポンサードリンク
「たった5日で何ができるかゲーム」 ④ 冒険者たち Ver. 1.1.1 作成者:瞬希(灰色の棚) スポンサードリンク
Posted 2012年12月10日 by fushimi & filed under Tips. クラスの作成・継承は enchant.Class.create という関数を用いて行います。第一引数に渡されたオブジェクトを、クラスの定義のために使います。通常は、{} で囲ったオブジェクトリテラルを渡すことで定義します。コンストラクタメソッドは initialize というキーで定義します。 var myClass = enchant.Class.create({ initialize: function(name){ this.name = name; }, sayHello: function(){ alert('Hello! My name is' + this.name); } }); var me = new myClass('Jack'); // -> me.name == '
// [About] touchstart 時に親ノードからひっぺがすことで 非表示っというか削除することができます. 流れとしては this.parentNode で自分の親にアクセスし parentNode の removeChild で自分を渡すことで削除しています. // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ T
説明 パドルでボール跳ね返した時にスコアを加算し表示にするには、あらかじめスコアを入れる変数もしくはプロパティを用意し0の数値を入れておきます。以下のサンプルではgame.score=0としてgameオブジェクトのscoreプロパティを使用しています。ボールとパドルが接触したらスコアを10増やします。 スコアの表示はあらかじめラベル機能を使って設定しておきます。ラベルは画面上に文字を表示することができるもので、後から内容を変更することができます。作成したラベルの内容を変更するにはラベルオブジェクトのtextプロパティに文字を入れます。サンプルではscoreLabelがラベルオブジェクトで、スコアが加算されたらtextプロパティにSCOREの文字と点数を入れています。 サンプル サンプルを実行|データをダウンロード ■HTML <!DOCTYPE html> <html> <head> <m
ここでは, 制限時間とスコアを表示します. このステップまで実装すればゲームとして遊べるようになります. SAMPLE サンプルはこちらで見るこができます. CODE 経過時間の取得 var progress = parseInt(game.frame/game.fps); ラベルを表示 var label = new Label(); label.text = "表示したいテキスト"; シーンを入れ替える var scene = new Scene(); scene.backgroundColor = 'rgba(0, 0, 0, 0.5)'; game.replaceScene(scene); コード全体 前回のStepから追加, 修正した箇所は太字になっています. /** * @author phi */ // enchant 初期化(global 領域に enchant を追加)
5分でわかる enchant.js アニメーション機能 1. 5分でわかるenchant.js アニメーション機能@sidestepism2013/05/29v0.7 対応版更新 2. 自己紹介伏見 遼平(株)ユビキタスエンターテイメント秋葉原リサーチセンター (UEI/ARC)9leap プロジェクトリーダー 3. たとえば「クマを移動させたい」としたら… 4. bear.addEventListener(“enterframe”, function(){bear.x ++;});// -> 1フレームに1ピクセル移動する 5. 動いた! 6. 止まらない… 7. bear.addEventListener(“enterframe”, function(){if(bear.x < 100)bear.x ++;});// -> 100ピクセルだけ移動させる 8. 今度は 9. 止まった!
Let's start learning HTML5 + JavaScript with code9leap and enchant.js! Learning programming with fun! Let's make your own game with HTML5! With powerful game engine "enchant.js", you can build up your game in 9 minutes! If you are new to HTML5, don't worry about that. Start up your project with modifying sample code. Integrated Develpment/Learning Environment on Web Code9leap includes "CodeMi
enchant.jsでスマホ向けゲームを作り始めるための基礎知識:enchant.jsでHTML5+JavaScriptゲーム開発入門(2)(1/4 ページ) 大人気のHTML5+JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく。今回は、enchant.jsでゲームを作るための準備の仕方や、サンプルアプリのソースコードを実例に基礎文法などを紹介
ecahnt.jsを使うJavaScriptのコードを実際に書いてみる まずは、画像の表示 main.jsをテキストエディタで開き、次のプログラムを書き写して保存してください。 enchant(); // おまじない window.onload = function() { // 行の終わりには、;(セミコロン)を付けます。 var game = new Game(320, 320); // ゲーム本体を準備すると同時に、表示される領域の大きさを設定しています。 game.fps = 24; // frames(フレーム)per(毎)second(秒):ゲームの進行スピードを設定しています。 game.preload('./img/chara1.png'); // pre(前)-load(読み込み):ゲームに使う素材をあらかじめ読み込んでおきます。 game.onload = functi
Index 開発の基本 逆引きリファレンス 注意事項 enchant.js の基本的なテンプレート 基本(描画) Scene を作る/消すには 画像を出すには 文字を出すには 音をならすには 基本(制御) 素材を読み込むには フレーム処理をするには タッチ(クリック)を処理するには マップ マップとは マップを作るには マップ上に障害物があるか判定するには スプライト スプライトを移動するには スプライトを回転/拡大縮小するには スプライトを透明にするには スプライトにCanvasを使うには スプライトで衝突判定を行うには 文字(ラベル) 文字色・フォントを変えるには 文字を移動するには 文字を透明にするには その他 シーンの背景色を変えるには ゲームのfpsを変えるには ゲーム画面の倍率を変えるには ロード時に表示されるシーンを変えるには 素材のプリロードを行うには 開発の基本 ench
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
1. 使用例です。 [HTML] <span id="targetBox">このSpanのCSS属性値を変える</span> : : [JavaScript] var box = document.getElementById('targetBox'); // CSSのbackgroundColor属性を変えて背景を青くする box.style.backgroundColor = "#BBCCDD";
最新版 古いバージョンのスクリプトを利用している方はご対応をお願いします ※現在掲載しているものは修正済みです。 カテゴリに関係するエントリを「あわせて読みたい」として表示 id:FFCCEoT_NESS さんに依頼されて、カテゴリごとのリンクを作る件について、調べていて、id:splicomさんの『【スマホ表示に対応】はてなブログで同じカテゴリーの記事へのリンクを表示する - Sprint Life』を知りました。こちらの仕組みを元にさせて頂いて以下のウィジェットを作成しました。 最初のカテゴリに関連するエントリを記事下に表示 スクレイピングをYahoo Pipesに委譲してクライアントごとの切り替え処理やリスクを減らす 上記に伴いクライアント回線側での通信量を最低限にする 表示スタイルは『僕の考えた最強の「あわせて読みたい」はてなブログパーツ - 太陽がまぶしかったから』に準拠 サムネ
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
ページをスクロールするとフワッとフェードインする「ページトップへ戻るボタン」をたったの10秒で実装してしまいます。 今回ご紹介するものは、スクロールするとフワッとフェードインしてボタンが出てきて、ボタンを押すとスルスルッとページトップに戻るものです。とても10秒クオリティーとは思えないものなのでご安心を。 HTML <a id="pageTop" href="#contents">ページトップへ</a> CSS #pageTop{ background:#DDD; border-radius:5px; color:#FFF; padding:20px; position:fixed; bottom:20px; right:20px; } #pageTop:hover{ background:#EEE; } JavaScript <script type="text/javascript">
GoogleにホストされているライブラリからjQueryファイルを読み込む方法を紹介します。 jQueryやMicrosoftのCDNを使ったjQueryファイルの読み込み方法はこちらを参考にしてください。 CDNにホストされているjQueryファイルの読み込みダウンロードしたjQueryファイルを読み込む方法はこちらを参考にしてください。 jQueryファイルの読み込み Google Hosted Libraries とはGoogle Hosted Librariesでは、さまざまなライブラリ(jQuery、jQuery UI、MooTools、Prototypeなど)を手早く簡単に利用できるようにライブラリファイルをホスティングしています。 これが便利で、1行のコードでライブラリを読み込むことができます。ダウンロードやアップロードの作業がないので簡単ですね。いくつかコード例を掲載します
スマホでも動く無限横スクロールアクションのブラウザゲームを作る:enchant.jsでHTML5+JavaScriptゲーム開発入門(終)(1/5 ページ) 大人気のHTML5+JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく連載。最終回は、総集編として、無限に横スクロールするアクションゲームを、10ステップで作りましょう。キモは当たり判定です。
早々のご返信ありがとうございます。 現在FC2ブログでアンテナを作ろうとしていまして、 先にお伝えをしたサイトで公開されていたRSS表示プログラムを使おうとしています。 具体的には下記の処理です。 ■———————— google.load(“feeds”, “1”); var entryArray = new Array(); var entryNum = 0; function initialize() { feedAdd(“***************”,0); feedAdd(“***************”,1); } function feedAdd(rssUrl, boolNum) { var feed = new google.feeds.Feed(rssUrl); feed.setNumEntries(4); feed.load(function(result) {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く