openleap向けにenchant.jsでシューティングゲームを作ってみた
2/1からopenleapの審査が始まります！（たぶん）
それに合わせてenchant.jsを使ってシューティングゲームを作ってみました。
■操作方法
タッチ操作の場合
移動：画面左下のアナログパッド
射撃：画面のどこかをタップ
キーボードの場合
移動：十字キー
射撃：スペースキー
ソースもダウンロードできるので興味のある人はドウゾ。
twitterのbootstrapを使ってみたよ
twitterの作っているBootstrap
今まで興味はあれど調べてすらなかったのですが
使ってみたらとんでもなく便利だったので紹介します。
Bootstrap
http://twitter.github.com/bootstrap/
Bootstrapの使い方
上のリンクから飛んだ先にあるlink要素をコピペする。以上。
簡単！早い！便利！
jQuery uiとか使おうとするといろんなファイルをダウンロードして、
読み込ませてって地味に面倒ですよね。
Bootstrapならlink要素が1行増えるだけで済むし、
twitterの提供するHOTLINKを使えばダウンロードしなくてもOK！すごい！ヤバい！
説明が全部英語だけど、ソースを見れば使い方もすぐわかる。
必要なものは大体揃っているからサクッとプロトタイプを作りたいときとかに良さそう。
ライセンスもApache License v2なので商用利用もできて安心ですね！
早速自作のツールに適用してみたけど、
ちょっとclassを設定するだけで殆どCSS書かずに今風のデザインが適用できて大満足でした。
ぜひ御試しあれ
JSでプレゼン用アプリをつくってみたよ
せっかくなので公開
まだまだ未熟者なのでもっとこーした方がいいあーした方がいいというのがあれば教えてくださいorz
操作方法
次のスライドへ：画面右側をクリック or キーボードの→
前のスライドへ：画面左側をクリック or キーボードの←
surarin - jsdo.it - share JavaScript, HTML5 and CSS
これからもちょいちょい機能追加とか修正入れて行ければいいなーと思います。
jqueryで作る簡単なツールチップ
プラグインとか使いたく無かったのでゴリゴリと、、、
script
<script type="text/javascript">
$(function() {
$('.tooltip').css('display', 'none');
$('.set_tooltip').mouseover(function(event){
var x = event.pageX - 10;
var y = event.pageY + 10;
$(event.target).children().css('display', 'block').css('left', x).css('top', y).fadeTo('nomal', 0.9);
});
$('.set_tooltip').mouseout(function(event){
$(event.target).children().css('display', 'none');
});
});
</script>html
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td class="set_tooltip">1<div class="tooltip">ほげ</div></td>
<td class="set_tooltip">2<div class="tooltip">ほげ</div></td>
<td class="set_tooltip">3<div class="tooltip">ほげ</div></td>
</tr>
</table>
<style type="text/css">
.tooltip {
background-color: #FFFFFF;
padding: 3px 5px;
border: 1px solid #696969;
font-size: 0.8em;
position: absolute;
}
</style>set_tooltipクラスのつけられた要素にカーソルを合わせた時に、
子要素にtooltipクラスの要素があればその中身を表示。
上記の例だと table と div を使っていますが、
親子関係が同じなら span でも p でもスクリプトはコピペで動きます。
ツールチップ内でのタグの使用も当然OK。
javascriptでsubmitできない
次のような感じで、セレクトボックスの値を変更した際に
onchange属性でformをsubmitしようとしたらなぜか反応しない...
<form action="/hoge/moge" method="get" name="form1">
<input type="text" name="text_input" value="" placeholder="文字列を入力" />
<input type="submit" name="submit" value="送信！" />
<select name="sel_box_1" onchange="document.form1.submit()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</form>
続きを読む
CodeIgniterで外部CSSを読み込む
調べてたら情報が不十分だったんで。
.htacessの所は忘れがちなんで、最初に使いそうな拡張子は無視される様に設定しとくと楽
View
link要素を追加
