small medium large xlarge

Generic-user-small
15 Jan 2014, 18:46
Adam Hausknecht (2 posts)

Hi, I am using Chrome Version 32.0.1700.77 on a MacBook Pro. The example on page 3 will not run. I don’t know what to do! The errors shown by the JavaScript console are

Document was loaded from Application Cache with manifest http://gamingjs.com/ice/editor.appcache gamingjs.com/:1 Application Cache Checking event gamingjs.com/:1 Application Cache Error event: Manifest fetch failed (-1) http://gamingjs.com/ice/editor.appcache gamingjs.com/:1 Error in event handler for (unknown): TypeError: Cannot read property ‘coupons_url’ of undefined at chrome-extension://mhkaekfpcppmmioggniknbnbdbcigpkk/scripts/loader_1036.js:2:20 at disconnectListener (extensions::messaging:338:9) at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14) at Event.dispatchToListener (extensions::event_bindings:386:22) at Event.dispatch_ (extensions::event_bindings:371:27) at Event.dispatch (extensions::event_bindings:392:17) at dispatchOnDisconnect (extensions::messaging:293:27) gamingjs.com/:1 Application Cache Checking event gamingjs.com/:1 Application Cache NoUpdate event gamingjs.com/:1 Application Cache Checking event gamingjs.com/:1 Application Cache NoUpdate event gamingjs.com/:1 Document was loaded from Application Cache with manifest http://gamingjs.com/ice/editor.appcache gamingjs.com/:1 2 Application Cache Checking event gamingjs.com/:1 THREE.CanvasRenderer 52 Three.js:11928 Uncaught TypeError: undefined is not a function preview_frame.html:21 2 Application Cache NoUpdate event

Chris_strom_headshot_200_pragsmall
16 Jan 2014, 01:06
Chris Strom (142 posts)

It looks like you have a Chrome extension named “Slick Savings” that is preventing the ICE Code Editor from loading properly. I am not 100% sure, but it looks pretty shady – like it might be spyware. Unless you are really, REALLY sure that you need it, I strongly recommend removing the extension via Menu -> Tools -> Extensions. Once that has been removed, the http://gamingjs.com/ice site should load properly.

Generic-user-small
16 Jan 2014, 04:28
Adam Hausknecht (2 posts)

Thanks for your help! It now runs!

Regards,

Adam Hausknecht

Generic-user-small
13 Feb 2014, 01:18
Wayne He (28 posts)

After I typed in the code for creating the trees, the ICE editor isn’t making the trees. Here is the code I typed:makeTreeAt( 500, 0); makeTreeAt(-500, 0); makeTreeAt( 750, -1000); makeTreeAt(-750, -1000); function makeTreeAt(x, z) { var trunk = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 200), new Three.MeshBasicMaterial({color: 0xA0522D}) ); var top = new THREE.Mesh( new THREE.SphereGeometry(150), new THREE.MeshBasicMaterial({color: 0x228B22}) ); top.position.y = 175; trunk.add(top);

trunk.position.set(x, -75, z);
scene.add(trunk); }
Chris_strom_headshot_200_pragsmall
13 Feb 2014, 14:43
Chris Strom (142 posts)

What does the JavaScript console tell you?

Generic-user-small
15 Feb 2014, 20:03
Wayne He (28 posts)

Fixed it. Never mind. Except now I have a new bug; boundaries are not working. Code:

Generic-user-small
15 Feb 2014, 20:03
Wayne He (28 posts)

I guess it got overloaded.<body></body>

// This is what sees the stuff: var aspect_ratio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000); camera.position.z = 500;

// This will draw what the camera sees onto the screen: var renderer = new THREE.CanvasRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

// **** START CODING ON THE NEXT LINE **** var not_allowed = [];

var marker = new THREE.Object3D();
scene.add(marker);

var cover = new THREE.MeshNormalMaterial(); var body = new THREE.SphereGeometry(100); var avatar = new THREE.Mesh(body, cover); marker.add(avatar);

var hand = new THREE.SphereGeometry(50);

var right_hand = new THREE.Mesh(hand, cover); right_hand.position.set(-150, 0, 0); avatar.add(right_hand);

var left_hand = new THREE.Mesh(hand, cover); left_hand.position.set(150, 0, 0); avatar.add(left_hand);

var foot = new THREE.SphereGeometry(50);

var left_foot = new THREE.Mesh(foot, cover); left_foot.position.set(75, -125, 0); avatar.add(left_foot);

var right_foot = new THREE.Mesh(foot, cover); right_foot.position.set(-75, -125, 0); avatar.add(right_foot);

marker.add(camera);

