I have the following code that I'm trying to modify so that the speed of the ball will slowly increase over time. Never done any JavaScript coding for animations before so it is quite new to me so any help would be great thanks.
<html>
<head>
<title>Interactive Game</title>
<script language="JavaScript">
var animation,startTimer,stopTimer;
var xspeed=5, yspeed=2;
var xpos=200, ypos=200;
var ballClickCount=0; var clock=10;
var started=false;
function start() {
animation=window.setInterval("moveBall()", 20);
startTimer=window.setInterval("updateTimer()",1000);
stopTimer=window.setInterval("endGame()", 10*1000);
started=true;
}
function endGame() {
window.clearInterval(animation);
window.clearInterval(startTimer);
window.clearInterval(stopTimer);
updateTimer();
started=false;
}
function moveBall() {
xpos=xpos+xspeed; ypos=ypos+yspeed;
if (xpos>=400-80 || xpos<=0) xspeed*=-1;
if (ypos>=400-80 || ypos<=0) yspeed*=-1;
theBall=document.getElementById("ball");
theBall.style.top=xpos; theBall.style.left=ypos;
}
function updateTimer() {
time.innerText=--clock;
}
function updateBallCount() {
score.innerText=++ballClickCount;
}
</script>
</head>
<body onload="start()">
<span style="position: absolute;
top: 0; left: 0;
width:400; height:400;
background-color: yellow;
border: solid">
<img id="ball" src="ball.gif" height="80" width="80"
style="position:absolute; top:200; left:200"
onClick="if (started) updateBallCount()">
</span>
<h2 style="position:absolute; top:60; left:450;
text-align:center">
Time Remaining<br>
<span id="time">10</span></h2>
<h2 style="position:absolute; top:200; left:450;
text-align:center">
Your score<br>
<span id="score">0</span></h2>
</body>
</html>
