I want a breakout turorial =[

[elion]

I haven't seen any of the sort on Kirupa, anyone know of any good ones? :whistle:

[Marz]

BReakout as in.. A paddle moves left to right at the bottom of the screen and then a ball breaks out a block and then more blocks as it works its way up? :)

[Marz]

Fiiirrreee... Answer me so I can help ya bozo ;) :D

[elion]

Yeah :P

[Marz]

Allright then man.. You got it ;)

Moving the Paddle

There are two different ways you can move the paddle... But first, let's create the paddle itself.

Using a simple box or even a pill shape you can create a nice looking paddle that will pretty much look nice. Import it into Flash or draw it into Flash and then make it into a MovieClip and give it an instance name of paddle .

Now that we have a paddle, let's discuss the two ways of handling the paddle itself...

Method 1 : Mouse

Probably by far the best method and the easiest to code, is using the Mouse Method. with the Mouse Method you can easily move the paddle left and right or up and down by moving the mouse.



_root.onenterFrame = function()
{
_root.paddle._x = _root._xmouse;
}



And that is that... Simple huh? I'll say so... But now.. Let's see about the arrow keys method of doing things.

Method 2 : Arrow Keys

The arrow keys use the "duh" arrow keys to move the paddle around. Hold the left arrow to move left, right to move right, up to move up and can you guess... down to move.... down?! YAY! :D



_root.onEnterFrame = function()
{
if(Key.isDown(Key.RIGHT))
{
_root.paddle._x += 5;
}
if(Key.isDown(Key.LEFT))
{
_root.paddle._x += -5;
}
}



Allright... And those are the two easiest methods of trying to move a paddle right and left across a screen.. Use the up and down keys and the ._y parameter to do up and down.. You may want to change the number 5 around in the arrow key demo to make it look smoother depending on your framerate and your game.

Lesson Plans ::

1. Drawing the blocks.
2. The pong Ball
3. Hittesting walls, blocks and the paddle
4. Adding some cool features

[APDesign]

I should try to whip one of these up and then compare my design with your inevitable better one once its complete. I once had a site design that I was going to incorporate the game into it, maybe I'll just do something with that.

[junahu]

if(Key.isDown(Key.LEFT))
{
_root.paddle._x -= -5;
}

snigger... snigger... HA HA HA HAHAHA HA! Woooo!

Taking away a minus number is the same as adding it on. Why would you want the paddle to move right when you pressed left?

Wooo! A marz typo. Time for a P.A.R.T.Y!:party:

[Marz]

Allright.... I'm not perfect here buddy... And that was written before I went to sleep after working for 15 hours... Let's see yours ;P

[junahu]

touché. I can't write anything as long as a tutorial unfortunately (which is a shame since I do want to help)

[InsaneMonk]

Code!
in the ball...
onClipEvent (load) {
var yspeed = 10;
var xspeed = 10;
var floorx = 390;
var floorxy = 10;
this._x = 200;
this._y = 100;
}
onClipEvent (enterFrame) {
this._x += xspeed;
this._y += yspeed;
if (this._x>floorx) {
this._x = floorx;
xspeed = -xspeed;
}
if (this.hitTest(_root.box)) {
xspeed = -xspeed;
yspeed = -yspeed;
}
if (this._y>=210) {
this._x = 200;
this._y = 100;
xspeed = 10;
yspeed = 10;
}
if (this._x<floorxy) {
this._x = floorxy;
xspeed = -xspeed;
}
if (this._y<floorxy) {
this._y = floorxy;
yspeed = -yspeed;
}
}
in teh paddle...
onClipEvent (load) {
var speed = 10;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._x += speed;
}
if (Key.isDown(Key.LEFT)) {
this._x -= speed;
}
}

figure it out... i dont feel like splainin... yawn...

[InsaneMonk]

w00t! I MADE BREAKOUT (SORTOF):

[splict]

I can consistently catch the ball with one end of the paddle and shoot it out the other side. Is that a special move? :beam:

[Elbudster]

I'm making a breakout game now, I'll make it a tut maybe when im done :-)

[elion]

Waiting for the next tutorial.. :whistle:

[Marz]

I'm actually creating a quick breakout game... It'll help out with the documentation and everything then.. In due time.. In due time :)

[GreenLantern]

I get an "unexpected file format" when I try to open those flas"?

[joso]

here's one i knocked up, needs tidying up tho...check it out :-