makeTreeAt( 500, 0); makeTreeAt(-500, 0); makeTreeAt( 750, -1000); makeTreeAt(-750, -1000); function makeTreeAt(x, z) { var trunk = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 200), new THREE.MeshBasicMaterial({color: 0xA0522D}) );

var top = new THREE.Mesh( new THREE.SphereGeometry(150), new THREE.MeshBasicMaterial({color: 0x228B22}) ); top.position.y = 175; trunk.add(top);

trunk.position.set(x, -75, z);
scene.add(trunk);

var boundary = new THREE.Mesh( new THREE.CircleGeometry(300), new THREE.MeshNormalMaterial() ); boundary.position.y = -100; boundary.rotation.x = Math.PI/2; trunk.add(boundary);

not_allowed.push(boundary); }

var clock = new THREE.Clock(true); function animate() { requestAnimationFrame(animate); TWEEN.update(); walk(); turn(); acrobatics(); renderer.render(scene, camera); } animate();

function walk() { if (!isWalking()) return; var position = Math.sin(clock.getElapsedTime()*10) * 100; right_hand.position.z = position; left_hand.position.z = -position; right_foot.position.z = -position; left_foot.position.z = position; }

function turn() { var direction = 0; if (is_moving_forward) direction = Math.PI; if (is_moving_back) direction = 0; if (is_moving_right) direction = Math.PI/2; if (is_moving_left) direction = -Math.PI/2;

spinAvatar(direction); } function spinAvatar(direction) { new TWEEN. Tween({y: avatar.rotation.y}). to({y: direction}, 100). onUpdate(function () { avatar.rotation.y = this.y; }). start(); } var is_cartwheeling = false; var is_flipping = false; function acrobatics() { if (is_cartwheeling) { avatar.rotation.z = avatar.rotation.z + 0.05; } if (is_flipping) { avatar.rotation.x = avatar.rotation.x + 0.05; } } var is_moving_right, is_moving_left, is_moving_forward, is_moving_back; function isWalking() { if (is_moving_right) return true; if (is_moving_left) return true; if (is_moving_forward) return true; if (is_moving_back) return true; return false; } // Listen for keypress events document.addEventListener(‘keydown’, function(event) { var code = event.keyCode; if (code == 37) { // left marker.position.x = marker.position.x-5; is_moving_left = true; } if (code == 38) { // up marker.position.z = marker.position.z-5; is_moving_forward = true; } if (code == 39) { // right marker.position.x = marker.position.x+5; is_moving_right = true; } if (code == 40) { // down marker.position.z = marker.position.z+5; is_moving_back = true; } if (code == 67) is_cartwheeling = !is_cartwheeling; // C if (code == 70) is_flipping = !is_flipping; // F if (detectCollisions()) { if (is_moving_left) marker.position.x = marker.position.x+5; if (is_moving_right) marker.position.x = marker.position.x-5; if (is_moving_forward) marker.position.x = marker.position.z+5; if (is_moving_back) marker.position.x = marker.position.z-5; } }); document.addEventListener(‘keyup’, function(event) { var code = event.keyCode;

if (code == 37) is_moving_left = false; if (code == 38) is_moving_forward = false; if (code == 39) is_moving_right = false; if (code == 40) is_moving_back = false; });

// Now, show what the camera sees on the screen: renderer.render(scene, camera); function detectCollisions() { var vector = new THREE.Vector3(0, -1, 0); var ray = new THREE.ray(marker.position, vector); var intersects = ray.intersectObjects(not_allowed); if (intersects.length > 0) return true; return false; } </script>

Generic-user-small
15 Feb 2014, 20:05
Wayne He (28 posts)

Still, nice book

Chris_strom_headshot_200_pragsmall
15 Feb 2014, 20:58
Chris Strom (142 posts)

Thanks! Glad you like it :)

To include code in here, paste it in between 2 lines with three tildes (~~~) as the example below shows. That way the forum won’t strip things out. The code you pasted looks like it’s missing stuff at the top. My guess is that the forum software causes it, but double check that your code starts with:

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Tween.js"></script>
<script>

  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

If it does, then I think there are two other problems with your code. The first you ought to see in the JavaScript console when you use the keyboard to move your player. Somewhere around line 180. I’ll leave that to you to find :D

The second problem is in the code from page 96. You have a tiny typo: boundary.rotation.x should be -Math.PI/2, but you have Math.PI/2 (without the minus). If you address those two things, then your code should work just fine.

Good luck!

Generic-user-small
16 Feb 2014, 13:51
Wayne He (28 posts)

Thks. line 96 : ~~~ if (!isWalking()) return; ~~~

Generic-user-small
16 Feb 2014, 13:53
Wayne He (28 posts)

