VS Code+Live Server插件开发游戏并结合内网穿透分享好友异地访问

文章目录

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

前言

本篇教程,我们将通过VS Code实现远程开发MENJA小游戏,并通过cpolar内网穿透发布到公网,分享给无论身在何地的好友体验由你开发的游戏的乐趣。

话不多说,下面就来教大家如何使用VS Code编写一个MENJA切块小游戏,这里我们使用VS Code并结合Live Server插件进行调试,Live Server可以实现一键安装,实现自动刷新,架设本地服务器环境。

如何使用VS Code编写一个小游戏并结合内网穿透实现远程访问

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是一个非常好用的工具,它可以将你的本地站点发布至公网。是Web调试开发的必备工具,通过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生成的固定地址分享给你的好朋友们随时随地来进行远程游戏啦~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人脸识别基本流程

人脸识别一般包括:人脸检测、人脸对齐、人脸特征提取和人脸比对四个步骤 人脸检测:检测到人脸的位置人脸对齐:同一个人采集到的不同图像可能呈现出不同的姿态和表情等,这种情况是不利于人脸特征提取的。所以有必要将人脸图像都变…

安装mongodb数据库,并且新建自己的库

1、拉取mongodb dokcer pull mongo:4.4.132、运行docker安装mongodb docker run -itd --name mongo -v /home/dockerdata/mongo/data:/data/db -p 27017:27017 mongo:4.4.13 --auth3、进入mongdb docker exec -it mongo mongo admin4、创建自己的库 use interfaceLog5、新…

ubuntu系统下c++ cmakelist vscode debug(带传参的debug)的详细示例

c和cmake的debug,网上很多都需要配置launch.json,cpp.json啥的,记不住也太复杂了,我这里使用cmake插件带有的设置,各位可以看一看啊✌(不知不觉,竟然了解了vscode中配置文件的生效逻辑🤣) 克隆…

【PPT密码】ppt设置的编辑密码,如何取消?

不知道大家是否了解PPT文件的编辑密码,首先ppt中没有限制编辑功能,设置为只读模式后仍然可以编辑文件,但其实有一种类似于限制编辑的加密方式。在我们打开PPT文件的时候会有密码输入框。 如果我们没有输入密码,以只读方式进入&…

Linux项目自动化构建工具之make/Makefile演示gcc编译

文章目录 一、背景二、如何使用?三、原理四、关于make的问题五、再次理解/编写makefile依赖关系依赖方法 六、原理讲解项目清理makefile是支持变量的取消执行make后显示命令依赖方法可以多行 一、背景 会不会写makefile,从一个侧面说明了一个人是否具备…

ResizeObserver的使用

这篇说下ResizeObserver API。ResizeObserver接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。 ResizeObserver避免了通过回调函数调整大小时,通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点…

Yarn常见问题处理

任务出现container OOM异常导致作业失败 原因 Container内存不足或者作业数据倾斜 解决方案 检查Container相关参数,判断是否设置过小(低于4GB)。如果Container小于4GB,优先考虑调大当前作业container大小,如果是Tez任务,还需要同步调整以下参数 # tez container size…

双非本科准备秋招(17.1)—— 力扣二叉树

1、257. 二叉树的所有路径 要求返回根节点到叶子节点的所有路径,这里用前序遍历就好。 每次递归前,都让字符串s加上当前节点的值和“->”,然后判断是否为叶子节点,如果是的话,说明这条路径是一个答案,因…

为啥餐饮界营销频频出圈?媒介盒子分享

回看2023年的营销热点,茶饮界和餐饮行业依然占据了最多的出圈镜头,从麦当劳的“麦门”到海底捞的科目三,许多餐饮和食品品牌都依靠营销策划和巧思成功占据了用户心智。毫无疑问,内容已经成为公认的和用户沟通的最佳手段。今天媒介…

Django的配置文件setting.py

BASE_DIR 项目路径:默认是已经打开的主项目路径 ​​​​​​​BASE_DIR os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY 密钥 SECRET_KEY (dh&_fm2hfn9y)35!_6#$a7q%%^onoy#-a8x18r4(6*8f(aniDEBUG 帮助调试,默认…

【EI会议征稿通知】第三届智能控制与应用技术国际学术会议(AICAT 2024)

第三届智能控制与应用技术国际学术会议(AICAT 2024) 2024 3rd International Symposium on Artificial Intelligence Control and Application Technology 2024年第三届智能控制与应用技术国际学术会议(AICAT 2024)定于2024年5月…

Postgresql数据库存储过程中的事务处理

在PostgreSQL中,事务处理是一种保证数据库操作要么完全成功,要么完全失败的机制,确保数据库的完整性和一致性。事务通过一系列的数据库操作组成,这些操作作为一个整体执行,它们要么全部成功,要么全部失败。…

Android14之Selinux报错:unknown type qemu_device at token (一百八十三)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

C语言:公式求和

题目描述 计算公式:1-1/21/3-1/4……,求前面n(n≤10000)项和,结果保留小数点后面6位。 例如当n4时,和值为0.583333 当n10时,和值为0.645635 输入格式 一个正整数n 输出格式 求出的和值,保留小数点后面6位 …

如何批量删除OneDrive for Business中的文件历史版本

OneDrive for Business是微软提供的云存储服务,它允许用户存储、同步和共享文件。为了保护数据不受意外更改的影响,OneDrive提供了版本控制功能,用户可以查看和恢复文件的旧版本。但是,随着文件数量的增加,这些历史版本…

在bash或脚本中,如何并行执行命令或任务(命令行、parallel、make)

最近要批量解压归档文件和压缩包,所以就想能不能并行执行这些工作。因为tar自身不支持并行解压,但是像make却可以支持生成一些文件,所以我才有了这种想法。 方法有两种,第一种不用安装任何软件或工具,直接bash或其他 …

QXlsx Qt操作excel(2)

QXlsx 是一个用于处理Excel文件的开源C库。它允许你在你的C应用程序中读取和写入Microsoft Excel文件(.xlsx格式)。该库支持多种操作,包括创建新的工作簿、读取和写入单元格数据、格式化单元格、以及其他与Excel文件相关的功能。 关于QXlsx的…

svg格式图片转png,jpg等(矢量图转像素点阵图)

imagemagick 效果不太理想,有些svg图片,convert会生成灰色空白图片,另外尺寸也不方便控制。虽然可以使用参数 -resize 100x 但是这个是在转换后的像素点图上执行的,因此会让图像变得不清晰。 # svg图片地址为网络地址 curl -s h…

动力电池智能工厂数字孪生可视化,助力新能源汽车产业数字化转型

动力电池智能工厂数字孪生可视化,助力新能源汽车产业数字化转型。随着新能源汽车产业的快速发展,动力电池作为新能源汽车的核心组成部分,其生产制造的数字化转型也成为了行业关注的焦点。动力电池智能工厂数字孪生可视化平台作为一种新型的技…

GitLag所有操作-汇总

1、MAC Git环境设置 跳转 Git通过Token拉代码: 跳转 Git基础操作:拉、put、删 跳转 Git回滚操作: 跳转 Git回滚操作-复杂 跳转 对于Commit但是还没有push的代码,如果回滚: 跳转