Sign in to follow this  

Need help spawning falling items in random position html5

Recommended Posts

I am trying to make a platformer mod of the first tutorial platformer, and this is my first time working with phaser. I am attempting to have diamonds spawn from the sky on a timer, that the player may collect. Everything except the spawning of diamonds seems to be working correctly, my code is as follows:

<!--The sprites and some of the movement controls for this game come from
this tutorial: -->
<!doctype html> 
<html lang="en"> 
    <meta charset="UTF-8" />
    <title>Phaser - Making your first game, part 9</title>
    <script type="text/javascript" src="js/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;

<script type="text/javascript">

//sets up a game, setting the area of play and loading it in
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//loads what will be needed for the game before the game starts
function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('diamond', 'assets/diamond.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);


//here I can set variables that can be accesses by create,
//much like putting in variables before calling them in unity
var player;
var platforms;
//directional keys to use for movement
var cursors;

var score = 0;
var scoreString = '';
var scoreText
var scoreText;
var firingTimer = 0;

//uses the preloaded items and other lines of code to make the beef of the game
function create() {
    game.add.sprite(0, 0, 'sky');
    //enables arcade physics

    diamonds =;
    diamonds.enableBody = true;

    diamonds.createMultiple(30, 'diamond');
    diamonds.setAll('anchor.x', 350);
    diamonds.setAll('anchor.y', 350);
    diamonds.setAll('outOfBoundsKill', true);
    diamonds.setAll('checkWorldBounds', true);

        //  The score
    scoreString = 'Score : ';
    scoreText = game.add.text(10, 10, scoreString + score, { font: '34px Arial', fill: '#fff' });

    //will contain the ground
    platforms =;
    //any object in the platforms group will have a body
    platforms.enableBody = true;
    // Here is where the ground is created
    var ground = platforms.create(0, - 64, 'ground');
    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);
    //  This stops the ground from falling away when you jump on it
    ground.body.immovable = true;

     // The player and its settings
    player = game.add.sprite(350,  400, 'dude');
    //  We need to enable physics on the player
    //  Player physics properties.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 600;
    player.body.collideWorldBounds = true;
    //Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);

    cursors = game.input.keyboard.createCursorKeys();

function update() {
    //  Collide the player with the ground
    game.physics.arcade.collide(player, platforms);

    //  Reset the players velocity (movement)
    //this means that if no keys are pressed, the player will
    //remain in place
    player.body.velocity.x = 0;

    //if the left arrow is pressed, add velocity to the player and play an animation
    if (cursors.left.isDown)
        //  Move to the left
        player.body.velocity.x = -400;'left');
    //if the right arrow is pressed, add velocity to the player and play an animation
    else if (cursors.right.isDown)
        //  Move to the right
        player.body.velocity.x = 400;'right');

        //if no keys are pressed. animation is set to one constant frame
        //and no velocity is added
        //Stand still
        //sets player's frame to the one facing forward
        player.frame = 4;
    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
        player.body.velocity.y = -350;

    if ( > firingTimer)
    {   //enemyfires
    game.physics.arcade.overlap(diamonds , player, aquireDiamond, null, this);

    function generateDiamond(){
        diamond = diamonds.getFirstExists(false);

            diamond.reset(350, 350);
            firingTimer = + 2000;
            diamond.body.gravity.y = 200;


        function aquireDiamond(player,diamond){
            diamond.kill ();
            scoreText.text = scoreString + score;

        //if time = certain amount then spawn diamond in random
        //position above screen and let it fall, it will not stay on the ground




Share this post

Link to post
Share on other sites

So your line:

diamond.reset(350, 350)

sets the diamonds to spawn at that exact position in the world each time you make a new one (x350, y350)

You can use and to get a random position in the world to spawn them in.

as such:


This may spawn the diamond inside the tilemap, so you may want to work around that somehow.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.