I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

Game address: not to do (so not put) git address: gitee.com/fwjzzz/Jump

preface

Jump a jump is a little game of wechat mini program. Long press the screen to let the SIMS jump, play. The score is calculated according to the number of jump boxes and the extra points for special boxes.

The rules of the game

It’s simple: hold down the mouse, let go, and the box jumps from box to box. However, it is this little move that makes you magically unable to stop once you start.

Three.js

Three. Js is a 3D engine that runs in a browser and allows you to create a variety of 3D scenes, including cameras, lights, textures and other objects.

  1. Create a scene
  2. Set the light source
  3. Create the camera, set the camera position and the camera lens orientation
  4. Create a 3D renderer and use it to render the scene

The structure of the entire program

implementation

HTML files are introduced into the three.js engine

<script src="/js/three.min.js"></script>
Copy the code

Page structure

<div class="mask"> <div class="content"> <div class="score-container"> <p class="title"> </p> <h1 Class ="score">0</h1> </div> <button class="restart"> </div> <div class="info"> <audio loop="loop" autoplay controls src="https://m801.music.126.net/20220413225245/3060206bc37e3226b7f45fa1 49b0fb2b/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/13866197954/e351/984c/1f8b/f6d3165d6b04dc78ec0d3c273ce02ff2.mp3"> </audio> <span class="current-score">0</span> </div> </div>Copy the code

scenario

let scene=new THREE.Scene(); // Create a sceneCopy the code

The camera

There are two types of cameras commonly used:

  • PerspectiveCamera

In line with people’s psychological habits, near big far small.

  • OrthographicCamera

The distance is as big as the near

Let camera = new THREE. PerspectiveCamera (75, window. InnerWidth/window. InnerHeight, 1100); Camera.position. z=10; // Create a perspective camera with 4 parameters (visual range, aspect ratio, close range, far range) camera.position.z=10; camera.position.y=3; camera.position.x=8; // Camera xyz scene orientationCopy the code

geometry

Use the CubeGeometry to create a CubeGeometry. Use the MeshLambertMaterial to configure the cube rendering to look dull and unshiny. This material will react to the light source in the scene and can be configured with other properties such as color.

Let geometry = new THREE. CubeGeometry 4-trichlorobenzene (4); / / create a geometry object (wide, high, depth) let material = new THREE. MeshLambertMaterial (xbebebe} {color: 0); Let cube=new THREE.Mesh(Geometry, Material); // Combine cube. Position. x=16; scene.add(cube); // Add to the sceneCopy the code

The light source

Scene Scene is mainly composed of geometric model and Light. In the actual development process, most THREE-DIMENSIONAL scenes often need to set up Light sources. Different Light sources are used to simulate the lighting effect in life for the model.

Let directionalLight = new THREE. DirectionalLight (0 XFFFFFF, 1.1); / / parallel light (color, intensity) directionalLight. Position. Set (3,10,5); // Scene.add (directionalLight); Let light=new THREE.AmbientLight(0xFFFFFF,0.4); // Texture of light scene.add(light); // Add light to the sceneCopy the code

Apply colours to a drawing

Set the render size to the width and height of the browser’s body area directly using the.setSize() method of the WebGL renderer.

let renderer=new THREE.WebGLRenderer({antialias:true}); / / create a renderer (let no serrated edge animation) the renderer. SetSize (window. InnerWidth, window. InnerHeight); // Canvas width height renderer.setClearColor(0x282828); Renderer. render(scene,camera); / / render the scene camera (last update is also here) document. The body. The appendChild (the renderer. DomElement accordingly); // Place the currently rendered canvas inside the body let x=8; Function render() {// render(); camera.position.x=x; renderer.render(scene,camera); RequestAnimationFrame (render) {if(x>=-8){requestAnimationFrame(render) {Copy the code

A prototype has been implemented so far

Add a second block

