ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript タイピング ゲームの実装コード_JavaScript スキル
JavaScript タイピング ゲームの実装コード_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:30:411616ブラウズ
効果は図に示すとおりです。 
以下はコア コードです
コードをコピーしますコードは次のとおりです。
GAME = {
//ランダムに文字を生成します
randLetter: function() {
var arrLetter = new Array("A", " B」、「C」、「D」、「E」、「F」、「G」、「H」、「I」、「J」、「K」、「L」、「M」、「N」 、「O」、「P」、「Q」、「R」、「S」、「T」、「U」、「V」、「W」、
「X」、
「Y」 , "Z");
//文字をランダムに生成します
varindex = Math.floor(Math.random() * 26);
return arrLetter[index]; //ランダムな文字の色
randLetterColor : function() {
var arrLetterColor = new Array("Red", "Green", "#555", "Blue", "Black"); = Math.floor(Math.random( ) * 4);
return arrLetterColor[index];
//ランダムな文字サイズ
randLetterSize: function() {
var arrLetterSize = 新しい Array("12px", " 16px", "20px", "24px", "28px", "32px", "36px", "40px"); () * 7);
return arrLetterSize[index];
},
//DIV を作成します
divCreate: function(width, height, left, top, value) {
this.幅 = 幅;
this.div = document.createElement("div");
this.div.style .height = 高さ;
this.div.style.left = 左;
this.div.innerText = 値; .color = this.randLetterColor();
this.div.style.fontSize = this.randLetterSize();
this.div.style.lineHeight = this.div.style.height; div.style.textAlign = "center" ;
this.div.style.fontWeight = "bold";
//this.div.style.border = "solid red 1px"; .style.position = "relative";
document.getElementById("map").appendChild(this.div);
return this.div>},
//DIV の場所
divDown: function() {
var divTop = parseInt(this.div.style.top.slice(0, -2)); //文字の正方形の上部
var mapHeight = parseInt(document.getElementById) ("map").style.height.slice(0, -2));
//disparent
if (divTop
// キーの値を取得します
document.onkeydown = function() {
// キーの文字は div の値と等しいか
if (String.fromCharCode(event.keyCode) == GAME.div.innerText) {
document.getElementById("TextRecord").value = "正しい";
GAME.div.style.display = "なし";
clearInterval(GAME.timeCreateID);
GAME.divCreate(100, 100, Math.floor(Math.random() * 300), -30, GAME.randLetter());
}
else {
document.getElementById("TextRecord ").value = "Error";
}
}
}
//最下行に達すると消えます、次に DIV を作成します
else {
this.div.style.display = "none";
GAME.divCreate(100, 100, Math.floor(Math.random() * 300), -30, this.randLetter());
}
},
timeCreateID: null,
timeDownID: null,
START: function() {
this.divCreate(100) , 100, 200, -40, this.randLetter());
this.timeDownID = setInterval("GAME.divDown();", 1000);
document.getElementById('ButtonStart').disabled = '無効';
document.getElementById('ButtonStop').disabled = '';
},
STOP: function() {
if (this.timeDownID != null) {
clearInterval(this.timeDownID);
this.div.style.display = "none ";
}
document.getElementById('ButtonStart').disabled = ''; ('ButtonStop').disabled = '無効';
}
}
効果のデモンストレーション
Snmon は質問を修正しました - -|||、質問の要件は 100 倍複雑です。 。 。
今のところ、ランダムに生成された文字のみが実装されており、キーボードは監視されており、スコアはまだ計算されていません。
スコア:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。