Just got it working, thanks. It was Line 78 though

Generic-user-small
16 Feb 2014, 13:54
Wayne He (28 posts)

Line 180 and down is: ~~~

// Now, show what the camera sees on the screen: renderer.render(scene, camera); function detectCollisions() { var vector = new THREE.Vector3(0, -1, 0); var ray = new THREE.ray(marker.position, vector); var intersects = ray.intersectObjects(not_allowed); if (intersects.length > 0) return true; return false; } </script> ~~~

Generic-user-small
20 Feb 2014, 12:04
Wayne He (28 posts)

not working now

Chris_strom_headshot_200_pragsmall
21 Feb 2014, 17:55
Chris Strom (142 posts)

Sorry it’s not working again. Believe me, I understand how frustrating that can be. But don’t despair! You’ve done quite well to get this far.

Are there error messages in the JavaScript console (as described in Chapter 2) that might help? Can you use the Share menu option in ICE to paste a link to your code here so that I can take a look?

It wouldn’t be as much fun to get it working if it were easy, but hopefully we can sort this out without too much difficulty :)

Generic-user-small
22 Feb 2014, 00:49
Wayne He (28 posts)

ok, ill try.

Generic-user-small
22 Feb 2014, 00:52
Wayne He (28 posts)

{http://gamingjs.com/ice/#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]

Generic-user-small
22 Feb 2014, 00:53
Wayne He (28 posts)

um (http://gamingjs.com/ice/#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)

Chris_strom_headshot_200_pragsmall
22 Feb 2014, 04:32
Chris Strom (142 posts)

Please, please, please check the JavaScript console. I loaded your code just fine (thanks for the link). When I look at the JavaScript console after moving the player, I see:

Uncaught TypeError: undefined is not a function preview_frame.html:185

Line 185 is:

  var ray = new THREE.ray(marker.position, vector);

It should be THREE.Ray (capital), not THREE.ray. After changing that one thing, your code works perfectly for me :)

It’s super easy to make mistakes like this when doing any kind of programming (I probably did it 6 times today myself). But the JavaScript console as described in Chapter 2 really helps to find things like this. It won’t always work, but it should be one of the first things you try when things go wrong.

Nice work so far. If you run into more problems, post them here — but check the JavaScript console first :P

But seriously, I’m happy to help if you run into other problems!

Generic-user-small
22 Feb 2014, 23:43
Wayne He (28 posts)

I didn’t read Chapter 2 because it was not part of the project. The reason I’m only doing the project is because I actually got this from the library and I want to just whiz through it.

Generic-user-small
22 Feb 2014, 23:45
Wayne He (28 posts)

Now on Chapter 12 - Project: Fruit Hunt

Generic-user-small
22 Feb 2014, 23:45
Wayne He (28 posts)

11*

Chris_strom_headshot_200_pragsmall
23 Feb 2014, 04:50
Chris Strom (142 posts)

Yay! Glad you made it past that error :)

Good luck with the next stuff. And maybe go back to chapter 2 if you get a chance. You’re right – it’s not part of the project stuff so you can skip it, but it’s still pretty useful. Plus you get to break code lots of different ways!

Let me know if you have any other questions!

Generic-user-small
23 Feb 2014, 13:04
Wayne He (28 posts)

thanks for all the help!

Generic-user-small
23 Feb 2014, 17:33
Wayne He (28 posts)

Problem = typed code for pg 104(in your book) and no trees, but still scoreboard link: http://is.gd/o0rUik code: ~~~ // Now, show what the camera sees on the screen: renderer.render(scene, camera); function detectCollisions() { var vector = new THREE.Vector3(0, -1, 0); var ray = new THREE.Ray(marker.position, vector); var intersects = ray.intersectObjects(not_allowed); if (intersects.length > 0) return true; return false; } function checkForTreasure() { if (tree_with_treasure === undefined) return;

var treasure_tree = trees[tree_with_treasure], p1 = treasure_tree.parent.position, p2 = marker.position;

var distance = Math.sqrt( (p1.x - p2.x)(p1.x - p2.x) + (p1.z - p2.z)(p1.z - p2.z) );

if (distance < 500) { scorePoints(); } } function scorePoints() { if (scoreboard.getTimeRemaining() === 0) return; scoreboard.addPoints(10); } function animateJump() { new TWEEN .Tween({jump: 0}) .to({jump: Math.PI}, 500) .onUpdate(function () { marker.position.y = 200* Math.sin(this.jump); }) .start(); } </script> ~~~

Generic-user-small
23 Feb 2014, 17:34
Wayne He (28 posts)

