专栏首页郭先生的博客three.js 制作逻辑转体游戏(下)

three.js 制作逻辑转体游戏(下)

上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判定,最后是获胜的判定。

1. 根据数据渲染陷阱和目标区域

首先我们P一张底图和陷阱图,如下图

就像这样,然后就是根据数据渲染陷阱和目标区域了,首先陷阱的个数是固定的,而目标区域是随小方块的数量而定,先看数据

end: [[-1, -4], [-1, -5]],
trap: [[-1, -7], [-6, -2]],

这里我们看一下Shader怎么写的

let texture1 = new THREE.TextureLoader().load('/static/images/base/luojizhuanti.png');
let texture2 = new THREE.TextureLoader().load('/static/images/base/stack.png');
let trapArray = [];
let targetArray = new Array(7).fill('').map(() => new THREE.Vector2(0,0));
square[this.game].trap.forEach(d => {
    trapArray.push(new THREE.Vector2(d[0], d[1]));
})
square[this.game].end.forEach((d,i) => {
    targetArray[i] = new THREE.Vector2(d[0], d[1]);
})
uniforms = {
    texture1: {
        value: texture1
    },
    texture2: {
        value: texture2
    },
    point0: {
        value: trapArray[0]
    },
    point1: {
        value: trapArray[1]
    },
    target: {
        value: targetArray
    }
}
uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = THREE.RepeatWrapping;
let planeMate = new THREE.ShaderMaterial({
    side: THREE.DoubleSide,
    uniforms: uniforms,
    vertexShader: `
        varying vec2 vUv;
        varying vec3 pos;
        void main() {
            vUv = uv;
            pos = position;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    `,
    fragmentShader: `
        varying vec2 vUv;
        varying vec3 pos;
        uniform vec2 point0;
        uniform vec2 point1;
        uniform vec2 target[7];
        uniform sampler2D texture1;
        uniform sampler2D texture2;
        void main() {
            int index = 0;
            vec2 newUv = vec2(vUv.x * 7.0, vUv.y * 8.0);
            vec4 tcolor1 = texture2D( texture1, vUv );
            vec4 tcolor2 = texture2D( texture2, newUv );
            vec4 resultColor = tcolor1;
            if (pos.x < point0.x * 10.0 + 45.0 && pos.x > point0.x * 10.0 + 35.0 && pos.y < - point0.y * 10.0 - 40.0 && pos.y > - point0.y * 10.0 - 50.0) {
                resultColor = tcolor2;
            } else if(pos.x < point1.x * 10.0 + 45.0 && pos.x > point1.x * 10.0 + 35.0 && pos.y < - point1.y * 10.0 - 40.0 && pos.y > - point1.y * 10.0 - 50.0) {
                resultColor = tcolor2;
            } else {
                for(int i=0; i < 7; i++) {
                    if (pos.x < target[i].x * 10.0 + 45.0 && pos.x > target[i].x * 10.0 + 35.0 && pos.y < - target[i].y * 10.0 - 40.0 && pos.y > - target[i].y * 10.0 - 50.0) {
                        resultColor = vec4(1.0, 0.5, 0.0, 1.0);
                    }
                }
            }
            gl_FragColor = resultColor;
        }
    `
})

texture1和texture2是两个纹理图,trapArray是盛放陷阱的数组,targetArray是目标区域,默认长度是7,且默认值都是new THREE.Vector2(0,0),然后我们将二维向量加到以上两个数组中,最后添加到uniforms中,最后传到ShaderMaterial中,顶点着色器我们只需要将position和ui传到片元着色器中,关键是片元着色器,首先我们先得到一个新uv,这个新uv是沿x方向重复7次,沿y方向重复8次,然后tcolor1和tcolor2分别是底图的颜色和重复了7*8的陷阱的颜色。if中是渲染第一个陷阱,else if是渲染第二个陷阱,else中循环target数组,渲染target区域,具体的判断其实很简单。这样我们就根据关卡渲染了陷阱。

2. 对是否可以旋转进行判定

因为小方块是不可以超过底图的边缘的,而且也不可以直接覆盖到陷阱上面,因为这个操作是在点击上下左右的时候就要先判断可行性,但是此时我们还没有转,所以我们就要先拷贝一个boxes,先进行旋转看看出没出界或者压没压到陷阱,我们是这样实现的。

