目次
3.1 cpolar を ubuntu にローカルにインストールする
4.3 パブリック ネットワークの固定第 2 レベルのサブドメイン名へのテスト アクセス
序文
ネット: 通常、インターネットについて話します。ウェブサイト: インターネット上の家として理解できます。インターネットを都市として考えてください。都市のすべての家がサイトであり、リソースは家の中に保存されています。では、誰かがあなたの家の中にあるものにアクセスしたいと思ったらどうなるでしょうか?
現実世界では、他人の家に行くとき、まずその人の住所、ある地区の何番地、何番地を知る必要がありますが、インターネットには住所という概念もあります。 IP。IPを介してインターネット上のサイトを見つけることができます。ポートは家の入り口と考えることができます。入り口が違えば、見えるものが異なります。たとえば、ドア（ポート80）から入るとリビングルーム、窓から入る（ port 8080)ポート)は自習室です。
次に、いくつかの簡単な手順を実行して Ubuntu 上に Web サイト HTML ゲームを構築し、cpolar イントラネット ペネトレーションを使用してそれをパブリック ネットワークに公開します。これにより、パブリック ネットワーク ユーザーもローカル Web サイト ゲームに通常どおりアクセスできるようになります。
1.地域環境サービス構築
apach2 は、ubuntu で実行されるコンテナ (上記の家) とも見なすことができるサービスで、対応するポートを介してこのマシン以外の他のコンピューターから独自の Web サイトのページにアクセスできるようにするのに役立ちます。
apach2をダウンロード
sudo apt install apache2 php -y
ダウンロード後、apache2を起動します
sudo service apache2 restart
次に、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 コードをコピーします (すべてコピー)
<!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>
コピー後、
Escキーを押して編集を終了し、コロンを入力して:wq保存して終了します。
2. LANテストアクセス
ブラウザにhttp://localhost/game.htmlと入力すると、HTML ページにミニゲーム サイトが表示されます。静的サイトがデプロイされるため、サービスを再起動する必要はありません。
3. イントラネットの浸透
このサイトは現在ローカルでのみアクセスできるため、誰でもアクセスできるようにするには、このローカル基本サイトをパブリック ネットワークに公開する必要があります。ここでは、http/https/tcp プロトコルをサポートする cpolar イントラネット ペネトレーション ツールを通じてこれを実現できます。パブリック IP もルーターも必要ありません。誰もがアクセスできるように、ローカル サイトをパブリック ネットワークに簡単に公開できます。
3.1 cpolar を ubuntu にローカルにインストールする
cpolar イントラネット ペネトレーションを ubuntu にインストールする方法は、このチュートリアル記事を参照してください。
3.2 トンネルの作成
cpolar が正常にインストールされたら、ブラウザーでローカル ポート 9200 にアクセスし、cpolar Web UI 管理インターフェイスにログインします。
左側のダッシュボードで [トンネル管理] - [トンネルの作成] をクリックします。
- トンネル名: カスタマイズ可能、重複しないように注意してください
- プロトコル: http
- ローカルアドレス: 80
- ポートタイプ: ランダムなドメイン名
- 地域: 中国VIP
クリック创建
トンネルが正常に作成されたら、左側の [ステータス] - [オンライン トンネル リスト] をクリックします。作成したばかりのトンネルによって、対応するパブリック ネットワーク アドレスが生成されたことがわかります。それをコピーして、アクセスをテストします。
3.3 パブリック ネットワーク アクセスのテスト
ブラウザを開き、先ほどコピーしたパブリック ネットワーク アドレスにアクセスします。パス /game.html をその後に追加する必要があることに注意してください。ゲーム インターフェイスが表示されたら成功です。
ゲーム制御の使用: キーボードの上下左右のキー
4. 固定の第 2 レベルのサブドメイン名を構成する
上記で作成されたトンネルはランダムなドメイン名を選択するため、生成されるパブリック ネットワーク アドレスは 24 時間以内にランダムに変更され、長期間のアクセスが必要なユーザーにとってはさらに不便になります。ただし、アクセス用に固定の第 2 レベルのサブドメイン名を構成でき、アドレスがランダムに変更されることはありません。
注: 固定の第 2 レベルのサブドメイン名を構成する機能をサポートするには、Basic Edition パッケージ以降にアップグレードする必要があります。
4.1 第 2 レベルのサブドメイン名の予約
cpolar 公式 Web サイトのバックエンドにログインし、左側の [予約] をクリックして、予約された第 2 レベルのサブドメイン名を見つけます。
- 地域: 中国 VIP を選択
- 第 2 レベルのドメイン名: カスタマイズ可能
- 説明: カスタマイズ可能なメモ
クリック保留
サブドメイン名が正常に予約されたことを示すプロンプトが表示され、予約された第 2 レベルのサブドメイン名をコピーします
4.2 第 2 レベルのサブドメイン名の構成
ローカル ポート 9200 にアクセスして cpolar Web UI 管理インターフェイスにログインし、左側のダッシュボードで [トンネル管理] - [トンネル リスト] をクリックし、設定するトンネルを見つけて、右側の [編集] をクリックします。
トンネル情報を変更し、正常に予約された第 2 レベルのサブドメイン名をトンネルに構成します。
- ドメイン名のタイプ: 第 2 レベルのサブドメイン名を選択します
- サブドメイン: 正常に予約された第 2 レベルのサブドメイン名を入力します。この場合は test01
クリック更新
トンネルの更新が成功したことを示すメッセージが表示されます。左側のダッシュボードのステータス - オンライン トンネル リストをクリックすると、パブリック ネットワーク アドレスが、正常に予約された第 2 レベルのサブドメイン名に更新されたことがわかります。それをコピーします。
4.3 パブリック ネットワークの固定第 2 レベルのサブドメイン名へのテスト アクセス
任意のブラウザを使用して、先ほど正常に構成したパブリック ネットワークの固定第 2 レベル サブドメイン +/game.html にアクセスして、作成したサイト ミニゲームを表示できます。アドレスがランダムに変更されることはなくなります。
