three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏。在线案例请点击博客原文。
要制作一个推箱子游戏,正常要有以下4个步骤
- 定义一些数组,要有开始箱子数组、结束箱子数组、地面数组还有墙面数组,有这四个数组就可以组成一个关卡。
- 根据数组初始化地面墙面箱子和目标地点标志物。
- 使用FirstPersonControls控制器,控制相机移动,根据地面箱子和墙面算出可移动区域。
- 根据相机正对箱子时,用鼠标点击箱子,控制箱子移动,并做成功性校验。
下面我们上代码分析代码
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的辅助方法,见笑了。
转载请注明地址:郭先生的博客
three.js 制作一个三维的推箱子游戏的更多相关文章
- 用C写一个简单的推箱子游戏(二)
下面接着上一篇随笔<用C写一个简单的推箱子游戏(一)>来写 tuidong()函数是用来判断游戏人物前方情况的函数,是推箱子游戏中非常重要的一个函数,下面从它开始继续介绍推箱子的小程序怎么 ...
- 用C写一个简单的推箱子游戏(一)
我现在在读大二,我们有一门课程叫<操作系统>,课程考查要求我们可以写一段程序或者写Windows.iOS.Mac的发展历程.后面我结合网上的资料参考,就想用自己之前简单学过的C写一关的推箱 ...
- JavaScript写一个小乌龟推箱子游戏
推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例: 推箱子游戏的在线DEMO : 打开 如下是效果图: 这个拖箱子游戏做了移动端的适配, 我使用 ...
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- JavaScript 推箱子游戏
推箱子游戏的 逻辑非常简单,但是如果不动手的话,还是不太清楚.我在这里讲一下自己的思路. 制作推箱子,首先要有自己的设计素材.如下我也是网上找的素材 第二步,理清游戏的规则. 游戏规则: 1.小人将箱 ...
- 如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4
在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...
- C语言实现推箱子游戏完整代码
C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...
- 怎样制作一个相似Tiny Wings的游戏 Cocos2d-x 2.1.4
在第一篇<怎样使用CCRenderTexture创建动态纹理>基础上,添加�创建动态山丘,原文<How To Create A Game Like Tiny Wings with C ...
随机推荐
- ADAS感知开发问题
ADAS感知开发问题 1. 雨天相机 问题:雨天相机目标识别不稳.出现目标时断时续的情况 对策: 增加单雷达生成功能.当单雷达目标置信度高时直接由雷达生成目标. 2. 相机震动目标位置突变 问题 :相 ...
- EOS基础全家桶(十四)智能合约进阶
简介 通过上一期的学习,大家应该能写一些简单的功能了,但是在实际生产中的功能需求往往要复杂很多,今天我就继续和大家分享下智能合约中的一些高级用法和功能. 使用docker编译 如果你需要使用不同版本的 ...
- 三色二叉树——树形dp
三色二叉树 题目描述 一棵二叉树可以按照如下规则表示成一个由 \(0.1.2\) 组成的字符序列,我们称之为"二叉树序列 \(S\) ": \(0\) 该树没有子节点. \(1S_ ...
- c++ 随机生成带权联通无向图
提示 1.请使用c++11编译运行 2.默认生成100个输出文件,文件名为data1.in到data100.in,如有需要自行修改 3.50000以下的点1s内可以运行结束,50000-300000的 ...
- BUUCTF-Misc-No.4
比赛信息 比赛地址:Buuctf靶场 内心os(蛮重要的) 我只想出手把手教程,希望大家能学会然后自己也成为ctf大佬,再来带带我QWQ 被偷走的文件 | SOLVED | foremost分离一下文 ...
- Mac搭建svn服务器环境
Mac搭建svn服务器环境 svn是Subversion的简称,是一个开放源代码的版本控制系统, Mac系统自带了svn的服务端和客户端功能, 因此不需要下载第三方软件,就可以支持svn进行版本的管控 ...
- web 部署专题(七):Ubuntu + Nginx + Flask + Gunicore环境搭建(服务器)
现在我们手里有一个准备发布的项目,那么如何将他上传到你的服务器,并让外网访问呢? 安装: 安装Flask pip3 install flask 安装UWSGI pip3 install uwsgi 安 ...
- 爬虫前篇 /https协议原理剖析
爬虫前篇 /https协议原理剖析 目录 爬虫前篇 /https协议原理剖析 1. http协议是不安全的 2. 使用对称秘钥进行数据加密 3. 动态对称秘钥和非对称秘钥 4. CA证书的应用 5. ...
- Python之 爬虫(十二)关于深度优先和广度优先
网站的树结构 深度优先算法和实现 广度优先算法和实现 网站的树结构 通过伯乐在线网站为例子: 并且我们通过访问伯乐在线也是可以发现,我们从任何一个子页面其实都是可以返回到首页,所以当我们爬取页面的数据 ...
- SSRF漏洞简单分析
什么是SSRF漏洞 SSRF(服务器端请求伪造)是一种由攻击者构造请求,服务器端发起请求的安全漏洞,所以,一般情况下,SSRF攻击的目标是外网无法访问的内部系统. SSRF漏洞形成原理. SSRF的形 ...