【cpolar】Ubuntu本地快速搭建web小游戏网站,公网用户远程访问

简介: 【cpolar】Ubuntu本地快速搭建web小游戏网站,公网用户远程访问

前言


网:我们通常说的是互联网;站:可以理解成在互联网上的一个房子。把互联网看做一个城市,城市里面的每一个房子就是一个站点,房子里面放着你的资源,那如果有人想要访问你房子里面的东西怎么办?

在现实生活中,去别人家首先要知道别人的地址,某某区某某街道,几号,在互联网中也有地址的概念,就是ip。通过ip我们就能找到在互联网上面的站点,端口可以看做是这个房子的入口,不同的入口所看到的东西也就不一样,如从大门(80端口)进是客厅,从窗户(8080端口)进是书房。

接下来我们将通过简单几步来在ubuntu搭建一个web站点 html小游戏,并使用cpolar内网穿透将其发布到公网上,使得公网用户也可以正常访问到本地web站点的小游戏。

 

1. 本地环境服务搭建

apach2是一个服务,也可以看做一个容器,也就是上面说的房子,运行在ubuntu里,这个服务可以帮助我们把我们自己的网站页面通过相应的端口让除本机以外的其他电脑访问。

下载apach2

sudo apt install apache2 php -y



下载好后启动apache2

sudo service apache2 restart


然后打开Ubuntu 浏览器,输入:http://localhost 即可看到我们apache 默认的页面,此时说明本地站点已经搭建好了。

然后打开Ubuntu 浏览器,输入:http://localhost 即可看到我们apache 默认的页面,此时说明本地站点已经搭建好了。

进入Apache默认服务器主目录路径,这个目录放的是想要让别人看到的资源,如一张图片,一个html页面等

cd /var/www/html


进入后删掉index.html这个文件,由于apache默认页面并不是我们自己想要的页面,我们想要换成自己喜欢的页面,所以需要删掉.执行以下命令:

sudo rm -rf index.html


为了达到测试效果,我们设置一个html页面小游戏,创建名称为game.html的页面

sudo vim game.html


i键 进入编辑模式,复制以下html代码进去(复制全部)

