Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】CSSプロパティタイピングゲームのコード公開！

HTMLなど

　どうも！LSSです！！

この間、

というものを公開しました。

CSSのプロパティ、「使用頻度の高いもの」も「いつ使うんだ？」というようなものもひっくるめて出て来て、それをタイピングする、というものでした。

で、遅ればせながら今回はその拙作のコードを公開してみます。

コード
赤文字部分が登場する単語を並べている部分
たいしてゲーム性があるわけでもないですが^^;

コード

<style></style>
<div id="gamen"><span id="clks" class="t0" style="text-decoration: underline; cursor: pointer;">クリックで開始します</span></div>
<p> </p>
<div id="rireki"> </div>
<div id="scr"> </div>
<p>
<script>// <![CDATA[
tng=['align-content','align-items','align-self','alignment-adjust','alignment-baseline','animation','animation-delay','animation-direction','animation-duration','animation-fill-mode','animation-iteration-count','animation-name','animation-play-state','animation-timing-function','backface-visibility','background','background-attachment','background-clip','background-color','background-image','background-origin','background-position','background-repeat','background-size','baseline-shift','border','border-bottom','border-bottom-color','border-bottom-left-radius','border-bottom-right-radius','border-bottom-style','border-bottom-width','border-collapse','border-color','border-image','border-image-outset','border-image-repeat','border-image-slice','border-image-source','border-image-width','border-left','border-left-color','border-left-style','border-left-width','border-radius','border-right','border-right-color','border-right-style','border-right-width','border-spacing','border-style','border-top','border-top-color','border-top-left-radius','border-top-right-radius','border-top-style','border-top-width','border-width','bottom','box-decoration-break','box-shadow','box-sizing','break-after','break-before','break-inside','caption-side','clear','clip','color','column-count','column-fill','column-gap','column-rule','column-rule-color','column-rule-style','column-rule-width','column-span','column-width','columns','content','counter-increment','counter-reset','crop','cue','cue-after','cue-before','cursor','direction','display','dominant-baseline','drop-initial-after-adjust','drop-initial-after-align','drop-initial-before-adjust','drop-initial-before-align','drop-initial-size','drop-initial-value','empty-cells','fit','fit-position','flex','flex-basis','flex-direction','flex-flow','flex-grow','flex-shrink','flex-wrap','float','font','font-family','font-feature-settings','font-kerning','font-language-override','font-size','font-size-adjust','font-stretch','font-style','font-synthesis','font-variant','font-variant-alternates','font-variant-caps','font-variant-east-asian','font-variant-ligatures','font-variant-numeric','font-variant-position','font-weight','grid-cell','grid-column','grid-column-align','grid-column-sizing','grid-column-span','grid-columns','grid-flow','grid-row','grid-row-align','grid-row-sizing','grid-row-span','grid-rows','grid-template','hanging-punctuation','height','hyphens','icon','image-orientation','image-resolution','ime-mode','inline-box-align','justify-content','left','letter-spacing','line-break','line-height','line-stacking','line-stacking-ruby','line-stacking-shift','line-stacking-strategy','list-style','list-style-image','list-style-position','list-style-type','margin','margin-bottom','margin-left','margin-right','margin-top','marks','marquee-direction','marquee-play-count','marquee-speed','marquee-style','max-height','max-width','min-height','min-width','move-to','nav-down','nav-index','nav-left','nav-right','nav-up','object-fit','object-position','opacity','order','orphans','outline','outline-color','outline-offset','outline-style','outline-width','overflow','overflow-style','overflow-wrap','overflow-x','overflow-y','padding','padding-bottom','padding-left','padding-right','padding-top','page','page-break-after','page-break-before','page-break-inside','page-policy','pause','pause-after','pause-before','perspective','perspective-origin','position','quotes','resize','rest','rest-after','rest-before','right','ruby-align','ruby-overhang','ruby-position','ruby-span','size','speak','speak-as','tab-size','table-layout','target','target-name','target-new','target-position','text-align','text-align-last','text-combine-horizontal','text-combine-mode','text-decoration','text-decoration-color','text-decoration-line','text-decoration-skip','text-decoration-style','text-emphasis','text-emphasis-color','text-emphasis-position','text-emphasis-style','text-height','text-indent','text-justify','text-orientation','text-overflow','text-shadow','text-transform','text-underline-position','top','transform','transform-origin','transform-style','transition','transition-delay','transition-duration','transition-property','transition-timing-function','unicode-bidi','vertical-align','visibility','voice-balance','voice-duration','voice-family','voice-pitch','voice-range','voice-rate','voice-stress','voice-volume','white-space','widows','width','word-break','word-spacing','writing-mode','z-index'];
document.addEventListener('keydown',kp,false);
clks.addEventListener('click',function(){gw();},false);
ans='';
csr=0;
stt=0;
rtxt='';
mjc=0;
ttls=0;
nextans();
//gw();
function gw(){gamen.innerHTML='<span class="t0">'+ans.substr(0,csr)+'</span><span class="t1">'+ans.substr(csr,1)+'</span><span class="t2">'+ans.substr(csr+1)+'</span>';}
function rw(){rireki.innerHTML='文字数:'+mjc+'<br/>一文字あたりの秒数:'+Math.floor(1000*ttls/mjc)/1000+'<br/>'+rtxt;}
function nextans(){ans=tng[Math.floor(tng.length*Math.random())];csr=0;stt=0;}
function kp(e){
a=e.keyCode;
if(a==173 || a==189 || a==109){a=45;}
if(ans.charAt(csr)==String.fromCharCode(a).toLowerCase()){
csr++;
gw();
if(csr==1){stt=Date.now();}
if(csr>=ans.length){b=(Date.now()-stt)/1000;mjc+=ans.length;ttls+=b;rtxt=ans+' '+b+'秒<br/>'+rtxt;rw();nextans();gw();}
}else{}
}
// ]]></script>

赤文字部分が登場する単語を並べている部分

赤文字にしたところが、出てくる単語を設定している部分です。

このコード全文をコピペして、赤文字部分をタイプ練習したい単語に変更する事で、その練習したい単語を思う存分タイピングできます！ｗ

単語の数はいくつでも良くて、１個でも１００個でもOKです^^

ただ、スクリプトの作りから「半角小文字のアルファベットa~z」と「-」のみで設定する必要はあります。

またサンプルのように、単語の前後を' で挟み、単語と単語の間には,を入れてください。

f:id:little_strange:20210708232453p:plain — この記号です

たいしてゲーム性があるわけでもないですが^^;

並べる単語によっては、綴りを覚えるのにも役立つかもですね^^

単語をかき集める手間は↑これでちょっと手間が省けるかもです。（その場合 ' で挟む手間はかかりますが）

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^