個人事業主の方必見!確定申告のお悩み解決

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>

★絵柄がランダムじゃなくて順番に回転させる。
★各絵柄がすべてそろうと、大当たりとしてページの背景色が変化する。
★大当たり後、再度スタートボタンを押すと、背景色は元の色にもどる。
★すべての絵柄が止まってないのに、大当たりの背景色変化が起こらないようになっている。

このQ&Aに関連する最新のQ&A

A 回答 (15件中1~10件)

#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>
    • good
    • 0

やっぱり、自信がないんだよね~。

>メモリーリークパターン
http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mo …
とか、ここの検索で、このキーワードで調べてみて~!
あなたなら判る!俺は無理。

イベントはバブルするから大元でチェックすれば充分。ってのが見つかるはず。
ここの受け売りみたいで申し訳ない。
    • good
    • 0

>メモリーリーク



よくわかってないので、なんとも言えませんが…
 sp.onclick = (function(obj) {
  return function(){obj.stop();}
 })(this);
thisはDOMオブジェクトではないので、かってにならないだろうと思っていたんだけど…

>回避策とかありますか?
とりあえず、
 sp.onclick = set(this);
 function set(t) {
  return function() { t.stop(); }
 }
みたいにするとかではダメ?
    • good
    • 0

//その6


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 );//回転ドラムを3個つくる

new Slot( 'swStart', [ 'sw0', dram0 ], [ 'sw1', dram1 ], [ 'sw2', dram2 ], [ 'sw3', dram3 ], [ 'sw4', dram4 ] );//スイッチとセットでスロットを作る

</script>

以上で~~す!
1つ手前の投稿は、画像データです。そのうち閲覧可能になるでしょう~~!
    • good
    • 0
この回答へのお礼

babu_babooさん
丁寧なプログラムありがとうございます。
また わからないことがあったら教えてください。

お礼日時:2010/01/19 23:03

//その5


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'
];
    • good
    • 0

//その4


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 );
})();

//画像データ
    • good
    • 0

//その3


//呼ばれるたびドラムを回転
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();
   }
 };})();
    • good
    • 0

//その2




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; //n角形
 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 );
    • good
    • 1

長いので分割してアップします。

全角空白は、全て半角空白になおしてください
その1
<!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;
};
    • good
    • 0

おぅ~がっつり書きましたね~。

まってました!>fujillin さん

ここでは、がっつんと指摘する人が少ないので、やんわりと・・・。
最後の方の
 sp.onclick = (function(obj) {
  return function(){obj.stop();}
 })(this);
とかって、メモリーリークだと思ってる。
回避策とかありますか?

いまだに、自分も悩みます。

OKWaveからだと、文字数制限があって、一度にアップできなくて、分割するのが面倒です。^^;
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QjQueryを使ってドラムロールを作りたい

どなたかお力をお貸しいただきたいのですが、
http://mantiddesign.com/archives/10843
このようなドラムロールを作りたいのですが、どのサイトを調べても

本を読んでも詳細な作り方は書いてありませんでした。
また、こちらのプラグインは有料とのことです。

無料で作れないものでしょうか・・・。

Aベストアンサー

こんにちは。 ANo2です。


広い目で見れば、ご質問の内容と処理内容はかなり似ているといえるので、No1様がおっしゃるように「参考になるようで、ならないようで・・・」かと思います。
なので、スクリプトを流用したり部分修正でできるかというと、まず難しいでしょう。
(そもそもの目的が違うので…)


とはいっても処理に関する方法については似ている部分が多いので、スクリプトで何をやっているかがある程度わかれば、似たような方法で実現できることがおわかりになると思います。
ただし、目的や内容が異なりますので、上にも書きましたように、流用するというよりは全部作り直した方がよろしいでしょう。


参考の回答は、当時、二人ともお勉強がてらに回答していたものなので、必ずしも読みやすいスクリプトではありませんし、要領が良いとも言えないものです。
それなので、じっくりとは参考にしない方がよろしいかと思います。(No1様ごめんなさい)


一方で、どうせご質問のような機能を作成するのなら、入力用のUIとして再利用が可能なように一般化して、パッケージ化してしまったほうが後々便利なのではないかと思います。

参考サイトに挙げていらっしゃるものもそうですが、jQueryなどを利用することで、作成の手間を大分簡単にすることは可能かと思います。

こんにちは。 ANo2です。


広い目で見れば、ご質問の内容と処理内容はかなり似ているといえるので、No1様がおっしゃるように「参考になるようで、ならないようで・・・」かと思います。
なので、スクリプトを流用したり部分修正でできるかというと、まず難しいでしょう。
(そもそもの目的が違うので…)


とはいっても処理に関する方法については似ている部分が多いので、スクリプトで何をやっているかがある程度わかれば、似たような方法で実現できることがおわかりになると思います。
ただし、目的や内容が...続きを読む

