今天郭先生髮現大家更喜歡看我發的three.js小作品，今天我就發一個3d版本推箱子的遊戲，其實webGL有很多框架，three.js並不合適做遊戲引擎，但是可以嘗試一些小遊戲。線上案例請點選部落格原文。

要製作一個推箱子游戲，正常要有以下4個步驟

1. 定義一些陣列，要有開始箱子陣列、結束箱子陣列、地面陣列還有牆面陣列，有這四個陣列就可以組成一個關卡。
2. 根據陣列初始化地面牆面箱子和目標地點標誌物。
3. 使用FirstPersonControls控制器，控制相機移動，根據地面箱子和牆面算出可移動區域。
4. 根據相機正對箱子時，用滑鼠點選箱子，控制箱子移動，並做成功性校驗。

下面我們上程式碼分析程式碼

1. 定義陣列

這四個陣列分別是牆的陣列、地面的陣列、箱子初始位置陣列和目標陣列。

wallArr = [[0, 0], [1, 0], [2, 0], [3, 0], [3, 1], [4, 1], [4, 2], [4, 3], [5, 3], [5, 4], [5, 5], [5, 6], [4, 6], [3, 6], [2, 6], [1, 6], [0, 6], [0, 5], [0, 4], [0, 3], [0, 2], [0, 1]]
scopeArr = [[1, 1], [2, 1], [1, 2], [2, 2], [3, 2], [1, 3], [2, 3], [1, 4], [4, 4], [1, 5], [2, 5], [3, 5], [4, 5]];
boxArr = [[3, 3], [2, 4], [3, 4]];
targetArr = [[2, 2], [1, 3], [2, 3]]; 

2. 根據箱子初始位置陣列初始化箱子

initBox() {
    var textureBox = new THREE.TextureLoader().load("/static/images/base/crate.png");
    if (boxGroup) {
        scene.remove(boxGroup)
    }
    boxGroup = new THREE.Group();
    boxGroup.name = 'box_group'
    boxArr.forEach(d => {
        var boxGeom = new THREE.BoxGeometry(40, 40, 40);
        var boxMate = [];
        boxGeom.faces.forEach(d => boxMate.push(new THREE.MeshBasicMaterial({ map: textureBox })))
        var boxMesh = new THREE.Mesh(boxGeom, boxMate);
        boxMesh.position.set(d[0] * 40 - 20, 20, d[1] * 40 - 20);
        boxMesh.name = 'box';
        boxGroup.add(boxMesh);
    })
    scene.add(boxGroup);
    //判斷是否贏得比賽
    this.isWinner(boxArr, targetArr)
}

3. 根據地面數組初始化地面

initGround() {
    var textureGround = new THREE.TextureLoader().load("/static/images/wall/plaster.jpg", () => {this.loaded_num --});
    var textureGroundNormal = new THREE.TextureLoader().load("/static/images/wall/plaster-normal.jpg", () => {this.loaded_num --});
    var textureGroundSpecular = new THREE.TextureLoader().load("/static/images/wall/plaster-diffuse.jpg", () => {this.loaded_num --});
    textureGround.wrapS = textureGround.wrapT = THREE.RepeatWrapping;
    textureGround.repeat.set(50, 50);
    textureGroundNormal.wrapS = textureGroundNormal.wrapT = THREE.RepeatWrapping;
    textureGroundNormal.repeat.set(50, 50);
    var materialGround = new THREE.MeshPhongMaterial({
        map: textureGround
    })
    materialGround.normalMap = textureGroundNormal;
    materialGround.specularMap = textureGroundSpecular;
    var ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000, 1, 1), materialGround);
    ground.rotation.x = - Math.PI / 2;
    scene.add(ground);
}

4. 根據牆陣列初始化地面

initWall() {
    var normal = new THREE.TextureLoader().load("/static/images/wall/stone.jpg", () => {this.loaded_num --});
    var bump = new THREE.TextureLoader().load("/static/images/wall/stone-bump.jpg", () => {this.loaded_num --});
    wallArr.forEach(d => {
        var wallBox = new THREE.BoxGeometry(40, 40, 40);
        var material = new THREE.MeshPhongMaterial({
            map: normal,
            bumpMap: bump,
            bumpScale: 1
        })
        var wall = new THREE.Mesh(wallBox, material);
        wall.position.x = d[0] * 40 - 20;
        wall.position.y = 20;
        wall.position.z = d[1] * 40 - 20;
        scene.add(wall);
    })
}

5. 根據目標陣列初始化目標物

initTarget() {
    let objLoader = new OBJLoader();
    objLoader.setPath("/static/images/texture/hongqi/");
    objLoader.load('hongqi.obj', (object) => {
        this.loaded_num --;
        let hongqi = object.children[0];
        targetArr.forEach(d => {
            hongqi.position.set(d[0] * 40 - 20, -50, d[1] * 40 - 20)
            hongqi.scale.set(0.12, 0.12, 0.12)
            hongqi.material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
            scene.add(hongqi.clone())
        })
    })
}

6. 監聽箱子的點選事件

每次點選的時候執行computeMove方法，判斷如果是否可移動。

initEventListener() {
    raycaster = new THREE.Raycaster();
    document.addEventListener('mousemove', function (event) {
        event.preventDefault();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    }, false)
    document.addEventListener('click', () => {
        if (scene.children && scene.getObjectByName('box')) {
            raycaster.setFromCamera(mouse, camera);
            let intersects = raycaster.intersectObjects(scene.getObjectByName('box_group').children);
            if (intersects[0] && intersects[0].object.name == 'box') {
                this.computeMove(intersects[0].object, camera.position);
            }
        }
    })
}

7. 監聽遊戲成功

如果成功了，那麼簡單的彈出提示。

isWinner(arr1, arr2) {
    let boo = true; //true為贏
    arr1.forEach(d => {
        let res = arr2.some(dd => {
            return d[0] == dd[0] && d[1] == dd[1]
        })
        if(!res) {
            boo = false;
        }
    })
    if(boo) {
        setTimeout(() => {
            alert('恭喜你贏了！')
        },100)
    }
}

由於當時做這個小案例時還是菜鳥，所以很少用一些three.js的輔助方法，見笑了。

轉載請註明地址：郭先生的