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:
- Create a football pitch complete with goal. This will use HTML and CSS.
- 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 🙂
You can copy the code from this post directly into NotePad++ to save you the typing.
var direction = ‘l’;
var x, y;
var pitch = document.getElementById(‘pitch’);
var ball = document.getElementById(‘ball’);
x = parseInt(ball.style.left);
y = parseInt(ball.style.top);
y = y – 5;
else if(direction == ‘r’)
x = x + 5;
x = x – 5;
if(x > 680)
direction = ‘l’;
if(x < 0)
direction = ‘r’;
if(y < 0)
ball.style.left = x + ‘px’;
ball.style.top = y + ‘px’;
shooting = false;
if(timer != null)
shooting = true;
var sc = document.getElementById(‘scored’);
if(x > 200 && x < 400)
sc.style.visibility = ‘visible’
- Click the “Dribble” link to start the ball moving to the left or right
- Click the ball when you think you’re in a position to score.
- If you score, the text “Goal!” should be displayed in yellow.
Looking forward to the meeting tomorrow,