如何在Windows系统使用VS Code制作游戏网页并实现无公网IP远程访问

文章目录

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

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

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

相关文章

YZ系列工具之YZ08:窗体加载图片后进行放大查看

我给VBA下的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。我的教程一共九套一部VBA手册,教程分为初级、中级、高级三大部分。是对VBA的系统讲解,从简单的…

Linux学习总结下

vim\vi编辑器 什么是vi\vim编辑器? 1、vi、vim编辑器,就是命令模式下的文本编辑器,用来编辑文件 2、vim是vi的升级版,一般用vim即可,包含vi所有功能 基础命令? vi 文件路径 vim 文件路径 运行模式 …

二、yocto 集成ros2(基于raspberrypi 4B)

yocto 集成ros2 yocto 集成ros21. 下载ros layer2. 编译集成ros3. 功能验证 yocto 集成ros2 本篇文章为基于raspberrypi 4B单板的yocto实战系列的第二篇文章。 一、yocto 编译raspberrypi 4B并启动 本节我们将ros2机器人操作系统移植到我们的yocto系统里面。 1. 下载ros laye…

LLM如何处理长上下文:Lost in the middle

论文地址:Lost in the Middle: How Language Models Use Long Contexts 论文总结:写prompt的时候,需要注意内容的顺序,把重要的信息放在最前面或者最后面。 大型语言模型大有用处,在设计 prompt 方面,人们…

当OKR无法按时完成或达成时,应如何进行调整?

在企业管理中,OKR(Objectives and Key Results,目标与关键成果)作为一种有效的管理工具,被广泛用于设定和跟踪目标。然而,在实际执行过程中,OKR无法按时完成或达成的情况时有发生。面对这种情况…

IO多分复用

#include<myhead.h> #define SER_PORT 8888 //服务器端口号 #define SER_IP "192.168.65.131" //服务器IPint main(int argc, const char *argv[]) {//1、创建一个套接字int sfd -1;sfd socket(AF_INET, SOCK_STREAM, 0); //参数1&#xff1a;…

高效快捷的快递查询助手,让您随时随地掌握包裹最新状态

面对一堆快递单号&#xff0c;您是否还在手忙脚乱地逐个复制粘贴到网上查询物流信息&#xff1f;是否还在为如何保存查询好的物流信息而犯愁&#xff1f;别担心&#xff0c;固乔快递查询助手来帮您解决这些烦恼&#xff01; 固乔快递查询助手是一款功能强大的快递单号查询与管理…

【Linux Day17 Libevent库】

Libevent 1.介绍 Libevent 是一个轻量级的开源高性能网络库&#xff0c;有几个显著的亮点&#xff1a; 事件驱动&#xff08;event-driven&#xff09;&#xff0c;高性能;轻量级&#xff0c;专注于网络&#xff0c;不如 ACE 那么臃肿庞大&#xff1b;线程安全。Libevent 使…

Java IO流之Netty实现聊天通信功能

文章目录 1 Netty1.1 概要设计1.1.1 技术选型1.1.2 数据库设计1.1.3 通信设计1.1.3.1 报文协议格式1.1.3.2 报文交互场景 1.2 Netty简单示例1.2.1 pom.xml1.2.2 发送和接收1.2.3 示例说明1.2.3.1 线程阻塞问题1.2.3.2 服务端和接收端 EventLoopGroup 1.3 Netty中handler概述1.4…

python中字典相关知识点总结

1.字典的定义 字典&#xff1a;在Python中&#xff0c;字典是一系列键-值对。每个键都与一个值相关联&#xff0c;程序员可以通过键来访问与之相关联的值。 实际举例&#xff1a; student{name:xincun,age:18} 通过实例我们可以发现&#xff0c;键-值对是两个相关联的值。指…

Qualcomm AI Hub-示例(二)模型性能分析

