以下是書上的範例
htm內容
代碼:
<html>
<head>
<title>範例7-1</title>
<script type="text/javascript" src="ex7-1.js">
</script>
</head>
<body onkeypress="run()" onkeydown="run()">
<center>
按下 g 鍵來開始移動球, 按下 s 鍵來停止
</center>
<img name="blueBall" src="blueBall.jpg"
style="position:absolute; left:260; top:60" onload="startMovingBall()" />
<img name="redBall" src="redBall.jpg"
style="position:absolute; left:300; top:60" onload="startMovingBall()" />
<img name="greenBall" src="greenBall.jpg"
style="position:absolute; left:340; top:60" onload="startMovingBall()" />
<img name="yellowBall" src="yellowBall.jpg"
style="position:absolute; left:380; top:60" onload="startMovingBall()" />
<img name="blackBall" src="blackBall.jpg"
style="position:absolute; left:420; top:60" onload="startMovingBall()" />
<img name="silverBall" src="silverBall.jpg"
style="position:absolute; left:460; top:60" onload="startMovingBall()" />
<img name="orangeBall" src="orangeBall.jpg"
style="position:absolute; left:500; top:60" onload="startMovingBall()" />
</body>
</html>
js檔內容
代碼:
var startGame = false;
var ballVerticalDirection = new Array(true,true,true,true,true,true,true);
var ballHorizontalDirection = new Array(true,false,true,true,false,false,true);
var ballOrgX = new Array(260,300,340,380,420,460,500);
var ballOrgY = new Array(60,60,60,60,60,60,60);
var ballX = new Array(7);
var ballY = new Array(7);
var ballSpeed = new Array(8,12,10,9,7,9,12);
var ball = new Array("blueBall","redBall","greenBall","yellowBall","blackBall",
"silverBall","orangeBall");
var leftBound = 10;
var rightBound = 630;
var topBound = 60;
var bottomBound = 380;
var timerID, i;
// 移動球的位置
function moveBall()
{
// 巡迴7個球
for (i = 0; i < 7; i++)
{
// 球往下
if (ballVerticalDirection[i])
{
ballY[i] += ballSpeed[i];
if (ballY[i] > bottomBound)
{
// 球已經到達底端,反向往上
ballVerticalDirection[i] = false;
}
if (ballHorizontalDirection[i])
{
// 球往右
ballX[i] += ballSpeed[i];
if (ballX[i] > rightBound)
{
// 球已經到達右端,反向往左
ballHorizontalDirection[i] = false;
}
}
else
{
// 球往左
ballX[i] -= ballSpeed[i];
if (ballX[i] < leftBound)
{
// 球已經到達左端,反向往右
ballHorizontalDirection[i] = true;
}
}
}
else
{
// 球往上
ballY[i] -= ballSpeed[i];
if (ballHorizontalDirection[i])
{
// 球往右
ballX[i] += ballSpeed[i];
if (ballX[i] > rightBound)
{
// 球已經到達右端,反向往左
ballHorizontalDirection[i] = false;
}
}
else
{
// 球往左
ballX[i] -= ballSpeed[i];
if (ballX[i] < leftBound)
{
// 球已經到達左端,反向往右
ballHorizontalDirection[i] = true;
}
}
if (ballHorizontalDirection[i])
{
// 球往右
ballX[i] += ballSpeed[i];
if (ballX[i] > rightBound)
{
// 球已經到達右端,反向往左
ballHorizontalDirection[i] = false;
}
}
else
{
// 球往左
ballX[i] -= ballSpeed[i];
if (ballX[i] < leftBound)
{
// 球已經到達左端,反向往右
ballHorizontalDirection[i] = true;
}
}
if (ballY[i] < topBound)
{
// 球已經到達頂端,反向往下
ballVerticalDirection[i] = true;
}
}
// 設定球的位置
eval("document." + ball[i] + ".style.left = " + ballX[i]);
eval("document." + ball[i] + ".style.top = " + ballY[i]);
}
}
function startMovingBall()
{
// 設定球移動的速度
if (startGame)
{
// 每20毫秒移動一次
timerID = setInterval("moveBall()", 20);
// 設定球在原來的位置
for (i = 0; i < 7; i++)
{
ballX[i] = ballOrgX[i];
ballY[i] = ballOrgY[i];
}
}
}
function run()
{
var keyChar = getKeyChar();
// 開始移動球
if (keyChar == "g" || keyChar == "G")
{
if (!startGame)
{
startGame = true;
startMovingBall();
}
}
// 停止移動球
if (keyChar == "s" || keyChar == "S")
{
if (startGame)
{
startGame = false;
clearInterval(timerID);
// 設定球在原來的位置
for (i = 0; i < 7; i++)
{
eval("document." + ball[i] + ".style.left = " + ballOrgX[i]);
eval("document." + ball[i] + ".style.top = " + ballOrgY[i]);
}
}
}
}
function getKeyChar(e)
{
var keyChar = "";
if (navigator.appName == "Microsoft Internet Explorer")
{
keyChar = String.fromCharCode(window.event.keyCode);
}
else
{
keyChar = String.fromCharCode(e.which);
}
return keyChar;
}
// 使用在 Netscape Navigator
document.onkeypress = getKeyChar;
document.onkeydown = getKeyChar;
利用暑假時間自學，但是遇到蠻多問題的，我用IE開很正常，大致功能是按G鍵球開始跑，S鍵停止，用firefox開就不行了，我看錯誤主控台訊息是寫說*.JS內在getKeyChar 函式內的e出錯，為什麼這裡要用個e呢，而且程式看起來像是分為IE和Netscape來寫，若要改成標準語法，在每個瀏覽器都通用，要如何更改呢?需要各位的幫忙，謝謝。
登入
註冊
問答集
搜尋
