Shark Jumping

‹prev | My Chain | next›

I think that I have the big questions answered for the rafting game that I would like to include in 3D Game Programming for Kids. As with everything else in the book, it is a Three.js / Physijs game. The biggest question—how to build the river—was answered by a Physijs-specific feature (height fields). For the most part, I try to stick to “purer” 3D constructs, but this wins for simplicity of implementation and concept. But just because the big question is answered does not mean that everything is easy from here on in. So...

I am going to add obstacles in the river to prevent the player from easily navigating to the end. From last night, I can already add a single ramp:

var ramp = new Physijs.ConvexMesh(
      new THREE.CubeGeometry(100, 100, 300),
      new THREE.MeshBasicMaterial({color: 0xbb0000})
    );
    ramp.rotation.x = Math.PI/4;
    ramp.position.copy(pos);
    ground.add(ramp);

Tonight, I convert that to a function:

 function addSharkJump(pos) {
    var ramp = new Physijs.ConvexMesh(
      new THREE.CubeGeometry(100, 100, 300),
      new THREE.MeshBasicMaterial({color: 0xbb0000})
    );
    ramp.rotation.x = Math.PI/4;
    ramp.position.copy(pos);
    ground.add(ramp);

And randomly place these ramps somewhere in the middle of the river:

  var number_between_20_and_40 = 12, // Math.floor(20 + 20*Math.random()),
      number_between_60_and_80 = Math.floor(60 + 20*Math.random());
  addSharkJump(middle_river_points[number_between_20_and_40]);
  addSharkJump(middle_river_points[number_between_60_and_80]);

I am not 100% sold on the idea that this is the best way for kids to randomize the location of ramps. They will already have seen random numbers and floor at this point, so this is not terrible. Still, I hope to come up with better for the actual book.

Anyhow, I need the obstacle:

  function addSharkJump(pos) {
    // ...
    var shark = new Physijs.ConvexMesh(
      new THREE.CylinderGeometry(1, 10, 20),
      new THREE.MeshBasicMaterial({color: 0x999999})
    );
    shark.position.copy(pos);
    shark.rotation.x = Math.PI/2;
    shark.rotation.z = Math.PI/10;
    shark.position.z = pos.z + 140;
    shark.position.y = pos.y - 200;
    ground.add(shark);
  }

It is not a perfect looking shark, but it is something that kids can easily build:



The last thing I need is a penalty for actually hitting the shark:

  function addSharkJump(pos) {
    // ...
    shark.addEventListener('collision', function() {
      scoreboard.addTime(10);
    });
  }

With that, I have obstacles that penalize the player. This is a good stopping point for tonight. Up tomorrow: power-up items that decrease the timer.


Day #695