文章介绍 模型性能分析&#xff08;Profiling&#xff09; 当模型尝试部署到设备时&#xff0c;会面临许多重要问题&#xff1a; 目标硬件的推理延迟是多少&#xff1f;该模型是否符合一定的内存预算&#xff1f;模型能够利用神经处理单元吗&#xff1f; 通过在云端的物理设…

邮件客户端 Thunderbird 简单配置

1. 基本情况介绍 原来使用的邮箱客户端是 Office 365 自带的 Outlook 365切换原因&#xff1a;新装电脑&#xff0c;发现原 Outlook 中的账号信息无法迁移&#xff0c;需要耗费大量时间手动配置邮箱使用的邮箱&#xff1a;微软 O365 邮箱、qq 邮箱、163 邮箱、公司私有邮箱 …

【计算机网络篇】计算机网络的定义和分类

文章目录 &#x1f354;什么是计算机网络&#x1f5c3;️计算机网络的分类⭐按交换方式分类⭐按使用者分类⭐按传输介质分类⭐按覆盖范围分类⭐按拓扑结构分类 &#x1f6f8;小结 &#x1f354;什么是计算机网络 计算机网络是指将多台计算机或其他网络设备通过通信链路连接起来…

55、服务攻防——数据库安全RedisHadoopMysql未授权访问RCE

文章目录 常见服务应用的安全测试&#xff1a; 配置不当——未授权访问安全机制——特定安全漏洞安全机制——弱口令爆破攻击 应用服务安全测试流程&#xff1a; 判断服务开放情况——端口扫描&组合猜解等 端口扫描&#xff1a;服务开放&#xff0c;绑定端口没开放&#…

关于继承是怎么样的?那当然是很好理解之

本文描述了关于继承的大部分知识&#xff0c;但是并不全&#xff0c;每篇博客之间的知识都有互串&#xff0c;所以需要把几篇文章合起来看&#xff0c;学会融会贯通&#xff01; 温馨提示&#xff1a;使用PC端观看&#xff0c;效果更佳&#xff01; 目录 1.继承是什么 2.什…

es 聚合操作(一)

前言 Elasticsearch除搜索以外&#xff0c;提供了针对ES 数据进行统计分析的功能。聚合(aggregations)可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 衣服品牌的受欢迎程度这些衣服的平均价格、最高价格、最低价格这些衣服的每天、每月销量如何 使用…

Bito插件

此文档只作用于指导性工作&#xff0c;更多资料请自行探索。 1、插件安装与介绍 1.1 插件下载与安装 在idea中搜索&#xff1a;Bito Bito is also available for:​编辑VSCode​编辑JetBrains​编辑CLI 1.2 官方介绍 插件&#xff1a;ChatGPT GPT-4 - Bito AI Code Assista…

LTD267次升级 | 商城升级线下退款功能 • 内容URL生成高清二维码 • 官微名片展示产品视频

1、商城优化退款功能&#xff0c;支持手动退款&#xff1b; 2、内容生成二维码支持高清分辨率&#xff1b; 3、平台版名片小程序产品橱窗支持视频内容&#xff1b; 4、 其他已知问题修复与优化&#xff1b; 01 商城 在本次升级中&#xff0c;我们对商城的退款功能做了改进与…

首席财务官期刊投稿邮箱

《首席财务官》杂志是由国家新闻出版总署批准的金融类期刊。杂志围绕“打造CFO新定义”而展开&#xff0c;定位于“国内国内第一本公开发行的面向CFO人群提供服务的专业资讯媒体”&#xff0c;核心围绕“竞争、资本、运营”三大要点展开&#xff0c;以CFO视角解读“公司金融&am…

Python的内建比较函数cmp比较原理剖析

Python中的cmp()函数用于比较两个对象的大小。 cmp( x, y)&#xff1a;比较2个对象&#xff0c;前者小于后者返回-1&#xff0c;相等则返回0&#xff0c;大于后者返回1. Python的cmp比较函数比较原理 Python的cmp函数可以比较同类型之间&#xff0c;或者不同数据类型之间。然…