Hmmm. ~~~ (// Now, show what the camera sees on the screen: renderer.render(scene, camera); function detectCollisions() { var vector = new THREE.Vector3(0, -1, 0); var ray = new THREE.Ray(marker.position, vector); var intersects = ray.intersectObjects(not_allowed); if (intersects.length > 0) return true; return false; } function checkForTreasure() { if (tree_with_treasure === undefined) return;

var treasure_tree = trees[tree_with_treasure], p1 = treasure_tree.parent.position, p2 = marker.position;

var distance = Math.sqrt( (p1.x - p2.x)(p1.x - p2.x) + (p1.z - p2.z)(p1.z - p2.z) );

if (distance < 500) { scorePoints(); } } function scorePoints() { if (scoreboard.getTimeRemaining() === 0) return; scoreboard.addPoints(10); } function animateJump() { new TWEEN .Tween({jump: 0}) .to({jump: Math.PI}, 500) .onUpdate(function () { marker.position.y = 200* Math.sin(this.jump); }) .start(); } </script>) ~~~

Generic-user-small
23 Feb 2014, 17:35
Wayne He (28 posts)

tilde thing isnt working

Generic-user-small
23 Feb 2014, 17:40
Wayne He (28 posts)

typo: if (tree_with_treasure === undefined) return;
In your book you wrote : if (tree_with_treasure == undefined) return; Extra = sign

Generic-user-small
23 Feb 2014, 17:40
Wayne He (28 posts)

I mean, 1 less = sign

Generic-user-small
23 Feb 2014, 20:27
Wayne He (28 posts)

// Now, show what the camera sees on the screen: renderer.render(scene, camera); function detectCollisions() { var vector = new THREE.Vector3(0, -1, 0); var ray = new THREE.Ray(marker.position, vector); var intersects = ray.intersectObjects(not_allowed); if (intersects.length > 0) return true; return false; } function checkForTreasure() { if (tree_with_treasure === undefined) return;

var treasure_tree = trees[tree_with_treasure], p1 = treasure_tree.parent.position, p2 = marker.position;

var distance = Math.sqrt( (p1.x - p2.x)(p1.x - p2.x) + (p1.z - p2.z)(p1.z - p2.z) );

if (distance < 500) { scorePoints(); } } function scorePoints() { if (scoreboard.getTimeRemaining() === 0) return; scoreboard.addPoints(10); } function animateJump() { new TWEEN .Tween({jump: 0}) .to({jump: Math.PI}, 500) .onUpdate(function () { marker.position.y = 200* Math.sin(this.jump); }) .start(); } </script>

Generic-user-small
23 Feb 2014, 23:24
Wayne He (28 posts)

Full Code: ~~~

~~~

Generic-user-small
23 Feb 2014, 23:25
Wayne He (28 posts)

huh? ~~~

~~~

Generic-user-small
23 Feb 2014, 23:25
Wayne He (28 posts)

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src=""></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script src="http://gamingJS.com/Sounds.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
var not_allowed = [];
  
var marker = new THREE.Object3D();  
scene.add(marker);
  
  
var cover = new THREE.MeshNormalMaterial();
var body = new THREE.SphereGeometry(100);
var avatar = new THREE.Mesh(body, cover);
marker.add(avatar);

var hand = new THREE.SphereGeometry(50);

var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-150, 0, 0);
avatar.add(right_hand);

var left_hand = new THREE.Mesh(hand, cover);
left_hand.position.set(150, 0, 0);
avatar.add(left_hand);

var foot = new THREE.SphereGeometry(50);

var left_foot = new THREE.Mesh(foot, cover);
left_foot.position.set(75, -125, 0);
avatar.add(left_foot);

var right_foot = new THREE.Mesh(foot, cover);
right_foot.position.set(-75, -125, 0);
avatar.add(right_foot);

marker.add(camera);

var tree_with_treasure;
var trees = [];
trees.push(makeTreeAt( 500, 0));
trees.push(makeTreeAt(-500, 0));
trees.push(makeTreeAt( 750, -1000));
trees.push(makeTreeAt(-750, -1000));
function makeTreeAt(x, z) {
  // Don't change any code at the start...
  
  // ... but add the following line to the end;
  return top;
}
function shakeTree() {
  tree_with_treasure = Math.Floor(Math.random() * trees.legnth);
  
  new TWEEN
   .Tween({x: 0})
   .to({x: 2*Math.PI}, 200)
   .repeat(20)
   .onUpdate(function () {
     trees[tree_with_treasure].position.x = 75 * Math.sin(this.x);
   })
   .start();
   
  setTimeout(shakeTree, 12*1000);
}

