Jump to content

Uncaught TypeError: Cannot set property 'collideWorldBounds' of null


Recommended Posts

Hi, I'm learning to make games Phaser, watching a tutorial to create the Pong. 


For starters, I have to draw all elements in screen, which are ball and two rackets. 


Failure to draw the ball, the ball is only draws and no draws snowshoes. 


The code is as follows


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<div id="ejemplo"></div>
<script src="phaser.min.js"></script>
window.onload = function(){
var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload, create: create, update: update });

var playerBet;
var computerBet;
var ball;
var computerBetSpeed = 190;
var ballSpeed = 300;

function preload() {

game.load.image('bet', 'assets/rocket.png');

game.load.image('ball', 'assets/ball.png');

game.load.image('background', 'assets/backg.png');


function create() {

game.add.tileSprite(0, 0, 640, 480, 'background');

ball = game.add.sprite(game.world.centerX, game.world.centerY, 'ball');

ball.anchor.setTo(0.5, 0.5);

ball.body.collideWorldBounds = true;

ball.body.bounce.setTo(1, 1);

computerBet = createBet(620, game.world.centerY);
playerBet = createBet(20, game.world.centerY);

computerBet.body.collideWorldBounds = true;

computerBet.body.bounce.setTo(1, 1);

computerBet.body.immovable = true;


function update () {


function createBet(x, y)
var bet = game.add.sprite(x, y, 'bet');

bet.anchor.setTo(0.5, 0.5);

bet.body.collideWorldBounds = true;

bet.body.bounce.setTo(1, 1);

bet.body.immovable = true;

return bet;


and failure I get is: 


Uncaught TypeError: Can not set property 'collideWorldBounds' of null 


In line 39, that is: 


ball.body.collideWorldBounds = true;


Help me please!! 

Link to comment
Share on other sites

By default Phaser.Physics.ARCADE is already started; no need to enable the system. You do however have to explicity enable the body on sprites - however you can create a group with the physics enabled by default on all its objects so you don't need to do this step:

var group = game.add.group();// This will enable bodies on all sprites added to the group - by default it will be Arcadegroup.enableBody = true;// Both of the following will have bodies enabled straight away via the groupgroup.create(0, 0, 'sprite');game.add.sprite(0, 0, 'sprite', 0, group);
Link to comment
Share on other sites

  • 5 years later...

In JavaScript almost everything is an object, null and undefined are exception. When you try to access an undefined variable it always returns undefined and we cannot get or set any property of undefined. In that case, an application will throw Uncaught TypeError cannot set property of undefined

In most cases, you are missing the initialization . So, you need to initialize the variable first. Moreover, if you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. If you just want to check whether there's any value, you can do:

if( value ) {
  //do something

Or, if you do not know whether a variable exists (that means, if it was declared) you should check with the typeof operator .

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {
  //deal with value


Link to comment
Share on other sites


  • Recently Browsing   0 members

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