どうも！LSSです！！
ふと、双六ゲームのアイデアが浮かびました。
「山手線みたいな環状線を、双六の出た目の数だけ移動し、止まった駅を”制覇”したとして、全駅制覇したらゴール」
というゲーム。
このままだと完全にただの運ゲーなので、実際にゲームとして仕上げるには色々追加要素を入れてゲーム性を持たせる必要があります。
が、その前に、
「そんなゲームがあったとして、実際のところ何回ぐらいサイコロを振る事になるんだろう？」
というのが想像つかなくて（もちろん駅の数によっても違ってくるでしょうし）、ちょっと試作してみる事にしました。
環状線制覇双六（試作）
サイコロを振る
「サイコロを振る」をクリックすると、１～６の出目分、先に進みます。
右端と左端は繋がっています。
２６の駅、最初は全て「0」で、止まったところは「1」に変わります。
全ての駅が「1」になったらゲームクリア！
※あくまで試作品なので、見た目がしょぼいのはごめんなさいですｗ
このテストスクリプトのコード
<div id="gamen" style="border-radius: 15px; border: 3px solid #aaccff; padding: 0.6em;"> </div>
<p> </p>
<p><span id="btn" style="border-radius: 5px; border: 6px outset #ffccaa; padding: 0.6em; background-color: #ffccaa; user-select: none;">サイコロを振る</span></p>
<script>// <![CDATA[
btn.addEventListener('click',clk,false);
masu='0'.repeat(26);
gamen.innerHTML=masu;
s=0;
k=0;
d=0;
nuri(s);
gw();
function nuri(a){masu=masu.substr(0,a)+'1'+masu.substr(a+1);}
function clk(e){
e.preventDefault();
d=Math.floor(Math.random()*6+1);
s=(s+d)%masu.length;
k++;
nuri(s);
gw();
}
function gw(){
cnt=0;
for(i=0;i<masu.length;i++){cnt+=parseInt(masu.substr(i,1));}
gamen.innerHTML=k+'ターン'+(d>0?' サイコロ:'+d:'')+'<br/>'+masu.substr(0,s)+'<span style="color:red;">'+masu.substr(s,1)+'</span>'+masu.substr(s+1)+' '+cnt+'/'+masu.length+'制覇';
if(cnt>=masu.length){btn.removeEventListener('click',clk,false);btn.innerHTML='完全制覇しました！！';}
}
// ]]></script>
試してみたところ…
だいたい、70ターン前後ぐらいでクリアとなるようです。
（とか書きながら、最後にもっかい試したら120ターン超えましたｗ）
理論上の最小ターン数は25ですが、まぁまぁゲームとして成立するかな…？
例えば、「いざという時に使える、移動マス数指定カード」みたいなアイテムがあれば、その分ターン数減らす事もできそうですし、他プレイヤーと競うゲームにするなら、「妨害カード」とかあっても良さそうですねｗ
作ってて初めて？見つけたCSSプロパティ
自分がこんな感じのJavaScriptゲームを作っていると、よく
「クリックした際に、そこの文字列が選択状態になってしまう」
という現象が起こります。
JavaScriptから対策を打つ事もできますが、今回ふとググってみると、
「CSSで文字列選択を拒否するプロパティ」
があるようです！
「サイコロを振る」ボタンのところに入れてみましたが、
user-select: none;
を入れておくだけで、その該当要素の文字列が選択不可になります！
お手軽ですね^^
こういったゲームにも便利ですし、それ以外に普通のブログ記事にも使える場面があるのかも？？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