function makeTreeAt(x, z) {
  var trunk = new THREE.Mesh(
    new THREE.CylinderGeometry(50, 50, 200),
    new THREE.MeshBasicMaterial({color: 0xA0522D})
  );
  
  var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 0x228B22})
    );
    top.position.y = 175;
    trunk.add(top);
    
    trunk.position.set(x, -75, z);
    scene.add(trunk);

var boundary = new THREE.Mesh(
  new THREE.CircleGeometry(300),
  new THREE.MeshNormalMaterial()
);
boundary.position.y = -100;
boundary.rotation.x = -Math.PI/2;
trunk.add(boundary);

not_allowed.push(boundary);
}

function jump() {
  checkForTreasure();
  animateJump();
}
var scoreboard = new Scoreboard();
scoreboard.countdown(45);
scoreboard.score();
scoreboard.help(
  'Arrow keys to move. ' +
  'Space bar to jump for fruit. ' +
  'Watch for shaking trees with fruit. ' + 
  'Get near the tree and jump before the fruit is gone!'
);
var game_over = false;
scoreboard.onTimeExpired(function() {
  scoreboard.message("Game Over!");
  game_over = true;
});

var clock = new THREE.Clock(true);
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  walk();
  turn();
  acrobatics();
  renderer.render(scene, camera);
}
animate();

function walk() {
  if (!isWalking()) return;
  var position = Math.sin(clock.getElapsedTime()*10) * 100;
  right_hand.position.z = position;
  left_hand.position.z = -position;
  right_foot.position.z = -position;
  left_foot.position.z = position;
}

function turn() {
  var direction = 0;
  if (is_moving_forward) direction = Math.PI;
  if (is_moving_back) direction = 0;
  if (is_moving_right) direction = Math.PI/2;
  if (is_moving_left) direction =  -Math.PI/2;
  
  spinAvatar(direction);
}
function spinAvatar(direction) {
  new TWEEN.
   Tween({y: avatar.rotation.y}).
   to({y: direction}, 100).
   onUpdate(function () {
     avatar.rotation.y = this.y;
   }).
   start();
}
var is_cartwheeling = false;
var is_flipping = false;
function acrobatics() {
 if (is_cartwheeling) {
   avatar.rotation.z = avatar.rotation.z + 0.05;
 }
 if (is_flipping) {
   avatar.rotation.x = avatar.rotation.x + 0.05;
 }
}
var is_moving_right, is_moving_left, is_moving_forward, is_moving_back;
function isWalking() {
  if (is_moving_right) return true;
  if (is_moving_left) return true;
  if (is_moving_forward) return true;
  if (is_moving_back) return true;
  return false;
}
// Listen for keypress events
document.addEventListener('keydown', function(event) {
  var code = event.keyCode;
  if (code == 32)jump();                                   // space
  if (code == 37) {                                        // left
    marker.position.x = marker.position.x-5;
    is_moving_left = true;
  }
  if (code == 38) {                                        // up
   marker.position.z = marker.position.z-5; 
   is_moving_forward = true;
  }
  if (code == 39) {                                        // right
   marker.position.x = marker.position.x+5; 
   is_moving_right = true;
  }
  if (code == 40) {                                        // down
   marker.position.z = marker.position.z+5; 
   is_moving_back = true;
  }
  if (code == 67) is_cartwheeling = !is_cartwheeling;      // C
  if (code == 70) is_flipping = !is_flipping;              // F
if (detectCollisions()) {
  if (is_moving_left) marker.position.x = marker.position.x+5;
  if (is_moving_right) marker.position.x = marker.position.x-5;
  if (is_moving_forward) marker.position.x = marker.position.z+5;
  if (is_moving_back) marker.position.x = marker.position.z-5;
}
});
document.addEventListener('keyup', function(event) {
  var code = event.keyCode;
  
  if (code == 37) is_moving_left = false;
  if (code == 38) is_moving_forward = false;
  if (code == 39) is_moving_right = false;
  if (code == 40) is_moving_back = false;
});





  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
function detectCollisions() {
  var vector = new THREE.Vector3(0, -1, 0);
  var ray = new THREE.Ray(marker.position, vector);
  var intersects = ray.intersectObjects(not_allowed);
  if (intersects.length > 0) return true;
  return false;
}
function checkForTreasure() {
  if (tree_with_treasure === undefined) return;
  
  var treasure_tree = trees[tree_with_treasure],
   p1 = treasure_tree.parent.position,
   p2 = marker.position;
   
  var distance = Math.sqrt(
    (p1.x - p2.x)*(p1.x - p2.x) +
    (p1.z - p2.z)*(p1.z - p2.z)
  );
  
  if (distance < 500) {
    scorePoints();
  }
}
function scorePoints() {
  if (scoreboard.getTimeRemaining() === 0) return;
  scoreboard.addPoints(10);
}
function animateJump() {
  new TWEEN
    .Tween({jump: 0})
    .to({jump: Math.PI}, 500)
    .onUpdate(function () {
      marker.position.y = 200* Math.sin(this.jump);
    })
    .start();
}
</script>

