preamble
Net: we usually say is the Internet; station: can be understood as a house on the Internet. Think of the Internet as a city, every house in the city is a site, the house contains your resources, so if someone wants to access the things inside your house how to do?
In real life, to go to other people’s homes, first of all to know other people’s address, so and so district so and so street, a few, in the Internet also has the concept of address, is ip. through ip we will be able to find in the Internet above the site, the port can be regarded as the entrance to the house, the different entrances to see things are not the same, such as from the front door (80 ports) into the living room, from the window (8080 ports) into the study room. From the window (port 8080) is the study.
Next, we will use a few simple steps to build a web site in
ubuntu html game, and use
cpolar intranet penetration will be published to the public network, so that public users can also be normal access to the local web site of the game.
1. Local environment service setup
apach2 is a service, can also be regarded as a container, that is, the above mentioned house, running in ubuntu, this service can help us to put our own website page through the appropriate port to let other computers in addition to the local computer access.
Download apach2
sudo apt install apache2 php -y
Download and start apache2
sudo service apache2 restart
Then open your Ubuntu browser and type.
http://localhost You can see our apache default page, which means that the local site has been set up.
Enter the path to the default Apache server home directory, this directory is to put the resources that you want others to see, such as an image, an html page, etc.
cd /var/www/html
After entering the delete index.html file, because the apache default page is not the page we want, we want to change to their favorite page, so you need to delete. Execute the following command.
sudo rm -rf index.html
In order to achieve the test effect, we set up a html page game, create the name as
game.htmlpages
sudo vim game.html
According to the
ikey to enter edit mode, 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 boards -->
<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>
<! -- small ball -->
<div id="ball" class="circle" style="width:20px;
height:20px; background-color:crimson; border-radius: 50%; position:absolute;
left:600px; top:100px"></div>
<! -- Box -->
<div id="box" style="border: 5px solid #555555; width:400px; height:550px; display=hide"></div>
<! -- The more boards you pass, the higher your score -->
<div id="score" style="width:200px; height:10px; position:absolute; left:900px;
font-family: "official script"; font-size: 30px;" >score: 0</div>
<! -- Game Over -->
<div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
font-family: "official script"; font-size: 30px; display: none;" >Game Over</div>
<script>
// Set the style of the box
var box = document.getElementById("box");
box.style.position = "absolute";
box.style.left = "400px";
// Set the style of the board
var board1 = document.getElementById("board1");
var board2 = document.getElementById("board2");
var board3 = document.getElementById("board3");
var board4 = document.getElementById("board4");
// Sound
var shengyin = new Audio();
shengyin.src = "sound2.mp3";
shengyinFlag = 0; // Use to indicate which board the ball is on.
// Keyboard event functions
var ball = document.getElementById("ball");
document.onkeydown = f;
function f(e){
var e = e || window.event;
switch(e.keyCode){
case 37:
// Press the left button to move the ball left, but not beyond the left border.
if(ball.offsetLeft>=box.offsetLeft + 10)
ball.style.left = ball.offsetLeft - 8 + "px";
break;
case 39:
// Press the right button and move the ball right, but not beyond the by border.
if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
ball.style.left = ball.offsetLeft + 8 + "px";
break;
case 32:
}
}
// Define a score variable
var fenshu = 0;
// Define a function to move a given board
function moveBoard(board)
{
var t1 = board.offsetTop;
if(t1<=0)
{
// If the board moves to the top, randomly change the horizontal position and move it to the bottom again.
t2 = Math.floor(Math.random() * (720- 420) + 420);
board.style.left = t2 + "px";
board.style.top = "555px";
fenshu += 1; //Score increased by 1
document.getElementById("score").innerHTML = "score " + fenshu;
}
//
else
board.style.top = board.offsetTop - 1 + "px";
}
// Define the velocity variable of the ball
var startSpeed = 1;
var ballSpeed =startSpeed;
// The step function is a unit change function for the game interface.
function step()
{
// boards directly above and below are too close together, move them one by one, otherwise, move them all at the same time
var t1 = Math.abs(board1.offsetTop - board2.offsetTop);
var t2 = Math.abs(board2.offsetTop - board3.offsetTop);
var t3 = Math.abs(board3.offsetTop - board4.offsetTop);
// Define the distance between boards.
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);
}
// Define the rules for vertical movement of the ball, 1. downward uniform acceleration, 2. if it touches the board it is lifted up continuously by the board.
// Until you leave the board by pressing left or right.
// The ball is lifted if its longitudinal coordinate is equal to the longitudinal coordinate of a certain 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; // number corresponds to acceleration
ball.style.top = ball.offsetTop + ballSpeed + "px";
}
// ballSpeed = ballSpeed + 0.01; // number corresponds to acceleration
// ball.style.top = ball.offsetTop + ballSpeed + "px";
// If the ball runs out of the box, it's game over.
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"); //show game over
gg.style.display = 'block';
}
}
var gameover = setInterval("step();", 8);
</script>
</body>
</html>
After copying, pressEsckey to exit editing, then enter a colon:wqJust save and quit
2. LAN test visits
Then the browser types
http://localhost/game.htmlIf you can see the html page of the game site, due to the deployment of a static site, do not need to restart the service.
3. Intranet penetration
Because this site can only be accessed locally, in order to make everyone can access, we need to publish this local base site to the public network. Here we can cpolar intranet penetration tool to achieve, it supports http/https/tcp protocols, without the public IP, but also do not need to set up a router, you can easily publish the local site to the public network for all to access.
3.1 ubuntu local installation of cpolar intranet penetration
cpolar official website:https://www.cpolar.com/
- cpolar supports one-click auto-installation of scripts
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
Log in to the backend of the cpolar website, click on Authentication on the left side, check your authentication token, and after that paste the token in the command line:.
cpolar authtoken xxxxxxx
- Simple penetration test, successful penetration of the normal generation of public network address, press ctrl + c exit
cpolar http 8080
- Add services to the system and configure cpolar to boot up
sudo systemctl enable cpolar
sudo systemctl start cpolar
- Check the status of the service, the normal display is
activeIndicates successful startup and normal online status
sudo systemctl status cpolar
3.2 Creating tunnels
After a successful cpolar installation, visit the local browser on
9200 port, log in to the cpolar web UI management interface.
Click Tunnel Management – Create Tunnel on the left dashboard:
- Tunnel name: customizable, taking care not to repeat
- Protocol: http
- Local address: 80
- Port type: random domain name
- Region: China vip
strike (on the keyboard)
establish
After the tunnel is successfully created, click on the left side of the status – online tunnel list, you can see that the tunnel has just been created to generate the corresponding public address, copy it down, and then test access to it.
3.3 Testing public network access
Open your browser and visit the public address you just copied, note that you have to add the path /game.html at the end, and the game interface will appear, that is, it will be successful.
Game Controls:Keyboard up, down, left, right keys
4. Configure fixed second-level subdomains
Since the tunnel created above is a random domain name, the generated public address will change randomly within 24 hours, which is inconvenient for users who need to access it for a long time. However, we can configure a fixed second-level sub-domain for access, the address will not change randomly.
Note: Configuring fixed second-level sub-domain function requires upgrading to the Basic package or above to support.
4.1 Reservation of a second-level subdomain
Log in to the backend of cpolar’s official website, click on Reservations on the left side, and find Reserve Second Level Subdomains:
- Region: Select China VIP
- Secondary domain name: customizable
- Description: i.e. notes, can be customized to fill in
strike (on the keyboard)
reservations
Prompt for successful sub-domain reservation, copy the reserved second-level sub-domains
4.2 Configuring second-level subdomains
Access local port 9200 to log into the cpolar web UI management interface, click Tunnel Management – Tunnel List on the left dashboard, find the tunnel you want to configure, click Edit on the right side
Modify the tunnel information to configure a successfully reserved second-level subdomain into the tunnel
- Domain type: select a second-level subdomain
- Sub Domain: Fill in the second-level sub domain name of the successful reservation, in this case, test01.
strike (on the keyboard)
update
Prompted to update the tunnel successfully, click Status – Online Tunnel List on the left dashboard, you can see that the public address has been updated to the second-level subdomain with successful reservation, copy it down.
4.3 Testing access to fixed second-level subdomains on the public network
We use any browser, enter just configured the success of the public network fixed second-level sub-domain + / game.html can see the site we created a small game
