- ベストアンサー
JavaScriptでサイコロのようなものを作成しています。
JavaScriptでサイコロのようなものを作成しています。 スタートボタンで"数字の画像"(diceX.gif)が順に入れ替わって、ストップボタンで止まる、というものなのですが、 この画像数字の入れ替わる範囲を"1-2の間で、1-3の間で・・・"というように変化させたく思っています。 現状は下記のように別々に並べて画像、スタート.ストップが表示されるよういなっていまが、 これをセレクトメニューで「2」を選択した場合は1-2の、「3」を選択した場合には1-3..の間での変化と １つの画像、ボタン表示で済むようにしたいのですが、どのように記述すればよいのでしょうか？ こういったものを作成するのは初めてで、様々なサイトを参考になんとかここまでこぎ着けましたがどうにも行き詰まってしまいました なにとぞ宜しくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var myImage1 = new Image(); myImage1.src = "dice1.gif"; var myImage2 = new Image(); myImage2.src = "dice2.gif"; var myImage3 = new Image(); myImage3.src = "dice3.gif"; ・ ・ ・ var img =0; fileName = new Array("dice1.gif","dice2.gif","dice3.gif",・・・); function rotate2() { img = Math.floor(Math.random()*2); document.images["dice2"].src = fileName[img]; timer = setTimeout("rotate2()",30); } function stop2() { clearTimeout(timer); } function rotate3() { img = Math.floor(Math.random()*3); document.images["dice3"].src = fileName[img]; timer = setTimeout("rotate3()",30); } function stop3() { clearTimeout(timer); } ・ ・ ・ </SCRIPT> <BODY> <IMG src="dice2.gif" name="dice2"> <FORM action="javascript://"> <INPUT TYPE="submit" VALUE="start" onClick="rotate2()"> <INPUT TYPE="submit" VALUE="stop" onClick="stop2()"> </FORM> <IMG src="dice3.gif" name="dice3"> <FORM action="javascript://"> <INPUT TYPE="submit" VALUE="start" onClick="rotate3()"> <INPUT TYPE="submit" VALUE="stop" onClick="stop3()"> </FORM> ・ ・ ・
- kogeboko
- お礼率44% (4/9)
- JavaScript
- 回答数9
- ありがとう数8
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
#4様のように、楽しい動きはしませんが、ご質問にかなり近いもののつもり。 speedの数値を変えれば、速度が変わります。（例では 100msec） <div id="diece">の中の<img>群が切り替え表示の対象です。 （画像は#2様のご指摘のように、1枚の画像で行った方が良いように思いますが、ご質問文はそれぞれになっているのでとりあえずそのまま。） <html> <head> <style type="text/css"> .sel {float:left; padding-right:2em; } #dice { float:left; color:red; text-align: center;} #dice img { margin:0 auto 1em; } </style> <script type="text/javascript"> window.onload = function() { rotation.init(); } var rotation = { max:1, tmax:1, nmbr:0, flag:false, img:[], speed:100, init:function(){ this.img = document.getElementById('dice').getElementsByTagName('IMG'); this.max = this.img.length; this.tmax = this.max; for (var i=0; i<this.max; i++){ this.img[i].style.display = (i==this.nmbr)?'block':'none'; } }, start:function(f) { if (!this.flag) { var n = f.form.elements['type'].value; if (n) { n = parseInt(n); if (n>this.max) n = this.max; this.tmax = n; this.flag = true; this.disp(); } else { this.flag = false; } } }, stop:function() { this.flag = false; }, disp:function() { var n = this.nmbr; while (n == this.nmbr) n = Math.floor(Math.random()*this.tmax); this.img[this.nmbr].style.display = 'none'; this.img[n].style.display = 'block'; this.nmbr = n; if (this.flag) setTimeout("rotation.disp()", this.speed); } } </script> </head> <body> <form> <div class="sel"> <select name="type" id="type"> <option value="">選択してください <option value="2">2面サイコロ <option value="3">3面サイコロ <option value="4">4面サイコロ <option value="5">5面サイコロ <option value="6">6面サイコロ </select> </div> <div id="dice"> <img src="dice1.gif"> <img src="dice2.gif"> <img src="dice3.gif"> <img src="dice4.gif"> <img src="dice5.gif"> <img src="dice6.gif"> <input type="button" value=" start " onclick="rotation.start(this);"> <input type="button" value=" stop " onclick="rotation.stop();"> </div> </form> </body> </html>
その他の回答 (8)
- babu_baboo
- ベストアンサー率51% (268/525)
yyr446さん！ごしてき、ありがとうございま～す！^^; げんいんは、しょうすうをきりすてにするために |0 を つかってましたが、ちゃんと()でくくってないためでした。 ちゃんとparseIntつかえばいいものを・・・・。と、ひとりつっこみ。 Slot.prototype.start = (function ( sin ) { return function ( m ) { if( !m ) this.eflag = 0; var c, x0, x1, s; for( c = 0; c < this.n; c++) { x0 = this.r * sin( this.k[c] ); x1 = this.r * sin( this.k[c] + this.t) + 1; s = this.img[c].style; if( x0 < x1 ) { s.left = ((this.r + x0)|0) + 'px'; s.width= Math.abs((x1-x0)|0) + 'px'; s.zIndex = 1 + ''; } else { s.left = ((this.r + x1)|0) + 'px'; s.width= Math.abs((x0-x1)|0) + 'px'; s.zIndex = 0 + ''; } this.k[c] += this.step; } if( this.eflag == 1) { this.step-=.2; if( this.step < 0) { this.eflag = 2; this.step = this.bstep; } } if( this.eflag == 2) return; setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval ); }; })( Math2.sin );
お礼
yyr446様、ご指摘の通りFireFoxで見ておりました。 度々お手数をおかけしたこと、重ねてお詫び申し上げます
- babu_baboo
- ベストアンサー率51% (268/525)
あ～ほんとだ。^^;
- yyr446
- ベストアンサー率65% (870/1330)
当事者でないので、原因究明と修正を頼むわけでもありませんが 気づいたもので... babu_babooさんのサンプルIEだとかっこいいですが、 Firefox（3.5）だとぶさいくです。 なぜか、Firefoxだと this.img[c].style.leftの値がうまく設定されてないようで、 画像は変わりますが、左端で伸び縮みしているだけです。 IEだと真ん中でぐるぐる回っているような視覚効果が出てます。
- babu_baboo
- ベストアンサー率51% (268/525)
＞・ドラム回転のためにいわゆる目押しが出来てしまう スピードをはやくすれば？ ＞・回転している間に他の数字が見えてしまう みえるはんいを、小さくすれば？ ＞・数字画像が定位置で止まらない いまは、なおすこんじょうがないよ じぶんのべんきょうのためにかいたものだし きたいされても・・・・・。 まるなげなんだし、きぼうのかいとうがつくまで、 まってみたら？あちこちできいてるみたいだし。
お礼
お気を悪くされたのでしたら申し訳ございません ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
♪さいころのようでさいころでない。べんべん。 ♪すろっとのようですろっとでない。べんべん。 こうはんはつかれて、いつものように、ぐだぐだになってしまいました。^^; ぜんかくくうはくは、はんかくになおしてちょ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Images</title> <style type="text/css"> #waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;} #waku0 img { border:0px none; width:120px; height:90px; } </style> <div id="waku0"> <img src="./img/0.gif" alt="Image0"> <img src="./img/1.gif" alt="Image1"> <img src="./img/2.gif" alt="Image2"> <img src="./img/3.gif" alt="Image3"> <img src="./img/4.gif" alt="Image4"> <img src="./img/5.gif" alt="Image5"> <img src="./img/6.gif" alt="Image6"> <img src="./img/7.gif" alt="Image7"> <img src="./img/8.gif" alt="Image8"> <img src="./img/9.gif" alt="Image9"> </div> <p> <select id="a" onchange="if(p.eflag==2) { p = new Slot('waku0', 5, 30, +this.value); }"> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> <input type="button" value="start" onclick="if(p.eflag == 2)p.start()"> / <input type="button" value="stop" onclick="p.stop()"> </p> <script type="text/javascript"> var Math2 = new function ( ) { var sinTable = [ ]; var cosTable = [ ]; var i, t; for( i = 0; i < 720; i++ ) { t = i * Math.PI / 180; sinTable[ i ] = Math.sin( t ); cosTable[ i ] = Math.cos( t ); } this.sin = function ( deg ) { return sinTable[ (360 + deg % 360) |0 ]; }; this.cos = function ( deg ) { return cosTable[ (360 + deg % 360) |0 ]; }; }; var Slot = function ( ) { this.init.apply( this, arguments ); }; Slot.prototype.init = function ( pid, step, interval, face ) { if( !( this.e = document.getElementById( pid ) ) ) return null; var c, o; this.e.style.overflow = 'hidden'; this.e.style.position = 'relative'; this.img = this.e.getElementsByTagName( 'IMG' ); this.r = this.e.offsetWidth / 2; this.n = face || this.img.length; this.t = 360 / this.n; this.k = [ ]; this.step = step; this.bstep = step; this.interval = interval; this.eflag = 2; for( c = 0; o = this.img[ c ]; c++) { this.k[c] = this.t * c; o.style.position = 'absolute'; o.style.visibility = c < this.n ? 'visible': 'hidden'; } this.start(1); return true; }; Slot.prototype.start = (function ( sin ) { return function ( m ) { if( !m ) this.eflag = 0; var c, x0, x1, s; for( c = 0; c < this.n; c++) { x0 = this.r * sin( this.k[c] ); x1 = this.r * sin( this.k[c] + this.t) + 1; s = this.img[c].style; if( x0 < x1 ) { s.left = (this.r + x0)|0 + 'px'; s.width= Math.abs((x1-x0)|0) + 'px'; s.zIndex = 1 + ''; } else { s.left = (this.r + x1)|0 + 'px'; s.width= Math.abs((x0-x1)|0) + 'px'; s.zIndex = 0 + ''; } this.k[c] += this.step; } if( this.eflag == 1) { this.step-=.2; if( this.step < 0) { this.eflag = 2; this.step = this.bstep; } } if( this.eflag == 2) return; setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval ); }; })( Math2.sin ); Slot.prototype.stop = (function ( ) { return function ( ) { this.eflag = 1; }; })(); var p = new Slot('waku0', 5, 20,+document.getElementById('a').value) </script>
補足
早速のご返答ありがとうございます 試用してみましたが、非常におもしろい動きで見た目にも楽しめるものでした。 セレクトメニューによる切り替えも正に求めている動作でした しかしながら、 ・ドラム回転のためにいわゆる目押しが出来てしまう ・回転している間に他の数字が見えてしまう ・数字画像が定位置で止まらない という点においては求めるものではありませんでした 折角、ご回答下さったにも関わらず私の説明不足もあり、申し訳ありません もしできましたら、お手すきの際にでも元の挙動のままでセレクトメニューに 対応させて頂くことは出来ませんでしょうか？ 今回、お書き頂いたものは大切に保存させて頂き、また機会があれば 使わせて頂こうと思います。
- yyr446
- ベストアンサー率65% (870/1330)
【補記】selectのvalueは文字だから var n=Math.floor(Math.random()*parseInt(parm)); でした。（掛け算で勝手に変換されてるかも）
- yyr446
- ベストアンサー率65% (870/1330)
style clipは問題ありそうです。 よく条件を吟味してませんが、ヒントとしては、 縦横100px×100pxの画像10枚を縦につなげて 1000px×100pの1枚の画像all.gifにしておいて、 <div>と<img>を組み合わせて <div id="all_gazou" style="width:100px; height: 100px;overflow:hidden;z-index:99;"> <img src="all.gif" /> </div> と表示させておいて。 画像表示位置をｎ（0-9）の値によって document.getElementById("all_gazou").childNodes[0].style.top = (n * -100) + "px"; とする。 nは、parmによって function hoge(parm){ var n=Math.floor(Math.random()*parm); document.getElementById("all_gazou").childNodes[0].style.top = (n * -100) + "px"; } parmは選択させて <select onchange="javascript:hoge(this.value);"> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> ------- </select> ですかねえ
お礼
fujillin様も仰られていることから"画像を１枚にすること"は有用なことなのだとは思いますが、今の私ではその有用性を理解することが出来ません。 fujillin様のものにyyr446様のご回答を併せて勉強し、今後なんとか自力で 画像一枚で処理できるようにしてみたいと思います この度はありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
セレクトメニューとボタンについてはおいといて、 １つの画像で実現する方法ですが、 複数の画像を縦又は横に連結して1枚の画像としておいて、 その画像を表示する時のstyle属性ののclipを使って表示したい部分だけ 切り取って表示してしまうのはいかがでしょう。 <img src="all.gif" id="all_gazou" > val='rect(上端,右端,下端,左端)' document.getElementById("all_gazou").style.position = 'absolute'; document.getElementById("all_gazou").style.clip=val;
お礼
質問とは言えない無理な要望にお応え頂きすみませんでした。 とても助かりましたありがとうございます。