使用VS Code远程开发小游戏,并实现公网访问本地游戏

使用VS Code远程开发小游戏,并实现公网访问本地游戏

    • 前言
    • 1. 编写MENJA小游戏
    • 2. 安装cpolar内网穿透
    • 3. 配置MENJA小游戏公网访问地址
    • 4. 实现公网访问MENJA小游戏
    • 5. 固定MENJA小游戏公网地址

前言

在本篇博客中,我们将分享如何通过VS Code实现远程开发MENJA切块小游戏,并使用VS Code并结合Live Server插件进行调试,Live Server可以实现一键安装,实现自动刷新,架设本地服务器环境。最后通过cpolar内网穿透发布到公网,分享给无论身在何地的好友体验由你开发的游戏的乐趣。

1. 编写MENJA小游戏

本篇文章的小游戏源代码地址:https://github.com/ADAMxWANG/menja

下载ZIP压缩包到本地:

image-20231205171902463

VS Code扩展中搜索Live Server,并安装

image-20231205104829266

右键index.html文件,点击Open with Live Server 弹出web界面,端口为 5500

image-20231205162407683

image-20231205105336821

接下来可以在menja文件夹下进行调试,并使用Live Server随时进行调试,实时查看开发的网页

image-20231205162747769

接下来我们要把制作好的游戏网页发布至公网,分享给好友访问。

2. 安装cpolar内网穿透

要将游戏分享给好友,首先我们需要在Linux安装cpolar内网穿透工具,通过cpolar 转发本地端口映射的http公网地址,我们可以很容易实现远程访问,而且无需自己注册域名购买云服务器.下面是安装cpolar步骤:

cpolar官网地址: https://www.cpolar.com

  • 使用一键脚本安装命令
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar

cpolar安装成功后,在外部浏览器上访问Linux 的9200端口即:【http://局域网ip:9200】,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可。

image-20231016143741228

3. 配置MENJA小游戏公网访问地址

点击左侧仪表盘的隧道管理——创建隧道,创建一个MENJA小游戏的cpolar 公网地址隧道!

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:5500 (本地访问时的端口)
  • 域名类型:免费选择随机域名
  • 地区:选择China Top

点击创建

image-20231205162913957

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,分别是 http 和 https 。

image-20231205163034816

4. 实现公网访问MENJA小游戏

使用上面的cpolar https公网地址,在任意设备的浏览器进行访问,即可成功看到小游戏界面,这样一个公网地址且可以远程访问就创建好了,使用了cpolar的公网域名,无需自己购买云服务器,即可发布到公网随时随地进行远程访问。(Tips:新域名登录,可能需要重新登陆)

image-20231205163131214

5. 固定MENJA小游戏公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。我一般会使用固定二级子域名,因为我希望将游戏网址发送给朋友玩时,可以直接使用简单好记的固定公网地址进行访问,不用每天都更换地址访问,可以一直愉快的享受游戏。

固定二级子域名长这样(例如:MENJA.cpolar.cn),该地址为固定地址,不会随机变化。

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。

5f9c95aa2f400d49a0515b73da833d7

保留成功后复制保留成功的二级子域名的名称

f22eed666d7c9f88db05f89f915958f

返回登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

eb372d40f1adb6a6dbb85ea47a2a360

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20231205163504701

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

image-20231205163654863

最后,我们使用固定的公网地址访问游戏网页,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了。

现在我们可以把这个通过VS Code编写的web网页或者游戏网页,通过cpolar生成的固定地址分享给好朋友们随时随地来进行远程游戏啦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/299494.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java多态,包,权限修饰符,final关键字

文章目录 今日内容教学目标 第一章 多态1.1 多态的形式1.2 多态的使用场景1.3 多态的定义和前提1.4 多态的运行特点1.5 多态的弊端1.6 引用类型转换1.6.1 为什么要转型1.6.2 向上转型(自动转换)1.6.3 向下转型(强制转换)1.6.4 案例…

JWT 详解

前言: 本博客为转载整合博客(主打一个:我们只做博客的搬运工),参考博客主要有: https://blog.csdn.net/weixin_45070175/article/details/118559272?ops_request_misc%257B%2522request%255Fid%2522%253A…

【LeetCode每日一题】383. 赎金信(计数模拟)

