Jump to content

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: https://phaser.io/tutorials/making-your-first-phaser-game -->
<!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 = game.add.group();
    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 = game.add.group();
    //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, game.world.height - 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;
    //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;

        //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 (game.time.now > firingTimer)
    {   //enemyfires
    game.physics.arcade.overlap(diamonds , player, aquireDiamond, null, this);

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

            diamond.reset(350, 350);
            firingTimer = game.time.now + 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




Link to comment
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 https://photonstorm.github.io/phaser-ce/Phaser.World.html#randomX and https://photonstorm.github.io/phaser-ce/Phaser.World.html#randomY to get a random position in the world to spawn them in.

as such:

diamond.reset(game.world.randomX, game.world.randomY)

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

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...