[Greedy Snake Game] Pagoda panel to quickly build a Snake Game Web site - no cloud server required

Reprinted from the article of remote intranet penetration: Linux uses the pagoda panel to build a website, and intranet penetration to achieve public network access

foreword

As a simple and easy-to-use server operation and maintenance management panel, the Pagoda panel supports Linux/Windows systems. We can use it to configure the LAMP/LNMP environment, website, database, FTP, etc. with one click, and easily manage the server through the Web terminal.

In the following tutorial, we will demonstrate how to use the pagoda panel to quickly and easily build a local web site, and do intranet penetration, so that users who are not in the same LAN can also access the local web site without public IP or router settings.

video tutorial

[Pagoda panel site building] Local server builds a website and publishes public network access "intranet penetration"

1. Environment installation

Install the apache server, click on the website in the pagoda panel, and then you will be prompted to install the apache server.

choose fast installation

Then wait for the installation to complete, the message list on the left will prompt when the installation is complete

2. Install cpolar intranet penetration

cpolar official website: https://www.cpolar.com/

• Open the pagoda terminal command window and use cpolar to install the script:

curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash

• token authentication

Log in to the cpolar official website, click on the left 验证to view your authentication token, and then paste the token in the command line

cpolar authtoken xxxxxxx

• Add a service to the system

sudo systemctl enable cpolar

• Start the cpolar service

sudo systemctl start cpolar

• Open port 9200

Select security in the pagoda panel. Then open port 9200

• Log in to the cpolar web UI management interface

Then the LAN ip accesses port 9200, and the cpolar management interface will appear, enter the cpolar email account to log in

3. Intranet penetration

After logging in to the cpolar web UI management interface, we create an http tunnel pointing to port 80, because the apache service defaults to port 80

• Tunnel name: customizable, be careful not to repeat
• protocol: http
• Local address: 80
• Port type: random domain name
• Region: China VIP

click创建

After the creation is successful, we open the online tunnel list to copy the created public network address

Then we open the pagoda panel, click on the website, select Add Site, paste the copied public network address into the parameter box of the domain name, and click Submit

At this point we can see that the site was successfully created

Then we use the copied public network address, open the browser to access, and the welcome page appears to indicate success

4. Fixed http address

Since the tunnel just created uses a random temporary address, the address will change within 24 hours. For long-term remote access, we next configure this public network address as fixed.

You need to upgrade to the basic package or above to support the configuration of second-level subdomains

Log in to the background of the cpolar official website, click on the dashboard on the left 预留, find 保留二级子域名, and reserve a second-level subdomain name for the http tunnel.

• Region: Select the server region
• Name: Fill in the second-level subdomain name you want to keep (customizable)
• Description: Remarks, which can be customized

This example reserves a mywebsitegamesecond-level subdomain named . After the subdomain name is successfully reserved, we copy the subdomain name, and then we need to configure it in the tunnel.

5. Configure the second-level subdomain

Log in to the cpolar web ui management interface. 隧道管理Click —— on the left dashboard 隧道列表, find the tunnel that needs to be configured with a second-level subdomain name (in this example, the apache website tunnel), and click on the right编辑

Modify the tunnel information and configure the second-level subdomain name into the tunnel:

• Domain Type: Select instead二级子域名
• Sub Domain: Fill in the second-level subdomain name we just reserved (in this example mywebsitegame)

After the modification is complete, click更新

状态After the tunnel is successfully updated, click —— on the left dashboard 在线隧道列表, and you can see the public network address of the tunnel, which has been updated to a second-level subdomain name. Copy the public network address.

Then we open the pagoda panel, find the site, and click Settings

Add a domain name of our fixed public network address

Then delete the previously created random address

Then we open the browser and use a fixed public network address to access. We have configured remote access to the site above.

6. Create a test page

Click the site root directory path, click directly

Create a new page named game.html

