基于Voxel.js搭建网页方块世界游戏

梦未

已于 2023-01-17 18:11:20 修改

阅读量3.3k

点赞数

分类专栏： # Web端开发文章标签：游戏 javascript

于 2021-11-22 08:37:26 首次发布

本文链接：https://blog.csdn.net/weixin_42077074/article/details/121464227

版权

Web端开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Voxel.js，是用于呈现在浏览器上的方块游戏的构建工具包

📑引用

“an open source voxel game building toolkit for modern web browsers”

——Voxel 官网

⭐推荐

基于 Voxel 搭建的方块世界样例可以试玩

http://shama.github.io/voxel-drone/

http://maxogden.github.io/slides/nodepdx/index.html

💬相关

Voxel 官网

http://www.voxeljs.com/

Voxel 系列项目
https://github.com/maxogden?tab=repositories&q=voxel

构建项目

其需要先在服务器上安装 Node.js，再根据自己需求找到 Voxel 相应的模块包用 npm 进行安装

💬相关

Node.js 安装教程

https://www.runoob.com/nodejs/nodejs-install-setup.html

Voxel 的模块包有很多，其中voxel-engine是核心模块，不可缺少

还有很多模块包，如玩家角色模块包 voxel-player，材质模块包 voxel-textures，光照投影模块包 voxel-highlight，碎片模块包 voxel-debris等等

在这里给出用 npm 安装模块包的命令例子

npm install voxel-engine
npm install voxel-player
npm install voxel-highlight

其后还要安装 browserify

npm install browserify -g

新建一个 js 文件index.js并在里面写上初始化的代码

//此处代码学习自YiDaoDo博客 https://blog.csdn.net/lmmmmmnb/article/details/115193123

var createGame =require('voxel-engine');//引入包
var Highlight = require('voxel-highlight')//引入包
var game=createGame(       //以该函数为基础创造世界 
    { 
    generate: function(x,y,z) {   //generate里面的函数为初始的地图创建函数  
    if (y==0){  
        return x*x+z*z <=55*55? 1:0 
        }else if(y==8&&x==0&&z==0){ 
        return 1    
        } 
    }, 
    texturePath:'textures/',      //引入纹理包。纹理包里面的图片都可以在voxel-engine包里面找到     
    materials: ["grass"]   //添加初始纹理（都是纹理包里面的）

      }
 );

var createPlayer=require('voxel-player')(game);   //引入包

game.appendTo(document.body);       //获得全屏

var substack=createPlayer('skin/shama.png');  //创建你的小人

substack.possess();      //小人获得移动视角

substack.yaw.position.set(3,30,0);    //小人初始位置

随后执行下述指令，利用 browserify 根据初始化代码生成相应的运行方块世界的完整代码

browserify index.js -o world.js

如果想要游戏屏幕中央带有红色准心，那就新建一个 CSS 文件 style.css，里面写入下述代码并在 HTML 文件中引入

body {
  margin: 0px;
  font-family: Arial, sans-serif;
  font-size: 80%;
}
#container {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -2px;
  width: 4px;
  height: 4px;
  background-color: #d00;
  opacity: 0.5;
}

最后新建一个 HTML 文件 index.html，在其中引入 style.css 和新生成的 world.js，即大功告成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title>方块世界</title>
        <link rel="stylesheet" href="style.css" />		
	</head>
	<body>
        <div id="container"></div>
        <div id="crosshair"></div>
	    <script src="world.js"></script>
	</body>
</html>

最后项目的文件大致是这样的

Voxel/
├── node_modules/        ::Voxel若干模块包
├── textures/       ::材质
├── skin/       ::人物皮肤
├── index.html
├── style.css
├── index.js
├── world.js
└── package-lock.json

💬相关

Voxel.js 文档

https://blog.csdn.net/lmmmmmnb/article/details/115193123

voxel-texture

voxel-texture 是材质模块包，可以让你的方块 6 个面都拥有各自的材质

方块材质传入一个数组 materials（数组大小 1-6 均可），每个元素对应方块某个面材质的名称

面名称中英释义

顶面 top
底面 bottom
前面 front
背面 back
左面 left
右面 right
侧面 side（包含前、背、左、右四个面）
全部面 all（包含六个面）

面方向与坐标值的关系

front 方向前进 z 值减小
left 方向前进 x 值减小
top 方向前进 y 值增大(y 是纵坐标值)

不同大小数组参数下每个元素代表的含义

根据数组参数大小的不同，其每个元素对应的方块面也不同。

[all]//数组大小为1
[top and bottom，side]//数组大小为2
[top，bottom，side]//数组大小为3
[top,bottom,front and back,left and right]
//不能以大小为5的数组作为参数，否则右面会缺失材质
[front，back，top，bottom，left，right]//数组大小为6

其他包

⭐推荐

模组包 voxel-engine、voxel-player、voxel-highlight 都可以查看博客《Voxel.js文档——用js实现“我的世界”》

https://blog.csdn.net/lmmmmmnb/article/details/115193123

梦未

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
基于Voxel.js搭建网页方块世界游戏

Voxel.js，是用于呈现在浏览器上的方块游戏的构建工具包an open source voxel game building toolkit for modern web browsers——Voxel官网基于Voxel搭建的方块世界样例可以试玩http://shama.github.io/voxel-drone/http://maxogden.github.io/slides/nodepdx/index.htmlVoxel官网http://www.voxeljs.com/V
复制链接

扫一扫

专栏目录