- 締切済み
Javascriptでスロットゲーム
初めましてepacy400ともうします。 早速なのですがJavascriptでスロットゲームを作ろうとしているのですがなかなかうまくいきません。 作り方は自由なのですが乱数の使用はしない方法で作りたいと思ってます。 画像が10個ありautoChange()とNoを使って画像を回す仕組みをしようと計画してました。 もしよければどなたかご教授願えませんでしょうか? よろしくお願いします
- epacy400
- お礼率25% (1/4)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
ストップボタン付けました。次は、高速化かなぁ～。 画像は適当なアクセスカウンターの素材とかを使ってください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>SLOT</title> <style type="text/css"> #SLOT > div { float:left; text-align:center; } #SLOT > div > div { width:54px; height:210px; overflow:hidden; position:relative; border:1px #00f solid;text-align:left;} #SLOT > div > div > img { width:50px; height:70px; margin:2px;} </style> <p>SLOT Game ?</p> <div id="SLOT"> <div id="s0"> <div> <img src="./img/0.gif" alt="0"> <img src="./img/1.gif" alt="1"> <img src="./img/2.gif" alt="2"> <img src="./img/3.gif" alt="3"> <img src="./img/4.gif" alt="4"> <img src="./img/5.gif" alt="5"> <img src="./img/6.gif" alt="6"> <img src="./img/7.gif" alt="7"> <img src="./img/8.gif" alt="8"> <img src="./img/9.gif" alt="9"> </div> <input type="button" value="Stop"> </div> <div id="s1"> <div> <img src="./img/0.gif" alt="0"> <img src="./img/1.gif" alt="1"> <img src="./img/2.gif" alt="2"> <img src="./img/3.gif" alt="3"> <img src="./img/4.gif" alt="4"> <img src="./img/5.gif" alt="5"> <img src="./img/6.gif" alt="6"> <img src="./img/7.gif" alt="7"> <img src="./img/8.gif" alt="8"> <img src="./img/9.gif" alt="9"> </div> <input type="button" value="Stop"> </div> <div id="s2"> <div> <img src="./img/0.gif" alt="0"> <img src="./img/1.gif" alt="1"> <img src="./img/2.gif" alt="2"> <img src="./img/3.gif" alt="3"> <img src="./img/4.gif" alt="4"> <img src="./img/5.gif" alt="5"> <img src="./img/6.gif" alt="6"> <img src="./img/7.gif" alt="7"> <img src="./img/8.gif" alt="8"> <img src="./img/9.gif" alt="9"> </div> <input type="button" value="Stop"> </div> </div> <input type="button" value="Start" id="init"> <body> <script> //@cc_on hoge0 = new nandakore('s0'); hoge1 = new nandakore('s1'); hoge2 = new nandakore('s2'); document.body./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var o = evt.target||evt.srcElement; if( o.id=='init') { hoge0.init(50); hoge1.init(60); hoge2.init(70);} if( o.parentNode.id == 's0' ) hoge0.stop(); if( o.parentNode.id == 's1' ) hoge1.stop(); if( o.parentNode.id == 's2' ) hoge2.stop(); }, false); function nandakore( elementId ){ this.go = function(){ if( this.f ) { this.ks = (function(n,m){ return int( ( m + n ) / n ) * n; })(this.kk, this.ks); } else { this.st -= this.st/(50+this.t); if(this.st<1 && (int((this.ks%this.kk))==0)) clearInterval( this.tmid ); this.ks = this.ks+ ((this.st<1)?1:this.st); } var st = this.ks; i=0; while( o = this.imgs[ i++ ] ){ var t = int( Math.cos( st*rd) * this.r ); var h = int( Math.cos( (st + this.kk ) * rd ) * this.r ); var z = int( Math.sin( st * rd ) * 100 ); var s = o.style; s.zIndex = z; if(t>h){ s.height = t-h +'px'; s.top = (this.wh-t)+'px'; } st += this.kk; } if(this.f) { clearInterval( this.tmid ); } } this.stop = function(){ this.f = true; } this.init = function(n){ this.f = false; this.ks = int( Math.random() * this.n ) * ( 360 / this.n ); this.st = n; this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), 20); this.t = int( Math.random() * 10 ); } var int = Math.floor; var rd = Math.PI/180; var i,o; if( !elementId ) return false; this.imgs = document.getElementById( elementId ).getElementsByTagName( 'img' ); i=0; while( o = this.imgs[i++] ) o.style.position = 'absolute'; this.n = i-1; this.r = int( this.imgs[0].offsetHeight / (2 * Math.sin( ( 180 / this.n ) * rd ) ) ); this.wh = int( this.r - this.r / 10); this.kk = 360 / this.n; this.init(1); } </script>
作り方は自由ということなので。 （オブジェクト指向的考え方はどうなったん？！と突っ込まれそうですが・・・。（中年には消化に時間がかかるのよ^^;）） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>SLOT</title> <style type="text/css"> #a { height:80px; overflow:hidden; } #a img { width:50px; height:80px; } #a div { width:50px; ; overflow:hidden; float:left; } </style> <div id="a"> <div id="s0"> <img src="./img/0.gif" alt="0"> <img src="./img/1.gif" alt="1"> <img src="./img/2.gif" alt="2"> <img src="./img/3.gif" alt="3"> <img src="./img/4.gif" alt="4"> <img src="./img/5.gif" alt="5"> <img src="./img/6.gif" alt="6"> <img src="./img/7.gif" alt="7"> <img src="./img/8.gif" alt="8"> <img src="./img/9.gif" alt="9"> </div> <div id="s1"> <img src="./img/0.gif" alt="0"> <img src="./img/1.gif" alt="1"> <img src="./img/2.gif" alt="2"> <img src="./img/3.gif" alt="3"> <img src="./img/4.gif" alt="4"> <img src="./img/5.gif" alt="5"> <img src="./img/6.gif" alt="6"> <img src="./img/7.gif" alt="7"> <img src="./img/8.gif" alt="8"> <img src="./img/9.gif" alt="9"> </div> <input type="button" value="Start" id="init"> </div> <body> <script> //@cc_on hoge0 = new nandakore('s0'); hoge1 = new nandakore('s1'); document.body./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ if((evt.target||evt.srcElement).id!='init') return; hoge0.init(50); hoge1.init(50); }, false); function nandakore( elementId ){ this.go = function(){ this.st -= this.st/(50+this.t); if(this.st<1 && (Math.floor((this.ks%this.kk))==0)) clearInterval( this.tmid ); this.ks = this.ks+ ((this.st<1)?1:this.st); var st = this.ks; i=0; while( o = this.imgs[ i++ ] ){ var t = Math.cos(st*rd) * this.r |0; var h = Math.cos((st+this.kk)*rd) * this.r|0; var z = Math.sin(st*rd)*100; o.style.zIndex = z|0; if(t>h){ o.style.height = t-h +'px'; o.style.top = (150-t)+'px'; } st+=this.kk; } } this.init = function(n){ this.ks = (Math.random()*this.n|0)*(360/this.n); this.st = n; this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), 20); this.t = Math.random()*20; } var rd = Math.PI/180; var i,o; if( !elementId ) return false; this.imgs = document.getElementById( elementId ).getElementsByTagName( 'img' ); i=0; while( o=this.imgs[i++] ) o.style.position = 'absolute'; this.n = this.imgs.length; this.r = this.imgs[0].offsetHeight/(2*Math.sin((180/this.n)*Math.PI/180)); this.kk = 360/this.n; this.init(.1); } </script>
- yambejp
- ベストアンサー率51% (3827/7415)
で、なにがわかっていて、なにがわからないのでしょうか？ 詰まったところまで最低限提示すべきです
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
すいませんでした。 補足として分かっているのはautoChange()とNoを使って画像を回すところまでです