数あてゲームでjsとcssを触ってみる

メモ CSS JavaScript

[Kazu-Ate Game]
http://n00dle.web.fc2.com/kazuate.html



ソースは以下

kazuate.html*1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Kazu-Ate Game</title>
<script type="text/javascript" src="kazuate.js"></script>
<link rel="stylesheet" type="text/css" href="kazuate.css">
</head>
<body>
<h1>かずあてげ〜む</h1><br/>
<hr><br/><br/>
<form name="form1">
	// 0から100までですきな整数をいれてね！<br/>
	<input type="button" name="but1" id="but1" value="どうだ！">
	<input type="text" name="ins">
	<br/><br/>
	ひんと:
	<input type="text" name="hint"><br/><br/><br/>
	<textarea name="text1" row="1" cols="20">
	</textarea><br/><br/>
	<input type="button" name="rel" id="rel" value="もういちど">
</form>
</body>
</html>


kazuate.css

body { font-size: 10pt; }
h1 { font-weight: normal; font-size: 15pt;}
textarea { border: none; color: red; font-size: 10pt;}


kazuate.js*2 *3

onload = init;

var r;
var a;
var c = 0;


function init() {
	document.form1.ins.focus();
	r = Math.floor(Math.random()*101);
	document.getElementById("but1").onclick = Check;
	document.getElementById("rel").onclick = Reload;
}

function Check() {
	c++;
	a = document.form1.ins.value;
	
	if (a == r) {
		document.form1.text1.value = c + "回目でびんご！";
	} else if (a < r) {
		document.form1.hint.value = "ちっちゃ！";
	} else if (a > r) {
		document.form1.hint.value = "おっきいよぉ…";
	} else {
		alert("半角数字を入力してくだしあ＞＜");
	}
}

function Reload() {
	window.location.reload();
	document.form1.reset();
}

*1:[7.Nov.2008 20:53] 「もういちど」ボタンでフォームのリセットと、初期化の為のリロードが出来るように修正

*2:[11:23] 試行数カウンタを修正

*3:*1に同じ