はてなブックマーク

個人的にずっと作ってるゲームライブラリ tmlib.js のゲームプログラミングチュートリアルです. 最近は, iPhone アプリや Andorid アプリ, 勉強会や教育機関などでも使われてきている tmlib.js. 4月に 0.5.0 をリリースし, 大幅アップデートしてだいぶ仕様も固まり使いやすくなってきました. なので, そろそろ真剣にチュートリアルを充実させていきます!!(今までサボっててごめんなさい) 今回はタッチナンバーという, 超画期的よくあるカジュアルゲームを作っていきます. tmlib.js って何？ さっそく作る前に tmlib.js って何？って方もいると思うので軽く説明させてください. ざっくり言うと tmlib.js は アイディアを即座に形にできるライブラリです. 『てぃーえむ りぶ ドット じぇいえす』と読みます. tmlib.js を使えば, ゲ

ゲームなんかを作るときによくあるのですが, タイマーを右揃えで小数点以下まで表示したいってことがあります. こういうやつですね. これ JavaScript だと超簡単にできちゃいます♪ よかったら参考にしてください. やり方 Number.prototype.toFixed(digits) を使います. これを使えば超簡単に下記のような結果を得られます. console.log((1).toFixed(2)); // 1.00 console.log((1.2).toFixed(2)); // 1.20 console.log((1.23).toFixed(2)); // 1.23 console.log((1.234).toFixed(2)); // 1.23 引数は桁数です. toFixed() の挙動 恥ずかしながら toFixed のちゃんとした挙動は最近知りました… て

エラーが起きたい際に, 共通で何か処理をやりたい場面ってよくありますよね？ 例えば console 以外でエラーが起きた行を表示したい エラーの内容を日本語化したい エラーの内容をサーバーに送りたい などなど. 今回は JavaScript で起きたエラーを検知, 捕捉して ハンドリングする方法を紹介します. エラー時に必ず呼ばれる関数を登録しよう JavaScript ではエラーが起きると window オブジェクトの error イベントが発火します. なので下記のように error イベントを登録しておけば エラー時に何か処理を行うといったことを簡単で実現できます. window.onerror = function(msg, url, line, col, error) { console.log(msg); // エラーの内容 }; 引数は msg … エラーメッセージ u

備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingClientRect(); console.log(rect.left); // x座標(絶対座標) console.log(rect.top); // y座標(絶対座標) console.log(rect.width); // 幅 console.log(rect.height); /

地味にこれやってる良い感じの情報がなかったので メモがてら作ってみました　. デモ こちらデモになります. ラジオボタンが表示され押すとそれに対応した文字列がコンソールに表示されるのがわかると思います. [runstant] ソースコード html ラジオボタンを構成する部分です <div id='mode' class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" autocomplete="off" value="left"> Left </label> <label class="btn btn-primary"> <input type="radio" autocomplete="off" value="middle"> Middle </

Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン. 今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪ Materialize って？ 公式より A modern responsive front-end framework based on Material Design 「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」 的なことが書かれてますね. ざっくり言うと bootstrap のマテリアルデザイン版です. less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが, 基本的には同じ感じで使えます. Reference Official Github cdnjs Mater

だれもが一度はひっかかったことがあるであろうこれ var hoge = function() { var str = arguments.join(','); console.log(str); }; hoge('a', 'b', 'c'); 実際に runstant で動かすと join は関数じゃないよ って エラーがでているのがわかるかと思います. [runstant] これは arugments は配列っぽいけど配列ではない為, 配列系のメソッドが使えずに起きるエラーです. ただ arguments に配列のメソッドを適応したいって場面はよくあると思うので その解決方法を紹介します. arguments を Array に変換 Array.prototype.slice.call に arguments を渡すことで 配列に変換することができます. var hoge = funct

備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingClientRect(); console.log(rect.left); // x座標(絶対座標) console.log(rect.top); // y座標(絶対座標) console.log(rect.width); // 幅 console.log(rect.height);