javascriptでスロットゲームを作ろうとしています
- javascriptを使用して、スロットゲームを作成する方法について質問です。
- スロットゲームの絵柄がランダムでなく順番に回転するようにする方法について教えてください。
- すべての絵柄が止まっていないのに、大当たりの背景色変化が起こらないようにする方法について教えてください。
- ベストアンサー
javascriptでスロットゲームを作ろうとしています。
javascriptでスロットゲームを作ろうとしています。 途中まではなんとかできたんですけど、出来ないところがあるんで質問したいと思います。 <html> <head> <title>スロットゲーム</title> </head> <body> <h3>スロットゲーム</h3> <hr> <form name="slot"> <table border="2"> <tr> </tr> <tr bgcolor="#CCCCCC"> <td><div id="dram0">☆</div></td> <td><div id="dram1">☆</div></td> <td><div id="dram2">☆</div></td> </tr> <tr> <td><input type="button" value="ストップ" onClick="dramstop(0)"></td> <td><input type="button" value="ストップ" onClick="dramstop(1)"></td> <td><input type="button" value="ストップ" onClick="dramstop(2)"></td> </tr> <tr> <td colspan="3"><input type="button" value="スタート" onClick="dramreset()"></td> </tr> </table> </form> <hr> <div id="rireki"></div> <script language="JavaScript"> img = new Array("<img src='0.png'>" ,"<img src='1.png'>","<img src='2.png'>" ,"<img src='3.png'>" ,"<img src='4.png'>","<img src='5.png'>","<img src='6.png'>" ,"<img src='7.png'>","<img src='8.png'>","<img src='9.png'>"); kiroku = new Array(); rrk = ""; rrk_num = 0; dramreset(); dramstart(); function dramreset() { var s = ""; for (i=0; i<3; i++) { s += img[kiroku[i]]; document.slot.elements[i].disabled = false; } rrk_num++; } function dramstart() { for (i=0; i<3; i++) { if (!document.slot.elements[i].disabled) { r = Math.floor(Math.random() * 10); document.getElementById("dram" + i).innerHTML = img[r]; } } setTimeout("dramstart()",200); } function dramstop(btn) { r = Math.floor(Math.random() * 10); document.getElementById("dram"+btn).innerHTML = img[r]; document.slot.elements[btn].disabled = true; kiroku[btn] = r; } </script> </body> </html> ★絵柄がランダムじゃなくて順番に回転させる。 ★各絵柄がすべてそろうと、大当たりとしてページの背景色が変化する。 ★大当たり後、再度スタートボタンを押すと、背景色は元の色にもどる。 ★すべての絵柄が止まってないのに、大当たりの背景色変化が起こらないようになっている。
- mutekisama
- お礼率12% (11/85)
- JavaScript
- 回答数15
- ありがとう数13
- みんなの回答 （15）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 #2に回答がでているので、#3様にならってオブジェクト的になもの(？)を練習で作ってみました。（prototype使うの慣れてないので、要領悪いかも…） <div class="dram">となっている要素の中に、ドラムが作成されます。 とりあえず、imgではなくtextで代用していますが、ドラムを生成する時にTextNodeの代わりにimg要素を入れるようにすれば、表示をそのまま画像に替えられるはず。 stopボタンを押してから空回りして止まるようにしています。その変化をintervalとstepを変えることで行なっているので、数値を変えると止まるまでの時間や回り方も変わります。 最後に止まるときに、どちら側で止まるのか逆転させたりして、ややアナログ的な雰囲気にしたつもり。 ご愛嬌ですが、ご参考まで… <html> <head> <title>test</title> <style type="text/css"> .dram { margin:0; padding:0; text-align:center; float:left; width:50px; } .dram div { height:48px; _height:52px; overflow:hidden; background-color:#fff; border:4px ridge #fff; margin-bottom:8px; } .dram div span { font-size:30px; font-weight:bold; line-height:46px; position:relative; } .clr { clear:both; } </style> </head> <body> <div class="dram">dram1</div> <div class="dram">dram2</div> <div class="dram">dram3</div> <div class="dram">dram4</div> <div class="dram">dram5</div> <div class="dram">dram6</div> <div class="dram">dram7</div> <hr class="clr"> <input type="button" value="start" id="starter"> <script type="text/javascript"> window.onload = function(){ slot.init(); }; // *** スロット全体 *** var slot = { item : [], //スロットの初期設定 init : function() { var param = { height : 46, // 1コマの高さ(px) interval : [30, 30, 40, 36, 40, 30, 50, 80], // 速度(msec) step : [10, 8, 6, 4, 2, 1, 1, 1], // 1回の送り量(px) point : [10, 30, 70, 100, 140, 160, 180, 'end'] //速度切替えポイント }; var letter = '9876543210'; // 表示用文字列（仮設定) var i = 0, e, tmp; var m = letter.split(''), n = m.length; var div = document.getElementsByTagName('DIV'); while (e = div[i++]) if (e.className == 'dram') { tmp = new dram(param); tmp.create(e, m, n); this.item[this.item.length] = tmp; } document.getElementById('starter').onclick = function() { slot.starter(); }; }, //スタートボタンを押したとき starter : function() { var i = 0, e; while (e = this.item[i++]) e.start(); }, //ドラムが止まったときの結果判定 result : function() { var i = 0, e, f = true, result = ''; while (e = this.item[i++]) { if (e.status.tid) { f = false; break; } result += (e.status.number - e.status.value - 1) + ' '; } if (f) alert(result); } } // *** ドラムの定義 *** var dram = function (p) { //this.type = 'dram'; this.status = {tid:null, counter:0, pointer:0, value:0}; this.param = p; } //ドラムを停止 dram.prototype.stop = function() { var s = this.status; s.counter = 1; s.element.parentNode.style.backgroundColor = ''; } //ドラムをスタート dram.prototype.start = function() { var p = this.param, s = this.status; if (s.tid) clearTimeout(s.tid); s.interval = p.interval[0]; s.step = p.step[0]; s.counter = 0, s.pointer = 0; this.roll(); s.element.parentNode.style.backgroundColor = '#ffd'; } //ドラムを回転させる（速度調整含む） dram.prototype.roll = function() { var f = true, p = this.param, s = this.status; var tmp = s.top + s.step; tmp -= (tmp<0)?0:s.max; s.element.style.top = tmp + 'px'; s.top = tmp, s.value = Math.round(-tmp / p.height) % s.number; if (s.counter) { tmp = p.point[s.pointer]; if (tmp == 'end') { tmp = s.top / p.height; s.step = tmp - Math.round(tmp)>0?-1:1; f = !!(s.top % p.height); } else { if (++s.counter > tmp) { s.interval = p.interval[++s.pointer]; s.step = p.step[s.pointer]; } } } if (f) { s.tid = setTimeout((function(obj) { return function(){obj.roll();} })(this), s.interval); } else { s.tid = null; slot.result(); } } //ドラムを作成する dram.prototype.create = function(e, m, n) { var d, sp, j, h = this.param.height, s = this.status; sp = document.createElement('span'); d = document.createElement('div'); while (e.firstChild) e.removeChild(e.firstChild); for (j=0; j<m.length; j++) { sp.appendChild(document.createTextNode(m[j])); sp.appendChild(document.createElement('br')); } sp.appendChild(document.createTextNode(m[0])); d.appendChild(sp); e.appendChild(d); s.element = sp; s.number = n; s.max = h * n; j = -Math.floor(Math.random() * n) * h; s.top = j, sp.style.top = j + 'px'; sp = document.createElement('input'); sp.type = 'button'; sp.value = 'stop'; e.appendChild(sp); sp.onclick = (function(obj) { return function(){obj.stop();} })(this); } </script> </body> </html>
その他の回答 (14)
- babu_baboo
- ベストアンサー率51% (268/525)
やっぱり、自信がないんだよね～。＞メモリーリークパターン http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view&no=146&p=2 とか、ここの検索で、このキーワードで調べてみて～！ あなたなら判る！俺は無理。 イベントはバブルするから大元でチェックすれば充分。ってのが見つかるはず。 ここの受け売りみたいで申し訳ない。
- fujillin
- ベストアンサー率61% (1594/2576)
＞メモリーリーク よくわかってないので、なんとも言えませんが… sp.onclick = (function(obj) { return function(){obj.stop();} })(this); thisはDOMオブジェクトではないので、かってにならないだろうと思っていたんだけど… ＞回避策とかありますか？ とりあえず、 sp.onclick = set(this); function set(t) { return function() { t.stop(); } } みたいにするとかではダメ？
- babu_baboo
- ベストアンサー率51% (268/525)
//その６ var images = ImageLoader( image_base64_number, 'data:image/gif;base64' );//画像の先読みっぽい？ var dram0 = new Drum( 's0', images ); var dram1 = new Drum( 's1', images ); var dram2 = new Drum( 's2', images ); var dram3 = new Drum( 's3', images ); var dram4 = new Drum( 's4', images );//回転ドラムを３個つくる new Slot( 'swStart', [ 'sw0', dram0 ], [ 'sw1', dram1 ], [ 'sw2', dram2 ], [ 'sw3', dram3 ], [ 'sw4', dram4 ] );//スイッチとセットでスロットを作る </script> 以上で～～す！ １つ手前の投稿は、画像データです。そのうち閲覧可能になるでしょう～～！
- babu_baboo
- ベストアンサー率51% (268/525)
//その５ var image_base64_number = [ 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADXXi63P4wPkNGqQSSAIYpnNcUQGkoRDk0QwksaVkshvui7oq7sBv0vJ1J0QoeYjKiDZg8FEtMwMy5FEqt0axQQKseXZnFk3micQDlYphREAAElNLacfkQypK8ft9IAAA7', 'R0lGODlhEAAYAKIAAP///+7u7rCwsHZ2dkFBQRkZGQAAAAAAACwAAAAAEAAYAAADN2i63P4wxkKGIHEEwAGGhNB5kiFyX3SS0ppCbhm33fvMai3rNLr7PdajoOkIBpDBqFNqOp/QRQIAOw==', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADZHi63P4wOkPGOJYYVwIQBQYAQbgY3rcdI7keRAsQikwrcXvLl4KOgRWPQdEoCraIQSAzTZg6SAEKGDgbuYExYrlGCuCGYfCaygRaAtO0lLlHi9y71YOVDhSqSlIgELwSgYKDBwkAOw==', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADY3i63P4wvkKGqaQ8AgAxhdBZDDcqRgcIzKAC2vESi6vG81KorJLrhA9KFTBECjZPJCmIQS4iQMD5JBoVyAFt8TsEVFuZaoB9kX3jchrdCduKaun1cBldvgBS4/IJCiWAgYINCQA7', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADTni63P4wSkUGmacAcKURWxcRG+eR4Uig5lMEayky33Cw8zIExi07pALlx3iJcI0BYMCMbQQWXYnD2tggSEn2YSCAnoSeQzPdCDHotHqSAAA7', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADYXi63P4wNlOKmaURwLsQwKB1JJcxWwkEhFMQcGw9lcQMhEFUOzQMIBiH5RiETqmQpsUAcZgRI0fAKPxOBylnUSCdtIBFEsDUUhXjcgdqcIoOhsB0YmQVnDna7pW3+f+ACgkAOw==', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADZXi63P4wQjJIGdU4I0AoBgEAQtEMI6GI48AUI6AeaMzUsoILTBDPhc5nYYjlFqaX0VITzBSwH8Xogi6tP2xqsVtcdcZFZwu2rbJlEhFNYx9Y1cNYoGGwCIbaoN4IgQh4EoKDhA4JADs=', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADTHi63P4wtmLKuMQsqgoYQCgKBFh0YqpqhycMgRoOCwGwRRkHBFNKwFaABrQFWBEboCdRHiWG2KcoYkYEVWBKoE2drt7mKJjLBM/odAIAOw==', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADaHi63P4wPkMGKcM+AoAoVPcxXEcsnWcsQnoqKfAe8VwvgYvqysDTqZXC0PKASjJHaVAQFRoGHyBAiHYCzwXSdhUabjBe8xcbKMamXcesyKXD78N2mAoIFQR3tch0GAoEVYFZEoWGhwwJADs=', 'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADY3i63P4wPjJGoeQZAYAwRPc1XGcoITAwabe0xTJ0Lkqvyky/dCDTAB7tdGgFbbTYwRCgZYpAZbHpNEqXlAEBFGURpEZWEulhAHGtp+JMJubGB51aYdAJLp05A7S9uCWAgYIMCQA7' ];
- babu_baboo
- ベストアンサー率51% (268/525)
//その４ Slot.prototype.idCheck = (function ( ) { return function ( id ) { var obj; if( obj = this.buf[ id ] ) { obj.stop( (function ( that, id ) { return function ( num ) { that.nums[ id ] = num; that.numsCheck(); };})( this, id ) ); } else this.start(); };})(); Slot.prototype.numsCheck = (function ( ) { return function ( ) { var nums = '', k; for( k in this.nums ) { if( this.nums.hasOwnProperty( k ) ) { if( this.nums[ k ] === false ) return false; nums += this.nums[ k ]; } } alert(nums);//結果は文字列 return nums; };})(); //何が押されたか Slot.handler = function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var o; e && ( o = Slot.buffer[ e.id ] ) && o.idCheck( e.id ); }; //クリックされたら (function ( ) { document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', Slot.handler, false ); })(); //画像データ
- babu_baboo
- ベストアンサー率51% (268/525)
//その３ //呼ばれるたびドラムを回転 Drum.prototype.roll = (function ( int ) { return function ( ) { if( this.f ) { //加速 this.step = Math.min( this.step + this.ac, 15 ); } else { //減速 this.step = Math.max( this.step - this.ac, 1 ); if( 1 == this.step && int( this.angle % this.n ) == 0) { clearInterval( this.tmid ); this.tmid = null; if( 'function' === typeof this.cbFunc ) { this.cbFunc( this.getNumber() ); } } } this.angle += this.step; this.view(); }; })( Math.floor ); Drum.prototype.start = (function ( ) { return function ( ) { if( !this.tmid ) { this.f = true; this.step = 0; this.tmid = setInterval( (function ( that ) { return function ( ) { that.roll( ); }; })( this ), 30); } };})(); Drum.prototype.stop = (function ( ) { return function ( cbFunc ) { this.cbFunc = cbFunc; this.f = false; };})(); Drum.prototype.getNumber = (function ( ) { return function ( ) { return this.tmid ? false: Math.floor( ( this.angle % 360 ) / this.n ); };})(); //スロットを定義 var Slot = function ( ) { this.init.apply( this, arguments ); }; Slot.buffer = [ ];//clickでidをキーとして、オブジェクトを調べるため Slot.prototype.init = (function ( ) { return function ( tgsw /*, [ swid, dramObj ], [ ] */ ) { this.name = 'Slot'; this.buf = [ ]; this.nums = [ ]; var cnt = 1; var ary, id, drum; Slot.buffer[ tgsw ] = this; while( ary = arguments[ cnt++ ] ) { id = ary[0], drum = ary[1]; this.buf[ id ] = drum; Slot.buffer[ id ] = this; } };})(); Slot.prototype.start = (function ( ) { return function ( ) { for( var k in this.buf ) if( this.buf.hasOwnProperty( k ) ) { this.nums[ k ] = false; this.buf[ k ].start(); } };})();
- babu_baboo
- ベストアンサー率51% (268/525)
//その２ var Drum = function ( ) { this.init.apply( this, arguments ); }; //ドラムの初期化 Drum.prototype.init = function ( id, images, setNo, ac ) { var cnt = 0; var pnt = document.getElementById( id ); var img, newImg; this.imgs = [ ]; while( img = images[ cnt++ ] ) { newImg = document.createElement( 'img' ); newImg.src = img.src; newImg.alt = img.alt; with( newImg.style ) position = 'absolute',top = left = '0px'; this.imgs.push( pnt.appendChild( newImg ) ); } this.name = 'Drum'; this.max = --cnt; this.radius = newImg.offsetHeight / (2 * Math.tan( Math.PI / cnt ) );//半径 this.center = Math.floor( pnt.offsetHeight / 2 );//中心 this.n = 360 / cnt; //ｎ角形 this.angle = setNo || Math.floor( Math.random( ) * cnt ) * this.n; //ドラムの回転角度 this.step = 0; //回転量（加速量） this.ac = ac || .2;//加速度 this.f = false;//true:加速 false:減速 this.tmid = null; this.view(); }; //ドラムの絵柄表示 Drum.prototype.view = (function ( int, deg, sin ) { return function ( ) { var cnt = 0; var sa = this.angle + this.n / 2; var py0, py1, img, style; py0 = int( this.center + sin( sa * deg ) * this.radius ); while( img = this.imgs[ cnt++ ] ) { style = img.style; sa -= this.n; py1 = int( this.center + sin( sa * deg ) * this.radius ); if( py0 > py1 ) { style.top = py1 + 'px'; style.height = py0 - py1 + 'px'; style.display = 'inline'; } else { style.display = 'none'; } py0 = py1; } }; })( Math.floor, Math.PI / 180, Math.sin );
- babu_baboo
- ベストアンサー率51% (268/525)
長いので分割してアップします。全角空白は、全て半角空白になおしてください その１ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>スロットゲーム</title> <style type="text/css"> #slot div { height: 240px; width : 60px; overflow: hidden; position: relative; border: 1px #888 solid; float:left; z-index: 0; margin:1px; } #slot div img { height: 80px; width: 60px; } #button { clear:both; } #button input { width: 60px; } </style> <div id="slot"> <div id="s0"> </div> <div id="s1"> </div> <div id="s2"> </div> <div id="s3"> </div> <div id="s4"> </div> </div> <p id="button"> <input type="button" value="Stop" id="sw0"> <input type="button" value="Stop" id="sw1"> <input type="button" value="Stop" id="sw2"> <input type="button" value="Stop" id="sw3"> <input type="button" value="Stop" id="sw4"> <input type="button" value="Start" id="swStart"> </p> <script type="text/javascript"> //@cc_on //画像の先読み var ImageLoader = function ( srcList, header ) { var rst = [ ]; var cnt = 0; var max = srcList.length; while( cnt < max ) { rst[ cnt ] = new Image; rst[ cnt ].src = ( header ? header + ',': '' ) + srcList[ cnt ]; rst[ cnt ].alt = cnt + ''; cnt++; } return rst; };
- babu_baboo
- ベストアンサー率51% (268/525)
おぅ～がっつり書きましたね～。まってました！＞fujillin さん ここでは、がっつんと指摘する人が少ないので、やんわりと・・・。 最後の方の sp.onclick = (function(obj) { return function(){obj.stop();} })(this); とかって、メモリーリークだと思ってる。 回避策とかありますか？ いまだに、自分も悩みます。 OKWaveからだと、文字数制限があって、一度にアップできなくて、分割するのが面倒です。^^;
- babu_baboo
- ベストアンサー率51% (268/525)
まちがえた //cc_on を //@cc_on に あぁ～今年こそ無駄な回答をしないようにと、思ってたのに・・・。
- 1
- 2
関連するQ&A
- 簡単なJavaスロットマシーンについて＞＜
下記の通り、簡単なスロットマシーンで、絵柄が3つ揃った際に「大当たり！」とポップアップウィンドウで表示される物を作りたいのですが、3つ絵柄が揃っても当たり表示が出るときと出ない時がまちまちで、困っています。 アドバイスをいただけましたら幸いです。 <script language="JavaScript"><!-- myImageCnt = 3; myImage = new Array( "img/header/kuji/kuji1.gif", "img/header/kuji/kuji2.gif", "img/header/kuji/kuji2.gif" ); myBuffer = new Array(myImageCnt); for(i=0; i<myImageCnt; i++){ myBuffer[i] = new Image(); myBuffer[i].src = myImage[i]; } myStartFlg = 0; myStopFlg1 = 0; myStopFlg2 = 0; myStopFlg3 = 0; function myStart(){ if (myStartFlg == 0){ myStartFlg = 1; myStopFlg1 = -1; myStopFlg2 = -1; myStopFlg3 = -1; myLoop(); } } function myLoop(){ if (myStopFlg1==-1||myStopFlg2==-1||myStopFlg3==-1){ if (myStopFlg1==-1){ myRnd = Math.floor(Math.random()*myImageCnt); document.myFormImg1.src = myBuffer[myRnd].src; } if (myStopFlg2==-1){ myRnd = Math.floor(Math.random()*myImageCnt); document.myFormImg2.src = myBuffer[myRnd].src; } if (myStopFlg3==-1){ myRnd = Math.floor(Math.random()*myImageCnt); document.myFormImg3.src = myBuffer[myRnd].src; } setTimeout( "myLoop()" , 50 ); }else{ myStartFlg = 0; if (myStopFlg1 == myStopFlg2 && myStopFlg2 == myStopFlg3) { alert("大当たり～～"); } } } function myStop1(){ if (myStopFlg1 == -1){ myRnd = Math.floor(Math.random()*myImageCnt); document.myFormImg1.src = myBuffer[myRnd].src; myStopFlg1 = myRnd; } } function myStop2(){ if (myStopFlg2 == -1){ myRnd = Math.floor(Math.random()*myImageCnt); document.myFormImg2.src = myBuffer[myRnd].src; myStopFlg2 = myRnd; } } function myStop3(){ if (myStopFlg3 == -1){ myRnd = Math.floor(Math.random()*myImageCnt); document.myFormImg3.src = myBuffer[myRnd].src; myStopFlg3 = myRnd; } } // --></script> <div style="width:50px; padding:5px; background-color:#cccccc;"> <table width="50" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td align="center"></td> </tr> <tr> <td align="center"><img src="img/header/kuji/kuji1.gif" name="myFormImg1"></td> </tr> <tr> <td align="center"><form style="margin:0; "><p style="margin:2px 0px 5px 0px; "><input type="button" value="STOP" onclick="myStop1()"></p></form></td> </tr> <tr> <td align="center"><img src="img/header/kuji/kuji1.gif" name="myFormImg2"></td> </tr> <tr> <td align="center"><form style="margin:0; "><p style="margin:2px 0px 5px 0px; "><input type="button" value="STOP" onclick="myStop2()"></p></form></td> </tr> <tr> <td align="center"><img src="img/header/kuji/kuji1.gif" name="myFormImg3"></td> </tr> <tr> <td align="center"><form style="margin:0; "><p style="margin:2px 0px 5px 0px; "><input type="button" value="STOP" onclick="myStop3()"></p></form></td> </tr> <tr> <td align="center"><form style="margin:0; "><p style="margin:5px 0px; "><input type="button" value="Start" onclick="myStart()"></p></form></td> </tr> </table> </div>
- ベストアンサー
- JavaScript
- 複数のJavascript の組込み方についてです。初心者で色々試して
複数のJavascript の組込み方についてです。初心者で色々試してがんばったのですが、行き詰ってしまいました。私の作りたい物は、ページの左側にリスト部分があり、そのリストをクリックすると右側に写真が出るものです。そしてその写真をクリック、もしくは画像下に作ったいくつかの対応したボタンを押すと、新たな写真が最初に出た写真と同じ場所に表示される、というものになります。私が試行錯誤してみたソースでは、一つ目のリストでは「マウスが触ると写真が切り替わる基本スクリプト」になるように、そして二つ目のリストでは「複数の画像を同じ場所に表示させ切替える」を目指しています。もしお詳しい方で何かお気付きの点があれば、お力を貸して頂けますでしょうか。どうか宜しくお願い致します。 <body> <div align="center"> <TR> <SCRIPT language="JavaScript"><!-- a_data=new Array(); a_data[0]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><img galleryimg=no src="../img/hana1.jpg" onmouseover="this.src='../img/hana2.jpg';" onmouseout="this.src='../img/hana1.jpg';"></TD></TR></TR>' +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明<br>写真にポインタを合わせると、写真が替わります。' +'</TD>' +'</TR></TABLE></CENTER>'; a_data[1]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><IMG name="myimg" src="../img/0.png" style="float:right; margin:10px 0px 10px 20px;"></TD></TR></TR>'; +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明' <INPUT type="button" value="写真１" OnClick="document.myimg.src='../img/1.png';"> <INPUT type="button" value="写真２" OnClick="document.myimg.src='../img/2.png';"> <INPUT type="button" value="写真３" OnClick="document.myimg.src='../img/3.png';"> <INPUT type="button" value="最初の写真" OnClick="document.myimg.src='../img/0.png';"> +'</TD>' +'</TR></TABLE></CENTER>'; function pic(sel){document.getElementById("l_menu").innerHTML=a_data[sel];} //--> </SCRIPT> </TR> <div id="A_spc"> <TABLE> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(0);"> <CENTER>リスト１</CENTER> </td> </tr> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(1);"> <CENTER>リスト２</CENTER> </td> </tr> </TABLE> </A_spc> </div> <div id="B_spc"> <TABLE> <TR> <TD colspan=2 style="width:350; font-size:12px;padding-left:20;padding-top:35;" id="l_menu"> <CENTER><p class="sample1">左のリストをクリックするとココに写真が出ます。</p></CENTER> </TD> </TR> </TABLE> </B_spc> </div> </div> </div> </body>
- 締切済み
- JavaScript
- マウスを当てると、サイコロの背景色を変化するように
したいです。 function senntaku(IMG){document.image1.src=IMG} document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">'); 上記のソースでサイコロの背景の画像がマウスに当たるとMAP.pngからMAPsenntaku.pngに変わるように作ったつもりですが、全然変わらない所か、サイコロ自体見えなくなりました。 どう修正したら、変える事ができるのか、教えてください。 <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"> <script type="text/javascript"> /*サイコロ*/function saikoro(){ var sai=new Array("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]); } } function masusaikoro(){ var sai=new Array("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]); } } function senntaku(IMG){document.image1.src=IMG} ＊＊＊＊ここと＊＊＊＊＊ document.write('<li>'); document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">'); ＊＊＊ここ＊＊＊＊ document.write('</li>'); </script> </ul> <div id="hyouzi"> </div> </div> <body> </html>
- ベストアンサー
- JavaScript
- javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [ 'hair1.png', 'hair2.png', 'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>
- ベストアンサー
- JavaScript
- javascriptのカルーセル
配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>
- ベストアンサー
- JavaScript
- クリックで色変更後に既に変更された要素を戻すには
javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。 質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。 以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには 「00をクリックした時に、01の色を戻す02の色を戻す」のように、 ３箇所全てに記述しなければならないのでしょうか？ テーブルのブロックが少なければ、これでもいいのですが、 たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。 他になにか効率のいい記述の仕方はありますでしょうか？ ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 全部のサイコロをjavascriptで動かしたい。
たくさんのサイコロを画面が切り替わったと同時に出てきて、サイコロが全部ランダムに違う数字になって出てくるようにしたいのですが、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]; //サイコロを入れ替える }
- ベストアンサー
- JavaScript
- WEB制作に関する質問です。コンテンツをスライドに
ボタンをクリックするとtableの部分を垂直方向にスライドさせて切り替えたいのですが なかなか、うまくいきません。 こんな感じかなと思って、つくったのですが、まったく作動しません。 何をどうすればいいか分かりません。 どなたか、教えて下さい。 javascriptは少し分かるぐらいです。 よろしくお願いします。 コードは↓ 下のクリック画像だけ指定してあります。 html <div id="main_left"> <h2>見出し</h2> <img src="image/cicletop.jpg" width="33" height="33" /><!-- 上のクリックボタン --> <div id="shuraider"> <table name="shuraid1" id="shuraid1"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid2" id="shuraid2"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid3" id="shuraid3"> <tr><td colspan="3">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid4" id="shuraid4"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> </div><!-- end shuraider --> <img src="image/ciclebottom.jpg" width="33" height="33" name="shuraid_botton" id="shuraid_botton" onclick="shuraido ()" /><!-- 下のクッリックボタンでここをクリックするとtableを切り替えたい --> </div><!-- end main_left --> ここからcss #main_left{ width: 339px; } #main_left h2{ font-size: 18px; font-weight: bold; color: #ffffff; width: 339px; line-height: 2em; letter-spacing: 1em; background-image: url(../image/h2.jpg); background-color: #0F9; margin: 0; } #shuraider{ width: 337px; height: 120px; overflow: hidden; } ここからjavascript var i=1; function shuraido(){ if(i==1){ document.src="shuraid2"; i=2; } else if(i==2){ document.src="shuraid3"; i=3; } else if(i==3){ document.src="shuraid4"; i=4; } else{ document.src="shuraid1"; i=1; } } </script>
- ベストアンサー
- JavaScript
お礼
babu_babooさん 丁寧なプログラムありがとうございます。 また わからないことがあったら教えてください。