Chris_strom_headshot_200_pragsmall
24 Feb 2014, 00:36
Chris Strom (142 posts)

According to the JavaScript console (ahem) it seems:

TWEEN is not defined

It looks like you missed the step on the bottom of page 82 (adding the <script> tag for tween.js).

Generic-user-small
24 Feb 2014, 12:04
Wayne He (28 posts)

Oh, yeah. I was going to go to the tween website, but i geuss when i copy - pasted, i deleted it.

Generic-user-small
01 Mar 2014, 21:40
Wayne He (28 posts)

New Error(as always): Typed in code, no treasure Code will be in next post

Generic-user-small
01 Mar 2014, 21:41
Wayne He (28 posts)

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Tween.js"></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script src="http://gamingJS.com/Sounds.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
var not_allowed = [];
  
var marker = new THREE.Object3D();  
scene.add(marker);
  
  
var cover = new THREE.MeshNormalMaterial();
var body = new THREE.SphereGeometry(100);
var avatar = new THREE.Mesh(body, cover);
marker.add(avatar);

var hand = new THREE.SphereGeometry(50);

var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-150, 0, 0);
avatar.add(right_hand);

var left_hand = new THREE.Mesh(hand, cover);
left_hand.position.set(150, 0, 0);
avatar.add(left_hand);

var foot = new THREE.SphereGeometry(50);

var left_foot = new THREE.Mesh(foot, cover);
left_foot.position.set(75, -125, 0);
avatar.add(left_foot);

var right_foot = new THREE.Mesh(foot, cover);
right_foot.position.set(-75, -125, 0);
avatar.add(right_foot);

marker.add(camera);

var tree_with_treasure;
var trees = [];
trees.push(makeTreeAt( 500, 0));
trees.push(makeTreeAt(-500, 0));
trees.push(makeTreeAt( 750, -1000));
trees.push(makeTreeAt(-750, -1000));
function makeTreeAt(x, z) {
  // Don't change any code at the start...
  
  // ... but add the following line to the end;
  return top;
}
function shakeTree() {
  tree_with_treasure = Math.Floor(Math.random() * trees.legnth);
  
  new TWEEN
   .Tween({x: 0})
   .to({x: 2*Math.PI}, 200)
   .repeat(20)
   .onUpdate(function () {
     trees[tree_with_treasure].position.x = 75 * Math.sin(this.x);
   })
   .start();
   
  setTimeout(shakeTree, 12*1000);
}

function makeTreeAt(x, z) {
  var trunk = new THREE.Mesh(
    new THREE.CylinderGeometry(50, 50, 200),
    new THREE.MeshBasicMaterial({color: 0xA0522D})
  );
  
  var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 0x228B22})
    );
    top.position.y = 175;
    trunk.add(top);
    
    trunk.position.set(x, -75, z);
    scene.add(trunk);

var boundary = new THREE.Mesh(
  new THREE.CircleGeometry(300),
  new THREE.MeshNormalMaterial()
);
boundary.position.y = -100;
boundary.rotation.x = -Math.PI/2;
trunk.add(boundary);

not_allowed.push(boundary);
}

function jump() {
  checkForTreasure();
  animateJump();
}
var scoreboard = new Scoreboard();
scoreboard.countdown(300);
scoreboard.score();
scoreboard.help(
  'Arrow keys to move. ' +
  'Space bar to jump for fruit. ' +
  'Watch for shaking trees with fruit. ' + 
  'Get near the tree and jump before the fruit is gone!'
);
var game_over = false;
scoreboard.onTimeExpired(function() {
  scoreboard.message("Game Over!");
  game_over = true;
});

var clock = new THREE.Clock(true);
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  walk();
  turn();
  acrobatics();
  renderer.render(scene, camera);
}
animate();

function walk() {
  if (!isWalking()) return;
  var position = Math.sin(clock.getElapsedTime()*10) * 100;
  right_hand.position.z = position;
  left_hand.position.z = -position;
  right_foot.position.z = -position;
  left_foot.position.z = position;
}

