CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
22142870
22142870

Reputation: 41

How to make multiple balls keep spawning with collision code in it

I am trying to combine my collision code with falling balls and paddle code, so far I got my collision code working but I have only one ball dropping and when I clear my collision code multiple balls will drop. Any solution on how to combine both to work? What I want to do is that if one of the random falling balls will hit the paddle, the game ends. Here is the code:

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
    </head>
    <body>

    <canvas id="myCanvas" width="480" height="500"></canvas>

    <script>


    var spawnRate = 100;


    var spawnRateOfDescent = 2;


    var lastSpawn = -10;


    var objects = [];


    var startTime = Date.now();

    function spawnRandomObject() {

    
    var t;

    

    if (Math.random() < 0.50) {
        t = "red";
    } else {
        t = "blue";
    }

	
	
   
    var object = {
        
        type: t,
        
        x: Math.random() * (canvas.width - 30) + 15,
        
        y: 0,
        r: 8
		
  
    }
     
	 
	 
    
    objects.push(object);
    }



    function animate() {

    
    var time = Date.now();

    
    if (time > (lastSpawn + spawnRate)) {
        lastSpawn = time;
        spawnRandomObject();
    }

	
	
    for (var i = 0; i < objects.length; i++) {
        var object = objects[i];
        object.y += spawnRateOfDescent;
        ctx.beginPath();
        ctx.arc(object.x, object.y, object.r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = object.type;
        ctx.fill();
		
    //Collision code starts here
    var distX = Math.abs(object.x - paddleX-paddleWidth/2);
    var distY = Math.abs(object.y - paddleY-paddleHeight/2);
		
	if (distX > (paddleWidth/2 + 8)) { return false; }
	if (distY > (paddleHeight/2 + 8)) { return false; }
	
	if (distX <= (paddleWidth/2)) { alert("hello"); }
	if (distY <= (paddleHeight/2)) { alert("hello"); }	
	//Collsion code ends here
		}

		}



    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var paddleHeight = 10;
    var paddleWidth = 60;
    var paddleY = 480
    var paddleX = (canvas.width-paddleWidth)/2;
    var rightPressed = false;
    var leftPressed = false;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

    function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    }
    function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
    }



    function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
    }

    function move(){
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 3;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 3;
    }
    }

	
	
    function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPaddle();    
	animate();
    move();
    
 
    
	
    }

    setInterval(draw, 10);

    </script>

    </body>
    </html>

I am new to javascript so if its too complicated, my appologies.( And be careful with unending loop if it hits the ball)

Upvotes: 0

Views: 1007

Answers (1)

markE
markE

Reputation: 105015

Here's how to stop the game if the paddle and a ball are colliding:

Inside animate() do a 3 part collision test ...

Collision test Part 1:

Test if the ball has not yet reached the paddle.

If the ball has not yet reached the paddle, then stop testing for a collision with this ball and process the next ball by continue-ing the loop.

Collision test Part 2:

Test if the ball has already passed below the paddle.

If the ball has already passed below the paddle, then stop testing for a collision with this ball and process the next ball by continue-ing the loop.

Collision test Part 3:

If you reach this point, the ball is vertically colliding with the paddle. Now test if the ball is horizontally colliding with the paddle.

If the ball is not horizontally over the paddle, then stop testing for a collision with this ball and process the next ball by continue-ing the loop.

If the ball is horizontally over the paddle then stop the game loop with clearInterval.

Here is some refactoring of your code:

    var spawnRate = 100;
    var spawnRateOfDescent = 2;
    var lastSpawn = -10;
    var objects = [];
    var startTime = Date.now();

    function spawnRandomObject() {
  
    var t;

    if (Math.random() < 0.50) {
        t = "red";
    } else {
        t = "blue";
    }
   
    var object = {      
        type: t,    
        x: Math.random() * (canvas.width - 30) + 15,
        y: 0,
        r: 8
    }
     
	 
    
    objects.push(object);
    }


    function animate() {
        var time = Date.now();       
        if (time > (lastSpawn + spawnRate)) {
            lastSpawn = time;
            spawnRandomObject();
        }

        // calculate the bounds of the paddle
        var paddleLeft=paddleX;
        var paddleRight=paddleX+paddleWidth;
        var paddleTop=paddleY;
        var paddleBottom=paddleY+paddleHeight;
      
        for (var i = 0; i < objects.length; i++) {

            var object = objects[i];
            object.y += spawnRateOfDescent;
            ctx.beginPath();
            ctx.arc(object.x, object.y, object.r, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = object.type;
            ctx.fill();
        
            //Collision code starts here           

            // calculate bounds of this ball
            var objectTop=object.y-object.r;
            var objectBottom=object.y+object.r;
            var objectLeft=object.x-object.r;
            var objectRight=object.x+object.r;

            // Collision test: Part 1
            // Has the ball not yet reached the paddle?
            if(objectBottom<paddleY){
                // no collision yet so no collision is happening
                continue;
            }
            // Collision test: Part 2
            // Has the ball already passed below the paddle?
            if(objectTop>paddleBottom){
                // the ball is under the paddle so no collision is happening
                continue;
            }
            // Collision test: Part 3
            // Is the ball now horizontally over the paddle?
            if(objectRight>paddleLeft && objectLeft<paddleRight){
                // ball is colliding with paddle
                // end the game
                clearInterval(theInterval);
                alert('Game Over - ball  has collided with paddle');
            }

            //Collsion code ends here
        }
		}



    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var paddleHeight = 10;
    var paddleWidth = 60;
    var paddleY = 480
    var paddleX = (canvas.width-paddleWidth)/2;
    var rightPressed = false;
    var leftPressed = false;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

    function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    }
    function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
    }



    function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
    }

    function move(){
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 3;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 3;
    }
    }

	
	
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();    
        animate();
        move();
    }


    var theInterval=setInterval(draw, 25);
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
<canvas id="myCanvas" width="480" height="500"></canvas>

Upvotes: 1

Related Questions