HTML+CSS+JavaScriptでバトルゲーム(のバトルシーン)作ってみた

jsdo.itのSPECKというイベント?第一弾のお題がゲームに関するものだったので、
ゲーム好きとしては何か作っとかないかんやろ!と思ってMooToolsで組んでみたのがこれです。
動作確認はFirefoxとChrome、Safariで。IEでは見れないです。

forked from: GYAOS_sample – jsdo.it – share JavaScript, HTML5 and CSS

目新しい演出はなにもありませんwwwww
参考の動画見てて思ったのは、戦うのがプレイヤーが飼育しているモンスターなら
ボタン押して即行動っていうのは不自然じゃないかしら?ということで
指揮して動かすっていう感覚を作れたらそれでよかったんや…。

目指したのはターン制ではなくリアルタイムバトルなんですけどね、妄想するのと実際組むのとでは難易度が雲泥の差過ぎ。
ゲームプログラマーってすげぇや!と改めて尊敬した次第です。
細かいところまで作るには大分時間が足りなかったけど
HTML+CSS+JavaScriptでバトルゲームは作れるってことが分かったのでよしとします。

続きは中身についてのメモ(MooToolsのマニアックな話)です。

続きを読む

[MooTools] Chainについて

MooToolsにはChainというクラスがある。
これは関数の実行を数珠繋ぎに出来る便利なヤツです。

公式にあるChainのデモはFxのstartメソッドにchainメソッドをくっつけているものなのだけど、
ドキュメントの一番上に載っている、クラスにChainをImplemantするサンプルコードを実行してみると動かなかったりする。

    var Todo = new Class({
        Implements: Chain,
        initialize: function(){
            this.chain.apply(this, arguments);
        }
    });
 
    var myTodoList = new Todo(
        function(){ alert('get groceries'); },
        function(){ alert('go workout'); },
        function(){ alert('code mootools documentation until eyes close involuntarily'); },
        function(){ alert('sleep'); }
    );

続きを読む

MooTools基礎文法最速マスター

