アプリ版：「スタンプのみでお礼する」機能のリリースについて

全部のサイコロをjavascriptで動かしたい。

解決済

  • 質問者：nomnom20
  • 質問日時：
  • 回答数：2件

たくさんのサイコロを画面が切り替わったと同時に出てきて、サイコロが全部ランダムに違う数字になって出てくるようにしたいのですが、HTML文の
<li><img class="simap" src="img/MAP.png"/><img src="sai1.png" class="saikoro" name="saikoro"></li>の行が1個だったら、画面が切り替わるとちゃんとランダムに数字が変わるうようになり、何も問題ないのですが、
この行が2行以上になると、ランダムになるはずなのに、なぜかなりません。
毎回サイコロの目は１です。
どうしてランダム機能がちゃんと機能しないのか、
どう修正すればいいのか、
アドバイスお願いします。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊HTML文＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<link rel="stylesheet" href="daisu.css" type="text/css"/>
<script src="daisu.js"></script>
<title>ダイス戦略</title>
</head>
<body>
<div id="title">
<p>ああああ</p>
<p><button id="btn_gamennkirikae" type="button">あああ</button></p>
</div>
<div id="gamegamenn">
<p><button id="btn_hitori" type="button">ああああ</button></p>
</div>
<div id="map">
<ul id="sima">
<li><img class="simap" src="img/MAP.png"/><img src="sai1.png" class="saikoro" name="saikoro"></li> **********ここ***********************************
</ul>
</div>
<body>
</html>


＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ＣＳＳ文＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
#title{
width:1200px;
height:800px;
border:4px solid gray;
text-align:center;
margin-top:70px;
margin-left:auto;
margin-right:auto;
}
#gamegamenn{
width:1200px;
height:800px;
border:4px solid gray;
text-align:center;
margin-top:70px;
margin-left:auto;
margin-right:auto;
}
button#btn_gamennkirikae{
width: 150px;
height: 50px;
margin-top:300px;
}
#map{
width:1200px;
height:800px;
border:4px solid gray;
text-align:center;
margin-top:70px;
margin-left:auto;
margin-right:auto;
}
#map li{
float:left;
list-style-type: none;
margin-left:-50px;
}
#map img{

}
#sima{
float:left;
margin-left:50px;
}
.saikoro{
width:50px;
height:50px;
position:relative;
right:80px;
bottom:25px;
}
.simap{
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊JS文＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
window.addEventListener('load',initGame,false);
function initGame(){
var dialog = document.querySelector('#title');
dialog.style.display='block';
var dialog =document.querySelector('#gamegamenn');
dialog.style.display='none';
var dialog =document.querySelector('#map');
dialog.style.display='none';
var btn =document.querySelector('#btn_gamennkirikae');
btn.addEventListener('click',gamegamenn,false);
}
function gamegamenn(){
var dialog = document.querySelector('#title');
dialog.style.display='none';
var dialog =document.querySelector('#gamegamenn');
dialog.style.display='block';
gamestart();
}
function gamestart(){
var btn =document.querySelector('#btn_hitori');
btn.addEventListener('click',hitori,false);
}
function hitori(){
var dialog =document.querySelector('#gamegamenn');
dialog.style.display='none';
var dialog =document.querySelector('#map');
dialog.style.display='block';
chg();
}
function chg(){
sai=new Array("sai0.png","sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png");
r=Math.random()*6; //乱数表
rr=Math.floor(r)+1;　　//切り捨てて＋１する
document.saikoro.src=sai[rr];//サイコロを入れ替える
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

>この行が2行以上になると、ランダムになるはずなのに、なぜかなりません。


なぜって、2行以上になったら動かないもんこれじゃ。

document.saikoro.src=sai[rr];
これだとname="saikoro"のものしか変更できない。
だから、単純に行を増やしただけじゃダメ。

var sai=new Array("sai0.png","sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png");
var imgs = document.querySelectorAll('.saikoro');
for (var i = 0; i < imgs.length; i ++) {
var r = Math.floor(Math.random()*sai.length);
imgs[i].setAttribute('src', sai[r]);
}
こんな感じじゃないの？
こうすれば<img class="saikoro">がいくら増えても動く
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

＞サイコロが全部ランダムに違う数字



最大6つのさいころを、別々の数字として表示したいということでしょうか？
であれば配列saiを適当なユーザー関数でシャッフルして、
あたまから順番に抽出してやればいいでしょう

この回答への補足

回答ありがとうございます。が
ちょっと何言ってるかわかりません。
つまりどういうことでしょうか？

補足日時：2014/11/26 15:12
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

通報する
お礼日時：2014/11/26 17:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報