1. 首页
  2. css

CSS如何制作智能手机控制的3D网页游戏

以下是查理·沃尔特的客串帖子。查理和我一起工作三.js(使用WebGL浏览器中的3D)和游戏概念。如果你对这些东西感兴趣,请继续读下去!在本教程中,我将介绍如何将智能手机连接到3D网络游戏。我们将制造一辆汽车,你可以通过倾斜手机(使用手机的加速计)来控制它。我们将使用JavaScript库三.js用于通过套接字.io图书馆和其他一些网络技术。

现在就试试吧

这是你现在可以玩的现场演示。请注意,它在WiFi上工作得最好。

如果尚未安装Node,则需要安装Node。我们将使用Express来设置服务器,并且套接字.io用于WebSocket通信。

为此项目创建目录,把这个package.json放在根目录下:

{\"name\": \"smartphone-controller-game\",\"version\": \"0.1.0\",\"devDependencies\": {\"express\": \"*\"}}

现在在终端中打开你的项目目录,用这个命令安装你的项目依赖项:

npm install

它在package.json文件中查找,并使用devDependencies对象来安装这些依赖项的正确依赖项和版本。NPM使用Semvar版本符号,\”*\”表示\”最新的\”。

以便使用套接字.io我们需要设置一个服务器。这可以使用Express完成。首先,让我们提供一个索引文件。创建一个包含服务器代码的文件。叫它server.js

var>

This sets up a server running on port :8080. When the root is requested (\"/\") it will send the `index.html` file in the response.

Create the index.html文件:

<!DOCTYPE html><html>

Now run this in the terminal:

node server.js

它应该说:

Server running on port: 8080

在浏览器中打开URLlocalhost:8080,你的索引文件应该被呈现!

启动套接字

现在我们已经设置了项目,让我们的客户机和服务器通过套接字进行通信。首先我们需要安装套接字.io.

npm install socket.io --save

index.html中,包括套接字.io在<head>:

<script>

and after the opening <body>标记add:

<script>var>

This connects to socket.io and alerts a message letting us know it\"s working.

In server.js中添加此:

var>

This sets up socket.io using the server and logs when new clients connect.

Since server code has changed, we will have to re-run the server. Press \"Ctrl + C\" in the terminal to cancel the current process. This will have to be done each time server.js已更新。

我们现在应该看到警报通知我们成功更新套接字.io连接,终端应记录\"Client connected!\"几乎是瞬间。

连接手机

现在我们将手机上的浏览器窗口(汽车控制器)连接到桌面浏览器(游戏)。这是如何工作的:

  • 游戏客户端将告诉服务器它要作为游戏连接
  • 然后服务器将存储该游戏套接字,然后告诉游戏客户端它已连接
  • 然后游戏客户端将使用其套接字ID作为URL参数创建URL
  • 然后手机(或任何其他选项卡/窗口)将转到此链接并告诉服务器,它想作为控制器连接到URL中ID为的游戏套接字,然后服务器将存储该控制器套接字及其连接到的游戏套接字的ID,然后服务器将该控制器套接字的ID分配给相关的游戏套接字对象游戏插座它有一个控制器连接到它,并告诉控制器插座它已经连接了相关的游戏插座和控制器插座然后让游戏客户端告诉服务器它作为一个游戏客户端连接。代替alert(),添加:

    io.emit(\"game_connect\");

    这发出一个我们命名为game_connect的事件。然后,服务器可以监听这个事件并存储套接字,然后向客户端发送一条消息,告诉客户端它已连接。因此,添加这个作为一个新的全局变量:

    var>

    Then add this in place of the console.log()

    socket.on(\"game_connect\", function(){console.log(\"Game>

    The controller_id将填充与此游戏连接的控制器的套接字ID,当它连接时。

    现在重新启动服务器并刷新客户端。终端现在应该记录游戏连接了。

    Game connected

    现在服务器发出了一个名为game_connected的事件,具体到这个套接字(发出了game_connect),客户端就可以监听这个事件并创建URL:

    var = += url;io.removeListener(\"game_connected\", game_connected);};io.on(\"game_connected\", game_connected);

    用实际的IP替换x.x.x.x。为此,可以从Mac/Linux终端使用\"ifconfig\",也可以在Windows命令提示符下使用\"ipconfig\"。这是IPv4地址。

    当您重新启动服务器并转到客户机时,端口8080上的IP的URL应该存在,并且在末尾有一个ID参数。

    太好了!当该URL被复制到另一个选项卡(或手动输入到手机中)时,除了创建另一个URL之外,没有其他事情发生。那不是我们想要的。我们希望这样,当这个URL(带有ID参数)被导航到时,客户端应该认识到它有这个参数,并告诉服务器作为控制器连接。

    因此,将io.on(\"connect\", function() {中的所有内容包装在else中:

    if>

    Load up the client and when you navigate to a created URL, it will alert you that you are trying to connect as a controller, rather than a game. Here we will connect it to the server and link it up with the relevant game socket.

    Replace the alert()带有:

    io.emit(\"controller_connect\",>

    This emits an event called controller_connect并将我们在URL中的ID发送到服务器服务器。现在服务器可以侦听此事件,存储控制器套接字,并将其连接到相关的

    CSS如何制作智能手机控制的3D网页游戏 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%a6%82%e4%bd%95%e5%88%b6%e4%bd%9c%e6%99%ba%e8%83%bd%e6%89%8b%e6%9c%ba%e6%8e%a7%e5%88%b6%e7%9a%843d%e7%bd%91%e9%a1%b5%e6%b8%b8%e6%88%8f/

发表评论

您的电子邮箱地址不会被公开。