“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

You can turn on the computer camera, and then use OpencV to read the image and see if there’s any difference between the two images to see if the player moves when he turns around in his doll. Players can gradually move to the computer and trigger a button to win a match.

The moving path is built by three cubes. First, we simply encapsulate the cube creation process, define the size and position of box, and rotate around Y when the information is exposed to the caller.

const start_pos = 3
const end_pos = -start_pos;

function createCube(size,pos,rotation,color){

    const {w,h,d} = size;
    console.log(w,h,d);
    
    const geometry = new THREE.BoxGeometry(w,h,d);
    const material = new THREE.MeshBasicMaterial( { color: color } );
    // Mesh
    const cube = new THREE.Mesh( geometry, material );

    cube.position.x = pos;
    cube.rotation.y = rotation;

    scene.add(cube);
    return cube;
}
Copy the code

The player movement trajectory is composed of three cubes. The player moves from the right end to the left end along this trajectory to calculate Win.

function createTrack(){
    createCube({w:2..h:1.5.d:1},start_pos,-35..0xfab851);
    createCube({w:2..h:1.5.d:1},end_pos,35..0xfab851);
    createCube({w:start_pos*2 + 2..h:1.5.d:1},0.0.0xe5a716).position.z = -1;;
}
Copy the code

Create a player

Here, simply replace the player with a small ball. Let the ball verify the path from right to left, and move to the left side of the screen to win the game. Define the ball here to represent Player, and then define the size of the sphere in SphereGeometry. The first parameter is the radius of the sphere. Then adjust the position through the sphere.position property, and then define two properties

  • this.playerReference as sphere
  • playerInfoHolds the sphere, which is the player’s position on the x axis, in terms of speed
class Player{
    constructor(){
        const geometry = new THREE.SphereGeometry( 3..32.16 );
        const material = new THREE.MeshBasicMaterial( { color: 0xffff00});const sphere = new THREE.Mesh( geometry, material );
        sphere.position.z = 1;
        sphere.position.x = start_pos;
        scene.add( sphere );

        this.player = sphere;
        this.playerInfo = {
            posX:start_pos,
            velocity:0.01}}run(){}update(){
        this.playerInfo.posX -= this.playerInfo.velocity;
        this.player.position.x = this.playerInfo.posX
    }
}

const player = new Player();
Copy the code

Define an update function in Player to update the state of the Player. Update the location of the Player by speed

class Player{
    constructor(){
        const geometry = new THREE.SphereGeometry( 3..32.16 );
        const material = new THREE.MeshBasicMaterial( { color: 0xffff00});const sphere = new THREE.Mesh( geometry, material );
        sphere.position.z = 1;
        sphere.position.x = start_pos;
        scene.add( sphere );

        this.player = sphere;
        this.playerInfo = {
            posX:start_pos,
            velocity:0}}run(){
        this.playerInfo.velocity = 3.;
    }

    stop(){
        this.playerInfo.velocity = 0;
    }
    update(){
        this.playerInfo.posX -= this.playerInfo.velocity;
        this.player.position.x = this.playerInfo.posX
    }
}
Copy the code

Implement the run and stop methods to make the player move by updating the value of velocity for the sphere.

Add event

Listen for the up arrow key when pressing the up arrow key to move the player in player

window.addEventListener('keydown'.(e) = >{
    // console.log(e.key);
    if(e.key === 'ArrowUp'){ player.run(); }});window.addEventListener('keyup'.(e) = >{
    // console.log(e.key);
    if(e.key === 'ArrowUp'){ player.stop(); }});Copy the code

Defining the delay function

The resolve function returns a Promise to define the delay function setTimeout in resolve.

function delay(ms){
    return new Promise(resolve= > setTimeout(resolve,ms));
}
Copy the code

Add a start method to the Doll class, first calling lookBackward to make the Doll turn around, then calling the Delay method, passing in a random number, where start defines the asynchronous function. Which defines the call to the delay function

class Doll{...async start(){
        this.lookBackward();
        await delay(Math.random() * 1000 + 1000);
        this.lookForward();
        await delay(Math.random() * 750 + 750);
        this.start(); }}Copy the code

` `