what
シンプルなタイピングゲームを作成。
why
HTML,CSS,JavaScriptの学習、理解を深めるため
issue
・半角英数小文字のみ対応なので、全角日本語入力への対応。
・ミスタイプした際ライフポイントゲージが減り、０になるとゲームオーバーの機能。
index.html
<!DOCTYPE html><htmllang=ja><head><metacharset="utf-8"><title>Typing Game</title><linkrel ="stylesheet"href="css/styles.css"></head><body><pclass="bg"><imgsrc="bg.png"alt="背景"title="背景"></p><divclass="title"><pid="title">Typing Game</p></div><divclass="target"><pid="target">click to start</p></div><pclass="info">
Letter count:<spanid="score">0</span>
Time left:<spanid="timer">0.00</span>
Miss type:<spanid="miss">0</span></p><script src ="js/main.js"></script></body></html>styles.css
body{font-family:'Courier New',monospace;text-align:center;background-color:#b3b3b3;display:flex;flex-direction:column;align-items:center;position:relative;}p.bgimg{width:100vw;height:100vh;position:absolute;left:0;top:0;z-index:-1;-ms-filter:blur(6px);filter:blur(6px);}.title{font-size:50px;margin-top:50px;display:inline-block;color:#ffffff;/* 文字の色 */font-size:36pt;/* 文字のサイズ */letter-spacing:4px;/* 文字間 */text-shadow:2px2px9px#003366,-2px2px9px#003366,2px-2px9px#003366,-2px-2px9px#003366,2px0px9px#003366,0px2px9px#003366,-2px0px9px#003366,0px-2px9px#003366;/* 文字の影 */}.target{font-size:48px;letter-spacing:3px;background-color:rgb(161,134,255);width:700px;padding:40px;border-radius:20px;}.info{display:flex;flex-direction:column;}main.js
'use strict';{constwords=['strawberry trapper','guilty night,guilty kiss','jumping heart','hand in hand','dreamer','mirai ticket','self control','daydream worrior','lonely tuning','guilty eyes fever','happy party train','sky journey','galaxy hide and seek','innocent bird','shadow gate to love','landing action yeah','my list to you','miracle wave','awaken the power','crash mind','drop out','one more sunshine story','water blue new world','in this unstable world','pianoforte monologue','beginners sailing','red gem wink','white first love','new winding road','guilty farewell party','thank you friends','marine border parasol','next sparkling','hop stop nonstop','believe again','brightest melody','jump up high','deep resonance','dance with minotaurus','kokoro magic a to z','wake up challenger','new romantic sailors','love pulsar','changeless','never giving up',];letword;letloc;letscore;letmiss;consttimeLimit=30*1000;letstartTime;letisPlaying=false;vartype=newAudio('gun.mp3');vargameover=newAudio('correct.mp3');varmisstyp=newAudio('ready.mp3');consttarget=document.getElementById('target');constscoreLabel=document.getElementById('score');constmissLabel=document.getElementById('miss');consttimerLabel=document.getElementById('timer');functionupdateTarget(){letplaceholder='';for(leti=0;i<loc;i++){placeholder+='_';}target.textContent=placeholder+word.substring(loc);}functionupdateTimer(){consttimeLeft=startTime+timeLimit-Date.now();timerLabel.textContent=(timeLeft/1000).toFixed(2);consttimeoutId=setTimeout(()=>{updateTimer();},10);if(timeLeft<0){isPlaying=false;clearTimeout(timeoutId);timerLabel.textContent='0.00';gameover.play();gameover.volume=1.0;setTimeout(()=>{showResult();},100)target.textContent='click to replay';}}functionshowResult(){constaccuracy=score+miss===0?0:score/(score+miss)*100;alert(`${score} lettters.${miss}misses. ${accuracy.toFixed(2)}% accuracy!`);}window.addEventListener('click',()=>{if(isPlaying===true){return;}isPlaying=true;loc=0;score=0;miss=0;scoreLabel.textContent=score;missLabel.textContent=miss;word=words[Math.floor(Math.random()*words.length)];target.textContent=word;startTime=Date.now();updateTimer();});window.addEventListener('keydown',e=>{if(isPlaying!==true){return;}if(e.key===word[loc]){type.play();type.currentTime=0;type.volume=1.0;console.log('score');loc++;if(loc===word.length){word=words[Math.floor(Math.random()*words.length)];loc=0;}updateTarget();score++;scoreLabel.textContent=score;}else{misstyp.play();misstyp.currentTime=0;misstyp.volume=1.0;console.log('miss');miss++;missLabel.textContent=score;}});}GitHubはこちらです。
https://github.com/izn303/TypingGame
ぜひ遊んでみてください！
http://izn5656.stars.ne.jp/typing_game/