17 Jun 2014, 17:50
Generic-user-small

Niko Bercovici (1 post)

Hello. I am currently on chapter 6: Moving Hands and Feet. Everything is working, except for one thing: when I let go of my arrow keys, my avatar’s hands keep moving! What happened? This is my code:

<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.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;
  scene.add(camera);

  // 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 marker = new THREE.Object3D();
scene.add(marker);

var cover = new THREE.MeshNormalMaterial();
var body = new THREE.CylinderGeometry(1,75,110,20);
var avatar = new THREE.Mesh(body,cover);
avatar.position.set(0,-90,0)
marker.add(avatar);

var shape = new THREE.SphereGeometry(65);
var head = new THREE.Mesh(shape,cover);
head.position.set(0,120,0);
avatar.add(head);

var hand = new THREE.SphereGeometry(25);
var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-55,20,0);
avatar.add(right_hand);

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

var foot = new THREE.CubeGeometry(50,25,35);
var right_foot = new THREE.Mesh(foot,cover);
right_foot.position.set(-60, -75, 0);
avatar.add(right_foot);

var left_foot = new THREE.Mesh(foot,cover);
left_foot.position.set(60,-75,0);
avatar.add(left_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);    }   // Now, show what the camera sees on the screen:   renderer.render(scene, camera);
  
  // Now, animate what the camera sees on the screen:
  var clock = new THREE.Clock(true);
  
  function animate() {
  requestAnimationFrame(animate);
  walk();
  acrobatics();
  renderer.render(scene, camera);
  }
  animate();
  
  function walk() {
 if (!isWalking()) return;
 var position = Math.sin(clock.getElapsedTime()*5) * 50;
 right_hand.position.z = position;
 left_hand.position.z = -position;
 right_foot.position.z = -position;
 left_foot.position.z = position;
 }
  
  var is_cartwheeling = false;
 var is_flipping = false;
 var is_twirling = 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;
}
 if (is_twirling) {
  avatar.rotation.y  = avatar.rotation.y + 0.05;
}
 }
  
  // Listen for keypress events:
  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;
 }
  
 document.addEventListener('keydown', function(event)  {
var code = event.keyCode;

if (code == 37) marker.position.x = marker.position.x - 5; // left
is_moving_left = true; 

if (code == 38) marker.position.z = marker.position.z - 5; // up
is_moving_forward = true;

if (code == 39) marker.position.x = marker.position.x + 5; // right
is_moving_right = true

if (code == 40) marker.position.z = marker.position.z + 5; // down
is_moving_back = true;

if (code == 67) is_cartwheeling = !is_cartwheeling; // cartwheeling
if (code == 70) is_flipping = !is_flipping; // flipping
if (code == 84) is_twirling = !is_twirling; // twirling   });

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; }); </script>
19 Jun 2014, 02:17
Chris_strom_headshot_200_pragsmall

Chris Strom (79 posts)

Sorry. That looks to be an oversight in the way that I described how to make the change to the movement controls at the top of page 65 (in the keydown event listener).

The book says to add the lines indicated, like is_moving_left as you have done:

  if (code == 37) marker.position.x = marker.position.x - 5; // left
  is_moving_left = true; 

The problem with this is that it updates marker.position.x only if the keyboard code is 37, but it always sets is_moving_left to true. Since is_moving_left, is_moving_right, is_moving_forward and is_moving_back all do the same thing, all of them are always set to true. Since all of them are true the isWalking() function always thinks the player is walking, which is why your playing keeps swinging its arms and legs.

What the book should say (and I’ve made a note to fix this) is to add curly braces around the code and add the is_moving_left line:

  if (code == 37) {
    marker.position.x = marker.position.x - 5; // left
    is_moving_left = true; 
  }

With that, the stuff inside the curly braces is only run if the keyboard code is 37. So is_moving_left is only set to true if the left arrow key was pressed down.

The full code for the keydown listener should be:

document.addEventListener('keydown', function(event)  {
  var code = event.keyCode;

  if (code == 37) {
    marker.position.x = marker.position.x - 5; // left
    is_moving_left = true; 
  }

  if (code == 38) {
    marker.position.z = marker.position.z - 5; // up
    is_moving_forward = true;
  }

  if (code == 39) {
    marker.position.x = marker.position.x + 5; // right
    is_moving_right = true
  }

  if (code == 40) {
    marker.position.z = marker.position.z + 5; // down
    is_moving_back = true;
  }

   if (code == 67) is_cartwheeling = !is_cartwheeling; // cartwheeling
   if (code == 70) is_flipping = !is_flipping; // flipping
   if (code == 84) is_twirling = !is_twirling; // twirling   
});

Apologies for the confusion, but thanks for posting this to the forum. It’ll help to get it fixed for the next edition of the book!

If you have any other questions or problems, let me know :)

27 Jun 2014, 22:02
Generic-user-small

Thomas Koon (8 posts)

WAIT THERES GONNA BE A NEXT EDITION?????/ OWEOQWEUQWEOIQWIOEQWEJIQWOEHQWIOEHOQWI

10 Jul 2014, 20:13
Chris_strom_headshot_200_pragsmall

Chris Strom (79 posts)

Sorry, there are no immediate plans for a next edition. Eventually there will be, but not in 2014.

Depending on how many problems crop up, we might issue an errata release which would result in minor changes to the ebook versions. So far there have not been many of those, but it’s possible that we might make some minor changes (like the note above) before the year is out.

  You must be logged in to comment