search

CoderDojo / htmlgamedev

HTML Game Development Course
23 stars 21 forks source link

CoderDojo pong's #1

Open noelking opened 12 years ago

noelking commented 12 years ago

Build a pong game in HTML/JavaScript

willknott commented 12 years ago

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: https://github.com/CoderDojo/htmlgamedev/issues/1

noelking commented 12 years ago

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: https://github.com/CoderDojo/htmlgamedev/issues/1

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

lindsaymacvean commented 12 years ago

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: https://github.com/CoderDojo/htmlgamedev/issues/1

— Reply to this email directly or view it on GitHubhttps://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

noelking commented 12 years ago

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: https://github.com/CoderDojo/htmlgamedev/issues/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/CoderDojo/htmlgamedev/issues/1#issuecomment-7610509.

willknott commented 12 years ago

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 commented 12 years ago

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/CoderDojo/htmlgamedev/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