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

news2024/11/25 4:45:46

文章目录

    • 前言
    • 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.coloradmin.cn/o/1531462.html

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

相关文章

提升Java编程安全性-代码加密混淆工具的重要性和应用

在Java编程领域中,保护代码安全性和知识产权至关重要。本文旨在探讨代码加密混淆工具在提升代码安全性和保护知识产权方面的重要性。我们将介绍几款流行的Java代码加密混淆工具,如ProGuard、DexGuard、Jscrambler、DashO和ipaguard,并分析它们…

【RabbitMQ】【Docker】基于docker-compose构建rabbitmq容器

本文通过docker-compose构建一个单体的rabbtimq容器。 1,docker、docker-compose环境 首先需要有docker和docker-compose环境,docker安装[1],docker-compose安装[2]。 通过下列命令确定docker、docker-compose是否安装成功。 [root192 ge…

单片机LED灯闪烁

延时函数计算&#xff08;相关代码生成&#xff09;&#xff1a; #include "reg52.h" #include <INTRINS.H> void Delay500ms() //11.0592MHz {unsigned char i, j, k;_nop_();_nop_();i 22;j 3;k 227;do{do{while (--k);} while (--j);} while (--i); }vo…

利用Xinstall,实现安装页面快速拉起App,推广效果倍增!

在移动互联网时代&#xff0c;App推广已成为广告主和开发者的重要任务。然而&#xff0c;面对激烈的市场竞争&#xff0c;如何提升推广效率、洞悉推广效果并衡量广告ROI&#xff0c;成为摆在他们面前的难题。今天&#xff0c;我们将聚焦一个关键环节——安装页面拉起App&#x…

Grid数据增强算法

算法原理 class Grid(object):def __init__(self, d1, d2, rotate1, ratio0.5, mode0, prob0.8):self.d1 d1self.d2 d2self.rotate rotateself.ratio ratioself.mode modeself.st_prob self.prob probdef set_prob(self, epoch, max_epoch):self.prob self.st_prob …

Debezium vs OGG vs Tapdata:如何实时同步 Oracle 数据到 Kafka 消息队列?

随着信息时代的蓬勃发展&#xff0c;企业对实时数据处理的需求逐渐成为推动业务创新和发展的重要驱动力。在这个快速变化的环境中&#xff0c;许多企业选择将 Oracle 数据库同步到 Kafka&#xff0c;以满足日益增长的实时数据处理需求。本文将深入探讨这一趋势的背后原因&#…

Java并发基石ReentrantLock:深入解读其原理与实现

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 在Java的并发编程库中&#xff0c;ReentrantLock是一种非常重要的同步工具&#xff0c;它提供了一种比内置synchronized关键字更加…

基于ArcGIS等多技术融合提升环境、生态、水文、土地、农业、大气等领域科研技术应用

基于ArcGIS等多技术融合提升环境、生态、水文、土地、农业、大气等领域科研技术应用 原文链接https://mp.weixin.qq.com/s?__bizMzUyNzczMTI4Mg&mid2247667012&idx5&snd2c5af65851b06ff7ee14a744c16009e&chksmfa771279cd009b6f8beff1c61c6b3b73087bf93e7d440…

顺序表的动态分配基本操作

#include <stdio.h> #include <stdlib.h>// 顺序表存储空间动态分配 #define InitSize 10 // 顺序表初始长度 typedef int ElemType; // int类型重命名为ElemType&#xff0c;方便后续调整typedef struct { // 定义结构体ElemType *data; // 用静…

“垃圾不落地,捡跑来助力”学雷锋志愿服务暨党支部党日活动

指导思想 紧紧围绕建设和谐社会主题&#xff0c;以创建文明为契机&#xff0c;学习雷锋精神&#xff0c;为人民服务为宗旨&#xff0c;大力开展志愿捡跑活动&#xff0c;激发大家积极参与志愿活动的热情&#xff0c;大力弘扬奉献、友爱、互助、进步的志愿服务精神。 活动启动 …

维度建模理论之事实表

事实表概述 事实表作为数据仓库维度建模的核心&#xff0c;紧紧围绕着业务过程来设计。其包含与该业务过程有关的维度引用&#xff08;维度表外键&#xff09;以及该业务过程的度量&#xff08;通常是可累加的数字类型字段&#xff09;。 事实表特点 事实表通常比较“细长”…

N 皇后00

题目链接 N 皇后 题目描述 注意点 1 < n < 9 解答思路 首先想到的是使用深度优先遍历回溯找到所有的情况&#xff0c;基本思路是&#xff1a;逐行确定Q在该行的位置&#xff0c;且每一行Q都是从第0列到第n - 1列全部考虑&#xff0c;在确定Q在任意一行的某一列时&am…

Java集合Collection之LinkedList

LinkeList LinkedList&#xff08;双向链表&#xff09;是一种常见的线性数据结构&#xff0c;但是并不会按线性的顺序存储数据。它由一系列节点组成&#xff0c;每个节点包含数据部分和一个指向下一个节点的引用。相比于数组&#xff0c;链表具有动态大小、插入和删除效率高的…

练习实践-TLS协议01-Wireshark对https数据的解密

参考来源&#xff1a; https://zhuanlan.zhihu.com/p/36669377 https://blog.csdn.net/u010726042/article/details/53408077 思路&#xff1a; wireshark抓到的https流量包经过了ssl加密&#xff0c;那么我们如何才能查看解密的数据呢&#xff1f;Firefox和Chrome浏览器都支…

Godot 学习笔记(2):信号深入讲解

文章目录 前言相关链接环境信号简单项目搭建默认的信号先在label里面预制接收函数添加信号 自定义无参数信号为了做区分&#xff0c;我们在label新增一个函数 自定义带参数信号Button代码label代码连接信号 自定义复杂参数信号自定义GodotObject类ButtonLabel连接信号 父传子Ca…

国内超好用且免费的 AI 写作工具有哪些?

目前&#xff0c;市面上这类AI工具实在是太多了&#xff0c;比如依托于清华大学开发的智谱清言&#xff0c;或亦是百度的文心一言&#xff0c;还是阿里云的通义千问&#xff0c;这些AI工具在功能是类似的&#xff0c;但是依托于大模型的不同&#xff0c;可能回答的结果迥然不同…

基于springboot+vue的在线互动学习网站

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

(C语言)memcpy函数详解与模拟实现

目录 1. memcpy函数详解 情况一&#xff1a; 情况二&#xff1a; 情况三&#xff1a; 情况四&#xff1a; 情况五&#xff1a; 2. memcpy模拟实现 2.1 重叠情况的讨论&#xff1a; 2.2 memcpy函数超出我们的预期 1. memcpy函数详解 头文件<string.h> 这个函数和…

canoe 以太网配置

canoe vn5620 以太网配置 首先电脑连接上VN5620&#xff0c;配置了License才能进行端口设置 从开始菜单中打开Vector Hardware Configuration 进入到配置页面&#xff0c;会出现VN5620&#xff0c;选择进行右击&#xff0c;点击第一个选项Ethernet device configuration ca…

Open World Object Detection in the Era of Foundation Models

Open World Object Detection in the Era of Foundation Models 摘要介绍相关工作开放词汇物体检测开放世界目标检测类无关的目标检测3.真实世界目标检测基准3.1 数据集细节3.2 基准架构3.3 什么是一个未知对象4. 利用基准模型用于开放世界目标检测4.1 背景4.2 属性生成4.3 属性…