html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>タイピングゲーム</title> 6 <link rel="stylesheet" type="text/css" href="css/typing.css"> 7 </head> 8<body> 9 10 <p id="target">Click to start</p> 11 12 <p class="info" > 13 Letter count ; <span id="score">0 </span>, 14 Miss count ; <span id="miss">0 </span>, 15 </p> 16 17<!-- 結果発表 --> 18<div class="cantsee" id="cantseeresult"> 19 <h2>あなたの結果は</h2> 20 <p id="itsresult"><span id="result">1</span>点です</p> 21</div> 22 23<!-- //全体を暗くする --> 24<div id='surround'></div> 25 26 27 <script src="js/main.js"></script> 28</body> 29</html> 30
css
1 2body{ 3 margin: 0; 4 padding-top: 15%; 5 text-align: center; 6 font-family: 'courier' monospace; 7} 8 9#target{ 10 font-size: 48px; 11 letter-spacing: 3px; 12 z-index: 50; 13} 14 15.info{ 16 color: #ccc; 17 z-index: 50; 18} 19 20.cantsee{ 21 display: none; 22} 23#result{ 24 font-size: 40px; 25 font-weight: bold; 26} 27.resultpart{ 28 position: fixed; 29 width: 60%; 30 height: 150px;; 31 top:20%; 32 right: 20%; 33 z-index: 150; 34 background: white; 35 border: solid 8px orange; 36} 37 38/* 暗くする */ 39.black{ 40 position: absolute; 41 top:0; 42 display: fixed; 43 width: 100%; 44 height: 700px; 45 background: black; 46 opacity: 0.8; 47 z-index: 100; 48} 49h2{ 50 margin: 0; 51} 52#itsresult{ 53 font-size: 30px; 54} 55
JS
1 2'use strict'; 3 4 5 const words = ['apple', 'grape', 'orange','lemon', 'peach' , 'watermelon', 'pear', 'lychee','pineapple', 'strawberry' ] 6 let word = words[Math.floor(Math.random() * words.length)]; 7 //今打ってる文字の位置 8 let loc = 0; 9 //正しく打てた時 10 let score = 0; 11 //間違った時 12 let miss = 0; 13 //正解した問題数 14 let howMany = 0; 15 16 //wordのでるところ 17 const target = document.getElementById('target'); 18 19//そのwordの文字を打ち終わった時の_を出すための処理 20 function upDateTarget(){ 21 let placeHolder = ''; 22 for(let i = 0; i<loc; i++){ 23 placeHolder += '_'; 24 } 25 target.textContent = placeHolder + word.substring(loc); 26 } 27 28//指定数のwordが終わったらスコアを出す処理 29function resultScore(){ 30 let result = document.getElementById('result'); 31 let total = score + miss; 32 let totalscore = Math.floor(score / total * 100); 33 result.textContent = totalscore; 34 //結果画面を表示 35 const cantseeResult = document.getElementById('cantseeresult'); 36 cantseeResult.classList.remove('cantsee'); 37 cantseeResult.classList.add('resultpart'); 38 //画面全体を暗く 39 const surround = document.getElementById('surround'); 40 surround.classList.add('black'); 41} 42 43//途中のスコア、ミスの数を表示するため 44let scoreLabel = document.getElementById('score'); 45let missLabel = document.getElementById('miss'); 46 47 48 49window.addEventListener('click',()=>{ 50 upDateTarget(); 51}); 52 53 54//タイピングしてる時の処理 55window.addEventListener('keyup',e => { 56 console.log(e.key); 57 58 if (e.key === word[loc] ){ 59 loc++; 60 //そのwordが一つ終わった時の処 61 if(loc === word.length){ 62 word = words[Math.floor(Math.random() * words.length)]; 63 loc=0; 64 howMany++ 65 } 66 67 score++; 68 upDateTarget(); 69 scoreLabel.textContent = score; 70 }else{ 71 miss++; 72 missLabel.textContent = miss; 73 } 74 75 //wordが指定数クリアしたら結果をだす 76 if(howMany===3){ 77 resultScore(); 78 } 79 80}); 81
タイピングゲームのようなものを作っていて、最後の結果の部分が表示されたら
その後にキーボードのどこを打っても結果の数字が変わらないようにしたいと思っています。
今のコードの状態だと最後の結果が表示された後もどこかキーボードを打つとその分の点数が減らされた点数に変わってしまいます。
何か対策等ありましたらよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/13 14:28
2019/08/13 14:34
2019/08/13 15:14
2019/08/13 20:25
2019/08/14 08:34