ES5なJavascriptでモダンなクラス的継承＆スーパー呼び出し - Qiita
動機 AltJSな言語ではなく、素のES5なJavascriptでクラスベース的継承ってどう書くのか、親クラスのメソッドの呼び出し方はどうか、モダンな書き方ってどうなのか、あらためて勉強してみた。 （この投稿ではES6やプロトタイパルな継承はあつかいません）
JavaScriptやCSS内に記述するファイルへの絶対パス（フルパス）について教えてください。
CentOS（Linux）のお話になりますが、異なるディレクトリにあるHTMLファイルや PHPファイルから参照できるように、JavaScriptやCSS内に記述されている 相対パスを絶対パスに変更したいです。 つまり、例えばJavaScriptだと、 $("#size_s img").attr("src","common/img/XXXXXXX.gif"); と記述されているのを、 $("#size_s img").attr("src","/virtual/service/example.com/http/test/common/img/XXXXXXX.gif"); というようにサーバーの絶対パスに変更したいのですが、これでは認識しないので、 $("#size_s img").attr("src","http://www.example.com/test/common/img/XXXXX
キャラクターの追加方法 - 強火で進め
今回のサンプル1 今回のサンプル2 サンプルの全ファイル 画面をタップするとタップした位置にキャラクターを追加する方法を解説。 普通に書くとこんなプログラムになります。しかし、 enchant.js の現在のバージョンではタイミングによっては一瞬、(0, 0)の位置に表示される様です。 (今回のサンプル1) enchant(); window.onload = function() { var game = new Game(320, 320); game.preload('bg.png', 'bear.gif'); game.onload = function() { var bg = new Sprite(320, 320); bg.image = game.assets['bg.png']; bg.addEventListener('touchstart', function(e)
jQueryでカスタムイベントを利用する（.on() と .trigger()） - Qiita
.on() メソッドと .trigger() メソッド jQuery の .on() メソッドは、指定した要素に対して任意のイベントをバインドします。 また、.trigger() メソッドを利用することで、その要素にバインドされたイベントを任意のタイミングで発生させることができます。 $('body').on('click', function() { console.log('<body>がクリックされました'); }); $('body').trigger('click'); // '<body>がクリックされました' カスタムイベントの利用 これらのメソッドでは、'click'、'scroll'、'mouseenter' といった標準的なイベントタイプだけではなく、独自のイベントタイプを定義して利用することも可能です。 「Webページ上で起こる何らかの状態変化を独自のイベントとして定
MQTTを試してみる( 2/2 ) - 佐藤の屋敷
前回に引き続きMQTTを試します。長いです。 ■前回の記事 satoyashiki.hatenablog.com ■環境、用意するもの Windows 8.1 64bit Windows上のCentOS6.X 仮想サーバ(vargrant)でのmosquitto-1.4.5 Windows上のクライアントはPaho 1.1 ( JavaScrpt client ) ■Paho 1.1 ( JavaScript版 ) www.eclipse.org ■前提 Windows上のCentOS6.Xへmosquittoをyumでインストール済み mosquittoが、CentOS上で起動済みでPython接続が成功したあとの話 ■以下手順続き WindowsからJavaScript接続してみる。上手くいかない。 あ、mosquittoがWebSocketモードじゃないのね？設定を変える。動かない。
JavaScriptのGetter/Setter 〜 JSおくのほそ道 #018 - Qiita
var man = { firstName: '', lastName: '', get fullName() { return this.firstName + ' ' + this.lastName; }, };
Canvasイベント操作まとめ - Qiita
はじめに 前回Canvasアニメーションの要点という記事を投稿しました。 今回はCanvasでのイベント操作について調べたものをまとめます。 Canvasアニメーションの要点 http://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1 今回のイベント範囲 ここで取り上げるイベントの種類は以下です。 （ひとまずtouchイベントは置いておきます...） click double click mouse over / out mouse down / up mouse move mouse wheel key up / down なおそれぞれのコードについては個人的にポイントと思う箇所のみを記述します。実際の動き（全てのコード）は↓ページで確認ができます http://nekoneko-wanwan.github.io/demo/ca
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
enchant.jsを用いたゲーム制作-シーンの切り替えについて : 初心者によるブログの勉強のためのブログ
enchant.jsのお話しの第4回目です。 第3回の「enchant.jsを用いたゲーム制作の基礎」では、ゲーム制作するための基本とも言える、文字、画像、音を扱う方法について簡単に紹介し、フレーム処理とクリック (タッチ) による処理についても説明をしました。 しかし、これだけでは、まだゲーム制作の説明としては不十分なので、今回も引き続き、ゲーム制作を行う上でも基礎的な話についての説明をしていきます。 あまり一度に色々と詰め込み過ぎても見にくいですし、覚えにくいという事で、今回はシーンの切り替えについてのみ説明を致します。 本格的にゲームを作成する上では、シーンの切り替えは基礎的なお話ですが、しっかりと理解する必要があります。 Sceneの切り替え方法 ゲームを作成していく時は、その時々で画面を変える必要が出てきます。 例えば、ゲームのタイトルがはじめに表示され、スタートボタンを押したら
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
enchant.js の Label を中央表示
Label の文字列を中央配置するのに少し引っかかったのでメモ。 こちらの情報で解決しました enchant.js でテキストラベルを中央に表示する - くろの雑記帳 http://kurochan-note.hatenablog.jp/entry/2013/01/28/000734 Label の _boundWidth からラベルの横幅を取得できるようです。 var button = new Group(); var background = new Sprite(); background.image = game.assets['/mucha/button.png']; background.width = background.image.width; background.height = background.image.height; button.addChild(bac
jQueryで独自イベントを作るよ - @thorikiriのてょりっき
独自イベントを作って、ライブラリ側で発火させて、アプリ側ではそこでハンドリングしたくなるよね。 それをやってみようってことですね。 パターン１：イベントオブジェクトにパラメータをセットする eventsample.js（ライブラリ側） (function($) { // ボタンをクリックしたらイベントを発火させる // こんな程度ならクリックイベントで実装した方が早いわけだが・・・ $('#button').click(function(ev) { // イベントオブジェクトを作る。イベント名と、パラメータを設定する。 var event = new $.Event('hoge', {color: 'red', message: 'Yes!!'}); // イベントを発火させる $('div').trigger(event); }); })(jQuery); eventsample.htm
enchant.jsで任意のシーンを最前面に表示する関数と解説 - SRC遊んだり書いたり。時々プログラミング
明けましておめでとうございます 今年はじめての更新となりました。本年も、どうぞよろしくお願いします。 jsdo.itにスクリプトを投稿 次のスクリプトを投稿しました。 少し技術的な解説をします。 解説 配列のコピー 実装 //配列をコピー Array.prototype.clone = function(){ var arr = new Array();//新しい配列 for( var i = 0; i< this.length; i++ ) arr[i] = this[i];//コピー return arr; } 利用方法 var hoge = 配列名.clone(); 関数内で新しく配列を作成し、コピー元の配列の要素をすべてコピーしています。 シーンを最前面に移動する 実装 //シーンを手前に表示する Game.prototype.forwardScene = function( sc
Macのプレビュー.appで写真の縦横比を固定したまま拡大・縮小する方法 / Inforati
プレビュー（Preview.app）を利用して、写真の縦と横の比率を固定したまま、拡大や縮小する方法です。 写真の縦横比を固定したままリサイズ プレビュー.appを使用して、複数の画像ファイルを同時に拡大や縮小する方法は以前に紹介しました。 今回は、プレビュー.appで、写真の縦横比を固定したまま、様々な単位で拡大や縮小する方法を紹介します。 まず、「ツール」メニューより、「サイズを調整」コマンドを実行し、サイズ調整ダイアログを表示して、その中の「縦横比を固定」のチェックボックスにチェックを入れます。すると、南京錠型のアイコンがロックされ縦横比が固定されます。 また、縦横の長さの単位は、隣のプルダウンで変更することができます。 とくに「パーセント」で相対的な比率によってリサイズすることができます。 また、「イメージを再サンプル」のチェックボックスにチェックを入れると、拡大縮小時に再サンプリ
絶対と相対パス
絶対パスと相対パス せんせい、画像や他のページへリンクしたいんですけど、うまく表示されないんですよ。画像の変わりに「×」って出たり、ページを開くと「not found」って表示されてしまいます。 「×」や「not found」となってしまう場合は、ページ・画像が指定した場所にないか、指定のパスが間違ってるのだよ。 パスですか？ <img src ="./***/***.gif">のことですよね？ そのとおり。ついでだから絶対パスと相対パスについて勉強しとこうか。パスの知識はホームページを作る時に必ず必要になる。画像やページの指定だけじゃなくて、CGI やJavascriptなんかを使う時にも必要。 絶対パス？？相対パス？？ どちらも画像やファイルの場所を指定するパスの書き方だ。最初は分かりにくいから↓の図を見てくれ。住所を例にして説明しよう。 ↑の場所に、それぞれ住んでいたとする。道を歩い
nvm で Node.js をインストールして npm で wscat をインストールしたときの作業記録 - Qiita
はじめに wscat コマンドを使いたくなったので， nvm で Node.js をインストールして， npm で wscat をインストールしたときの記録です． ログ 実行環境は， Mac OS X 10.8.5 Zsh 4.3.11 です． nvm インストール コマンドライン一行でインストールできます． ~/work % curl https://raw.githubusercontent.com/creationix/nvm/v0.11.1/install.sh | bash % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 3329 100 3329 0 0 9205 0 --:--:-- --:--:-- --:--:--
Amazon LinuxにMQTTブローカーMosquittoをインストールしてログ出力させる | DevelopersIO
MQTT ブローカー Mosquitto(1.4.4) を Amazon Linux(2015.09) にインストールし syslog 経由で /var/log/messages カスタムログ /var/log/mosquitto/mosquitto.log に出力させる手順を紹介します。 インストール Mosquitto や Amazon Linux のパッケージレポジトリに存在しません。 CentOS 6 向けの Mosquitto のレポジトリを追加し、サーバ(mosquitto とクライアント(mosquitto-clientsをインストールします。 $ sudo curl http://download.opensuse.org/repositories/home:/oojah:/mqtt/CentOS_CentOS-6/home:oojah:mqtt.repo -o /etc/
遅すぎたUnderscore.js入門 - 全体像 - Qiita
いまどこ？ 1 . 遅すぎたUnderscore.js入門 - 全体像 ←いまここ 2 . 遅すぎたUnderscore.js詳述 - Collections編 3 . 遅すぎたUnderscore.js入門 - Arrays編 4 . Functions 5 . Objects 6 . Utility 7 . Chaining Underscore.jsで何ができる？（私見） 非常にざっくり言うと、Underscore.jsはJavaScriptの表現力を高めることができる便利関数のライブラリです。その先に深淵なテーマもあるようですがひとまずは考えないでおきます。 たとえば配列を一つ飛びに足していったり、シャッフルしたり、従来ではアルゴリズムを組まなきゃいけないかったものが最初から提供されているという感じ。あとは高階関数（これは個人的にまだ真髄を分かっていないと思います。ぶっちゃけ勉強中
jQueryのカスタムイベントはどこにバインドさせるべきか - Kokudoriing
例えばサイドバーのアニメーションを促すカスタムイベントを使う場合。 サイドバーにはいろんな機能があるとして、専門のサイドバーオブジェクトを作ったとする。 でも $('#sidebar').on('click', function() { /* */ }) とすると保守がしんどい。 この場合、$('#sidebar').trigger('onRequestAnimation') とするべきか、 $.project.sidebar.trigger('onRequestAnimation') とするべきか。 後者の場合はシングルトンが前提になっている。 なので、サイトにサイドバーが2つ以上必要になった場合に破綻する。 そして安直にこの問題を避けるとこういう感じになる。 (function($, undefined) { $.project = $.project || {}; $.project
enchant.jsを用いたゲーム制作-TimeLineクラスを用いたアニメーションについて(3) : 初心者によるブログの勉強のためのブログ
enchant.jsのお話しの第26回目です。 前々回、前回に引き続き、 TimeLine クラスを用いたアニメーションについての説明を行っていきます。 これまでに説明していない TimeLine クラスのメソッドについて説明をした後に、最後にこれまで言葉は出てきたが、説明をしていなかったイージングについての説明を行います。 プロジェクトフォルダ (ベースは第二回を参照) ┣index.html (HTMLファイル) ┣jsフォルダ ┃┣main.jsファイル(ゲーム処理を記述したjavascriptファイル) ┃┗libフォルダ ┃ ┗enchant.jsファイル(フレームワーク) ┣imgフォルダ ┗soundフォルダ enchant.js でのアニメーションについて (3) さっそく、TimeLine クラスを用いたアニメーション制御に関する話の続きをしていきます。 アニメーシ
ブラウザからPaho(MQTTクライアント)を試す | DevelopersIO
丹内です。 何かと話題のMQTTですが、今回はブラウザから気軽に使ってみます。 ライブラリはPahoを使います。 ブローカーには、test.mosquitto.orgを使います。 準備 公式ページのインストール方法だとmvnでビルドしてcpという一手間がかかるので、必要となるライブラリを直接コピペするのがオススメです。 このスクリプトをrailsアプリのapp/assets/javascripts/以下に置きます。 ブラウザからはMQTT3.1 over WebSocketを使うことになるので、mqttws31.jsというファイル名が良いと思います。 それと、publishするクライアントとして使うので、mosquittoをインストールしましょう。 $ brew install mosquitto 使ってみる railsアプリを起動しブラウザでlocalhost:3000にアクセスします。
Let’s start enchant.js | enchant.js - A simple JavaScript framework for creating games and apps.
Index 開発の基本 逆引きリファレンス 注意事項 enchant.js の基本的なテンプレート 基本(描画) Scene を作る/消すには 画像を出すには 文字を出すには 音をならすには 基本(制御) 素材を読み込むには フレーム処理をするには タッチ(クリック)を処理するには マップ マップとは マップを作るには マップ上に障害物があるか判定するには スプライト スプライトを移動するには スプライトを回転/拡大縮小するには スプライトを透明にするには スプライトにCanvasを使うには スプライトで衝突判定を行うには 文字(ラベル) 文字色・フォントを変えるには 文字を移動するには 文字を透明にするには その他 シーンの背景色を変えるには ゲームのfpsを変えるには ゲーム画面の倍率を変えるには ロード時に表示されるシーンを変えるには 素材のプリロードを行うには 開発の基本 ench
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
enchant.jsで重要なスプライトとシーンを使うには
最後にpushSceneで押し込んだシーンを取り出し、前のシーンを表示させます。再び表示された前のシーンのイベントは再開されます。他の書き方と違い、括弧の中にシーン名を指定する必要はありません。 また、全てのシーンをpopScene()してしまうと表示するシーンが1つもなくなってしまうので注意してください。 現在の知識を使って「もぐらたたきゲーム」を作ってみよう 今回の最後に、これまでの知識を使ったゲームの紹介をします。 enchant(); window.onload = function() { var game_ = new Game(320, 320); // 表示領域の大きさを設定 game_.fps = 24; // ゲームの進行スピードを設定 game_.preload('./img/chara1.png', './img/start.png', './img/gameove
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.youtube.com/watch?v=_pq8eoh-uhU
Loading...
https://eclipse.org/paho/clients/js/
enchant.jsを用いたゲーム制作-TimeLineクラスを用いたアニメーションについて(1) : 初心者によるブログの勉強のためのブログ
【MQTT学習】JSONRPCをMQTT Brokerを使って実行するデモgem書いた - Qiita
スケボーにのったクマさんを走らせてみよう by shi3z
enchant.Class | JsDoc Reference
クマさんの行進 by shi3z
http://demo.yumemi.bz/enchant/vol3/kumatataki_sample/