cloudpackブログ - HTML5 enchant.js クラス定義・キー操作
こんにちわ。 職人見習いの小森です。 HTML5 enchant.js 基本に引き続きHTML5とJavaScriptの勉強を兼ねてenchant.jsについてまとめます。 今回は、クラス定義とキー入力です。 ○クラス定義の例 var Enemy = Class.create(Sprite, { initialize : function() { Sprite.call(this); //初期化処理記述 } }); initialize : function()の中に、継承するクラスの初期化処理と新たに作成したクラスの初期化処理を記述します。 ○キー操作 var sp = new Sprite(32, 32); sp.x = 100; sp.y = 100; sp.addEventListener('enterframe', function(e) { if (game.input.lef
cloudpackブログ - HTML5 enchant.js 基本
こんにちわ。 職人見習いの小森です。 今回は、ゲーム作成が簡単になるenchant.jsについてまとめます。 まずは、画面作成と画像表示まで行なってみます。 ○game.html enchant.jsと実際にゲーム処理を記述するjsを読み込んでおきます。 ○gameMain.js window.onload = function() { var game = new Game(320, 320); game.preload('enemy.gif'); game.onload = function(){ var sp = new Sprite(32, 32); sp.image = game.assets['enemy.gif']; game.rootScene.addChild(sp); } game.rootScene.backgroundColor = 'rgb(255, 255, 2
cloudpackブログ - HTML5 アニメーションループ
こんにちわ。 職人見習いの小森です。 今回は、HTML5におけるアニメーションループについてです。 私はゲームを作っていた経験もあり、HTML5におけるゲーム開発にも興味あるので調べてみました。 ○setInterverlを使ったループ function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); setTimeoutやsetInterverlを利用したやり方が一般的ですが、requestAnimationFrameというのが新たに用意されています。 ○requestAnimationFrameを利用したループ if ( !window.requestAnimationFrame ) { window.requestAnimationFrame = ( function() { return window
cloudpackブログ - HTML5 プログレスバー
こんにちわ。 職人見習いの小森です。 今回は、HTML5のプログレスバーについてまとめます。 HTML5 ファイル 読み込みの記事で作成したものに追加します。 ○index.html Now Loading... progressタグを利用します。 ○file.js window.addEventListener("load",function(){ if(!window.file){ ele.innerHTML = "File APIが使用できません" return; } var ele = document.getElementById("fileinfo"); document.getElementById("read").addEventListner("click",function(){ var textFile = document.getElementById("filed
cloudpackブログ - HTML5 ファイル 読み込み
2011年12月14日 HTML5 ファイル 読み込み Tweet こんにちわ。 職人見習いの小森です。 今回は、HTML5のファイル読み込みをについてまとめます。 ○index.html <input type="file" id="filedata" accept="text/*" > <input type="button" id="read" value="読み込み" > <div> id="fileinfo" </div> <div> id="Contents" </div> accept="text/*" 上記を付けて、ファイル選択ボタンはテキストのみ選択可としています。 ○file.js window.addEventListener("load",function(){ if(!window.file){ ele.innerHTML = "File APIが使用でき
cloudpackブログ - HTML5 ローカルデータ保存
こんにちわ。 職人見習いの小森です。 今回は、HTML5のローカルデータ保存について紹介します。 localStrage機能を使うことで、データを永久的に保存でき、ブラウザを閉じても保持されます。 使い方は、localStorageというオブジェクトにプロパティと値を保存します。 下記のような、フォームより保存と読み込みを行います。 ○index.html localStorageに対応していなければ何も処理せず終了する状態になっています。 ○storage.js window.addEventListener("load",function(){ if(!window.localStorage ){ return; } document.getElementById("save").addEventListner("click",function(){ var text = docume
cloudpackブログ - HTML5でCanvas描画
こんにちわ。 職人見習いの小森です。 今回は、HTML5のCanvasにおける描画についてです。 ○index.html 未対応のブラウザであればメッセージだけが表示されます。 ○canvas.js window.addEventListener("load",function(){ if(!window.HTMLCanvasElement ){ return; } var cv = document.getElementById("c1"); var context = cv.getContext("2d"); if(!context){ return; } context.fillStyle="white"; context.fillRect(0,0,c1.width,c1.height); context.strokeStyle = "rgba(255,0,0,0.5)"; cont
cloudpackブログ - HTML5 ビデオ再生
こんにちわ。 職人見習いの小森です。 今回は、HTML5のビデオ再生についてです。 ○index.html タブレットなども含め様々なブラウザに対応するために複数の形式のファイルを用意。 それでも再生出来なかった場合に表示するメッセージも記述しておきます。 controlsオプションをつけることにより、ブラウザが再生・ストップ・音量調整などのコントローラーを自動的に付けてくれます。 また、自分で用意した画像を使って再生ボタンなどを作ることもできます。 ○index.html ○video.js window.addEventListener("load",function(){ if( !HTMLVideoElement ){ return; //HTML5 videoに対応してなければ処理終了 } var v1 = document.getElementById("video
cloudpackブログ - HTML5入門(その2) type属性編
この中から、いくつかをブラウザで確認してみました。(ブラウザはOpera11を使用) ■日時の入力欄 ■月の入力欄 ■週の入力欄 ■時間の入力欄 ■数値の入力欄 ■レンジの入力欄 ■色の入力欄 入力される内容がはっきりわかりやすくなり、カレンダーやレンジ、色など今まではJavaScriptを駆使しなければ実現できなかった表現が容易にできるようになりました。 ※この記事は、なかの人（moresmileman）が書いています。
cloudpackブログ - HTML5入門(その1)
こんにちは、 見習い職人の木村です。 ちょっと遅いですが、HTML5の勉強を始めました。 今回は、入門編ということで、従来のHTMLとHTML5の違いを紹介していきます。 さて、従来のHTMLとHTML5の違いは大きく3つのカテゴリに分けられます。 Webアプリケーションの導入 マークアップのの改善 アクセシビリティの改善 ■Webアプリケーションの導入 HTML5は、Webアプリケーションを作成するプラットフォームを意識しており、APIと一緒に利用することで、非常に簡単にアプリケーション機能を設置することができます。 HTML5で実現できるアプリケーション機能は以下のとおりです。 動画や音声の再生 2Dグラフィックスの操作 クライアント上でのデータ保存 ドメイン間での通信 ローカルファイルの読み込み ■マークアップの改善 HTML5では、文書構造の意味が明確になりました。 従来のHTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cloudpackブログ - HTML5 Drag&Drop