スカッシュ

説　　明
マウスを動かしてパドルを操作しボールを落下させないようにしてください。ボールが画面下まで落下してしまうとゲームオーバーになります。
注意事項
下記サンプルの赤字部分がボールの１回の移動速度、青色が画像です。それぞれの状況に応じて書き換えてください。

■動作雰囲気チェック　>>実行
サンプル
 <html>
<head>
<title>スカッシュ</title>
<script language="JavaScript"><!--
x = 0;
y = 0;
bx = 30;
bw = 0;
bh = 0;
ballObj = 0;
by = 30;
dx = 3;
dy = 3;
flag = false;

function moveBoard()
{
if (!flag) return;
x = event.x - (board.width / 2);
if (x < 1) x = 0;
n = w - bw;
if (x > n) x = n;
boardObj.style.pixelLeft = x;
boardObj.style.pixelTop = y;
}

function moveBall()
{
bx += dx;
by += dy;
if ((bx < 0) || (bx > w)) { bx -= dx; dx = -dx; }
if (by < 0) { by -= dy; dy = -dy; }
if (((by + bh) > y) && (by < (y + boardObj.height)) && (bx > x) && (bx < (x + boardObj.width)) ) { by = y - bh; dy = -dy; }
ballObj.style.pixelLeft = bx;
ballObj.style.pixelTop = by;
if (by > document.body.clientHeight)
{
alert("ゲームオーバー");
flag = false;
return;
}
setTimeout("moveBall()",50);
}

function startGame()
{
if (flag) return;
flag = true;
ballObj = document.images["ball"];
boardObj = document.images["board"];
bw = ballObj.width;
bh = ballObj.height;
w = document.body.clientWidth - bw;
h = document.body.clientHeight - bh;
bx = 30;
by = 30;
dx = Math.random() * 2 + 3;
dy = Math.random() * 2 + 3;
x = 0;
y = h - 20;
setTimeout("moveBall()",50);
}

// --></script>
</head>
<body onMousemove="moveBoard()">
パドルを移動させてボールを落下させないようにしてください。<br>
ボールが画面下まで落ちてしまうとゲームオーバーです。<br>
<br>
<form><input type="button" value="Game Start" onClick="startGame()"></form>
<img src="board.gif" name="board" style="position:absolute;top:0px;left:0px">
<img src="ball.gif" name="ball" style="position:absolute;top:0px;left:0px">
</body>
</html>