Juego de Arkanoid o BreakOut en Flash con sólo Actionscript 3

En este tutorial aprenderás a crear una Clase en Actionscript 3 que generará un juego al estilo BreakOut o Arkanoid.

Abre un nuevo documento de Actionscript y guárdalo como BreakOut.as.

Primero importamos los paquetes necesarios:

package Classes
{
    import flash.display.*;
    import flash.geom.*;
    import flash.events.*;
    import flash.utils.Timer;

Para una descripción más detallada de lo que hace cada uno, puedes consultar la ayuda de Flash.

Ahora nombramos la clase que será heredada de la clase Sprite para poder utilizar el método addChild().

public class BreakOut extends Sprite
{

Establecemos variables y constantes:

private var blocks:Array = new Array(); //En este array se almacenarán lo bloques
private var player:Sprite = new Sprite(); //Este es el gráfico de la barra que mueve el jugador
private var ball:Sprite = new Sprite(); //Gráfico de la bola
private var timer:Timer = new Timer(1); //Timer
private var ballSpeed:int = 1; //Velocidad de la bola, siendo el valor positivo irá hacia abajo
private var ballDir:int = 1; //Dirección de la bola, siendo el valor positivo irá hacia la derecha

//Estas son constantes sobre el escenario:
 
private const MIDDLE_STAGE_X:int = stage.stageWidth / 2;
private const START_STAGE_X:int = 0;
private const END_STAGE_X:int = stage.stageWidth;
private const MIDDLE_STAGE_Y:int = stage.stageHeight / 2;
private const START_STAGE_Y:int = 0;
private const END_STAGE_Y:int = stage.stageHeight;

//Constructor, los métodos serán declarados posteriormente
             
public function BreakOut():void        
{
            createBlocks();
            createPlayer();            
            createBall();            
            addListeners();         
}

Creamos un método para reiniciar el juego:

private function restart():void         
{
            removeListeners();             
            createBall();             
            addListeners();    
         
            //En esta parte puedes llamar un método que organize las vidas         
}

Este método es el más importante de todos, ya que crea los bloques y les da una ubicación:

private function createBlocks():void
{          
      for(var xPos:int = 0; xPos < 8; xPos++) //Filas
      { 
           for(var yPos:int = 0; yPos < 4; yPos++) //Columnas
           { 
               //Creamos el gráfico del bloque 
                
               var block:Sprite = new Sprite();
                    
               block.graphics.beginFill(0xFFFFFF);
               block.graphics.drawRect(0, 0, 40, 10);
               block.graphics.endFill();
                    
               //Establecemos la posición del bloque 
                    
               block.x = ((block.width + 4) * xPos) + 25;
               block.y = ((block.height + 4) * yPos) + 20;
                    
               addChild(block);
                    
               //Sumamos el bloque al array
                    
               blocks.push(block);
            } 
       } 
}

Creamos el jugador, la bola y los posicionamos:

        private function createPlayer():void 
        { 
            player.graphics.beginFill(0xFFFFFF);
            player.graphics.drawRect(0, 0, 50, 5);
            player.graphics.endFill();
            
            //Posición
            
            player.x = MIDDLE_STAGE_X + player.width / 2;
            player.y = END_STAGE_Y - player.height * 2;
            
            addChild(player);
        } 
        
       
        private function createBall():void 
        { 
            ball.graphics.beginFill(0xFFFFFF);
            ball.graphics.drawCircle(0, 0, 4);
            ball.graphics.endFill();
            
            //Posición
            
            ball.x = (player.x + player.width / 2); - ball.width / 2;
            ball.y = player.y - ball.height;
            
            addChild(ball);
        }

Ahora creamos los métodos que moverán al jugador y a la bola, el primero se moverá con el Mouse y el segundo con las variables que establecimos al inicio.

        private function movePlayer(event:MouseEvent):void 
        { 
            player.x = mouseX;
            
            //Si se tocan los bordes
            
            if(player.x <= START_STAGE_X) 
            { 
                player.x = START_STAGE_X;
            } 
            
            if((player.x + player.width) >= END_STAGE_X) 
            { 
                player.x = END_STAGE_X - player.width;
            } 
        } 
        

        
        private function moveBall(event:TimerEvent):void 
        { 
            ball.x += ballDir;
            ball.y += ballSpeed;
        }

Este código se encarga de las colisiones:

        private function checkCollision(event:TimerEvent):void 
        { 
            //Checamos los bordes
            
            if(ball.x <= START_STAGE_X) 
            { 
                ballDir *= -1;
            } 
            
            if((ball.x + ball.width) >= END_STAGE_X - 1)
            { 
                ballDir *= -1;
            } 
            
            //Checamos el "techo"
            
            if(ball.y <= START_STAGE_Y) 
            { 
                ballSpeed *= -1;
            } 
            
            //Checamos si el jugador no golpea la bola
            
            if((ball.y - ball.height) >= END_STAGE_Y) 
            { 
                restart();
                //Aqui puedes disminuir las vidas y checar si las ha perdido todas
            } 
            
            //Checamos las colisiones con los bloques, establecemos un for para acceder a los bloques en el Array
            
            for(var i:int = 0; i < blocks.length; i++) 
            { 
                if(ball.hitTestObject(blocks[i])) //Si la bola golpea un bloque se invierte la velocidad
                { 
                    ballSpeed *= -1;
                    
                    //Si la bola golpea el lado izquierdo rebotará hacia el lado izquierdo y viceversa 
            
                    if((ball.x + ball.width / 2) < (blocks[i].x + blocks[i].width / 2)) 
                    { 
                        ballDir= -1;
                    } 
                    else if((ball.x + ball.width / 2) >= (blocks[i].x + blocks[i].width / 2)) 
                    { 
                        ballDir = 1;
                    } 
                    
                    //Removemos del escenario el bloque y actualizamos el Array
                    
                    removeChild(blocks[i]);
                    blocks.splice(i, 1);
                    
                    //Checamos si se han roto todos los bloques
                    
                    if(blocks.length < 1) 
                    { 
                        trace("You Win");//Aqui se establece la acción a ejecutar cuando ganas
                    } 
                } 
            }

Si la bola colisiona con el jugador:

            if(ball.hitTestObject(player)) 
            { 
                ballSpeed *= -1;
        
                //Si la bola colisiona con el lado derecho de la barra se moverá hacia el lado derecho y vicecersa
        
                if((ball.x + ball.width / 2) < (player.x + player.width / 2)) 
                { 
                    ballDir = -1;
                } 
                else if((ball.x + ball.width / 2) > (player.x + player.width / 2)) 
                { 
                    ballDir = 1;
                } 
        
                //Si la bola colisiona con el centro de la barra ( o casi ) 
        
                if((ball.x + ball.width / 2) > (player.x + player.width / 2) - 5 && (ball.x + ball.width / 2) < (player.x + player.width / 2) + 5) 
                { 
                    ballDir = 0; //Con este valor la bola no se movera en el el eje X
                } 
            } 

Configuramos los Listeners:

        private function addListeners():void 
        { 
            stage.addEventListener(MouseEvent.MOUSE_MOVE, movePlayer);
            
            timer.addEventListener(TimerEvent.TIMER, moveBall);
            timer.addEventListener(TimerEvent.TIMER, checkCollision);
        
            timer.start();
        } 
        
        private function removeListeners():void 
        { 
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, movePlayer);
            
            timer.removeEventListener(TimerEvent.TIMER, moveBall);
            timer.removeEventListener(TimerEvent.TIMER, checkCollision);
        
            timer.stop();
        }

Ahora solo debes llamar la clase desde el Panel de Propiedades de Flash, en el cuadro de Document Class.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.