Click Here! (http://www.atreyuonline.com/flash/breakout.html)

:hr:

[GreenLantern]

hmm pretty neat. I think the frame rate needs upped a bit.

[WarrOrange]

Thanks to marz AGAIN for help... i needed one of the concepts used in this game, and i applied it on my friends game!

[pom]

Here's a version I was working on some time ago. It's still a big bugged, but it works (click to get it started):

http://membres.lycos.fr/museebranly/Arkanoid2.swf

I've attached the file, it's quite simple, really: there's just a block and the paddle. The code is written in an .as file and included:Game = {};
Game.left = 0;
Game.right = 300;
Game.up = 0;
Game.down = 300;

function endGame () {
trace ("End of Game");
delete ball.onEnterFrame;
pad.stopDrag();
popup ("Next Level!");
}
function checkEndGame() {
var num = 0;
for (var i in brick_board) {
if (brick_board[i] instanceof MovieClip) num++;
}
trace ("rest: "+num);
if (num == 0) {
endGame ();
}
}
function initBricks (myMap) {
// size of the bricks
this.createEmptyMovieClip ("brick_board",0);
var h = 10;
var w = 40;
var c = 0;
for (var i in myMap) {
for (var j in myMap[i]) {
if (myMap[i][j] != 0) {
var cl = brick_board.attachMovie ("brick", "b"+c, c);
cl._x = j * w;
cl._y = i * h;
cl.life = myMap[i][j];
c++;
}
}
}
}
map1 = [
[0,0,0,0,0,0,0],
[0,0,1,1,1,1,0],
[0,0,1,1,1,1,0],
[0,0,1,1,1,1,0],
[0,0,1,1,1,1,0],
[0,0,1,1,1,1,0],
[0,0,1,1,1,1,0]
];
MovieClip.prototype.checkForBrick = function () {
for (var cl in brick_board) {
var clip = brick_board[cl];
if (clip.hitTest(this.x, this.y, true)) {
var u = clip._y;
var d = clip._y + 10//clip._height;
var l = clip._x;
var r = clip._x + clip._width;
var bounce = 0;
clip.life--;
trace (clip.life);
if ( clip.life == 0) clip.removeMovieClip();
if (this._x <= l && this.x >= l) {
this.x = l;
this.vx *= -1;
bounce = 1;
}
else if (this._x >= r && this.x <= r) {
this.x = r;
this.vx *= -1;
bounce = 1;
}
if (this._y <= u && this.y >= u) {
this.y = u;
this.vy *= -1;
bounce = 1;
}
else if (this._y >= d && this.y <= d) {
this.y = d;
this.vy *= -1;
bounce = 1;
}
if (!bounce) {
trace ("Houston, we have a problem!");
trace (this.x + ":" + this._x + ":" + l + ":" + r);
trace (this.y + ":" + this._y + ":" + d + ":" + u);
}
checkEndGame();
}
}
}
MovieClip.prototype.checkForWalls = function () {
if (this.x < Game.left) {
this.x = Game.left;
this.vx *= -1;
}
else if (this.x > Game.right) {
this.x = Game.right;
this.vx *= -1;
}
if (this.y < Game.up) {
this.y = Game.up;
this.vy *= -1;
}
else if (this.y > Game.down) {
var l = pad._x - pad._width/2;
var r = pad._x + pad._width/2;
if (this.x > l && this.x < r) {
this.y = Game.down;
this.vy *= -1;
var dx = this.x - (l+r)/2;
var ang = Math.atan2(this.vy, this.vx);
var sp = Math.sqrt (this.vx*this.vx + this.vy*this.vy);
ang += dx / 100 ;
this.vx = sp * Math.cos (ang);
this.vy = sp * Math.sin (ang);
}
else {
trace ("you lose!!");
}
}
}
function move () {
// this.x = this._x;
// this.y = this._y;
this.x += this.vx;
this.y += this.vy;
this.checkForWalls();
this.checkForBrick();
this._x = this.x;
this._y = this.y;
}
function init (map) {
initBricks (map);
var ang = -random (180);
var sp = 10;
ball.vx = sp * Math.cos (ang * Math.PI/180);
ball.vy = sp * Math.sin (ang * Math.PI/180);
ball.x = ball._x = pad._x = (Game.right + Game.left)/2;
ball.y = ball._y = pad._y = Game.down;
ball.onEnterFrame = move;
pad.StartDrag (true, pad._width/2, Game.down, Game.right - pad._width/2, Game.down);
}

this.onMouseDown = function () {
init(map1);
delete this.onMouseDown;
}Hopefully you'll understand what I'm doing in there :)

pom :cowboy:

[pom]

Originally posted by joso
here's one i knocked up, needs tidying up tho...check it out :-

Click Here! (http://www.atreyuonline.com/flash/breakout.html)

:hr: Nice job! But does the ball ever hit the side of a block or did you just rule out the possibility? Just curious :)

[Marz]

Actually... The first game I ever created was a breakout sort of game...

*goes to find it really quickly*....

Gah... Can't find it... Ohh well.. I'll throw mine up here shortly... I'm actually creating special blocks and such.

[Phantom_Lord]

i've tried to make a breakout game, but i need some help...

question 1:
when i increase the ball speed (i make the ball increase its speed each time it hits the paddle) sometimes it "jumps" the paddle because it really jumps the paddle position; for example:
y_paddle=400; (height = 10)
y_speed=30;
y_ball=390;
in the next frame we'll have y_ball=420; the paddle was not hit. How can i fix this?

question 2:
how can i make a collision test between two movieclips using the real shape and not the bounding box?

thanks