プロが教えるわが家の防犯対策術！

JavaScriptでサイコロのようなものを作成しています。

解決済

  • 質問者：kogeboko
  • 質問日時：
  • 回答数：9件

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>
・
・
・

「JavaScriptでサイコロのようなも」の質問画像
通報する

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

質問の本文を隠す

A 回答 (9件)

No.9ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

質問とは言えない無理な要望にお応え頂きすみませんでした。
とても助かりましたありがとうございます。

通報する
お礼日時：2009/10/06 07:57

No.8

  • 回答者： babu_baboo
  • 回答日時：

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 );
    • good
    • 0
    • 件
通報する
この回答へのお礼

yyr446様、ご指摘の通りFireFoxで見ておりました。
度々お手数をおかけしたこと、重ねてお詫び申し上げます

通報する
お礼日時：2009/10/06 07:59

No.7

  • 回答者： babu_baboo
  • 回答日時：

あ～ほんとだ。

^^;
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： yyr446
  • 回答日時：

当事者でないので、原因究明と修正を頼むわけでもありませんが


気づいたもので...
babu_babooさんのサンプルIEだとかっこいいですが、
Firefox（3.5）だとぶさいくです。
なぜか、Firefoxだと
this.img[c].style.leftの値がうまく設定されてないようで、
画像は変わりますが、左端で伸び縮みしているだけです。
IEだと真ん中でぐるぐる回っているような視覚効果が出てます。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

＞・ドラム回転のためにいわゆる目押しが出来てしまう


スピードをはやくすれば？

＞・回転している間に他の数字が見えてしまう
みえるはんいを、小さくすれば？

＞・数字画像が定位置で止まらない
いまは、なおすこんじょうがないよ

じぶんのべんきょうのためにかいたものだし
きたいされても・・・・・。

まるなげなんだし、きぼうのかいとうがつくまで、
まってみたら？あちこちできいてるみたいだし。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お気を悪くされたのでしたら申し訳ございません
ありがとうございました。

通報する
お礼日時：2009/10/05 20:04

No.4

  • 回答者： babu_baboo
  • 回答日時：

♪さいころのようでさいころでない。

べんべん。
♪すろっとのようですろっとでない。べんべん。

こうはんはつかれて、いつものように、ぐだぐだになってしまいました。^^;
ぜんかくくうはくは、はんかくになおしてちょ！

<!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>

この回答への補足

早速のご返答ありがとうございます
試用してみましたが、非常におもしろい動きで見た目にも楽しめるものでした。
セレクトメニューによる切り替えも正に求めている動作でした

しかしながら、
・ドラム回転のためにいわゆる目押しが出来てしまう
・回転している間に他の数字が見えてしまう
・数字画像が定位置で止まらない
という点においては求めるものではありませんでした

折角、ご回答下さったにも関わらず私の説明不足もあり、申し訳ありません
もしできましたら、お手すきの際にでも元の挙動のままでセレクトメニューに
対応させて頂くことは出来ませんでしょうか？

今回、お書き頂いたものは大切に保存させて頂き、また機会があれば
使わせて頂こうと思います。

補足日時：2009/10/05 18:50
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

【補記】selectのvalueは文字だから


var n=Math.floor(Math.random()*parseInt(parm));
でした。（掛け算で勝手に変換されてるかも）
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

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>
ですかねえ
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillin様も仰られていることから"画像を１枚にすること"は有用なことなのだとは思いますが、今の私ではその有用性を理解することが出来ません。
fujillin様のものにyyr446様のご回答を併せて勉強し、今後なんとか自力で
画像一枚で処理できるようにしてみたいと思います
この度はありがとうございました。

通報する
お礼日時：2009/10/06 08:05

No.1

  • 回答者： yyr446
  • 回答日時：

セレクトメニューとボタンについてはおいといて、


１つの画像で実現する方法ですが、
複数の画像を縦又は横に連結して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;
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報