CoderDojo pong's

[noelking]

Build a pong game in HTML/JavaScript

• Main div with think border around so everyone knows the course
• There will be a div on left hand panel which you must bounce the ball off
• Every time it hits this div the ball gets quicked each round
• Maybe the div gets smaller also (Maybe we need a min div size)
• There is points and score for every time you hit the div
• Could use node.js for multi player where you see the current highest score on screen and your score

[willknott]

Should be

I know what a div is, but I have no idea what you mean.
On Aug 6, 2012 12:11 PM, "Noel King" <
reply@reply.github.com>
wrote:

Build a pong game in HTML/JavaScript

• Main div with think border around so everyone knows the course
• There will be a div on left hand panel which you must bounce the ball off
• Every time it hits this div the ball gets quicked each round
• Maybe the div gets smaller also (Maybe we need a min div size)
• There is points and score for every time you hit the div
• Could use node.js for multi player where you see the current highest
  score on screen and your score

---

Reply to this email directly or view it on GitHub:
#1

[noelking]

Yo Will

Thanks for the feedback, the idea of the div is a grid space on the screen
I can quanity for size and width. This is the element that you will move
up and down to hit the ball.

What do you think

Regards,

Noel

On 9 August 2012 09:28, Will K notifications@github.com wrote:

Should be

I know what a div is, but I have no idea what you mean.

On Aug 6, 2012 12:11 PM, "Noel King" <
reply@reply.github.com>

wrote:

Build a pong game in HTML/JavaScript

• Main div with think border around so everyone knows the course
• There will be a div on left hand panel which you must bounce the ball
  off
• Every time it hits this div the ball gets quicked each round
• Maybe the div gets smaller also (Maybe we need a min div size)
• There is points and score for every time you hit the div
• Could use node.js for multi player where you see the current highest
  score on screen and your score

---

Reply to this email directly or view it on GitHub:
#1

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-7608335.

[lindsaymacvean]

If you are using canvas for the game dont you use something like the below
to draw on the canvas.

            ctx.fillStyle = "color";

ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "color";
ctx.strokeRect(0, 0, w, h);

instead of a div.

Then for a collision:

if(varx == spritex && vary == spritey)
{
function rebound()
score++;
}
else
{
score--
}

Lindsay

On 9 August 2012 09:28, Will K notifications@github.com wrote:

Should be

I know what a div is, but I have no idea what you mean.
On Aug 6, 2012 12:11 PM, "Noel King" <
reply@reply.github.com>
wrote:

Build a pong game in HTML/JavaScript

• Main div with think border around so everyone knows the course
• There will be a div on left hand panel which you must bounce the ball
  off
• Every time it hits this div the ball gets quicked each round
• Maybe the div gets smaller also (Maybe we need a min div size)
• There is points and score for every time you hit the div
• Could use node.js for multi player where you see the current highest
  score on screen and your score

---

Reply to this email directly or view it on GitHub:
#1

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-7608335.

Cork Office:
Market Myself Online,
National Software Centre,
Mahon,
Cork,
Co. Cork

Mobile (ireland): +353 (0) 87 2560988
http://www.marketmyselfonline.com
g lindsaymacvean@gmail.cometstarted@marketmyselfonline.com

[noelking]

That would defintely work thanks for the suggestion, I had not thought them
canvas yet, might be worth the introduction.

On 9 August 2012 11:23, lindaymacvean notifications@github.com wrote:

If you are using canvas for the game dont you use something like the below
to draw on the canvas.

ctx.fillStyle = "color";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "color";
ctx.strokeRect(0, 0, w, h);

instead of a div.

Then for a collision:

if(varx == spritex && vary == spritey)
{
function rebound()
score++;
}
else
{
score--
}

Lindsay

On 9 August 2012 09:28, Will K notifications@github.com wrote:

Should be

I know what a div is, but I have no idea what you mean.
On Aug 6, 2012 12:11 PM, "Noel King" <
reply@reply.github.com>
wrote:

Build a pong game in HTML/JavaScript

• Main div with think border around so everyone knows the course
• There will be a div on left hand panel which you must bounce the
  ball
  off
• Every time it hits this div the ball gets quicked each round
• Maybe the div gets smaller also (Maybe we need a min div size)
• There is points and score for every time you hit the div
• Could use node.js for multi player where you see the current highest
  score on screen and your score

---

Reply to this email directly or view it on GitHub:
#1

—
Reply to this email directly or view it on GitHub<
https://github.com/CoderDojo/htmlgamedev/issues/1#issuecomment-7608335>.

Cork Office:
Market Myself Online,
National Software Centre,
Mahon,
Cork,
Co. Cork

Mobile (ireland): +353 (0) 87 2560988
http://www.marketmyselfonline.com
g lindsaymacvean@gmail.cometstarted@marketmyselfonline.com

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-7610509.

[willknott]

Ah, CSS pong vs Canvas pong.
I'd like to see a side by side / theres-more-than-one-way-to-do-it in the classes.

This is a canvas operation. As for node.js high scores... maybe. It I didn't already have kids hacking the code as it is (I like the random background colour change one put in).

I'd need to set up a server also, but it would be an interesting challenge for me to research / excuse to read Richard's book.

I was planning to have a max score of 9...
How should I show it.
Suggestions so far are

1. Standard / traditional scoreboard.
2. As its red lemonade vs white lemonade, show the bottles / paddles filling up
3. move the colours across the background, fills with red / white as the score difference increases

[lindsaymacvean]

I like the colours across the background idea !! Perhaps like tug of war
where the colour moves backwards and forwards depending on who's winning.

L

On 9 August 2012 12:06, Will K notifications@github.com wrote:

Ah, CSS pong vs Canvas pong.
I'd like to see a side by side / theres-more-than-one-way-to-do-it in the
classes.

This is a canvas operation. As for node.js high scores... maybe. It I
didn't already have kids hacking the code as it is (I like the random
background colour change one put in).

I'd need to set up a server also, but it would be an interesting challenge
for me to research / excuse to read Richard's book.

I was planning to have a max score of 9...
How should I show it.
Suggestions so far are

1. Standard / traditional scoreboard.
2. As its red lemonade vs white lemonade, show the bottles / paddles
   filling up
3. move the colours across the background, fills with red / white as the
   score difference increases

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-7611294.

Cork Office:
Market Myself Online,
National Software Centre,
Mahon,
Cork,
Co. Cork

Mobile (ireland): +353 (0) 87 2560988
http://www.marketmyselfonline.com
g lindsaymacvean@gmail.cometstarted@marketmyselfonline.com