function turn() {
  var direction = 0;
  if (is_moving_forward) direction = Math.PI;
  if (is_moving_back) direction = 0;
  if (is_moving_right) direction = Math.PI/2;
  if (is_moving_left) direction =  -Math.PI/2;
  
  spinAvatar(direction);
}
function spinAvatar(direction) {
  new TWEEN.
   Tween({y: avatar.rotation.y}).
   to({y: direction}, 100).
   onUpdate(function () {
     avatar.rotation.y = this.y;
   }).
   start();
}
var is_cartwheeling = false;
var is_flipping = false;
function acrobatics() {
 if (is_cartwheeling) {
   avatar.rotation.z = avatar.rotation.z + 0.05;
 }
 if (is_flipping) {
   avatar.rotation.x = avatar.rotation.x + 0.05;
 }
}
var is_moving_right, is_moving_left, is_moving_forward, is_moving_back;
function isWalking() {
  if (is_moving_right) return true;
  if (is_moving_left) return true;
  if (is_moving_forward) return true;
  if (is_moving_back) return true;
  return false;
}
// Listen for keypress events
document.addEventListener('keydown', function(event) {
  var code = event.keyCode;
  if (code == 32)jump();                                   // space
  if (code == 37) {                                        // left
    marker.position.x = marker.position.x-5;
    is_moving_left = true;
  }
  if (code == 38) {                                        // up
   marker.position.z = marker.position.z-5; 
   is_moving_forward = true;
  }
  if (code == 39) {                                        // right
   marker.position.x = marker.position.x+5; 
   is_moving_right = true;
  }
  if (code == 40) {                                        // down
   marker.position.z = marker.position.z+5; 
   is_moving_back = true;
  }
  if (code == 67) is_cartwheeling = !is_cartwheeling;      // C
  if (code == 70) is_flipping = !is_flipping;              // F
if (detectCollisions()) {
  if (is_moving_left) marker.position.x = marker.position.x+5;
  if (is_moving_right) marker.position.x = marker.position.x-5;
  if (is_moving_forward) marker.position.x = marker.position.z+5;
  if (is_moving_back) marker.position.x = marker.position.z-5;
}
});
document.addEventListener('keyup', function(event) {
  var code = event.keyCode;
  
  if (code == 37) is_moving_left = false;
  if (code == 38) is_moving_forward = false;
  if (code == 39) is_moving_right = false;
  if (code == 40) is_moving_back = false;
});





  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
function detectCollisions() {
  var vector = new THREE.Vector3(0, -1, 0);
  var ray = new THREE.Ray(marker.position, vector);
  var intersects = ray.intersectObjects(not_allowed);
  if (intersects.length > 0) return true;
  return false;
}
function checkForTreasure() {
  if (tree_with_treasure === undefined) return;
  
  var treasure_tree = trees[tree_with_treasure],
   p1 = treasure_tree.parent.position,
   p2 = marker.position;
   
  var distance = Math.sqrt(
    (p1.x - p2.x)*(p1.x - p2.x) +
    (p1.z - p2.z)*(p1.z - p2.z)
  );
  
  if (distance < 500) {
    scorePoints();
  }
}
function scorePoints() {
  if (scoreboard.getTimeRemaining() === 0) return;
  scoreboard.addPoints(10);
  Sounds.buzz.play();
}
function animateJump() {
  new TWEEN
    .Tween({jump: 0})
    .to({jump: Math.PI}, 500)
    .onUpdate(function () {
      marker.position.y = 200* Math.sin(this.jump);
    })
    .start();
}
var fruit;
function animateFruit() {
  if (fruit) return;
  fruit = new THREE.Mesh(
    new THREE.CylinderGeometry(25, 25, 5, 25),
    new THREE.MeshBasicMaterial({color: 0xFFD700})
  );
  fruit.rotation.x = Math.PI/2;
  
  marker.add(fruit);
  
  new TWEEN.
   Tween({
     height: 150,
     spin: 0
   }).
   to({
     height: 250,
     spin: 4
   }, 500).
   onUpdate(function () {
     marker.remove(fruit);
     fruit = undefined;
   }).
   start();
}
function scorePoints() {
  if (scoreboard.getTimeRemaining() === 0) return;
  scoreboard.addPoints(10);
  Sounds.buzz.play();
  animateFruit();
}
</script>

Chris_strom_headshot_200_pragsmall
03 Mar 2014, 03:40
Chris Strom (142 posts)

There are a couple of issues here. The most obvious is that you now have two makeTreeAt() functions. At the top of page 102, the book is telling you to add the return top to the already existing function makeTreeAt(). You copied and pasted the skeleton of the function at the top of page 102 into your code. It doesn’t actually do anything though.

So first, you need to delete that, then add return top to the real makeTreeAt().

Next, and this is still on page 102, you missed the part that says to add the function and the function call. After the shakeTree(), you need to call shakeTree().

