【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

文章目录

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

前言

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

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

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生成的固定地址分享给你的好朋友们随时随地来进行远程游戏啦~

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

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

相关文章

C++ //习题3.8 写出下面各逻辑表达式的值。设a=3,b=4,c=5。

C程序设计 (第三版) 谭浩强 习题3.8 习题3.8 写出下面各逻辑表达式的值。设a3,b4,c5。 (1) a b > c && b c (2) a || b c && b - c (3) !(a > b) && !c || 1 (4) !(x a) && (y b…

FastAPI之响应状态码

使用FastAPI自定义响应状态码 FastAPI 是一个现代、快速的 web 框架,用于构建API服务,它允许你通过Python 3.6及以上版本进行编程。一个重要的API设计是返回合适的响应状态码,这可以使得客户端理解服务端的处理结果。本教程将向你展示如何在…

Kafka事务是怎么实现的?Kafka事务消息原理详解

目录 一、Kafka事务性消息1.1 介绍Kafka事务性消息1.2 事务性消息的应用场景1.3 Kafka事务性消息的优势 二、Kafka事务性消息的使用2.1 配置Kafka以支持事务性消息生产者配置消费者配置 2.2 生产者:发送事务性消息创建Kafka生产者开始事务发送消息提交或中止事务 2.…

logstash之grok插件自定义规则学习

文章目录 1、前言2、Grok提供的常用Patterns说明及举例2.1 常用的表达式说明 3、使用grok插件进行日志字段处理4、案例1:处理nginx的日志4.1、查看nginx日志格式4.2、对nginx的日志进行过滤处理 5、案例2:处理tomcat的日志5.1、[安装logstash-filter-mul…

外包干了3个月,技术退步明显.......

先说一下自己的情况,大专生,18年通过校招进入武汉某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

【MySQL】在 Centos7 环境下安装 MySQL

环境搭建 一、检查环境二、检查系统安装包三、安装 mysql yum 源四、安装 mysql 服务五、启动服务六、登录 mysql七、配置 my.cnf 注意,我们搭建的 mysql 环境是在 Linux 的 Centos7 环境下安装的~ 一、检查环境 注意,我们在安装和卸载中,先…

【EI会议征稿】第二届纯数学、应用数学与计算数学国际学术会议(PACM 2024)

第二届纯数学、应用数学与计算数学国际学术会议(PACM 2024) 2024 2nd International Cnference on Pure, Applied and Computational Mathematics (PACM 2024) 第二届纯数学、应用数学计算数学国际学术会议 (PACM2024) 将于2024年1月19-21日在中国厦门隆…

报错:AttributeError: ‘DataFrame‘ object has no attribute ‘reshape‘

这个错误通常发生在你试图在 Pandas DataFrame 上直接使用 reshape 方法时。reshape 方法通常与 NumPy 数组相关联,而不是 Pandas DataFrame。 如果你正在使用 Pandas DataFrame 并希望重新塑造它,你应该使用 Pandas 的重塑函数,如 pivot、m…

UE5 树叶飘落 学习笔记

一个Plane是由两个三角形构成的,所以World Position Offset,只会从中间这条线折叠 所有材质 这里前几篇博客有说这种逻辑,就是做一个对称的渐变数值 这里用粒子的A值来做树叶折叠的程度,当然你也可以用Dynamic Param 这样就可以让…

麒麟KYLINOS上删除多余有线连接

原文链接:麒麟KYLINOS上删除多余网络有线连接 hello,大家好啊,今天我要给大家介绍的是在麒麟KYLINOS操作系统中,如何删除通过Parallels Desktop虚拟机安装时产生的多余有线连接。在使用Parallels Desktop虚拟机安装麒麟桌面操作系…

C/C++ 题目:给定字符串s1和s2,判断s1是否是s2的子序列

判断子序列一个字符串是否是另一个字符串的子序列 解释:字符串的一个子序列是原始字符串删除一些(也可以不删除)字符,不改变剩余字符相对位置形成的新字符串。 如,"ace"是"abcde"的一个子序…

服务器数据恢复—raid5少盘状态下新建raid5如何恢复原raid5数据?

服务器数据恢复环境: 一台服务器上搭建了一组由5块硬盘组建的raid5阵列,服务器上层存放单位重要数据,无备份文件。 服务器故障&分析: 服务器上raid5有一块硬盘掉线,外聘运维人员在没有了解服务器具体情况下&#x…

[算法每日一练]-双指针 (保姆级教程篇 1) #A-B数对 #求和 #元音字母 #最短连续子数组 #无重复字符的最长子串 #最小子串覆盖 #方块桶

目录 A-B数对 解法一:双指针 解法二:STL二分查找 解法三:map 求和 元音字母 最短连续子数组 无重复字符的最长子串 最小子串覆盖 方块桶 双指针特点:双指针绝不回头 A-B数对 解法一:双指针 先把数列排列成…

Grounding DINO、TAG2TEXT、RAM、RAM++论文解读

提示:Grounding DINO、TAG2TEXT、RAM、RAM论文解读 文章目录 前言一、Grounding DINO: Marrying DINO with Grounded Pre-Training for Open-Set Object Detection1、摘要2、背景3、部分文献翻译4、贡献5、模型结构解读a.模型整体结构b.特征增强结构c.解码结构 6、实…

使用Sourcetrail解析C项目

阅读源码的工具很多,今天给大家推荐一款别具一格的源码阅读神器。 它就是 Sourcetrail,一个免费开源、跨平台的可视化源码探索项目 使用

Faster R-CNN pytorch源码血细胞检测实战(二)数据增强

Faster R-CNN pytorch源码血细胞检测实战(二)数据增强 文章目录 Faster R-CNN pytorch源码血细胞检测实战(二)数据增强1. 资源&参考2. 数据增强2.1 代码运行2.2 文件存放 3 数据集划分4. 训练&测试5. 总结 1. 资源&参…

静态SOCKS5的未来发展趋势和新兴应用场景

随着网络技术的不断发展和进步,静态SOCKS5代理也在不断地完善和发展。未来,静态SOCKS5代理将会呈现以下发展趋势和新兴应用场景。 一、发展趋势 安全性更高:随着网络安全问题的日益突出,用户对代理服务器的安全性要求也越来越高…

【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇

​ 🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:"没有罗马,那就自己创造罗马~" 目录 HarmonyOS 4.0 技术介绍: HarmonyOS三大特征: 1.实现硬件互助&#…

Appium 并行测试多个设备

一、前置说明 在自动化测试中,经常需要验证多台设备的兼容性,Appium可以用同一套测试运例并行测试多个设备,以达到验证兼容性的目的。 解决思路: 查找已连接的所有设备;为每台设备启动相应的Appium Server&#xff1b…

docker的资源控制:

docker的资源控制: 对容器的使用宿主机的资源进行限制 cpu 内存 磁盘i/0 docker使用linux自带的功能cgroup control grouos是linux内核系统提供的一种可以限制,记录,隔离进程所使用的物理资源 control grouos是linux内核系统提供的一种可…