プログラミング基礎文法最速マスターまとめにMooToolsが無かったからカッとなって(ry

MooToolsについての概要はウィキペディアをご覧ください。
Wikiにも書いてある通り、MooToolsはオブジェクト指向の慣習とDRY原則に従っているため
OOPな言語を習得しているのであればその知識が大いに役立つフレームワークです。

巷で人気があるjQueryとの違いについてはjQuery vs MooToolsが詳しいです。
私がMooToolsを選んだときは既にjQueryが登場していましたが、遭えてMooToolsを選んだのは
「PHPと同時進行で覚えやすかった」のと、「文法がJavaScriptのそれであるから」です。
PHPのことがなかったりJavaScriptの基礎が無ったりしていたらjQueryを選んでいただろうと思います。
1つ覚えてしまえば後は似たようなものなので、今自分にとって一番使いやすい道具を選んでおけばいいんじゃないかと思います。

続きを読む

[tools] 楽天の定休日カレンダーが手打ちだからツールを作った

楽天ショップを管理している同僚がポロッとつぶやく。 ( ´ω`) 「定休日のカレンダーを手打ちするのが面倒臭いんだよね」 楽天ショップのカレンダーってどこの店でも出しているから、てっきり管理画面にそういうカレンダー出力機 … 続きを読む

MooTools Core 1.3 リリース!新機能・変更点まとめ

まだ私も良く分かってないので調べながらメモっていくつもりで。

1.3がでたので1.2で書いたプラグインもバージョンうpしなきゃ!と思っても慌てる必要はnothing!
下位互換機能がついたCore(width Compatibilityなやつ)を選べば共存出来る。

Slick

セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。

Create Element

1.2.xで要素を作るときのソース:

new Element("div", {"id": "mootools", "class": "moo cow","title":"Sample", "text":"MooTools!"});

Slickで書くとこうなる:

new Element("div#mootools.moo.cow[title=Sample]");

Result:

<div id="mootools" title="Sample" class="moo cow">MooTools?</div>

ZenCodingみたいな感じだけど作れる要素は1つだけです。
1行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

続きを読む

[MooTools] border-radiusの簡単なIE対策

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、
radius_sprite

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。(floatが中にある要素に使った場合など)

左:使用後 右:使用前
radius_sprite_after

続きを読む

[HTML5API] Web Workersで手抜きツール作ってみた

マイコミジャーナルにあるHTML5 APIのWeb Workersについての解説見て作ってみたものを、
最近サービス開始されたjsdo.itにうpしてみたよ。
jsdo.itはまだ開始まもなく、研究に余念の無い変態ユーザーの密度が計り知れない強さなので必見だと思う 😀

とりあえずWeb Workersっていうのが使ってみたかったんだけど、負荷の軽減具合を試すようなサンプルじゃ面白くないので、
ライブラリファイルにあるHTMLソースを組み合わせてベースになるソースを組む手抜きツールを作ってみた。
連想配列として設定済みの値を並べるだけでも量が増えればそれなりに重くなると思うし。

HTMLSourceBuilder

読み込んでるワーカーファイルライブラリファイルを編集すれば出力をカスタマイズできる。

続きを読む

[MooTools] 診断テスト作成スクリプト Diagnosizm

質問に対し、YESまたはNOで答える1問2答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。

diagnosizm

新しく書き直したものはこちら▼
[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた

続きを読む

[MooTools] Form.Validator.addAllThese for Japanese

MooToolsのForm.Validatorの足りないところを補う日本語環境向けaddAllThese。中身は殆どzeromailからの転載。
全角チェック、全てひらがな、全てカタカナ、全て全角数字、全て全角英数、日本語の有無、郵便番号、電話番号。
続きに郵便番号検索APIとの連携例と、Form.Validatorを搭載したメールフォームのデモがあります。

Form.Validator.addAllThese([
	['isJpOnly',
		{
			errorMsg:'全て半角英数の文字列は使用できません。',
			test: function(el){if(el.value.length == 0) return true; else return !el.get('value').test(/^[\x01-\x7e]+$/,'i');}
		}
	],
	['isNoAlp',
		{
			errorMsg:'全て全角で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[^ -~。-゚]*$/);}
		}
	],
	['isHirakana',
		{
			errorMsg:'全てひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[あ-ん]+$/,'i');}
		}
	],
	['isKatakana',
		{
			errorMsg:'全てカタカナで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ン]+$/,'i');}
		}
	],
	['isZNum',
		{
			errorMsg:'全て全角数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9]+$/,'i');}
		}
	],
	['isZAlp',
		{
			errorMsg:'全て全角英数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9A-Z]+$/,'i');}
		}
	],
	['isKana',
		{
			errorMsg:'カタカナもしくはひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ンあ-ん]+$/,'i');}
		}
	],
	['validate-zipcode',
		{
			errorMsg:'郵便番号の書式に誤りがあります。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/);}
		}
	],
	['validate-tel',
		{
			errorMsg:'電話番号の書式に誤りがあります。',
			test:function(el){
				var value = el.get('value');
				if(value.length == 0) return true;
				
				if(el.get('value').test("-")){
					if(value.test(/^(090|080|070)/)){
						return value.test(/(^(090|080|070)(\-\d{4}\-\d{4})$)|(^[\d\-]{13}$)/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4}$)/);
					}else{
						return value.test(/(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$)/);
					}
				}else{
					if(value.test(/^(090|080|070)/)){
						return value.test(/^(090|080|070)\d{8}$/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120\d{6}$)|(^0080\d{7}$)/);
					}else{
						return value.test(/^\d{10}$/);
					}
				}
			}
		}
	]
]);

電話番号の正規表現修正

続きを読む

[MooTools] 自動収集対策メールリンク自動挿入2

任意のclassを振った要素にメールアドレスを自動挿入するMooToolsクラスです。

@やドットを置換するっていうのはヴァニラJSver1.1で昔書いたけど、
@の前後にある文字列を置換する手もあるなあと。substituteの説明見てたら思いついた次第。

(X)HTMLソースは出力したい場所の要素にclassをつけるだけ。
body以下を対象にオプションで指定された要素があるかどうかを判別するので、タグやクラス名はなんでもいい。

<span class="email">Mail to Us? Please Enable JavaScript on you Browser.</span>

中に入っているテキストやHTMLはクリアされる。
画像作るの面倒でメッセージにしたけど、代わりに入れておくならメアド画像がおすすめ。

出力されるHTMLは以下2種類。

mailtoリンクを有りにした場合:

<span class="email"><a href="mailto:info@example.com" title="メールを送信">info@example.com</a></span>

リンク無しの場合:

<span class="email">info@example.com

続きを読む

[MooTools] テキストや画像のコピー禁止処理

Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。

ロジックは以下:

  1. 透過画像をbody全体に被せる(オプション:cover)
  2. oncopy を return false;
  3. Ctrl+AとCtrl+Cを無効にする
  4. B:前に戻る N:次に進む(オプション:move)

主な弱点と対策:

  • メニューから選ぶ「すべて選択」「コピー」
    →メニューやステータスバーを消した別窓に表示
  • ファイルへの直アクセス
    →アクセス制限、データベースの使用
  • ソース表示
    この記事この記事のようにデータベースやデータファイルからXHRでコンテンツを得る
    →jsファイルの難読化

window.openで表示

普通に表示

いずれも開発者ツールには無力です。
Ajax中心でいろいろ考えてみたけど、やっぱり画像にしたりFlash使うのが最強なのかな。
HTML5環境であればCanvasを使用するのがいいかもしれない。

続きを読む

[Ajax + PHP] Web2.0的にHTMLソースを隠す方法

MooToolsで遊んでる時になんとなく思いついた。

HTMLソースを完全に隠すことは無理っちゃ無理だけど、サイトの内容をパクられたりしないように防御する事は出来る。
主要な柱は以下3つ。

  • ファイルの置き場所を隠す
  • ソースを読めなくする
  • アクセスを弾く

ロボット対策、右クリック禁止、Flashサイト化、HTMLソースそのものの暗号化するなど色々あるけど、
Web2.0とか言われている時代なのでAjaxを使う方法もアリなんじゃないかなと思ったわけです。

クローラーにキャッシュされず、メールアドレスも拾われず、右クリックしても無駄、「ソースを表示」選んでも主要部分は見えない。
それらの需要を大体カバーするサイト制作方法についての解説とサンプル。

簡単なデモを作ってみた
(デモはサンプルと構成が異なります)

サイト構成例

  • index.html
    メニューボタン、コンテンツ表示エリアを置く
  • style.css
    スタイルシート
  • view.js
    表示とかHTTPリクエストの制御をする
  • reqest.php
    view.jsからのリクエストを受けてページ内容を返す
  • page/about.php, gallery.php, contact.php
    表示するコンテンツページ

続きを読む

[MooTools] SpriteNavigation Plugin

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

navigation

Download(psd file):

“SpriteNavigation Demo Base” をダウンロード nav.zip – 733 回のダウンロード – 41 KB

Creative Commons License

続きを読む

[MooTools Tutorial] MooTools用プラグインの作り方

このエントリーはMooToolsチュートリアル特別編で、MooTools用プラグインの作成手順をステップバイステップで晒しています。
解説ソースの元にしているのはmooContreGalleryですが、
チュートリアルに使っているソースは実際配布しているものと仕様が異なります。

初歩的な説明はかっ飛ばしているので、詳しい解説については公式のドキュメントとか高橋文樹さんの日本語訳ドキュメントなどを参考にどうぞ。

プラグインを作るにあたっての前提と必要なファイルの用意

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを実装するプラグインです。
元々「これどうやって作るの?」という質問に答えるために作ったものですが、結構いい感じに出来たので許可を頂いた上で公開するに至りました。
そういうわけなのでこのチュートリアルは質問に対する回答でもあります。

HTMLソースは本家とだいたい同じという前提ですが、すべてをスクリプト側で補うようには作っていないので
利用にあたってはCSSやソースにいくつか決まりごとがあります。

  • リスト要素(LI)の中に画像や説明が入っているとする。
  • リスト要素全体にクリックイベントを付与するので、cursor:pointerなどでクリック出来る事を示しておく。
  • サムネイルを入れている要素の背景にローディング画像を上下中央に設定しておく。
  • Fx.Scrollでスクロールさせる場合は下方向に余裕がないと途中でつっかえてしまうので、
    スタイルシートでpadding-bottom:600pxなどしておく。

MooToolsでは配布しやすくするためにClassを使って作るのが一般的。
プラグイン化するにあたって考えた仕様は次の通りです。

  • ギャラリーの主要な要素を別のタグに変更できるようにする
  • 要素を得る時に使うIDやクラス名は変更できるようにする
  • 画像ファイル名に含まれた任意の文字列でサムネイル(_s)と拡大画像(_b)を入れ替える

プラグインは任意で設定変更出来なきゃ意味がない。ってことで、これらはオプションで実現させました。

XHTMLファイルと画像、MooTools Core、Moreを用意。
Moreでは、画像読み込みをするのでAssets、開いたときにスクロールさせるのでScroll、説明をスライドさせるのでSlideが必要です。
(…と結論を書いてるけどMoreは作りながらリストアップしていく事が多い)

XHTMLソースの例:

<ul id="gallery"><!--ID指定するギャラリー-->
	<li><!--ギャラリーの子要素(自動取得)-->
		<a class="thumb" href="images/cat1.jpg"><img title="cat1" src="images/cat1_s.jpg" alt="cat1" width="100" height="68" />
		<!--サムネイル画像とそれを入れる要素。クラス名必須-->
		</a>
		<div class="info"><!--スライドされる説明要素。クラス名必須--></div>
	</li>
</ul>

noscript対策で拡大画像にリンクする場合は上記ソースのようにサムネイルを入れる要素がaタグになります。
サンプルでは上2つだけこのソースです。

続きから口調が投げやりなふいんきになります。

続きを読む

[MooTools Tutorial] ページのコンテンツをスライドさせて切り替える

コンテンツを全部横並びの帯状に配置して、ボタンクリックで水平方向にスライド表示させるチュートリアルです。
中身が少なくて写真で誤魔化さざるを得ないようなサイトにもってこいなアニメーション。
Coreだけで作れるのでお手軽だと思います。

View DEMO

View DEMO

Coreクラスのダウンロード方法などは省略しているので、初回のMooToolsのCoreとMoreについてをご覧ください。
なお、Step1~Step3も同じ内容となっています。

続きを読む