_createCube() { let geometry = new THREE.CubeGeometry(this.config.cubeWidth, this.config.cubeHeight, this.config.cubeDeep); / / create a geometry object (wide, high, depth) let material = new THREE. MeshLambertMaterial ({color: this. Config. CubeColor}); Let cube = new THREE.Mesh(Geometry, material); If (this.cubes. Length-1) {// Cubes. cube.position.y = this.cubes[this.cubes.length - 1].position.y; cube.position.z = this.cubes[this.cubes.length - 1].position.z; This.cubestat.nextdir = math.random () > 0.5? "left" : "right"; If (this.cubestat.nextdir == "left") {// If (this.cubestat.nextdir == "left") {// If (this.cubestat.nextdir == "left") {// If (this.cubestat.nextdir == "left") {// If (this Math.round(Math.random() * 4 + 6); } else { cube.position.z = cube.position.z - Math.round(Math.random() * 4 + 6); } } this.cubes.push(cube); If (this.cubes. Length > 5) {this.scene.remove(this.cubes. Shift ()); } this.scene. Add (cube); If (this.cubes. Length > 1) {this._updatecamerapros (); }};Copy the code

Define an array of squares that appear randomly left and right from the second block. This.cubestat.nextdir = math.random () > 0.5? “Left” : “right” as shown above: (This is made up of two pictures)

Dance piece

_createJumper() { let geometry = new THREE.CubeGeometry(this.config.jumperWidth, this.config.jumperHeight, this.config .jumperDeep); / / (width, height, depth) let material = new THREE. MeshLambertMaterial ({color: this. Config. JumperColor}); This. Jumper = new THREE.Mesh(Geometry, material); This.jump.position. y = 1; // Displays the geometry of the block. Translate (0, 1, 0); / / this translation. Scene. The add (enclosing jumper); // Add to the scene}Copy the code

Geometry objects have a series of vertex attributes and methods, and Geometry itself can be scaled, translated, or rotated by using methods such as.scale(),.translate(), and.rotatex (). Note that you are essentially changing the coordinate data of the vertex position of the combination.

Mouse down state

This. jumperStat = {// Mouse press speed ready: false, xSpeed: 0, ySpeed: 0};Copy the code
_handleMouseDown() { if (! Y > 0.02) {this.jumperstat.ready && this.jumper.scale. Y -= 0.01; // Compress the block this.jumperstat.xspeed += 0.004; Enclosing jumperStat. YSpeed + = 0.008; this._render(); requestAnimationFrame(() => { this._handleMouseDown() }) } };Copy the code

The mouse is released and up

Isn’t that what life is like? As long as you jump in the right position, you can “reverse attack”!

_handleMouseUp() {this.jumperstat.ready = true; If (this.jump.position. y >= 1) {this.jump.scale. Y < 1) {this.jump.scale. NextDir == "left" {this.jump.position. x -= this.jumperstat.xspeed;} if (this.cubestat.nextdir == "left") {this.jump.position. x -= this.jumperstat.xspeed; } else { this.jumper.position.z -= this.jumperStat.xSpeed; } this.jumper.position.y += this.jumperStat.ySpeed; Enclosing jumperStat. YSpeed - = 0.01; // this._render(); RequestAnimationFrame (() => {// loop this._handleMouseup (); })} else {// Fall state this.jumperstat.ready = false; this.jumperStat.xSpeed = 0; this.jumperStat.ySpeed = 0; this.jumper.position.y = 1; this.jumper.scale.y = 1; this._checkInCube(); If (this.falledstat. Location == 1) {this.score++; this._createCube(); this._updateCamera(); If (this.successCallback) {this.successCallback(this.score); } } else { this._falling() } } };Copy the code

Where is the fall

Learning to control the sense of speed is a wonderful thing. When you slow down, learn to control your speed. Because somewhere along the way, there’s something in your life worth stopping to see, appreciate, and feel. In our perception, the faster we go, the more time we have, the more efficient we are, and the more productive we are. It’s not. If your mind is constantly working at high speed, you’ll feel busy and clueless. If you’re constantly worrying about the future or the past, you’re not able to focus on what you’re doing right now, and you’re bound to feel like you don’t have enough time and your productivity drops dramatically.

This. FalledStat = {location: -1, distance: 0, // distance: 0}; This. fallingStat = {end: false, speed: 0.2}Copy the code
_checkInCube() {let distanceCur, distanceNext; Let should = (this.config.jumperWidth + this.config.cubeWidth) / 2; NextDir == "left"; distanceCur = math.abs (this.jump.position. x -) this.cubes[this.cubes.length - 2].position.x); distanceNext = Math.abs(this.jumper.position.x - this.cubes[this.cubes.length - 1].position.x); } else {// go to the right distanceCur = math.jump.position.z - cubes[this.jump.length-2].position.z); distanceNext = Math.abs(this.jumper.position.z - this.cubes[this.cubes.length - 1].position.z); } if (distanceCur < should) {this.falledstat. Distance = distanceCur; this.falledStat.location = distanceCur < this.config.cubeWidth / 2 ? - 1: - 10; } else if (distanceNext < should) {this.falledstat. Distance = distanceNext; this.falledStat.location = distanceNext < this.config.cubeWidth / 2 ? 1:10; } else {// fall in the middle this.falledstat.location = 0; }};Copy the code

Landing on the block, stopping for a while to relax, will also be 10 bonus points. Life on the road, in a hurry, do not forget to moderate rest adjustment, you will intentionally harvest, the fate of the Rubik’s cube will give you chic surprise. Life is too short to rush through.

_falling() {if (this.falledstat.location == 10) {// Fall from the next box if (this.cubestat.nextdir == "left") {// determine the left direction if (this.jumper.position.x > this.cubes[this.cubes.length - 1].position.x) { this._fallingRotate("leftBottom") } else { Rotate("leftTop")}} else {if (this.jump.position. z > this.jump.cubes [this.cubes. Length - 1].position.z) { this._fallingRotate("rightBottom") } else { this._fallingRotate("rightTop") } } } else if If (this.cubestat.nextdir == "left") {this._fallingrotate ("leftTop")} else { this._fallingRotate("rightTop") } } else if (this.falledStat.location == 0) { this._fallingRotate("none") } };Copy the code

At the end

Win or lose, life is a process of ups and downs, not arrogant at the peak, not depressed at the trough. This is the right posture for life. Of course, this is not just about games. Maybe it’s you with your head buried in the game. Maybe you’ve noticed that little square of a player that is your “self” in life. The world is like “Jump and Jump” : a puzzle game with clear rules and goals, where players are free to move and get bonus points for being in the right position. Always gently wipe, do not cause dust. Can have harvest, enjoy life, love the world fireworks!!