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.mfbz.cn/a/372454.html

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

相关文章

springboot157基于springboot的线上辅导班系统的开发与设计

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

fastapi 链接数据库,并报错问题

还有一个重点需要下载 pip install sqlalchemy -i https://pypi.tuna.tsinghua.edu.cn/simple pip install pymysql -i https://pypi.tuna.tsinghua.edu.cn/simplefrom fastapi import FastAPI import uvicorn from student.urls import student_id_mysql from sqlalchemy …

【sentinel流量卫兵配置持久化到Nacos】

sentinel流量卫兵配置持久化到Nacos 概述: 一、添加配置二、配置说明限流规则配置:降级规则配置:热点规则配置:授权规则配置:系统规则配置: 三、服务整合 概述: 控制台配置的参数,默…

2024/2/4学习记录

微信小程序 网络数据请求 出于安全性方面的考虑,小程序官方对数据接口得请求做出了俩个限制 只能对 https 类型的接口必须将接口的域名添加到信任列表中 需要去这里设置 域名只支持 https 协议域名不能使用 ip 地址 或者localhost域名必须经过 ICP 备案 服务器域…

【C++】基础语法:深浅拷贝

前言 在学习拷贝构造函数的时候遇到了深浅拷贝这个知识点 就写篇文章记录一下 (引用的部分不用太在意 是查的 (需要前提知识:知道默认拷贝构造函数是什么 知道默认拷贝构造函数和构造函数的关系、知道析构函数的写法和用处 浅拷贝 浅拷贝&…

周报(20240204)

日期:2024.1.29 - 2024.2.4 本周工作: 1. 阅读论文 本周主要对这篇文献进行了阅读: 《用可学习的跳跃连接缩小U-Net中的语义差距:以医学图像分割为例》 背景 医学图像分割和随后对目标对象的定量评估为疾病诊断和治疗规划提…

在Vue中如何动态绑定class和style属性

在Vue中,动态绑定class和style属性是我们经常遇到的需求。这个功能允许我们根据不同的条件来动态改变元素的样式,让我们的应用更加灵活和富有交互性。在本篇博客文章中,我将带你深入探索在Vue中如何实现这一功能。 首先,让我们了…

c++中使用ifstream对文件按照行间隔或者符号间隔来读取

简单的文本存取与读取在的程序中是比较常见的,一般为了读取的时候便于区分数据,我们常常会用空格或者空行来隔开数据字段,所以对于读取文件的操作我们肯定会有些具体的需求比如按照行读取或者按照词来读取(或者说是以空格来间隔数…

函数调用栈是什么

今天在力扣leetbook上看《图解算法数据结构》中的空间复杂度这一小节,看到如下这句话: “程序调用函数是基于栈实现的,函数在调用期间,占用常量大小的栈帧空间,直至返回后释放。” 这句话的意思是,在程序中…

SQL必知必会笔记(13~16章)

第十三章 创建高级联结 1、别名:缩短SQL语句,允许在一条Select语句中多次使用相同的表 SELECT A.Name, A.Maths, A.English FROM transcript AS A INNER JOIN student_id As B ON A.Name B.Name; 2、Oracle数据库中没有AS关键字,直接在表名或…

【计算机学院寒假社会实践】——服务走进社区,共绘幸福蓝图

为深入贯彻落实志愿者服务精神,扎实推进志愿者服务质量,2024年1月28日,曲阜师范大学计算机学院“青年扎根基层,服务走进社区”社会实践队队员周兴睿在孙宇老师的指导下,来到山东省滨州市陈集街道社区开展了为期一天的“…

Unity_ShaderGraph节点问题

Unity_ShaderGraph节点问题 Unity版本:Unity2023.1.19 为什么在Unity2023.1.19的Shader Graph中找不见PBR Master节点? 以下这个PBR Maste从何而来?

MQ,RabbitMQ,SpringAMQP的原理与实操

MQ 同步通信 异步通信 事件驱动优势: 服务解耦 性能提升,吞吐量提高 服务没有强依赖,不担心级联失败问题 流量消峰 ​ 小结: 大多情况对时效性要求较高,所有大多数时间用同步。而如果不需要对方的结果,且吞吐…

Zookeeper相关面试准备问题

Zookeeper介绍 Zookeeper从设计模式角度来理解,是一个基于观察者模式设计的分布式服务管理框架,它负责存储和管理大家都关心的数据,然后接受观察者的注册,一旦这些数据的状态发生了变化,Zookeeper就负责通知已经在Zoo…

SpringAOP+SpringBoot事务管理

项目搭建SpringAOPSpringBoot中管理事务AOP案例实战-日志记录日志系统 一、项目搭建 第一步:构建项目 第二步:导入依赖 第三步:配置信息 自动配置(项目自动生成的启动类) /*** 启动类:申明当前类是一个…

模拟被观察物体的位置和方向

开发环境: Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example demo解决问题:模拟被观察物体的位置和方向,以帮助用户理解相机在观察特定对象时的位置和朝向。vtkCameraOrientationWidget 模拟的是被观察…

Redis核心技术与实战【学习笔记】 - 17.Redis 缓存异常:缓存雪崩、击穿、穿透

概述 Redis 的缓存异常问题,除了数据不一致问题外,还会面临其他三个问题,分别是缓存雪崩、缓存击穿、缓存穿透。这三个问题,一旦发生,会导致大量的请求积压到数据库。若并发量很大,就会导致数据库宕机或故…

九州金榜|如何做好家庭教育

孩子的家庭教育是每个家庭都要做的,也是每个家长面临的事情,同样不同的家庭教育教育出来的孩子性格也各不相同,有时候家长看别别人家的孩子品学兼优非常羡慕,很多家长会把问题归结到孩子身上,其实有没有想过是家庭教育…

C++之函数重载,默认参数,bool类型,inline函数,异常安全

函数重载 在实际开发中,有时候需要实现几个功能类似的函数,只是细节有所不同。如交换两个变量的值,但这两种变量可以有多种类型,short, int, float等。在C语言中,必须要设计出不同名的函数,其原型类似于&am…

【新书推荐】6.2节 段寄存器

在16位汇编语言的源程序中,我们将源程序按照不同的功能和作用划分为若干个逻辑段,如数据段用来存储数据,代码段用来存储代码,堆栈段用来保存临时数据,附加段用来拷贝数据。我们可以把汇编语言的源程序抽象地理解为数据…
最新文章