すか
スロットマシンです。ストップボタンを3つ押すとメッセージウインドウが出ます。
応用:画像を人の顔に変えて遊んだり^^;;、絵をチェリーとか$マークにするとか3段にするとか本格的なやつを目指してみましょう(^^)/。//formフィールドへの表示と背景色の変更 の所の関数aa()とbb()の中の命令を書き換えることであたりとはずれの場合それぞれの処理を変更できます。たとえば、揃った絵によってページをジャンプするなら、location.href='リンク先のURL'を書き入れます。
。
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//あたり と すかの判定ウインドウを開きます
win=new Array()
function taku1(hantei)
{
rndno=parseInt(Math.random()*10)
win[rndno] = window.open("","w1","width=180,height=100")
if(win[rndno]!=null){
win[rndno].document.write("<body bgcolor='#ffd700'>")
win[rndno].document.write("<font size=8>")
win[rndno].document.write("<blink>"+hantei+"</blink>")
win[rndno].document.write("<br></font>")
win[rndno].document.close()
setTimeout('win[rndno].window.close()',2000)
}
}
//あたりの時背景色をきらきらさせます。
function BGkirakira()
{
n=0
while( n<15 )
{
document.bgColor='#000000'
document.bgColor='#ff0402'
document.bgColor='#fcff00'
n ++
}
ini()
}
//すかのおしらせ
function layAbGkirakira()
{
//すかレイヤーlayAの背景色をきらきらさせます
setTimeout("setBGCOLOR('layA','#000000')",0)
setTimeout("setBGCOLOR('layA','#FFFFFF')",100)
setTimeout("setBGCOLOR('layA','#000000')",200)
setTimeout("setBGCOLOR('layA','#FFFFFF')",300)
setTimeout("setBGCOLOR('layA','#000000')",400)
setTimeout("setBGCOLOR('layA','#FFFFFF')",500)
setTimeout("setBGCOLOR('layA','#000000')",600)
setTimeout("setBGCOLOR('layA','#FFFFFF')",700)
setTimeout("setBGCOLOR('layA','#000000')",800)
setTimeout("setBGCOLOR('layA','#FFFFFF')",900)
//すかレイヤー退場
setTimeout("ini()",2500)
}
//数字画像の事前読み込み
takuNO1 = new Array()
for(i = 0; i < 10; i++) {
takuNO1[i] = new Image()
takuNO1[i].src = "" + (i) + ".GIF"
}
//アニメーション
timerAni = new Array()
function animate(No) {
document.images['animation'+No].src = takuNO1[imgNo[No]].src
imgNo[No]++;
if(imgNo[No] >= 10) imgNo[No] = 0;
timerAni[No] = setTimeout('animate('+No+')',10)
}
//初期化
function ini() {
timerAni = new Array() //アニメタイマー
timerMov = new Array() //移動タイマー
starFlg = 0 //スタートフラグ
stopFlg = new Array() //ストップフラグ
stopFlg[1]=0
stopFlg[2]=0
stopFlg[3]=0
document.bgColor='#DDDDDD' //ページの背景色
//すかレイヤーを初期位置へ
moveLAYER('layA',-400,400)
//画像番号
imgNo = new Array()
//スタート画像番号をランダムで決める
imgNo[1] = parseInt(Math.random()*10)
imgNo[2] = parseInt(Math.random()*10)
imgNo[3] = parseInt(Math.random()*10)
if(isNaN(imgNo[1]))imgNo[1]=0
if(isNaN(imgNo[2]))imgNo[2]=0
if(isNaN(imgNo[3]))imgNo[3]=0
}
//スタート
function startAni() {
ini()
animate(1)
animate(2)
animate(3)
starFlg = 1
}
function stopAni(No){
clearTimeout(timerAni[No]) //アニメーション停止
stopFlg[No] = 1 //ストップフラグをセットする
bunki() //判定へ
}
//判定
function bunki() {
if( starFlg && stopFlg[1] && stopFlg[2] && stopFlg[3] )
{
var a1=document.images['animation1'].src
var a2=document.images['animation2'].src
var a3=document.images['animation3'].src
if(a1!=a2||a2!=a3)
{
bb()
if(document.all||document.layers)movrl(180)
if(document.all||document.layers)layAbGkirakira()
} else {
BGkirakira()
aa()
taku1("おめでとうっ")
}
}
}
//formフィールドへの表示と背景色の変更
function aa(){ //あたりの時
ata1=" ＼(^。^)／＼(^。^)／ "
document.clk.digital.value=ata1
}
function bb(){ //はずれの時
ata1=" (；＿；)しくしく "
document.clk.digital.value=ata1
document.bgColor='#1E90FF';
}
function cc(){ //デフォルト
ata1=" "
document.clk.digital.value=ata1
}
/**
* NN4/IE4以上用DHTML関数 参考:L05
*/
//移動用関数
function moveByLAYER(layName,offsetx,offsety){
if(document.layers)
document.layers[layName].moveBy(offsetx,offsety) //NN用
if(document.all)document.all(layName).style.pixelLeft+=offsetx //IE用
if(document.all)document.all(layName).style.pixelTop+=offsety //IE用
}
//x座標を取得する
function getLEFT(layName){
if(document.layers) return document.layers[layName].left //NN用
if(document.all) return document.all(layName).style.pixelLeft//IE用
}
//1/1000秒ごとにmov()を実行する
function movrl(endx){
timerMov[endx] = setInterval('mov(' + endx + ')',1)
}
//水平方向右へ10pxずつ動かし、xが終了位置を超えたらたらストップ
function mov(endx){
if( endx < getLEFT('layA') ){
clearInterval(timerMov[endx])
} else moveByLAYER('layA',20,0)
}
function moveLAYER(layName,x,y){
if(document.layers)document.layers[layName].moveTo(x,y) //NN用
if(document.all)document.all(layName).style.pixelLeft=x //IE用
if(document.all)document.all(layName).style.pixelTop=y //IE用
}
function setBGCOLOR(layName,color){
if(document.layers)document.layers[layName].bgColor=color
if(document.all)document.all(layName).style.backgroundColor=color
}
//-->
</script>
</head>
<body bgcolor="#dddddd" text="#000000" onLoad="ini()">
<center>
<div id="layA"
style="position : absolute ;
font-size: 100px ;
width : 400px ;
left : -1500px ;
top : 400px ;">
<font color="#dddddd" size="7">
すか
</font>
</div>
<table border=10 width=35%><tr><td></td></tr></table>
<form>
<input type="button" value="start"
onClick="if(document.images)startAni()">
</form>
<table border=4 width=30%><tr><td></td></tr></table><br>
<nobr>
<img name="animation1" src="0.GIF" alt="" width="45" >
<img name="animation2" src="0.GIF" alt="" width="45" >
<img name="animation3" src="0.GIF" alt="" width="45" >
</nobr><br>
<form>
<nobr>
<input type="button" name="an1" value="Stop"
onClick="if(document.images)stopAni(1)">
<input type="button" name="an2" value="Stop"
onClick="if(document.images)stopAni(2)">
<input type="button" name="an3" value="Stop"
onClick="if(document.images)stopAni(3)">
</nobr>
</form>
<table border=4 width=30%><tr><td></td></tr></table><br>
<form name="clk">
<input size="16" name="digital" value="">
</form>
<table border=10 width=35%><tr><td></td></tr></table>
</center>
</body>
</html>
使用している画像:
1.GIF
2.GIF
3.GIF
4.GIF
5.GIF
6.GIF
7.GIF
8.GIF
9.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)