Football Solution
Here’s the code for tonight’s Football game:
[sourcecode language=”html”]
<html>
<head>
<style type="text/css">
#goal {
position:absolute;
top: 50px;
left: 320px;
}
#pitch {
position:absolute;
top: 159px;
left: 100px;
width:700px;
height:400px;
background-image:url(‘grass.jpg’);
}
#ball {
position:absolute;
left: 300px;
top: 300px;
}
#scored {
position:absolute;
top: 200px;
left: 100px;
font-size: 30pt;
color:yellow;
visibility: hidden;
}
</style>
<script language="javascript">
var timer;
var direction = ‘l’;
var shooting;
var x, y;
function move()
{
var pitch = document.getElementById(‘pitch’);
var ball = document.getElementById(‘ball’);
x = parseInt(ball.style.left);
y = parseInt(ball.style.top);
if(shooting)
y = y – 5;
else if(direction == ‘r’)
x = x + 5;
else
x = x – 5;
if(x > 680)
direction = ‘l’;
if(x < 0)
direction = ‘r’;
if(y < 0)
scored();
ball.style.left = x + ‘px’;
ball.style.top = y + ‘px’;
}
function startTimer()
{
shooting = false;
stopTimer();
timer=setInterval(‘move()’, 30);
}
function stopTimer()
{
if(timer != null)
clearInterval(timer);
}
function shoot()
{
shooting = true;
}
function scored()
{
var sc = document.getElementById(‘scored’);
if(x > 200 && x < 400)
sc.style.visibility = ‘visible’
stopTimer();
}
</script>
</head>
<body>
<img src="goal.jpg" id="goal"/>
<div id="pitch">
<img src="ball.gif" id="ball" onclick="shoot();" style="left:300px;top:300px"/>
</div>
<a href="#" onclick="startTimer()">Dribble</a></p>
<div id="scored">Goal!</div>
</body>
</html>
[/sourcecode]