Qjavascriptでスロットマシン

質問させていただきます。
Javascriptでスロットマシンを作っているのですが、
最後の「あたり」「はずれ」の判定をどうやっていいのか分かりません。
どなたか教えて下さい。

javascript

//左リールの制御
function a1() {

//aにHTMLから取得した数字を代入
var a=document.getElementById("su1").innerHTML;

//文字列のiを数字に変換し1を足してxに代入
var x=parseInt(a)+1;

//取得した値が9を超えたら1に戻す
if(x>9) {
x=1;
}
//xに書き換えてして表示する
document.getElementById("su1").innerHTML=x;

//一定期間繰り返す
TimeoutID1=setTimeout("a1()",100);
}

//スタートボタンを押すと6を表示する
function rstart() {
a2();
a1();
a3();
}

//真ん中のリールの制御
function a2() {

//iにHTMLから取得した数字を代入
var i=document.getElementById("su2").innerHTML;

//文字列のiを数字に変換し1を足してjに代入
var j=parseInt(i)+1;

//取得した値が9を超えたら1に戻す
if(j>9) {
j=1;
}

//Jに書き換えてして表示する
document.getElementById("su2").innerHTML=j;

//一定期間繰り返す
TimeoutID2=setTimeout("a2()",100);
}
//ストップボタンで止める
function stop(btn) {
if(btn == 0) {clearTimeout(TimeoutID1);}
if(btn == 1) {clearTimeout(TimeoutID2);}
if(btn == 2) {clearTimeout(TimeoutID3);}
}

//右のリールの制御
function a3() {
var c=document.getElementById("su3").innerHTML;

//文字列のiを数字に変換し1を足してjに代入

var z=parseInt(c)+1;
if(z>9) {
z=1;
}

//zに書き換えてして表示する
document.getElementById("su3").innerHTML=z;

//一定期間繰り返す
TimeoutID3=setTimeout("a3()",100);

}


HTML

