What’s Happening 16 March 2012

Well, Friday approaches and another CoderDojo – We’re meeting up at 7.00pm at Ballinacurra House and will be finishing at 9.00pm.
The main group is going to take what we’ve learnt in moving the football and make full game out of it! We will do this in two stages:

1. Create a football pitch complete with goal. This will use HTML and CSS.
2. Add JScript code to make it all work.

Firstly, you’ll need to download these three images and save them onto the desktop (right-click and select save picture).



Here’s the code you’ll need  – you should start a new HTML file (don’t use the ones from last week):


This should display the football pitch – you’ll need to use your imagination 🙂

Now you’ll need to add JavaScript code to move the ball and allow the user to shoot. Here is the code -it should replace the code shown with a blue background above (replace everything between the <script> and </script> tags including the tags themselves).
You can copy the code from this post directly into NotePad++ to save you the typing.
[sourcecode language=”javascript”]
<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>
[/sourcecode]
To play:

1. Click the “Dribble” link to start the ball moving to the left or right
2. Click the ball when you think you’re in a position to score.
3. If you score, the text “Goal!” should be displayed in yellow.

Looking forward to the meeting tomorrow,
Nick.