Recently, during the gap period when I quit my job, I felt that I had too much time to waste, so I tried to write a minimalist version of the game by mimicking wechat

So how simple is this game, right down here

Preview address:Luosijie. Making. IO/threejs – exa…

Source code address:Github.com/luosijie/th…

As it is the first time to try to write the game, I do not know whether the routine is right, we just watch and play, do not take it too seriously, it is not recommended to preview on the phone, the pit has not been filled in

Here’s how to do it

The game analysis

First of all, what does a game like this need

  1. Three. Js essential elements: scene, lighting, camera
  2. Block by block
  3. The one who can jump, or the player
  4. The above

The game process

  1. So the initial scene, the scene has one that can jump and two beepers
  2. Mouse down to save energy value
  3. Mouse release, will jump that according to the energy value and the direction of the second square jump out
  4. When the one who can jump lands on the upper plane of the square, judge whether the jump succeeds or fails based on its position
  5. After success to the next step, failure to perform different falls according to the position

In terms of collisions in games, there are several scenarios to consider

  1. It falls between two squares

code

Interested in trouble go to Github

The main structure

var Game = function () {... } Game.prototype = {init:  / / initialization
  restart: // Start over
  addSuccessFn:  // Go to the next step, execute the external function, which is used to update the score
  addFailedFn: // If the game fails, an external function is executed to display the failure popup
  _createJumper: // Create one that can jump
  _createCube: // Create a block
  _setLight: // three.js sets lighting
  _setCamera: // three.js sets up the camera
  _setRenderer: // three.js sets the renderer
  _render: // three.js performs rendering
  _createHelpers: // Three.js scene aid
  _checkUserAgent: // Check whether it is mobile
  _handleWindowResize: // Window scaling binding function
  _handleMousedown: // Mouse down bind function
  _handleMouseup: // Mouse release binding function
  _fallingRotate: // The fall animation that can jump
  _falling: // The one that can jump falls
  _checkInCube: // Determine the location of the drop point
  _updateCameraPos: // Update camera coordinate parameters
  _updateCamera: // Update the camera
  _setSize:   // Set the canvas size
}

Copy the code

call

var game = new Game()
game.init()
game.addSuccessFn(success)
game.addFailedFn(failed)

...

// Restart the game and execute the function
function restart () {... }// The game fails to execute the function
function failed(){... }// The game succeeds, update the score
function success (score) {... }Copy the code

Finally, what interesting JS related, welcome to exchange

That’s it. Welcome star