Recommended Posts

Hi, I am trying to make a simple game and have been running into many problems. The problem I am facing now is that I cannot fix this error in my javascript. It says that it cannot read the 'setSize' property on my 'player' sprite, but it works perfectly fine on my other sprites. Next it says that it cannot read the 'velocity' property of the 'player' sprite, but when I comment out the 'setSize' property it works. I just cannot figure out what is wrong, have I misspelled something? I cannot seem to find the problem, so any help would be appreciated.

Btw, it worked yesterday, but when I loaded it up today it was no longer working...

 

 

Html: 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
		<link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      html {
        background: black
      }
      canvas {
        margin: auto;
      }
			h1 {
				font-family: 'Syncopate', sans-serif;
				color: rgb(194, 68, 91);
				text-align: center;
				margin: 0 auto;
				font-size: 25px;
			}
			h2 {
				color: white;
				font-size: 8px;
				font-family: 'Syncopate', sans-serif;
			}
    </style>
	</head>
	<body>
		<header>
			<h1>Crafty Heroes</h1>
		</header>
		<footer>
			<h2>&copy; SoulesteDesigns 2017</h2>
		</footer>
    <script src="phaser.js"></script>
		<script src="game.js"></script>
	</body>
</html>

 

game.js:

// VARIABLES
// variables for static objects
var walls;
var house;
var gate;
var gate2;
// variables for character
var cursors;
var player;
var left;
var right;
var up;
var down;


var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

// ADD HOUSES
function addHouse(image) {
  house = game.add.physicsGroup();
  house.create(-250, -240, 'greenhouse');
  house.setAll('body.immovable', true);
}

// ADD FENCES OR WALLS
function addWalls(image) {
  walls = game.add.physicsGroup();
  // fences up top
  walls.create(-90, -200, 'fencefront');
  walls.create(5, -200, 'fencefront');
  walls.create(100, -200, 'fencefront');
  walls.create(195, -200, 'fencefront');
  // fences to right
  walls.create(288, -200, 'fenceright');
  walls.create(288, -135, 'fenceright');
  walls.create(288, -70, 'fenceright');
  walls.create(288, -5, 'fenceright');
  // fences at bottom

  walls.create(5, 59, 'fencefront');
  walls.create(100, 59, 'fencefront');
  walls.create(195, 59, 'fencefront');
  // fences to left
  walls.create(-91, -200, 'fenceleft');
  walls.create(-91, -135, 'fenceleft');
  // set the walls to be static
  walls.setAll('body.immovable', true);
}



// PRELOAD IMAGES FOR ITEMS, PLAYERS, ETC.
function preload() {
    // preload player
    game.load.spritesheet('player', 'hero.png', 64, 64);

    // preload houses
    game.load.image('greenhouse', 'greenhouse.png');

    // preload fences
    game.load.image('fencefront', 'fencefront.png');
    game.load.image('fenceleft', 'fenceleft.png');
    game.load.image('fenceright', 'fenceright.png');
    // fence that has adjusted hit boundary
    game.load.image('gate', 'fenceleft.png');
    game.load.image('gate2', 'fencefront.png');

    // preload ground
    game.load.image('ground', 'tiles2.png');

}






// ADD THINGS TO GAME
function create() {

    // set area that the player may travel to
    game.world.setBounds(-250, -250, 550, 550);

    // set background color
    game.stage.backgroundColor = ('#3c6f42');

    gate = game.add.physicsGroup();

    game.physics.startSystem(Phaser.Physics.ARCADE);


    gate = game.add.sprite(-91, -70, 'gate');
    gate.name = 'gate';
    game.physics.enable([gate], Phaser.Physics.ARCADE);
    //  This adjusts the collision body size to be a 100x50 box.
    //  50, 25 is the X and Y offset of the newly sized box.
    gate.body.setSize(15, 90, -2, 3);
    gate.body.immovable = true;


    gate2 = game.add.physicsGroup();

    game.physics.startSystem(Phaser.Physics.ARCADE);
    gate2 = game.add.sprite(-90, 59, 'gate2');
    gate2.name = 'gate2';
    game.physics.enable([gate2], Phaser.Physics.ARCADE);
    //  This adjusts the collision body size to be a 100x50 box.
    //  50, 25 is the X and Y offset of the newly sized box.
    gate2.body.setSize(90, 15, 3, 3);
    gate2.body.immovable = true;

    // adding the ground

    var ground = game.add.sprite(-224, -100, 'ground', 1);
    var ground = game.add.sprite(-224, -60, 'ground', 1);
    var ground = game.add.sprite(-224, -20, 'ground', 1);
    var ground = game.add.sprite(-224, 20, 'ground', 1);
    var ground = game.add.sprite(-184, 20, 'ground', 1);
    var ground = game.add.sprite(-144, 20, 'ground', 1);

    // add player image and place in screen
    player = game.add.sprite(-232,  -100, 'player');
    player.smoothed = true;
    player.scale.set(.9);
    player.body.setSize(30, 40, 16, 16);
    player.body.immovable = false;

    // player will "collide" with certain images like walls and houses
    player.collideWorldBounds = true;

    // ANIMATION FOR PLAYER CONTROLS
    down = player.animations.add('down', [0,1,2,3], 10, true);
    left = player.animations.add('left', [4,5,6,7], 10, true);
    right = player.animations.add('right', [8,9,10,11], 10, true);
    up = player.animations.add('up', [12,13,14,15], 10, true);

    // enable physics in the game (can't go through walls, gravity, etc.)
    game.physics.enable([player, house, walls, gate], Phaser.Physics.ARCADE);
    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.physics.p2.enable(player);




    // make sure to add this code to add items/walls/buildings
    addHouse();
    addWalls();




    // enable keyboard arrows for controls
    cursors = game.input.keyboard.createCursorKeys();
    // camera will follow the character
    game.camera.follow(player);





}

// what happens when player does something
function update() {



  // player will now collide with these images rather than pass over them
  game.physics.arcade.collide(player, house);
  game.physics.arcade.collide(player, walls);


// PLAYER CONTROLS
    player.body.velocity.set(0);
    // player presses left key
    if (cursors.left.isDown)
    {
        player.body.velocity.x = -100;
        player.play('left');
    }
    // player presses right key
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = 100;
        player.play('right');
    }
    // player presses up key
    else if (cursors.up.isDown)
    {
        player.body.velocity.y = -100;
        player.play('up');
    }
    // player presses down key
    else if (cursors.down.isDown)
    {
        player.body.velocity.y = 100;
        player.play('down');
    }
    // player does not press anything
    else
    {
        player.animations.stop();
    }


}



function render() {

  game.debug.bodyInfo(gate2, 32, 32);

  game.debug.body(gate2);

  game.debug.bodyInfo(player, 32, 32);

  game.debug.body(player);

}

 

error.PNG

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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.