15 Jan 2014, 18:46
Generic-user-small

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

16 Jan 2014, 01:06
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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.

16 Jan 2014, 04:28
Generic-user-small

Adam Hausknecht (2 posts)

Thanks for your help! It now runs!

Regards,

Adam Hausknecht

13 Feb 2014, 01:18
Generic-user-small

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); }
13 Feb 2014, 14:43
Chris_strom_headshot_200_pragsmall

Chris Strom (57 posts)

What does the JavaScript console tell you?

15 Feb 2014, 20:03
Generic-user-small

Wayne He (28 posts)

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

15 Feb 2014, 20:03
Generic-user-small

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>

15 Feb 2014, 20:05
Generic-user-small

Wayne He (28 posts)

Still, nice book

15 Feb 2014, 20:58
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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!

16 Feb 2014, 13:51
Generic-user-small

Wayne He (28 posts)

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

16 Feb 2014, 13:53
Generic-user-small

Wayne He (28 posts)

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

16 Feb 2014, 13:54
Generic-user-small

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> ~~~

20 Feb 2014, 12:04
Generic-user-small

Wayne He (28 posts)

not working now

21 Feb 2014, 17:55
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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 :)

22 Feb 2014, 00:49
Generic-user-small

Wayne He (28 posts)

ok, ill try.

22 Feb 2014, 00:52
Generic-user-small

Wayne He (28 posts)

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

22 Feb 2014, 00:53
Generic-user-small

Wayne He (28 posts)

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

22 Feb 2014, 04:32
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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!

22 Feb 2014, 23:43
Generic-user-small

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.

22 Feb 2014, 23:45
Generic-user-small

Wayne He (28 posts)

Now on Chapter 12 - Project: Fruit Hunt

22 Feb 2014, 23:45
Generic-user-small

Wayne He (28 posts)

11*

23 Feb 2014, 04:50
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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!

23 Feb 2014, 13:04
Generic-user-small

Wayne He (28 posts)

thanks for all the help!

23 Feb 2014, 17:33
Generic-user-small

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> ~~~

23 Feb 2014, 17:34
Generic-user-small

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>) ~~~

23 Feb 2014, 17:35
Generic-user-small

Wayne He (28 posts)

tilde thing isnt working

23 Feb 2014, 17:40
Generic-user-small

Wayne He (28 posts)

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

23 Feb 2014, 17:40
Generic-user-small

Wayne He (28 posts)

I mean, 1 less = sign

23 Feb 2014, 20:27
Generic-user-small

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>

23 Feb 2014, 23:24
Generic-user-small

Wayne He (28 posts)

Full Code: ~~~

~~~

23 Feb 2014, 23:25
Generic-user-small

Wayne He (28 posts)

huh? ~~~

~~~

23 Feb 2014, 23:25
Generic-user-small

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>

24 Feb 2014, 00:36
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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).

24 Feb 2014, 12:04
Generic-user-small

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.

01 Mar 2014, 21:40
Generic-user-small

Wayne He (28 posts)

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

01 Mar 2014, 21:41
Generic-user-small

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>

03 Mar 2014, 03:40
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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 :)

04 Mar 2014, 01:01
Generic-user-small

Wayne He (28 posts)

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

05 Apr 2014, 21:29
Generic-user-small

Tyler Wood (2 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?

06 Apr 2014, 22:07
Generic-user-small

Iggy Glassman (3 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 });

07 Apr 2014, 00:01
Generic-user-small

Iggy Glassman (3 posts)

figured it out!

07 Apr 2014, 00:44
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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 :)

08 Apr 2014, 00:38
Generic-user-small

Tyler Wood (2 posts)

Thanks that worked.

08 Apr 2014, 01:46
Generic-user-small

Iggy Glassman (3 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…

08 Apr 2014, 22:26
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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!

18 Apr 2014, 23:39
Generic-user-small

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.

19 Apr 2014, 15:39
Chris_strom_headshot_200_pragsmall

Chris Strom (57 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.

20 Apr 2014, 14:41
Generic-user-small

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