練習のために JavaScript を使った簡易タイピングゲームを作ってみました。
単語一覧の中からランダムに出題され、制限時間以内にいくつ入力できたかを計測します。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// 単語
var wordList = [
"Alfa", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India",
"Juliett", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo",
"Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"
];
// 時間制限
var timeLimit = 30;
var timer1;
var wordStr;
var wordChars;
var charIndex;
var messageArea;
var wordArea;
var typeArea;
var score;
var timeLeft;
window.onload = function (){
messageArea = document.getElementById("message");
wordArea = document.getElementById("word");
typeArea = document.getElementById("type");
startButton = document.getElementById("start-button");
}
// 3秒後に開始
function onStartButtonClick(){
messageArea.textContent = "Ready?";
setTimeout("startTyping()", 3000);
}
// 開始
function startTyping(){
score = 0;
timeLeft = timeLimit;
nextWord();
countDown();
timer1 = setInterval("countDown()", 1000);
startButton.disabled = true;
}
// 終了
function stopTyping(){
clearInterval(timer1);
wordChars = [];
messageArea.textContent = "Score: " + score;
wordArea.textContent = "";
typeArea.textContent = "";
startButton.disabled = false;
}
// 次の単語を表示
function nextWord(){
charIndex = 0;
var random = Math.floor( Math.random() * wordList.length );
wordArea.textContent = wordList[random];
typeArea.textContent = "";
wordChars = wordList[random].toUpperCase().split('');
}
// 残り時間を計測
function countDown(){
if(timeLeft <= 0) {
stopTyping();
return;
}
messageArea.textContent = timeLeft + " sec.";
timeLeft--;
}
// キー押下時の処理
document.onkeydown = function (e){
var keyStr;
if(e.keyCode == 189){
keyStr = "-";
} else {
keyStr = String.fromCharCode(e.keyCode);
}
if(wordChars[charIndex] == keyStr){
charIndex++;
typeArea.textContent = typeArea.textContent + keyStr;
if(charIndex== wordChars.length){
score++;
nextWord();
}
}
};
</script>
</head>
<body>
<form><p><input type="button" id="start-button" value="Start" onClick="onStartButtonClick()">
<span id="message">Press Start</span></p></form>
<hr>
<div style="font-weight: bold;" id="word"> </div>
<div id="type"> </div>
</body>
</html>
単語を split() で一文字ごとに区切り、入力した文字と先頭の文字が一致すれば一文字進めます。同様にその文字と一致すれば更に一文字進め、最後まで到達したら別の単語を表示します。
タイマーで残り時間を計測し、時間が来たらスコアを表示して終わります。
Similar Posts:
- [JS]HTML5 Canvasを使ったライフゲーム
- [JS][jQuery]フォームから複数のファイルをアップロード(入力欄の動的追加)
- [PHP]統計学（平均、分散、標準偏差、偏差値）
- [PHP]「もしかして: ～」スペルミス時の修正候補を表示する
- [PHP]文章中の単語に自動でリンクを貼る（キーワードリンク）
- [PHP, JS]jQueryのAjaxによるPHP、Javascript間の送受信(JSON)
- [PHP][jQuery]Ajax（非同期通信）を使ったチャット
- [JS]画像ファイルアップロード前にプレビューを表示する
