Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Phaser - Making your first game, part 7</title>
    <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
   <script src='https://code.responsivevoice.org/responsivevoice.js'></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

var bgtile;
var player;
var stars;
var droplets;
var count = 0;
var start = new Date();
var scoreText;
var totalDropletsText;
var totalPoisonText;
var percentageText;
var score = 0;
var dropletCount = 0;
var poisonCount = 0;
var percentage = 0;
var totalCount = 0;
var procTime = 0;
var totalTimeStart = new Date();
var done = 0;

function preload() {
game.load.image('bgtile', 'riverTest.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
game.load.image('star', 'assets/star.png');
game.load.image('droplet', 'assets/firstaid.png')
}


function create() {
bgtile = game.add.tileSprite(0, 0, game.width, game.cache.getImage('bgtile').height, 'bgtile');

//  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    // The player and its settings
    player = game.add.sprite(32, game.world.height - 150, 'dude');

    //  We need to enable physics on the player
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 0;
    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);

    //  Our controls.
    cursors = game.input.keyboard.createCursorKeys();

    stars = game.add.group();

    stars.enableBody = true;

    droplets = game.add.group();

    droplets.enableBody = true;

    //setting up the scoring text
    scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#000'});


}

function update() {
var randomnumber = Math.floor(Math.random()*11);

bgtile.tilePosition.x -= 1;

if(count < 75){
    if(randomnumber % 2 == 0){
        createPoison();
    }else{
        createDroplets();
    }

}


    if(count == 75 && done == 0){
        responsiveVoice.speak("Congratulations you have made it through the river relatively pollutant free!  You are now ready to continue on in the water cycle to evaporation!");
        done +=1;
    }

//checking to see if the player overlaps with the poison to pick it up
    game.physics.arcade.overlap(player, stars, collectStar, null, this);

//checking to see if the player overlaps with the droplet to pick it up
    game.physics.arcade.overlap(player, droplets, collectDroplet, null, this);


player.body.velocity.y = 0;
    if (cursors.left.isDown && player.body.y > 300)
    {
        //  Move to the left
        player.body.velocity.y = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.y = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 4;
    }


}

/**
 * Returns a random number between min (inclusive) and max (exclusive)
 */
function getRandomArbitrary() {
    return Math.random() * (600 - 325) + 325;
}


function binaryChoice() {
    return Math.random() * (2 - 1) + 1;
}


//randomly generates poison
function createPoison(){
    var elapsed = new Date() - start;

        if(elapsed > 1000){
        var star = stars.create(800, getRandomArbitrary(), 'star');
        moveIndividual(star);
        count += 1;
        start = new Date();
        poisonCount += 1;
        totalCount += 1;
    }
}

//randomly generates good water dudes
function createDroplets(){
var elapsed2 = new Date() - start;
//had to make this jank counter because JavaScript sucks
        if(elapsed2 > 1000){
        var droplet = droplets.create(800, getRandomArbitrary(), 'droplet');
        moveIndividual(droplet);
        count += 1;
        start = new Date();
        dropletCount += 1;
        totalCount += 1;
    }
}


function moveIndividual(moved){
    moved.body.velocity.x = -100;
}


function collectStar(player, star){
    //removes the star
    star.kill();

    //add and update the score
    score -= 1;
    scoreText.text = 'Score: ' + score;
}

function collectDroplet(player, droplet){
    //removes the droplet
    droplet.kill();

    //add and update the score
    score += 1;
    scoreText.text = 'Score: ' + score;
}


</script>

</body>
</html>