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

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

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

相关文章

【nodejs升级版本】win10 nodejs版本低升级版本流程

首先 网上说的n模块不支持window系统!!! window系统升级node只能到node官网下载window安装包来覆盖之前的node 升级步骤如下: 1,找到你node的安装路径,不知道的可以cmd命令行中输入这个命令就可以看到了…

Python:核心知识点整理大全13-笔记

目录 6.4.3 在字典中存储字典 6.5 小结 第7章 用户输入和while循环 7.1 函数 input()的工作原理 7.1.1 编写清晰的程序 7.1.2 使用 int()来获取数值输入 7.1.3 求模运算符 7.1.4 在 Python 2.7 中获取输入 7.2 while 循环简介 7.2.1 使用 while 循环 往期快速传送门…

jsonpath:使用Python处理JSON数据

使用Python处理JSON数据 25.1 JSON简介 25.1.1 什么是JSON JSON全称为JavaScript Object Notation,一般翻译为JS标记,是一种轻量级的数据交换格式。是基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清…

中国教师未来发展趋势

随着科技的进步和社会的发展,教师的发展趋势尤其引人关注。那么,教师未来的发展趋势又将是什么呢?” 引领未来的教育变革 在快速发展的信息化社会,教育行业正经历着前所未有的变革。中国教师将扮演着引领这场变革的重要角色。未来…

教培管理系统源码 培训管理系统源码

教培管理系统源码 培训管理系统源码 使用教培管理系统可以带来哪些好处: 1. 提高管理效率:教培管理系统可以自动化处理许多管理任务,如学生信息管理、课程管理、成绩管理等,从而减少人工干预,提高管理效率。 2. 提…

Nodejs后端+express框架

前言 基于vue3Node后台管理项目,补充nodejs和express相关知识。 文章目录 一,express 1.官网 Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 2.安装 npm install express --save 二、MongoDB 特点 非关…

3D摄影棚布光:Set A Light 3D Studio

Set A Light 3D Studio是一款专业的灯光模拟软件,旨在帮助摄影师和电影制片人在电脑上进行虚拟灯光布置和场景模拟,以实现更加精准和高质量的拍摄效果。该软件提供了丰富的灯光和场景模型,支持灵活调整光源位置、强度、颜色和效果等参数&…

stm32学习:stm32f103c8t6+STM32CubeMX+st-link烧录+亮灯

准备材料: stm32f103c8t6开发板st-link烧录器安装stm32cubemx(官网下载就行)安装keil5(找找网上有很多破解软件,下载后破解)安装st-link驱动(下载入口STSW-LINK009 - 为Windows 7、Windows 8、Windows 10签署的ST-LIN…

基于深度学习的yolov7植物病虫害识别及防治系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介简介YOLOv7 系统特性工作流程 二、功能三、系统四. 总结 一项目简介 # YOLOv7植物病虫害识别及防治系统介绍 简介 该系统基于深度学习技术,采…

python+pytest接口自动化(13)-token关联登录

在PC端登录公司的后台管理系统或在手机上登录某个APP时,经常会发现登录成功后,返回参数中会包含token,它的值为一段较长的字符串,而后续去请求的请求头中都需要带上这个token作为参数,否则就提示需要先登录。 这其实就…

ArkUI Button组件

Button 1.声明button组件 Button(label?:ResourceStr) label是按钮上面显示的文字 如果不传入label 则需要在内部嵌套其他组件 内部嵌套其他组件 可以放入icon图标来构建自己想要的样式 按钮类型 按钮使用type(ButtonType.xxx)属性来设置,xxx的类型分为三种 1.…

想知道修改图片dpi会影响清晰度吗?点击这里找答案

很多人都对图片dpi分辨率有不少疑问,比如dpi对图片清晰的影响,还有哪些地方需要修改图片dpi?其实dpi是指每英寸墨点的数量。对同一张图像来说,一般使用300dpi比使用72dpi打印出来的效果要清晰很多 ,一般只有在打印照片或者上传证件…

pip指定优先从豆瓣源下载包

对于 Unix/macOS 系统,使用以下命令: pip config set global.index-url https://pypi.douban.com/simple/ 对于 Windows 系统,打开命令提示符或PowerShell,并使用相同的命令: pip config set global.index-url http…

Unity中实现ShaderToy卡通火(一)

文章目录 前言一、准备好我们的后处理基础脚本1、C#:2、Shader: 二、开始逐语句对ShaderToy进行转化1、首先,找到我们的主函数 mainImage2、其余的方法全部都是在 mainImage 函数中调用的方法3、替换后的代码(已经没报错了,都是效…

渲染技术在虚拟仿真中的应用

虚拟仿真(Virtual Reality)是一种仿真技术,它使用计算机生成一个虚拟世界,用户可以通过各种传感通道与这个虚拟世界进行自然的交互。虚拟仿真技术可以创建和体验虚拟世界,使用户可以像在真实世界中一样进行操作和体验。…

Python将字典列表导出为Excel文件的方法

将如下的字典列表内容导出为Excel表格文件形式: python将字典列表导出为Excel文件的方法,如下所示: 1、安装python官方Excel库------xlwt 直接在终端进行安装即可:pip install xlwt 安装完成后,在程序中引入xlwt的库…

ke14--10章-1数据库JDBC介绍

注册数据库(两种方式),获取连接,通过Connection对象获取Statement对象,使用Statement执行SQL语句。操作ResultSet结果集 ,回收数据库资源. 需要语句: 1Class.forName("DriverName");2Connection conn DriverManager.getConnection(String url, String user, String…

CGAN笔记总结第二弹~

CGAN原理与源码分析 一、复习GAN1.1损失函数1.2判别器源码1.3 生成器源码 二、什么是CGAN?2.1 CGAN原理图2.2条件GAN的损失函数2.3 生成器源码2.4 判别器源码2.5 训练过程1)这里的训练顺序2)为什么先训练判别器后训练生成器呢? 2.…

Python学习笔记-类

1 定义类 类是函数的集合,class来定义类 pass并没有实际含义,只是为了代码能执行通过,不报错而已,相当于在代码种占一个位置,后续完善 类是对象的加工厂 2.创建对象 carCar()即是创建对象的过程 3、类的成员 3.1 实例…

PC 机与单片机通信(RS232 协议)

PC 机与单片机通信(RS232 协议) 目录: 1、单片机串口通信的应用 2、PC控制单片机IO口输出 3、单片机控制实训指导及综合应用实例 4、单片机给计算机发送数据: [实验任务] 单片机串口通信的应用,通过串口,我们的个人电脑和单…