judge(num) {
    judgeGroup = new THREE.Group();
    boxesCopy = [];
    for(let i=0; i<boxes.length; i++) {
        let geom = new THREE.BoxGeometry(ratio, ratio, ratio);
        let mate = new THREE.MeshBasicMaterial({color: 0xffaa00, transparent: true, opacity: .8});
        let mesh = new THREE.Mesh(geom, mate);
        mesh.position.copy(boxes[i].position);
        boxesCopy[i] = mesh;
    }
    if(num == 1) {
        var offset = new THREE.Vector3(box3.max.x, 0, 0);
        judgeGroup.position.copy(offset);
        boxesCopy.forEach(d => {
            d.position.sub(offset);
            judgeGroup.add(d);
        })
        judgeGroup.rotation.z = - Math.PI / 2;
    } else if(num == 2) {
        var offset = new THREE.Vector3(box3.min.x, 0, 0);
        judgeGroup.position.copy(offset);
        boxesCopy.forEach(d => {
            d.position.sub(offset);
            judgeGroup.add(d);
        })
        judgeGroup.rotation.z = Math.PI / 2;
    } else if(num == 3) {
        var offset = new THREE.Vector3(0, 0, box3.min.z);
        judgeGroup.position.copy(offset);
        boxesCopy.forEach(d => {
            d.position.sub(offset);
            judgeGroup.add(d);
        })
        judgeGroup.rotation.x = - Math.PI / 2;
    } else if(num == 4) {
        var offset = new THREE.Vector3(0, 0, box3.max.z);
        judgeGroup.position.copy(offset);
        boxesCopy.forEach(d => {
            d.position.sub(offset);
            judgeGroup.add(d);
        })
        judgeGroup.rotation.x = Math.PI / 2;
    }
    judgeGroup.updateMatrixWorld();
    let canPass = true;
    boxesCopy.forEach(d => {
        var trans = new THREE.Vector3();
        d.matrixWorld.decompose(trans, new THREE.Quaternion(), new THREE.Vector3());
        let x = Math.round((trans.x - 5) / 10);
        let z = Math.round((trans.z - 5) / 10);
        let y = Math.round((trans.y + 5) / 10);
        if(x > -1 || x < -7 || z > -1 || z < -8) {
            canPass = false;
        } else {
            square[this.game].trap.forEach(d => {
                if(d[0] == x && d[1] == z && y == 1) {
                    canPass = false;
                }
            })
        }
    })
    return canPass;
},

boxesCopy就是对boxes进行的拷贝,num就是我们的上下左右操作,最后一个循环就是判断是否可翻转,x,y,z值分别对应我们的格子,if判断时候出界,因为x的界限就是-1,-7,z的界限就是-1,-8。else是判断是否压到陷阱,只要有一个成立,canPass就会变成false。这就完成了简单的旋转判断。

3. 获胜的判定

获胜的判定很简单,在每一个旋转之后,比较boxes和end数组,如果两个数组一样,那么就说明胜利了,代码如下

computedWin() {
    let win = true;
    let temp = [];
    boxes.forEach(d => {
        let x = Math.round((d.position.x - 5) / 10);
        let z = Math.round((d.position.z - 5) / 10);
        temp.push([x, z]);
    })
    square[this.game].end.forEach(d => {
        if(!temp.some(dd => dd[0] == d[0] && dd[1] == d[1])) {
            win = false;
        }
    })
    if(win) {
        this.win();
    }
},

最后加上一点tween动画,这样我们就完成了一个逻辑转体的游戏,游戏玩起来还是比较有意思的。

转载请注明地址:郭先生的博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 制作逻辑转体游戏(上)

    今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢。玩法可以看上面的连接,下面附几张图。线案例请点击逻辑转体。

    郭先生的博客
  • HTML5游戏引擎深度测评

    最近看到网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料。特...

    李海彬
  • HTML5 游戏引擎深度测评

    最近看到网上一篇文章,标题叫做《 2016年 最火的 15 款 HTML5 游戏引擎 》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料...

    李海彬
  • 在微信小游戏中使用three.js显示3D图形

    笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏...

    bering
  • H5游戏开发:游戏引擎入门推荐

    很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎...

    bering
  • 利用 three.js 开发微信小游戏的尝试

    这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧。

    bering
  • 干货分享:如何选择HTML5引擎?至关重要!

    原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场成为下一个风口。然而,有一些H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如...

    Layabox Charley
  • 听说玩这些游戏能提升编程能力?

    电子游戏和编程充满联系。从雅达利兴盛的年代开始,游戏就已经开始影响一代又一代程序员。他们开发游戏,在游戏过程中获得快乐。随着机器学习的兴起,程序员们让人工智能学...

    灵魂画师牧码
  • 技术干货分享:如何选择 HTML5 游戏引擎

    原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口。据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适...

    李海彬
  • 【Golang语言社区前端编程】如何选择 H5 游戏引擎

    原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口。据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适...

    李海彬
  • three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可...

    郭先生的博客
  • 微信小游戏 - 初体验

    在月活用户近9亿的社交平台上做小游戏,是胆战心惊了点,毕竟游戏脱离控制、变身国民爆款可能是分分钟的事。

    腾讯NEXT学位
  • 懂技术又懂艺术的creative developer | Mix群聊

    条漫的灵感,来源于谷歌的storyboard生成技术,将任何图像集(如视频剪辑或相册)转换为故事板。通过互动的方式完成内容创作,这样用户就可以探索并找到最适合他...

    mixlab
  • webgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)

    为实现企业80%以上的生产数据进行智能转化,在烟草、造纸、能源、电力、机床、化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级。“远...

    acoolgiser
  • HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技...

    张果
  • 元宇宙趋势下的前端现状

    作为大家口中的“互联网的最终形态”,需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不...

    ConardLi
  • 你知道几种前端动画的实现方式?

    随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果。那前端实现动画效...

    2020labs小助手
  • 元宇宙趋势下的前端现状

    作为大家口中的“互联网的最终形态”,需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不...

    winty
  • 元宇宙趋势下的前端现状

    作为大家口中的“互联网的最终形态”,需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不...

    程序IT圈

扫码关注云+社区

领取腾讯云代金券