【ゲーム案】環状線制覇双六、なんてのを考えてみました【実験】

　どうも！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;

を入れておくだけで、その該当要素の文字列が選択不可になります！

お手軽ですね^^

こういったゲームにも便利ですし、それ以外に普通のブログ記事にも使える場面があるのかも？？

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

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