CODEWITHSUNDEEP
javascripthtmlobjecthtml5-canvasdom-events
Thomas
Thomas

Reputation: 167

How to spawn objects randomly on a line using Javascript/HTML5?

I am creating a game in Javascript/HTML5 (in a canvas) which involves 2 types of objects (let's call them object type A and object type B) that start falling from above the canvas.

The player is meant to swipe the objects as they fall so that the objects don't fall through the bottom of the screen.

I want to create a horizontal line on which the program would choose a random point to spawn an object from.

The program also has to decide for each object spawn whether it is an object of type A or B.

How exactly would I create code to spawn the objects to consider both of these independent probabilities?

I assume Math.random is involved, but I am very inexperienced in Javascript and do not know how to code this.

Also, when spawning objects, what would I use to control the rate of spawning and the change of rate of spawning over time?

I have heard that Unity can be helpful in spawning, but is there an effective way to do it without Unity?

Upvotes: 3

Views: 10896

Answers (1)

markE
markE

Reputation: 105015

Yes, the game you describe can be done without Unity

A Demo: http://jsfiddle.net/m1erickson/RCLtR/

enter image description here

Here's well commented code to get you started.

This code spawns random object and animates them down the screen.

This code isn't optimized and doesn't handle game events, but it will get your learning experience started!

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // get a refrence to the canvas and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // newly spawned objects start at Y=25
    var spawnLineY=25;

    // spawn a new object every 1500ms
    var spawnRate=1500;

    // set how fast the objects will fall
    var spawnRateOfDescent=0.50;

    // when was the last object spawned
    var lastSpawn=-1;

    // this array holds all spawned object
    var objects=[];

    // save the starting time (used to calc elapsed time)
    var startTime=Date.now();

    // start animating
    animate();


    function spawnRandomObject(){

        // select a random type for this new object
        var t;

        // About Math.random()
        // Math.random() generates a semi-random number
        // between 0-1. So to randomly decide if the next object
        // will be A or B, we say if the random# is 0-.49 we
        // create A and if the random# is .50-1.00 we create B

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

        // create the new object
        var object={
            // set this objects type
            type:t, 
            // set x randomly but at least 15px off the canvas edges
            x:Math.random()*(canvas.width-30)+15,
            // set y to start on the line where objects are spawned
            y:spawnLineY,
        }

        // add the new object to the objects[] array
        objects.push(object);
    }



    function animate(){

        // get the elapsed time
        var time=Date.now();

        // see if its time to spawn a new object
        if(time>(lastSpawn+spawnRate)){
            lastSpawn=time;
            spawnRandomObject();
        }

        // request another animation frame
        requestAnimationFrame(animate);

        // clear the canvas so all objects can be 
        // redrawn in new positions
        ctx.clearRect(0,0,canvas.width,canvas.height);

        // draw the line where new objects are spawned
        ctx.beginPath();
        ctx.moveTo(0,spawnLineY);
        ctx.lineTo(canvas.width,spawnLineY);
        ctx.stroke();

        // move each object down the canvas
        for(var i=0;i<objects.length;i++){
            var object=objects[i];
            object.y+=spawnRateOfDescent;
            ctx.beginPath();
            ctx.arc(object.x,object.y,8,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle=object.type;
            ctx.fill();
        }

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 4

Related Questions