Question

178

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

rated 0 times [ 183] [ 5] / answers: 1 / hits: 10045 / 10 Years ago, sun, march 23, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anikas

Add To Favorites

Follow

Total Points: 258

Total Questions: 102

Total Answers: 95

Location: Monaco

Member since Sun, Jan 16, 2022

2 Years ago

answered 10 Years ago whitney · Accepted Answer

Yes, the game you describe can be done without Unity

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

enter

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>