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可以实现一键安装,实现自动刷新,架设本地服务器环境。

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/603026.shtml

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

相关文章

如何在 iPhone 上检索已删除的短信:6个有效方法分享

您是否错误地删除了 iPhone 上的重要短信?或者您可能删除了“消息”应用程序中的整个对话并想将其恢复?无论您的情况如何,有一些数据恢复方法可以帮助您恢复 iPhone 上已删除的邮件。 在本文中,我们将介绍在 iPhone 上恢复丢失、…

性能分析与调优: Linux 安装基于BPF的bcc-tools系统性能工具库

目录 一、实验 1.环境 2.agent服务器安装使用ELRepo安装依赖包 3.agent服务器安装基于BPF的bcc-tools系统性能工具库 二、问题 1.安装bcc-tools后执行命令报错 一、实验 1.环境 (1)主机 表1-1 主机 主机架构组件IP备注prometheus 监测 系统 pro…

【ChatGPT】提示设计的艺术:使用清晰的语法

探索清晰的语法如何使您能够将意图传达给语言模型,并帮助确保输出易于解析 All images were generated by Scott and Marco. 这是与Marco Tulio Ribeiro共同撰写的关于如何使用指导来控制大型语言模型(LLM)的系列文章的第一部分。我们将从基…

promise 是什么?它有哪些作用?

promise是一种编程概念,用于处理异步操作,可以在JavaScript中使用。 Promise有以下几个作用: 异步操作的顺序控制:Promise可以按指定的顺序执行多个异步操作,确保它们按照预期的顺序执行。错误处理:Promi…

C语言-第十八周做题总结-数组3

id:454 A.字符串逆序 题目描述 输入一个字符串,对该字符串进行逆序,输出逆序后的字符串。 输入 输入在一行中给出一个不超过80个字符长度的、以回车结束的非空字符串。 输出 在一行中输出逆序后的字符串。 输入样例 输出样例 题解 先用一个while…

【多线程】

文章目录 一、线程与进程的概念:二、多线程实现三、线程锁四、线程数量的设置 一、线程与进程的概念: 简单理解 假设总共有3个孩子需要喂饭,孩子每吃一口饭需要咀嚼消化一下。 多线程方案: 雇佣1个保姆,在喂A孩子吃饭…

人机之间的联系

人机之间的联系指的是人类和机器之间的交互和合作关系。人机联系的目的是通过利用机器的计算能力和人类的智能能力来实现更高效、更准确的工作和决策。 人机之间的看得见的链接,是指人与机器之间通过视觉、听觉等感官传递信息的方式,如人与电脑之间通过显…

生成式AI在自动化新时代中重塑RPA

生成式AI的兴起正在推动行业的深刻变革,其与RPA技术的结合,标志着自动化领域新时代的到来。这种创新性结合极大地提升了系统的适应性,同时也推动了高级自动化解决方案的发展,为下一代RPA的诞生奠定了坚实的基础。 核心RPA技术专注…

使用Java构建RESTfulWeb服务

构建RESTful Web服务是一种常见的Web开发方法,它提供了一种简单、可扩展和易于使用的方式来设计和实现Web API。Java作为一种强大而广泛使用的编程语言,提供了多种工具和框架来构建RESTful Web服务。在本文中,我将介绍如何使用Java构建RESTfu…

基础面试题整理2

1.抽象类与接口区别 语法: 抽象类用abstract定义;接口用interface定义抽象类被子类继承extends(不可用final修饰);接口被类实现implements抽象类的属性访问无限制,方法不可用private修饰;接口中的方法只能…

BRC20 技术分析

文章目录 什么是 BRC20 ?brc20 白皮书。重点基于链上数据解析获取交易详情返回值如何将 16 进制转换为 字符串没有节点,如何获取数据?见证隔离如何解析出 BRC20 数据?最后如何快速搭建节点BRC20 Indexer

[C#]使用sdcb.paddleocr部署v4版本ocr识别模型

【官方框架地址】 https://github.com/sdcb/PaddleSharp 【算法介绍】 PaddleOCR,全称为PaddlePaddle OCR,是PaddlePaddle深度学习平台下的一款强大的光学字符识别工具。它利用深度学习技术,实现了高精度的文字识别,可以帮助用户…

计数器的LED显示控制电路图

如图所示,图a中采用十进制七段存储-译码-驱动单元74143,此单元对所有段都有恒流输出。在电压为5V时每段电流约为15~22mA.七段译码器的BCD数据可以由脚17~20上取出。脚22用于进位,即当计数值到9后就为低电平,其余为高电平。利用这个信号可以控…

Eureka工作原理及代码实例

Eureka是Netflix开源的一个服务发现框架,它的作用是让分布式系统中的服务实例能够自动注册和发现。本篇博客将详细介绍Eureka的工作原理及其组件。 1、Eureka的基础组件 Eureka包含两个基本组件:Eureka Server和Eureka Client。Eureka Server为服务注册…

测试:Fuzz测试

简介 Fuzz测试(Fuzz Testing)是一种软件测试技术,其核心思想是向系统输入大量异常、随机生成的数据(称为“模糊数据”或“fuzz”),以此触发系统潜在的错误或漏洞,如崩溃、安全漏洞、性能问题等…

Python:isalpha() 和 isalnum() 区别

isalpha() 和 isalnum() 是 Python 中的字符串方法,用于判断字符串是否仅包含特定类型的字符。下面我会逐个介绍这两个函数的语法结构、参数含义、使用举例和适用场景,并解释它们之间的区别。 一、isalpha() 语法结构:string.isalpha() 参数…

Matlab:遗传算法,模拟退火算法练习题

1、遗传算法 (1)遗传算法是一种基于自然选择原理和自然遗传机 制的搜索(寻优)算法,它是模拟自然界中的生命进化机制,在人工系统中实现特定目 标的优化。遗传算法的实质是通过群体搜索技术,根据…

神经网络中的重要概念

神经网络是一种模拟生物神经网络结构和功能的计算模型,由许多节点(或称为神经元)和它们之间的连接构成。以下是一些神经网络中的重要概念,并对它们进行细致的讲解: 神经元(Neuron):神…

捕捉“五彩斑斓的黑”:锗基短波红外相机的多种成像应用

红外处于人眼可观察范围以外,为我们了解未知领域提供了新的途径。红外又可以根据波段范围,分为短波红外、中波红外与长波红外。较短的SWIR波长——大约900nm-1700nm——与可见光范围内的光子表现相似。虽然在SWIR中目标的光谱含量不同,但所产…

Debezium发布历史51

原文地址: https://debezium.io/blog/2019/03/14/debezium-meets-quarkus/ 欢迎关注留言,我是收集整理小能手,工具翻译,仅供参考,笔芯笔芯. Debezium 遇见 Quarkus 三月 14, 2019 作者: Jiri Pechanec qu…