1. <!DOCTYPE html>
2. <html>
3. <head><h4>Take it Easy!Please playing Game</h4></head>
4. <body>
5. <div></div>
6. <!-- 4个board -->
7. <div id="board1" style="position: absolute; width:80px; height:10px; left:420px; 
8.         top:555px; background-color: cadetblue;"></div>
9. <div id="board2" style="position: absolute; width:80px; height:10px; left:520px; 
10.         top:555px; background-color: cadetblue;"></div>
11. <div id="board3" style="position: absolute; width:80px; height:10px; left:620px; 
12.         top:555px; background-color: cadetblue;"></div>
13. <div id="board4" style="position: absolute; width:80px; height:10px; left:720px; 
14.         top:555px; background-color: cadetblue;"></div>
15. <!-- 小球 -->
16. <div id="ball" class="circle" style="width:20px; 
17.         height:20px; background-color:crimson; border-radius: 50%; position:absolute; 
18.         left:600px; top:100px"></div>
19. <!-- 框 -->
20. <div id="box" style="border: 5px solid #555555; width:400px; height:550px; display=hide"></div>
21. <!-- 分数 过的board越多,分数越高 -->
22. <div id="score" style="width:200px; height:10px; position:absolute; left:900px; 
23.             font-family:'隶书'; font-size: 30px;">score: 0</div>
24. <!-- 游戏结束 -->
25. <div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
26.         font-family:'隶书'; font-size: 30px; display: none;">Game Over</div>
27. <script>
28. // 设置box的样式
29.             var box = document.getElementById("box");
30.             box.style.position = "absolute";
31.             box.style.left = "400px";
32. // 设置board的样式
33.             var board1 = document.getElementById("board1");
34.             var board2 = document.getElementById("board2");
35.             var board3 = document.getElementById("board3");
36.             var board4 = document.getElementById("board4");
37. // 声音
38.             var shengyin = new Audio();
39.             shengyin.src = "声音2.mp3";
40.             shengyinFlag = 0; // 用来表示小球在第几块board上
41. // 键盘事件函数
42.             var ball = document.getElementById("ball");
43.             document.onkeydown = f;
44. function f(e){
45.                 var e = e || window.event;
46.                 switch(e.keyCode){
47.                     case 37:
48. // 按下左键,小球左移,但不要超过左边框
49. if(ball.offsetLeft>=box.offsetLeft + 10)
50.                             ball.style.left = ball.offsetLeft - 8 + "px";
51.                         break;
52.                     case 39:
53. // 按下右键,小球右移,但不要超过由边框
54. if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
55.                             ball.style.left = ball.offsetLeft + 8 + "px";
56.                         break;
57.                     case 32:
58. 
59.                 }
60.             }
61. // 定义一个分数变量
62.             var fenshu = 0;
63. // 定义一个函数,移动给定的一个board
64. function moveBoard(board)
65.             {
66.                 var t1 = board.offsetTop;
67. if(t1<=0)
68.                 {
69. // 如果board移到最上面了,就随机换个水平位置,再移到最下面
70.                     t2 = Math.floor(Math.random() * (720- 420) + 420);
71.                     board.style.left = t2 + "px";
72.                     board.style.top = "555px";
73.                     fenshu += 1; //分数增加1
74.                     document.getElementById("score").innerHTML = "score " + fenshu;
75.                 }
76. //
77. else
78.                     board.style.top = board.offsetTop - 1 + "px";
79.             }
80. // 定义小球的速度变量
81.             var startSpeed = 1;
82.             var ballSpeed =startSpeed;
83. // step函数是游戏界面的单位变化函数
84. function step()
85.             {
86. // board直接上下隔得太近,就逐个移动,否则,同时移动
87.                 var t1 = Math.abs(board1.offsetTop - board2.offsetTop);
88.                 var t2 = Math.abs(board2.offsetTop - board3.offsetTop);
89.                 var t3 = Math.abs(board3.offsetTop - board4.offsetTop);
90. // 定义一个board之间的间隔距离
91.                 var t4 = 140;
92. if(t1<t4)
93.                 {
94.                     moveBoard(board1);
95.                 }
96. else if(t2<t4)
97.                 {
98.                     moveBoard(board1);
99.                     moveBoard(board2);
100.                 }
101. else if(t3<t4)
102.                 {
103.                     moveBoard(board1);
104.                     moveBoard(board2);
105.                     moveBoard(board3);
106.                 }
107. else
108.                 {
109.                     moveBoard(board1);
110.                     moveBoard(board2);
111.                     moveBoard(board3);
112.                     moveBoard(board4);
113.                 }
114. // 定义小球的垂直移动规则,1、向下匀加速运动,2、如果碰到board就被board持续抬上去,
115. // 直到按左右键离开了该board
116. 
117. // 如果小球的纵坐标等于某个board的纵坐标,就被抬起
118.                 var t5 = Math.abs(ball.offsetTop - board1.offsetTop);
119.                 var t6 = Math.abs(ball.offsetTop - board2.offsetTop);
120.                 var t7 = Math.abs(ball.offsetTop - board3.offsetTop);
121.                 var t8 = Math.abs(ball.offsetTop - board4.offsetTop);
122. if(t5<=ball.offsetHeight && t5>0 && ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
123.                 {
124.                     ball.style.top = board1.offsetTop - ball.offsetHeight + "px";
125.                     ballSpeed = startSpeed;
126. if(shengyinFlag != 1)
127.                     {
128.                         shengyin.play();
129.                         shengyinFlag = 1;
130.                     }
131.                 }
132. else if(t6<=ball.offsetHeight && t6>0 && ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
133.                 {
134.                     ball.style.top = board2.offsetTop - ball.offsetHeight + "px";
135.                     ballSpeed = startSpeed;
136. if(shengyinFlag != 2)
137.                     {
138.                         shengyin.play();
139.                         shengyinFlag = 2;
140.                     }
141.                 }
142. else if(t7<=ball.offsetHeight && t7>0 && ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
143.                 {
144.                     ball.style.top = board3.offsetTop - ball.offsetHeight + "px";
145.                     ballSpeed = startSpeed;
146. if(shengyinFlag != 3)
147.                     {
148.                         shengyin.play();
149.                         shengyinFlag = 3;
150.                     }
151.                 }
152. else if(t8<=ball.offsetHeight && t8>0 && ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
153.                 {
154.                     ball.style.top = board4.offsetTop - ball.offsetHeight + "px";
155.                     ballSpeed = startSpeed;
156. if(shengyinFlag != 4)
157.                     {   
158.                         shengyin.play();
159.                         shengyinFlag = 4;
160.                     }
161.                 }
162. else
163.                 {
164.                     ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
165.                     ball.style.top = ball.offsetTop + ballSpeed + "px";
166.                 }
167. // ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
168. // ball.style.top = ball.offsetTop + ballSpeed + "px";
169. 
170. // 如果小球跑出来box,就结束游戏
171. if(ball.offsetTop==0 || ball.offsetTop>=box.offsetTop+box.offsetHeight)
172.                 {
173.                     clearInterval(gameover);
174.                     ball.style.display = 'none';
175.                     board1.style.display = 'none';
176.                     board2.style.display = 'none';
177.                     board3.style.display = 'none';
178.                     board4.style.display = 'none';
179.                     var gg = document.getElementById("gg"); //显示游戏结束
180.                     gg.style.display = 'block';
181.                 }
182.             }
183. 
184.             var gameover = setInterval("step();", 8);
185. </script>
186. </body>
187. </html>


复制完后按Esc键退出编辑,接着输入冒号:wq保存退出即可


2. 局域网测试访问

接着浏览器输入http://localhost/game.html,即可看到html页面的小游戏站点,由于部署的是静态站点,不需要重启服务。


3. 内网穿透

由于这个站点目前只能在本地被访问到,为了使所有人都可以访问,我们需要将这个本地基础站点发布到公网。这里我们可以通过cpolar内网穿透工具来实现,它支持 http/https/tcp协议,无需公网IP ,也不用设置路由器,可以很容易将本地站点发布到公网供所有人访问。

3.1 ubuntu本地安装cpolar

如何在ubuntu上安装cpolar内网穿透,请参考这篇文章教程


3.2 创建隧道

cpolar安装成功之后,在浏览器上访问本地9200端口,登录cpolar web UI管理界面。

点击左侧仪表盘的隧道管理——创建隧道:

  • 隧道名称:可自定义,注意不要重复
  • 协议:http
  • 本地地址:80
  • 端口类型:随机域名
  • 地区:China vip

点击创建

隧道创建成功后,点击左侧的状态——在线隧道列表,可以看到刚刚创建的隧道已经有生成了相应的公网地址,将其复制下来,接下来测试访问一下。


3.3 测试公网访问

打开浏览器访问刚刚所复制的公网地址,注意,后面要加上路径/game.html,出现游戏界面即成功。

游戏控制使用:键盘上下左右键


4. 配置固定二级子域名

由于以上所创建的隧道选择的是随机域名,所生成的公网地址会在24小时内随机变化,对于需要长期访问的用户来讲较为不方便。不过我们可以为其配置一个固定的二级子域名来进行访问,改地址不会随机变化。

注意:配置固定二级子域名功能需要升级至基础版套餐或以上才支持。


4.1 保留一个二级子域名

登录cpolar官网后台,点击左侧的预留,找到保留二级子域名:

  • 地区:选择China VIP
  • 二级域名:可自定义填写
  • 描述:即备注,可自定义填写

点击保留

提示子域名保留成功,复制所保留的二级子域名


4.2 配置二级子域名

访问本地9200端口登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名,本例为test01

点击更新

提示更新隧道成功,点击左侧仪表盘的状态——在线隧道列表,可以看到公网地址已经更新为保留成功的二级子域名,将其复制下来。


4.3 测试访问公网固定二级子域名

我们使用任意浏览器,输入刚刚配置成功的公网固定二级子域名+/game.html就可看到我们创建的站点小游戏了,且该地址不会再随机变化了。

目录
相关文章
|
6月前
|
安全 大数据 数据挖掘
课时9:阿里云Web应用防火墙:全面保障网站的安全与可用性
阿里云Web应用防火墙(WAF)基于阿里巴巴十年攻防经验,提供全面的网站安全防护。它通过Web应用防护、CC攻击防护和业务风控,有效应对各类网络威胁,确保网站的安全与可用性。智能双引擎技术降低误报率,实时数据分析和虚拟补丁更新保障系统安全。WAF已成功护航多个重大活动,为企业提供高效、简便的安全解决方案。
153 0
|
11月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
333 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
10月前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
131 1
|
11月前
|
存储 Kubernetes 负载均衡
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
186 1
|
11月前
|
负载均衡 应用服务中间件 nginx
基于Ubuntu-22.04安装K8s-v1.28.2实验(二)使用kube-vip实现集群VIP访问
基于Ubuntu-22.04安装K8s-v1.28.2实验(二)使用kube-vip实现集群VIP访问
314 1
WK
|
10月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
376 0
|
前端开发 安全 JavaScript
PHP与现代Web开发:探索PHP在构建动态网站中的角色和优势
【8月更文挑战第29天】 在数字时代的浪潮下,PHP以其独特的灵活性、易用性以及强大的社区支持,持续成为Web开发领域的重要力量。本文将深入探讨PHP如何适应现代Web开发的需求,通过具体示例揭示PHP的实际应用,并分析其在面对新兴技术挑战时的应对策略。我们将一探究竟,PHP如何在众多编程语言中脱颖而出,成为许多开发者和企业的首选。
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
11月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
615 3
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1187 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!

热门文章

最新文章