タイピングゲーム的なのを作りたい
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
↓html↓
<body>
<p id="theme"></p>
<div id="box"></div>
</body>
↓css↓
span {
font-size: 15px;
opacity: 0.3;
}
↓javascript↓
//題
var tema = ['おはよう', 'こんにちは', 'こんばんは'];
//ローマ字
var romaji = ['ohayo', 'konnichiha', 'konbanha'];
var n = 0;
var m = 0;
//各要素ノードを取得
var theme = document.getElementById('theme');
var box = document.getElementById('box');
//題の文字を追加
theme.appendChild(document.createTextNode(tema[m].toLocaleString()));
//タイピング用の文字を一文字ずつ分ける
var hako = romaji[m].toLocaleString().split('');
//分けたタイピング用の文字を一つずつ作ったspanに挿入
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
window.addEventListener('keydown', function(e) {
var moji = hako[n].charAt(0);
var key = e.key;
if (key == moji) {
var spans = box.getElementsByTagName('span');
spans[n].style.opacity = 1;
n++;
if (spans[spans.length-1].style.opacity == 1) {
theme.textContent = tema[m+1].toLocaleString();
while (box.firstChild) {
box.removeChild(box.firstChild);
}
m++
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
n = 0;
}
}
}, false);
<body>
<p id="theme"></p>
<div id="box"></div>
</body>
↓css↓
span {
font-size: 15px;
opacity: 0.3;
}
↓javascript↓
//題
var tema = ['おはよう', 'こんにちは', 'こんばんは'];
//ローマ字
var romaji = ['ohayo', 'konnichiha', 'konbanha'];
var n = 0;
var m = 0;
//各要素ノードを取得
var theme = document.getElementById('theme');
var box = document.getElementById('box');
//題の文字を追加
theme.appendChild(document.createTextNode(tema[m].toLocaleString()));
//タイピング用の文字を一文字ずつ分ける
var hako = romaji[m].toLocaleString().split('');
//分けたタイピング用の文字を一つずつ作ったspanに挿入
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
window.addEventListener('keydown', function(e) {
var moji = hako[n].charAt(0);
var key = e.key;
if (key == moji) {
var spans = box.getElementsByTagName('span');
spans[n].style.opacity = 1;
n++;
if (spans[spans.length-1].style.opacity == 1) {
theme.textContent = tema[m+1].toLocaleString();
while (box.firstChild) {
box.removeChild(box.firstChild);
}
m++
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
n = 0;
}
}
}, false);
タイピングゲームのように正確な文字を入力したら文字が濃くして最後の文字を入力したら次の題もしくはローマ字が出てくるようにしたいのですが'ohayo'の次の'konnichiha'が出てきません。拙い説明文ですがよろしくお願いします。
極西の人 さん
07月11日 18時50分
極西の人さん、こんにちは。
内容、拝見しました。
こちらの環境で試したところ、おっしゃるようにローマ字部分だけ変わりませんでした。
コードを追っていったところ、単語を打ち切ったときに、お題は交換する処理が入っていたのですが、ローマ字部分が同じ文字で再構築されているようでした。
ですので、新しい添え字mのローマ字をhakoに入れればOKです。
赤文字の部分を加えています。
このコードの課題として、重複する処理を関数にすると、より見通しが良くなります。
また、3こ分を打ち切った後、さらに次の存在しない配列の添え字を参照しようとしてエラーが発生しますので、打ち切った時の処理も必要ですね。
よろしければ参考になさってください。
内容、拝見しました。
こちらの環境で試したところ、おっしゃるようにローマ字部分だけ変わりませんでした。
コードを追っていったところ、単語を打ち切ったときに、お題は交換する処理が入っていたのですが、ローマ字部分が同じ文字で再構築されているようでした。
ですので、新しい添え字mのローマ字をhakoに入れればOKです。
赤文字の部分を加えています。
<script>
//題
var tema = ['おはよう', 'こんにちは', 'こんばんは'];
//ローマ字
var romaji = ['ohayo', 'konnichiha', 'konbanha'];
var n = 0;
var m = 0;
//各要素ノードを取得
var theme = document.getElementById('theme');
var box = document.getElementById('box');
//題の文字を追加
theme.appendChild(document.createTextNode(tema[m].toLocaleString()));
//タイピング用の文字を一文字ずつ分ける
var hako = romaji[m].toLocaleString().split('');
//分けたタイピング用の文字を一つずつ作ったspanに挿入
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
window.addEventListener('keydown', function(e) {
var moji = hako[n].charAt(0);
var key = e.key;
if (key == moji) {
var spans = box.getElementsByTagName('span');
spans[n].style.opacity = 1;
n++;
if (spans[spans.length-1].style.opacity == 1) {
theme.textContent = tema[m+1].toLocaleString();
while (box.firstChild) {
box.removeChild(box.firstChild);
}
m++;
hako = romaji[m].toLocaleString().split('');
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
n = 0;
}
}
}, false);
</script>
//題
var tema = ['おはよう', 'こんにちは', 'こんばんは'];
//ローマ字
var romaji = ['ohayo', 'konnichiha', 'konbanha'];
var n = 0;
var m = 0;
//各要素ノードを取得
var theme = document.getElementById('theme');
var box = document.getElementById('box');
//題の文字を追加
theme.appendChild(document.createTextNode(tema[m].toLocaleString()));
//タイピング用の文字を一文字ずつ分ける
var hako = romaji[m].toLocaleString().split('');
//分けたタイピング用の文字を一つずつ作ったspanに挿入
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
window.addEventListener('keydown', function(e) {
var moji = hako[n].charAt(0);
var key = e.key;
if (key == moji) {
var spans = box.getElementsByTagName('span');
spans[n].style.opacity = 1;
n++;
if (spans[spans.length-1].style.opacity == 1) {
theme.textContent = tema[m+1].toLocaleString();
while (box.firstChild) {
box.removeChild(box.firstChild);
}
m++;
hako = romaji[m].toLocaleString().split('');
for (var i = 0; i < hako.length; i++) {
var span = document.createElement('span');
var text = document.createTextNode(hako[i]);
span.appendChild(text);
box.appendChild(span);
}
n = 0;
}
}
}, false);
</script>
このコードの課題として、重複する処理を関数にすると、より見通しが良くなります。
また、3こ分を打ち切った後、さらに次の存在しない配列の添え字を参照しようとしてエラーが発生しますので、打ち切った時の処理も必要ですね。
よろしければ参考になさってください。
馬場誠 さん
07月12日 07時09分
困っていたので助かりました。
大変ありがとうございました。
大変ありがとうございました。
極西の人 さん
07月14日 22時56分