Lastly, there are two typos inside your shakeTree() function. It should be Math.floor, not Math.Floor. Also, it should be length, not legnth.

Hopefully that should do it :)

Generic-user-small
04 Mar 2014, 01:01
Wayne He (28 posts)

Can you tell me what lines because i couldnt find the errors except the Math.floor one

Generic-user-small
05 Apr 2014, 21:29
Tyler Wood (7 posts)

Hi, I’m really enjoying the book and have not had any problems at all until now.

On chapter 7 when i got to learning about while I typed in

var i = 0; while (i <5) (forgot the space between < and 5) and then it just froze and then chrome said that the page I am on is unresponsive. So I closed it and restarted it but the same thing happens. I cant do anything in ICE Editor at all right now.

Any ideas on what went wrong or what I can do to fix it?

Generic-user-small
06 Apr 2014, 22:07
Iggy Glassman (4 posts)

Hi! I’m trying to make my avatar move, but it’s not working, do I have anything wrong in my coding?

// **** START CODING ON THE NEXT LINE **** var cover = new THREE.MeshNormalMaterial(); var body = new THREE.SphereGeometry(100); var avatar = new THREE.Mesh(body, cover); scene.add(avatar);

var hand = new THREE.SphereGeometry(50);

var right_hand = new THREE.Mesh(hand, cover); right_hand.position.set(-150, 0, 0); scene.add(right_hand);

var left_hand = new THREE.Mesh(hand, cover); left_hand.position.set(150, 0, 0); scene.add(left_hand);

var foot = new THREE.SphereGeometry(50);

var right_foot = new THREE.Mesh(foot, cover); right_foot.position.set(-75, -125, 0); scene.add(right_foot);

var left_foot = new THREE.Mesh(foot, cover); left_foot.position.set(75, -125, 0); scene.add(left_foot);

var head = new THREE.SphereGeometry(70); var re_head = new THREE.Mesh(head, cover); re_head.position.set(0, 150, 0); scene.add(re_head);

document.addEventListener(‘keydown’, function(event) { var code = event.keyCode; if (code == 37) avatar.position.x = avatar.position.x-5; // left if (code == 38) avatar.position.z = avatar.position.z-5; // up if (code == 39) avatar.position.x = avatar.position.x+5; // right if (code == 40) avatar.position.z = avatar.position.z+5; // down });

Chris_strom_headshot_200_pragsmall
07 Apr 2014, 00:44
Chris Strom (142 posts)

@Tyler Check out the answer in http://forums.pragprog.com/forums/284/topics/12614. Let me know if that doesn’t work for you.

@Iggy Nice! Let me know if you run into anything else :)

Generic-user-small
08 Apr 2014, 00:38
Tyler Wood (7 posts)

Thanks that worked.

Generic-user-small
08 Apr 2014, 01:46
Iggy Glassman (4 posts)

hi! I added a coin and then my avatar stopped walking – did I break the program? It’s going to be long, but here is my code…

Chris_strom_headshot_200_pragsmall
08 Apr 2014, 22:26
Chris Strom (142 posts)

@Iggy you didn’t post any code!

If you’re still having problems, can you post them to a new topic in this forum? This topic is getting so long that it is hard for me to make sure that I have responded to everyone.

The forum link is http://forums.pragprog.com/forums/284. Click the New Topic link. Thanks!

Generic-user-small
18 Apr 2014, 23:39
Ivo Palma (2 posts)

Hi Chris! I am using Chrome Version 34.0.1847.116 on Mac. I have typed the four lines as you have suggested (page 3):

var shape = new THREE.SphereGeometry(100);

var cover = new THREE.MeshnormalMaterial();

var ball = new THREE.Mesh(shape, cover);

scene.add(ball);

nothing more, and the ball did not appear. Why? I have done same thing with the following objects (of course I have changed the instructions) and it has happened the same thing: no image (there is no objects).

Look at the beginning when I have loaded the site of the ICE Code Editor it has appeared the same picture of the page 1.

What’s happenning?

An other question: at lines number two and number three at the picture you have written “wrapper” not “cover” (like on the text). Is it “wrapper” or “cover” ?

Thanks for your help.

Chris_strom_headshot_200_pragsmall
19 Apr 2014, 15:39
Chris Strom (142 posts)

@Ivo I think all you need to do is change MeshnormalMaterial to MeshNormalMaterial (the “N” should be capitalized).

It should be cover – sorry for the confusion there.

Generic-user-small
20 Apr 2014, 14:41
Ivo Palma (2 posts)

Hi Chris

That’s right: it should be MeshNormalMaterial ( “N” capitalized)!!!!

Thanks for your help!!!!!

  You must be logged in to comment