Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

HTML 5 Breakout game

HTML

  • Please log in to reply
4 replies to this topic

#1 Awilum

Awilum

    CC Lurker

  • New Member
  • Pip
  • 5 posts
  • Programming Language:PHP, JavaScript
  • Learning:PHP, JavaScript

Posted 09 January 2011 - 03:13 AM

Hello :c-smile:
I study the JS and HTML5, and wrote such a toy, its breakout.
Demo yet. All three levels.
Please test in terms of gameplay, and physics. It seems to me that physics has turned out not very good :( Collisions bricks and ball...

Play: http://awilum.webdev...d/arcanoid.html


Collisions ball with bricks

// Collissions with bricks
    rowheight = bricks.height + bricks.padding;
    colwidth = bricks.width + bricks.padding;
    row = Math.floor(ball.y/rowheight);
    col = Math.floor(ball.x/colwidth);
	

	// Ball collision with brick
    if (ball.y < bricks.rows * rowheight && row >= 0 && col >= 0 && level_bricks[row][col] == 1) {
        ball.dy = -ball.dy;
        level_bricks[row][col] = 0;
		score += 50;		
		bricks_destroed++; 
	}
	
	// Ball collision with rock
    if (ball.y < bricks.rows * rowheight && row >= 0 && col >= 0 && level_bricks[row][col] == 2) {
        ball.dy = -ball.dy;            
		level_bricks[row][col] = 1;
    }


  • 0

#2 CommittedC0der

CommittedC0der

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1065 posts
  • Programming Language:C#
  • Learning:C#, JavaScript, PL/SQL

Posted 09 January 2011 - 07:55 PM

Very nice game, and yes the collisions are alittle off. It appears when the ball collides with a brick its not colliding with the edge of the ball but rather with the center. I dont really know JS so im not sure how you would fix this. Also I think it would be nicer if the paddle was controlled from the center with the mouse instead of the mouse controlling the far left of the paddle, if you understand what I mean.

Nice work, and good luck. ~ Committed.
  • 0
There IS a war going on for your mind.
Nothing of eternal significance happens besides prayer.

#3 Alexander

Alexander

    YOL9

  • Moderator
  • 3963 posts
  • Location:Vancouver, Eh! Cleverness: 200
  • Programming Language:C, C++, PHP, Assembly

Posted 10 January 2011 - 05:43 PM

I find it quite nice actually, it is not too off in realism (being a scripting language) -- although I would add more than one life!
  • 0

All new problems require investigation, and so if errors are problems, try to learn as much as you can and report back.


#4 CommittedC0der

CommittedC0der

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1065 posts
  • Programming Language:C#
  • Learning:C#, JavaScript, PL/SQL

Posted 10 January 2011 - 06:14 PM

although I would add more than one life!

It has 3 lives actually, the game kinda starts without warning a 2 balls can fly out of the screen before you even get the paddle over to them. You may want to work on that. ;)

~ Committed.
  • 0
There IS a war going on for your mind.
Nothing of eternal significance happens besides prayer.

#5 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 11 January 2011 - 04:38 AM

The collision issue is that when the ball is going down and you hit something in the side, only the x-direction should change and not the y-direction. Just like hitting the side of the screen.
While hitting a brick on the side x remains and y switches. Which is the normal behaviour for hitting the brick from the top / bottom.

I'm not quite sure how easy or hard it is to check at which side a brick is hit, but once you've got that I don't think it's too hard to solve the collisions.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download