タイピングゲームもどきを作ってみた

 一応冬休み期間中に勉強宣言をしていた。javascriptの集大成?ってことで。本当はリファレンス的ななにかって事でしたが、そっちは余り面白味も無いし、まだ完成途中なので...。


htmlのbody内

<div id="main"></div>
<div id="result"></div>

たった2行

javascriptの中身#その1

function $(e) { return document.getElementById(e); }

function addEvent(element, type, listener)
{

	if (element.addEventListener) {
		element.addEventListener(type, function(event){
			listener.call(this, event);
		}, false);
	} else if (element.attachEvent) {
		element.attachEvent('on' + type, function(event){
			listener.call(event.srcElement, event);
		});
	}
}

 前に書いたaddEventをちょこっと書き換えて流用。単にcall()にeventって引数を持たせただけですが。
 後はPrototype.jsでおなじみの$があるくらい。

 #その2

addEvent(window, "load", function(event){
	addEvent(document, "keydown", function(event){
		typing(keys[event.keyCode], $("main").innerHTML);
	});
	$("main").innerHTML = "hogehoge";
});


function typing(tp, text)
{
	if (tp == text.slice(0, 1)) {
		$("result").innerHTML = " ";
		$("main").innerHTML = text.slice(1);
	} else $("result").innerHTML = "bad!";
	
	if ($("main").innerHTML == "") $("result").innerHTML = "finish!";
}


var keys = {

	49 : "1", 50 : "2", 51 : "3", 52 : "4", 53 : "5",
	54 : "6", 55 : "7", 56 : "8", 57 : "9", 48 : "0",
	65 : "a", 66 : "b", 67 : "c", 68 : "d", 69 : "e",
	70 : "f", 71 : "g", 72 : "h", 73 : "i", 74 : "j",
	75 : "k", 76 : "l", 77 : "m", 78 : "n", 79 : "o",
	80 : "p", 81 : "q", 82 : "r", 83 : "s", 84 : "t",
	85 : "u", 86 : "v", 87 : "w", 88 : "x", 89 : "y",
	90 : "z", 32 : " "
};

 こんな感じ。keysがキーボードを押したときに通知される数字(キーコードっていうらしいです)を文字に変えるようにさせるように書いておいている感じ。

 30分くらいでテキトーに書いたのでおそらく何処かしらにバグがありそうな感じですが余り気にしない方向で←
 しかもタイピングゲームのくせに1文しか書けないところもテキトーなところ。やる気があったらあとでいろいろと実装してみようと思いますよ。