Purple Monster ore Platformgame

Nothing happens.
i don’t get an heaven ore ground. And on the next chapter i don’t get an ball ore de golden boxplatforms. I am really sure i don’t have typos there but i can’t figure out the problem.

var lights = addLights();
var ball = addBall();
// var board = addBoard();
// var goal = addGoal();

function addLights() {
var light = new THREE.Object3D();

var light1 = new THREE.PointLight('white', 0.4);
light1.position.set(50, 50, -100);
light1.castShadow = true;

var light2 = new THREE.PointLight('white', 0.5);
light2.position.set(-50, 50, 175);
light2.castShadow = true;

return lights;


function addBall() {
var shape = new THREE.SphereGeometry(10, 25, 21);
var cover = new THREE.MeshPhongMaterial({color: ‘red’});
cover.specular.setRGB(0.6, 0.6, 0.6);

var ball = new Physijs.SphereMesh(shape, cover);
ball.castShadow = true;

return ball;


just for the beginning i would be very happy to know what my problem is^^

Have you checked the JavaScript console as described in Chapter 2? If you do, I think you will find that there is a small typo in the code. If you still have trouble after checking the JavaScript console, let me know and I will try to help further.


I found my typo “facepalm” XD
To be honest, i hate the console, i don’t understand anything with it. I hope by the Code for the purple fruitmonster is also a small typo, but i cant figure out where. I wrote all new 3 times but it never worked.

// Physikeinstellung
Physijs.script.ammo = ‘/ammo.js’;
Physijs.script.worker = ‘/physijs_worker.js’;

// The “scene” is where stuff in our game will happen:
var scene = new Physijs.Scene();
scene.setGravity(new THREE.Vector3( 0, -250, 0 ));
var flat = {flatShading: true};
var light = new THREE.AmbientLight(‘white’, 0.8);

// The “camera” is what sees the stuff:
//var aspectRatio = window.innerWidth / window.innerHeight;
// var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
var w = window.innerWidth / 2;
var h = window.innerHeight / 2;
var camera = new THREE.OrthographicCamera(-w, w, h, -h, 1, 10000);
camera.position.z = 500;

// The “renderer” draws what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);

// ******** START CODING ON THE NEXT LINE ********

var ground = addGround();
//var avatar = addAvatar();
//var scoreboard = addScoreboard();

function addGround() {
var shape = new THREE.BoxGeometry(2*w, h, 10);
var cover = new THREE.MeshBasicMaterial({color: ‘lawngreen’});
var ground = new Physijs.BoxMesh(shape, cover, 0);
ground.position.y = -h/2;
return ground;

// Start Animation

var clock = new THREE.Clock();
function animate() {
var t = clock.getElapsedTime();

// Animation code goes here...

renderer.render(scene, camera);



I know it misses an > but when i tipe it in all disapears.

Welcome to programming! All JavaScript programmers hate the JavaScript console, so you will fit right in :slight_smile:

Even though we hate the JavaScript console, we learn to use it as well as we can because it can be amazingly helpful – as you found out.

When I enter your code in, I see the following in the JavaScript console:

VM151 code.html:7 Uncaught TypeError: Cannot set properties of undefined (setting 'ammo')
    at VM151 code.html:6:21
    at code.html:10:12

Line #6 (and #7) are:

Physijs.script.ammo = '/ammo.js';
Physijs.script.worker = '/physijs_worker.js';

The problem here is that we need to set the ammo and worker properties on Physijs.scripts (ending with an “s”), but the code currently has Physijs.script (no “s” at the end).

When I change those two lines to:

Physijs.scripts.ammo = '/ammo.js';
Physijs.scripts.worker = '/physijs_worker.js';

Then I see the sky and the ground. Hopefully that fixes it for you as well.


P.S. It is easier to post code in here if you follow the instructions in this post.