Then double-click the file to edit, copy the following code into it (snake game), and then press Ctrl+S to save

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<meta charset="UTF-8">
	<meta name="keywords" content="贪吃蛇">
	<meta name="Description" content="这是一个初学者用来学习的小游戏">
	<style type="text/css">
	*{
      
      margin:0;}
	.map{
      
      margin:100px auto;
		height:600px;
		width:900px;
		background:#00D0FF;
		border:10px solid #AFAEB2;
		border-radius:8px;
	}
	</style>
</head>
 
<body>
<div class="map">
<canvas id="canvas" height="600" width="900">
	
</canvas>
</div>
 
<script type="text/javascript">
 //获取绘制工具
	/*
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");//获取上下文
	ctx.moveTo(0,0);
	ctx.lineTo(450,450);*/
	var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    /*ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(450,450);
    ctx.stroke();
    */
 
    var snake =[];//定义一条蛇，画蛇的身体
    var snakeCount = 6;//初始化蛇的长度
	var foodx =0;
	var foody =0;
    var togo =0;
    function drawtable()//画地图的函数
    {
      
      
 
 
    	for(var i=0;i<60;i++)//画竖线
    	{
      
      
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(15*i,0);
    		ctx.lineTo(15*i,600);
    		ctx.closePath();
    		ctx.stroke();
    	}
        for(var j=0;j<40;j++)//画横线
    	{
      
      
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(0,15*j);
    		ctx.lineTo(900,15*j);
    		ctx.closePath();
    		ctx.stroke();
    	}
    	
    	for(var k=0;k<snakeCount;k++)//画蛇的身体
			{
      
      
			ctx.fillStyle="#000";
			if (k==snakeCount-1)
			{
      
      
				ctx.fillStyle="red";//蛇头的颜色与身体区分开
			}
			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。
			
			}
			//绘制食物	
    		ctx.fillStyle ="black";
	     ctx.fillRect(foodx,foody,15,15);
	     ctx.fill();
    	
    }
 
    
    function start()//定义蛇的坐标
    {
      
      
    	//var snake =[];//定义一条蛇，画蛇的身体
        //var snakeCount = 6;//初始化蛇的长度
		
		for(var k=0;k<snakeCount;k++)
    		{
      
      
    			snake[k]={
      
      x:k*15,y:0};
    			
            }
			
		  drawtable();
          addfood();//在start中调用添加食物函数
 
    }
 
    function addfood()
	{
      
      
	foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
	foody = Math.floor(Math.random()*40)*15;
		
		for (var k=0;k<snake;k++)
		{
      
      
			if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上
			{
      
      	
			addfood();
			}
		}
	
	
	}	
    		
   function move()
   {
      
      
	switch (togo)
	{
      
      
	case 1: snake.push({
      
      x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走
	case 2: snake.push({
      
      x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;
	case 3: snake.push({
      
      x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;
	case 4: snake.push({
      
      x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;
	case 5: snake.push({
      
      x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;
	case 6: snake.push({
      
      x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;
	default: snake.push({
      
      x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
	}
    snake.shift();//删除数组第一个元素
   	ctx.clearRect(0,0,900,600);//清除画布重新绘制
   	isEat();
	isDead();
	drawtable();
   } 			
   
   function keydown(e)
   {
      
      
   switch(e.keyCode)
		{
      
      
         case 37: togo=1; break;
		 case 38: togo=2; break;
		 case 39: togo=3; break;
		 case 40: togo=4; break;
		 case 65: togo=5; break;
		 case 68: togo=6; break;
		}
   }
   
   function isEat()//吃到食物后长度加1
   {
      
      
    if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
   {
      
      
		addfood();
		snakeCount++;
		snake.unshift({
      
      x:-15,y:-15});
   }
   
   }
   //死亡函数
   function isDead()
   {
      
      
    if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
		{
      
      
        

		window.location.reload();
		}
   }
   
    document.onkeydown=function(e)
{
      
      
	keydown(e);
 
} 
window.onload = function()//调用函数
{
      
       
	start();
	setInterval(move,150);
	drawtable();
	
	
 
}
</script>
</body>
</html>

Then our browser uses the public network address to add this html file to access, and we can see the mini game we deployed.