2024-1-7 文章目录 [383. 赎金信](https://leetcode.cn/problems/ransom-note/)思路:计数模拟 383. 赎金信 思路:计数模拟 1.通过数组对字母进行计数 2.magazine 中的每个字符只能在 ransomNote 中使用一次。 3.判断减一后,是否小于等于0。…

前端ui库搜集

涟漪动画效果 - MDUI 开发文档, Material Design 前端框架添加涟漪动画效果后,会在点击元素时,产生向外扩散的水波纹效果。https://www.mdui.org/docs/ripple#ripple https://semantic-ui.com/ https://getuikit.com/ https://www.purecss.cn/grids.htm…

Linux进程间通讯 -- 管道

Linux进程间通讯 – 管道 文章目录 Linux进程间通讯 -- 管道1. 原理2. 进程间通讯2.1 管道2.1.1 匿名管道 pipe2.2.2 有名管道 FIFO 2.2 信号2.3 共享内存2.4 本地套接字 1. 原理 Linux 进程间通讯,也称为IPC(InterProcess Communication) 在 Linux 中每个进程都具…

Doris初识(01)

Doris初识 初识 Apache Doris 是一个基于 MPP 架构的高性能、实时的分析型数据库,以极速易用的特点被人们所熟知,仅需亚秒级响应时间即可返回海量数据下的查询结果,不仅可以支持高并发的点查询场景,也能支持高吞吐的复杂分析场景…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux系统编程第三天-Linux进程(物联技术666)

更多配套资料CSDN地址:点赞+关注,功德无量。更多配套资料,欢迎私信。 物联技术666_嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记-CSDN博客物联技术666擅长嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记,等方面的知识,物联技术666关注机器学习,arm开发,物联网,嵌入式硬件,单片机…

H266/VVC网络适配层概述

视频编码标准的分层结构 视频数据分层的必要性:网络类型的多样性、不同的应用场景对视频有不同的需求。 编码标准的分层结构:为了适应不同网络和应用需求,视频编码数据根据其内容特性被分成若干NAL单元(NAL Unit,NALU…

WEB 3D技术 three.js 顶点旋转

我们来说说几何体顶点的旋转 官网搜索 BufferGeometry 这里 我们有 x y z 三个轴的旋转 例如 我们这样的代码 import ./style.css import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; i…

第二十七周:文献阅读笔记

第二十七周:文献阅读笔记 摘要AbstractDenseNet 网络1. 文献摘要2. 引言3. ResNets4. Dense Block5. Pooling layers6. Implementation Details7. Experiments8. Feature Reuse9. 代码实现 总结 摘要 DenseNet(密集连接网络)是一种深度学习神…

AI 工具探索(二)

我参加了 奇想星球 与 Datawhale 举办的 【AI办公 X 财务】第一期,现在这是第二次打卡,也即自由探索,我选择 Modelscope 的 Agent 探索,并用gpts创作助理对比! 最近想学学小红书的运营方法,选择了 小红书I…

图像分割-Grabcut法

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 本文的C#版本请访问:图像分割-Grabcut法(C#)-CSDN博客 GrabCut是一种基于图像分割的技术,它可以用于将图像…

CnosDB容灾方案概述

本文主要介绍了跟容灾相关的关键技术以及技术整合后形成的几种具体方案,每种方案都在RTO、RPO、部署成本和维护成本等方面有自己的特点和区别,可以根据具体场景选择最合适的方案。 基本概念 RTO(Recovery Time Objective)&#x…

Qt基本认识

1. 基本认识 1.1 学习方法: (1)英语阅读能力要好一点 QT将一些类和方法进行了封装,一般是采用英语(方法名、属性、子类、父类等等)进行介绍 (2)学习QT reator 1)多查帮助…

数据交互系列:认识 cookie

cookie的原理 http本身是一个无状态的请求,cookie最初的原始目的是为了维持状态而产生的。在首次访问网站时,浏览发送请求中并未携带cookie,即发送无状态请求服务器接受请求之后会在请求上的respond header上加入cookie相关信息并返回给浏览…

数字孪生在虚拟现实(VR)中的应用

数字孪生在虚拟现实(VR)中的应用为用户提供了更深入、沉浸式的体验,同时通过数字孪生技术模拟真实世界的物理实体。以下是数字孪生在VR中的一些应用,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发…

13年测试老鸟,性能测试-全链路压测总结,一文打通...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、什么是全链路压…

二维和三维联合进行圆孔空间定位

0.任务描述 对空间圆孔进行三维空间的定位,方便后续的抓取或装配流程:使用二维图与opencv霍夫圆检测进行二维上的定位,再从深度图上查询深度信息,结合相机内参计算出相机坐标系下圆孔的三维坐标信息,并在点云上进行标…

自定义View之重写onMeasure

一、重写onMeasure()来修改已有的View的尺寸 步骤: 重写 onMeasure(),并调用 super.onMeasure() 触发原先的测量用 getMeasuredWidth() 和 getMeasuredHeight() 取到之前测得的尺寸,利用这两个尺寸来计算出最终尺寸使用 setMeasuredDimensio…

[通俗易懂]c语言中指针变量和数值之间的关系

一、指针变量的定义 在C语言中,指针变量是一种特殊类型的变量,它存储的是另一个变量的内存地址。指针变量可以用来间接访问和操作内存中的其他变量。指针变量的定义如下: 数据类型 *指针变量名;其中,数据类型可以是任…