<html>
<body>
<body bgcolor="33FF00">
<script language = "JavaScript">
//-----------------Created Variables Here------------------
timeLeft = 30 //this is counted down from until it hits 0
points = 0 //this is the points system that is added to by 10 each time a duck is clicked
// ----------------Duck Or Sky element-----------------
function duSky(){ //This is a function to tell add points to the points variable if the user clicks a duck.
duckNum = Math.floor((Math.random()*10)+1)
if(duckNum<10){document.write("<img src=images/skyTile.jpg>")}
else{document.write("<img src='images/duckTile.jpg' onClick='duckClick()'")}
}
</script>
<center><img src=images/duckHuntTitle.gif><br> <!Duck Hunt title gif, no background so you can see the background of the page, also centered>
<div name = "tableDiv"> <!Named the table "TableDiv" so that I can refer to it at a later date. This was to try and make my job of refreshing easier>
<table>
<tr>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
</tr> <!Inside of all the table boxes there is a function that designates whether inside will be a duck or sky tile>
<tr> <!This is the duck table that is exactly 1000px wide by 400px height. This is created by 10 200px by 200px boxes, two rows of 5 boxes>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
</tr>
</table>
</div>
<form name="score">
Points <input type="text" name="pointsscored" readonly="readonly"> <!This is the box that is centered that displays the points the player has got, also is now readonly so no tweaking is allowed>
</form>
<form name="timer">
Time <input type="text" name="timeBox" readonly="readonly"> <!This is the timer box that is centered as well that displays how long the player has left and is readonly>
</form>
</center>
<script language = "JavaScript"> //Returns the script to JavaScript to allow for functions to be used that are related to the HTML previous to this
document.timer.timeBox.value = timeLeft //Displays the time left before the game has even started and been clicked so the player immediately knows the time that they have to play with
function timeDecrease(){ //This is the timer function that reduces the timer by a second each time to make the game slowly time out after 30 seconds
setInterval(function(){timeLeft-- //I am still working on the refresh function but hopefully it will be corrected to make the table refresh with every 1000 miliseconds
document.timer.timeBox.value=timeLeft;
//document.tableDiv.reload(true) //trying to get the reload function to work.
},1000); //1000 miliseconds, therefore it is 1 second
}
while(timeLeft < 0){alert("Timeeeeeees Up, you scored: ", points ,"points! well done Duck Slayer!")} //Alert to signify the end of the game.
// ----------------Function for clicking the duck-----------------
function duckClick(){
points = points + 10;
document.score.pointsscored.value = points; //when the player clicks the duck, points will be added to the points box
}
</script>
<center>
<form name = "playButton">
<button type="button" onClick = "timeDecrease()">Play!</button> <!This is the on click function that starts the game/countdown feature>
</center>
</form>
</body>
</html>
グラフを機能させるのに問題があります。私は現在、単純なポイントアンドクリックゲームの作成に取り組んでおり、画像をその位置でランダム化するためにテーブルを更新する必要があります。アイデアは、スクリプトの前のセクションからの真のランダム化の外観を与えることで、毎秒更新することです。問題は、div タグを設定し、リロード機能を使用しているにもかかわらず、テーブルを更新できないことです。これに対する解決策を見つけるお手伝いができることを願っています。
また、ウェブサイトはそのdocument.tableDiv.reload(true)部分を認識しませんが、1秒ごとにテーブルを更新する方法がわかりません。
追伸、あなたが推測していないなら、私はコーディングが苦手ですが、うまくなりたいと思っています。