Article directory
Preface
Net: we usually talk about the Internet; website: can be understood as a house on the Internet. Think of the Internet as a city. Every house in the city is a site, and your resources are stored in the house. So what if someone wants to access the things in your house?
In real life, when going to someone else's home, you first need to know their address, such-and-such a street in a certain district, and its number. In the Internet, there is also the concept of an address, which is IP. We can find sites on the Internet through IP. The port can be regarded as the entrance to the house. Different entrances will see different things. For example, entering from the door (80 port) is the living room, entering from the window (8080) Port) is the study room.
Next, we will build a web site HTML game on Ubuntu through a few simple steps, and use cpolar intranet penetration to publish it to the public network, so that public network users can also access the local web site game normally.
1. Local environment service construction
apach2 is a service, which can also be seen as a container, which is the house mentioned above, running in ubuntu. This service can help us make our own website pages accessible to other computers besides this machine through the corresponding ports.
Download apach2
sudo apt install apache2 php -y
After downloading, start apache2
sudo service apache2 restart
Then open the Ubuntu browser and enter: http://localhost to see our apache default page. This means that the local site has been set up.
Enter the Apache default server home directory path. This directory contains resources that you want others to see, such as a picture, an html page, etc.
cd /var/www/html
After entering, delete the index.html file. Since the default page of apache is not the page we want, we want to change it to the page we like, so we need to delete it. Execute the following command:
sudo rm -rf index.html
In order to achieve the test effect, we set up an html page mini-game and create game.htmla page named
sudo vim game.html
Press the buttoni to enter editing mode and copy the following html code into it (copy all)
<!DOCTYPE html>
<html>
<head><h4>Take it Easy!Please playing Game</h4></head>
<body>
<div></div>
<!-- 4个board -->
<div id="board1" style="position: absolute; width:80px; height:10px; left:420px;
top:555px; background-color: cadetblue;"></div>
<div id="board2" style="position: absolute; width:80px; height:10px; left:520px;
top:555px; background-color: cadetblue;"></div>
<div id="board3" style="position: absolute; width:80px; height:10px; left:620px;
top:555px; background-color: cadetblue;"></div>
<div id="board4" style="position: absolute; width:80px; height:10px; left:720px;
top:555px; background-color: cadetblue;"></div>
<!-- 小球 -->
<div id="ball" class="circle" style="width:20px;
height:20px; background-color:crimson; border-radius: 50%; position:absolute;
left:600px; top:100px"></div>
<!-- 框 -->
<div id="box" style="border: 5px solid #555555; width:400px; height:550px; display=hide"></div>
<!-- 分数 过的board越多，分数越高 -->
<div id="score" style="width:200px; height:10px; position:absolute; left:900px;
font-family:'隶书'; font-size: 30px;">score: 0</div>
<!-- 游戏结束 -->
<div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
font-family:'隶书'; font-size: 30px; display: none;">Game Over</div>
<script>
// 设置box的样式
var box = document.getElementById("box");
box.style.position = "absolute";
box.style.left = "400px";
// 设置board的样式
var board1 = document.getElementById("board1");
var board2 = document.getElementById("board2");
var board3 = document.getElementById("board3");
var board4 = document.getElementById("board4");
// 声音
var shengyin = new Audio();
shengyin.src = "声音2.mp3";
shengyinFlag = 0; // 用来表示小球在第几块board上
// 键盘事件函数
var ball = document.getElementById("ball");
document.onkeydown = f;
function f(e){
var e = e || window.event;
switch(e.keyCode){
case 37:
// 按下左键，小球左移，但不要超过左边框
if(ball.offsetLeft>=box.offsetLeft + 10)
ball.style.left = ball.offsetLeft - 8 + "px";
break;
case 39:
// 按下右键，小球右移，但不要超过由边框
if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
ball.style.left = ball.offsetLeft + 8 + "px";
break;
case 32:
}
}
// 定义一个分数变量
var fenshu = 0;
// 定义一个函数，移动给定的一个board
function moveBoard(board)
{
var t1 = board.offsetTop;
if(t1<=0)
{
// 如果board移到最上面了，就随机换个水平位置，再移到最下面
t2 = Math.floor(Math.random() * (720- 420) + 420);
board.style.left = t2 + "px";
board.style.top = "555px";
fenshu += 1; //分数增加1
document.getElementById("score").innerHTML = "score " + fenshu;
}
//
else
board.style.top = board.offsetTop - 1 + "px";
}
// 定义小球的速度变量
var startSpeed = 1;
var ballSpeed =startSpeed;
// step函数是游戏界面的单位变化函数
function step()
{
// board直接上下隔得太近，就逐个移动，否则，同时移动
var t1 = Math.abs(board1.offsetTop - board2.offsetTop);
var t2 = Math.abs(board2.offsetTop - board3.offsetTop);
var t3 = Math.abs(board3.offsetTop - board4.offsetTop);
// 定义一个board之间的间隔距离
var t4 = 140;
if(t1<t4)
{
moveBoard(board1);
}
else if(t2<t4)
{
moveBoard(board1);
moveBoard(board2);
}
else if(t3<t4)
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
}
else
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
moveBoard(board4);
}
// 定义小球的垂直移动规则，1、向下匀加速运动，2、如果碰到board就被board持续抬上去，
// 直到按左右键离开了该board
// 如果小球的纵坐标等于某个board的纵坐标，就被抬起
var t5 = Math.abs(ball.offsetTop - board1.offsetTop);
var t6 = Math.abs(ball.offsetTop - board2.offsetTop);
var t7 = Math.abs(ball.offsetTop - board3.offsetTop);
var t8 = Math.abs(ball.offsetTop - board4.offsetTop);
if(t5<=ball.offsetHeight && t5>0 && ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
{
ball.style.top = board1.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 1)
{
shengyin.play();
shengyinFlag = 1;
}
}
else if(t6<=ball.offsetHeight && t6>0 && ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
{
ball.style.top = board2.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 2)
{
shengyin.play();
shengyinFlag = 2;
}
}
else if(t7<=ball.offsetHeight && t7>0 && ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
{
ball.style.top = board3.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 3)
{
shengyin.play();
shengyinFlag = 3;
}
}
else if(t8<=ball.offsetHeight && t8>0 && ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
{
ball.style.top = board4.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 4)
{
shengyin.play();
shengyinFlag = 4;
}
}
else
{
ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
ball.style.top = ball.offsetTop + ballSpeed + "px";
}
// ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
// ball.style.top = ball.offsetTop + ballSpeed + "px";
// 如果小球跑出来box，就结束游戏
if(ball.offsetTop==0 || ball.offsetTop>=box.offsetTop+box.offsetHeight)
{
clearInterval(gameover);
ball.style.display = 'none';
board1.style.display = 'none';
board2.style.display = 'none';
board3.style.display = 'none';
board4.style.display = 'none';
var gg = document.getElementById("gg"); //显示游戏结束
gg.style.display = 'block';
}
}
var gameover = setInterval("step();", 8);
</script>
</body>
</html>
After copying,
Escpress the key to exit editing, then enter a colon:wqto save and exit.
2. LAN test access
Then enter http://localhost/game.html in the browser , and you will see the mini-game site in the HTML page. Since a static site is deployed, there is no need to restart the service.
3. Intranet penetration
Since this site is currently only accessible locally, in order to make it accessible to everyone, we need to publish this local basic site to the public network. Here we can achieve this through the cpolar intranet penetration tool, which supports the http/https/tcp protocol. No public IP is required, and no router is required. It can easily publish local sites to the public network for everyone to access.
3.1 Ubuntu local installation cpolar intranet penetration
cpolar official website: https://www.cpolar.com/
- cpolar supports one-click automatic installation script
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
- token authentication
Log in to the cpolar official website backend, click Verify on the left to view your authentication token, and then paste the token into the command line:
cpolar authtoken xxxxxxx
- Simple penetration test. If the penetration is successful, the public network address will be generated normally. Press ctrl+c to exit.
cpolar http 8080
- Add services to the system and configure cpolar to start automatically at boot
sudo systemctl enable cpolar
- Start cpolar service
sudo systemctl start cpolar
- Check the service status. Normal display indicates
activesuccessful startup and normal online status.
sudo systemctl status cpolar
3.2 Create tunnel
After cpolar is successfully installed, access the local computer on the browser 9200端口and log in to the cpolar web UI management interface.
Click Tunnel Management on the left dashboard - Create Tunnel:
- Tunnel name: Customizable, be careful not to repeat it
- Protocol: http
- Local address: 80
- Port type: random domain name
- Region: China vip
Click创建
After the tunnel is successfully created, click Status on the left - Online Tunnel List. You can see that the tunnel just created has generated a corresponding public network address. Copy it and test access.
3.3 Test public network access
Open the browser and access the public network address you just copied. Note that you need to add the path /game.html after it. When the game interface appears, it is successful.
Game control uses: keyboard up, down, left and right keys
4. Configure a fixed second-level subdomain name
Since the tunnel created above selects a random domain name, the generated public network address will change randomly within 24 hours, which is more inconvenient for users who need long-term access. However, we can configure a fixed second-level subdomain name for access, and the address will not change randomly.
Note: The function of configuring fixed second-level subdomain names requires upgrading to the Basic Edition package or above to be supported.
4.1 Reserve a second-level subdomain name
Log in to the cpolar official website backend, click Reserve on the left, and find the reserved second-level subdomain name:
- Region: Select China VIP
- Second-level domain name: can be customized
- Description: Notes, which can be customized
Click保留
Prompt that the subdomain name is reserved successfully, copy the reserved second-level subdomain name
4.2 Configure the second-level subdomain name
Access the local port 9200 to log in to the cpolar web UI management interface, click Tunnel Management - Tunnel List on the left dashboard, find the tunnel you want to configure, and click Edit on the right
Modify the tunnel information and configure the successfully reserved second-level subdomain name into the tunnel.
- Domain name type: Select a second-level subdomain name
- Sub Domain: Fill in the second-level subdomain name that has been successfully reserved, in this case test01
Click更新
It will prompt that the tunnel update is successful. Click the status on the left dashboard - Online tunnel list. You can see that the public network address has been updated to the second-level subdomain name that has been successfully reserved. Copy it.
4.3 Test access to the fixed second-level subdomain name of the public network
We use any browser and enter the public network fixed second-level subdomain name +/game.html that we just configured successfully to see the site mini-game we created.
Reprinted from cpolar pole cloud article: Build a Web site in Ubuntu and publish it to the public network for access