<html>
<head>
<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">
<script type="text/javascript" src="sample1.js"></script>
</head>
<body>
<form name="game">
<style type="text/css">
<!--
.surot{text-align:center;font-size:38;font-weight:bold;color:#ff0000;width:90;height:65;background-color:#0000ff;}
.surot2{font-size:14pt;font-weight:bold;color:#0000ff;text-align:center;width:96;}
-->
-->
</style>
<p style="text-align:center;font-size:24pt;font-weight:bold;">スロットマシン</p>
<table border="0" style="margin-left:150;margin-bottom:0;">
<tr>
<td id="skekka" style="font-size:34;font-weight:bold;color:#ff0000;width:200;height:40;text-align:center;"></td>
</tr>
</table>
<table style="background-color:#00ff00;border:solid #00ff00 5;margin-left:100;margin-bottom:0;">
<tr>
<td id="su1" class="surot">0<td>
<td id="su2" class="surot">0<td>
<td id="su3" class="surot">0<td>
</tr>
</table>
<table style="margin-left:100;">
<tr>
<td><input type="button" value="ストップ" onClick="stop(0)" class="surot2"></td>
<td><input type="button" value="ストップ" onClick="stop(1)" class="surot2"></td>
<td><input type="button" value="ストップ" onClick="stop(2)" class="surot2"></td>
</tr>
</table>
<div style="position:absolute;top:125;left:450;" >
<input type="button" value="スタート" onClick="rstart()" style="font-size:16pt;font-weight:bold;color:#0000ff;">
</div>
</form>
</body>
</html>

質問させていただきます。
Javascriptでスロットマシンを作っているのですが、
最後の「あたり」「はずれ」の判定をどうやっていいのか分かりません。
どなたか教えて下さい。

javascript

//左リールの制御
function a1() {

//aにHTMLから取得した数字を代入
var a=document.getElementById("su1").innerHTML;

//文字列のiを数字に変換し1を足してxに代入
var x=parseInt(a)+1;

//取得した値が9を超えたら1に戻す
if(x>9) {
x=1;
}
//xに書...続きを読む

Aベストアンサー

>ドラムの上に結果を表示するにはどうしたら

ああ、たしかに結果欄がありますね

alert('あたり');
↓↓↓
document.getElementById("skekka").innerHTML="あたり";

(はずれも同様)としてください

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q簡単な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>

下記の通り、簡単なスロットマシーンで、絵柄が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...続きを読む

Aベストアンサー

> myImage = new Array(
> "img/header/kuji/kuji1.gif",
> "img/header/kuji/kuji2.gif",
> "img/header/kuji/kuji2.gif"

上記はkuji2.gifがだぶってますが、これは意図的な記述ですか?

--- 解決案 1
別々3枚でやりたいならば、単純に画像の最後のパスをkuji3.gif等に変更してみて下さい

--- 解決案 2
2枚だとすると、各々をSTOPしたときの乱数として出したフラグが、
1でも2でも図柄は一緒になってしまいます
でも、内部的には違うものです
だからそれらを比較して、条件に合わず大当たりと出ないのだと思います

単純に2枚でやるならば、下記に変更してみてください
myImageCnt = 2;
myImage = new Array(
"img/header/kuji/kuji1.gif",
"img/header/kuji/kuji2.gif"
);


--- 解決案 3
確率などを考慮するために画像をダブらせて使用しているならば、
各myStopX()内のフラグ代入の際に、

//例:myStopFlg1に代入の場所
//myStopFlg1 = myRnd のところを
myStopFlg1 = myRnd == 0 ? 0 : 1;

とすれば大丈夫です

myRndが 0(kuji1.gif表示)の時はフラグに0、
それ以外(1又は2 kuji2.gif表示)はフラグに1を代入し統一させるということです

> myImage = new Array(
> "img/header/kuji/kuji1.gif",
> "img/header/kuji/kuji2.gif",
> "img/header/kuji/kuji2.gif"

上記はkuji2.gifがだぶってますが、これは意図的な記述ですか?

--- 解決案 1
別々3枚でやりたいならば、単純に画像の最後のパスをkuji3.gif等に変更してみて下さい

--- 解決案 2
2枚だとすると、各々をSTOPしたときの乱数として出したフラグが、
1でも2でも図柄は一緒になってしまいます
でも、内部的には違うものです
だからそれらを比較して、条件に合わず大当た...続きを読む

Q配列をPOSTで受けとる

タイトルのまんまですが
配列をformで送って
それをPOSTで受け取りたいのですが
うまくいきません

具体的に言うと
<?php
print"<form method=POST action=action.php>";

for($i=0; $i<$n; $i++){
   print"<input type=text name=foo[$i]>";
}
print"<input type=hidden name=n value=$n>";
print"<input type=submit value=go>";
print"<form>";
?>


///////////以下action.php//////////////////
<?php
$n = $_POST["n"];
for($j=0; $j<$n; $j++){
   $foo[$j] = $_POST["foo[$j]"];
   print"$foo[$j]";
}
?>


こんな感じのことがしたいのですが
うまくいきません
どうもPOSTされてないみたいでfoo[$j]はnullです
凡ミスな気がしなくもないんですが...プログラム初心者なんで↓↓
教えてください
よろしくお願いします

タイトルのまんまですが
配列をformで送って
それをPOSTで受け取りたいのですが
うまくいきません

具体的に言うと
<?php
print"<form method=POST action=action.php>";

for($i=0; $i<$n; $i++){
   print"<input type=text name=foo[$i]>";
}
print"<input type=hidden name=n value=$n>";
print"<input type=submit value=go>";
print"<form>";
?>


///////////以下action.php//////////////////
<?php
$n = $_POST["n"];
for($j=0; $j<$n; $j++){
   $foo[$j] = $_POST["foo[$j...続きを読む

Aベストアンサー

atsuGTさんこんにちは。


受け取り側は

$foo = $_POST["foo"];

とするだけで$fooに送信された配列が格納されます。


$_POST["foo[添え字]"] ではなく、
$_POST["foo"][添え字] となります。

Qスロットマシーンのようなゲーム

 まったくのプログラミング初心者です。
3桁の数字(111や222など)がスロットマシーンのように回転し(回っているように見え)、とめたいときにとめたい数字が止められるようなゲームを作りたいと思っています(欲を言えば効果音とかアニメーションとかも入れてみたいです)。
 ズブの素人がこういうゲームを作るとすれば、とりかかりはどんなふうにすればよいでしょうか?また、こういうゲームを作るのが簡単なソフトなどもご存知でしたら教えていただきたいのですが。(シェアやフリーでもかまいません。)
 ぜひぜひよろしくお願いいたします。

Aベストアンサー

>どんな本で勉強されてますか?
こればっかりは相性の問題もあるのでこれぞ!といえるかどうか分りませんが。
秀和システムから出ている、「はじめてのVisualBasicVer6.0」著者 渋谷和彦
です。
あまり(ほとんど?)難しい事は書いてありません。
ですから複雑な事もできませんが、とっかかりにはいいと思いますよ。

入門書はどれも高いです。
じっくり吟味して選んでくださいね。

QgetElementByIdの戻り値がnullになります。

getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。
以下のコードのどこがいけないのでしょうか。
---
<div id='a'></div>

<script language="javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>
---

Aベストアンサー

さらに実験

<div id='a'></div>
<div></div>
<script type"text/javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>

これはnullですが

<div id='a'></div>
<div>あ</div>
<script type"text/javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>

これは[object]や[HTMLdivElement]が返りました。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<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>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<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>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<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...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Q