如何在本地创建一个贪吃蛇小游戏node.js服务并实现无公网IP远程游玩

文章目录

  • 前言
  • 1.安装Node.js环境
  • 2.创建node.js服务
  • 3. 访问node.js 服务
  • 4.内网穿透
    • 4.1 安装配置cpolar内网穿透
    • 4.2 创建隧道映射本地端口
  • 5.固定公网地址

正文开始前给大家推荐个网站，前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

前言

Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation（原为 Node.js Foundation，已与 JS Foundation 合并）持有和维护，亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。

Node.js 大部分基本模块都用 JavaScript 语言编写。在 Node.js 出现之前，JavaScript 通常作为客户端程序设计语言使用，以JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。Node.js 含有一系列内置模块，使得程序可以脱离 Apache HTTP Server 或 IIS，作为独立服务器运,下面将介绍如何简单几步实现远程公共网络下访问windwos node.js的服务端。

1.安装Node.js环境

官网下载node.js,我们选择Windows 64位一键安装

https://node.js.org/zh-cn/download/

image-20230302141011787

安装好后我们打开cmd,输入命令有正常出来版本号，表示安装成功,一键安装版,默认会配置环境变量。

node -v

image-20230302150424377

2.创建node.js服务

这里我们在本地创建一个简单的node.js服务，创建一个贪吃蛇页面小游戏来进行演示。

首先在本地创建一个文件夹，并在文件夹中新建2个文件，一个是js文件和一个html文件，需要放在同个目录下，然后使用vscode打开。

  • game.html文件
  • nodetest.js文件

image-20230302155043387

在game.html添加如下html代码并保存，以下代码是一个html页面小游戏(贪吃蛇)

<!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>

nodetest.js文件添加如下js代码，以下代码意思是开启一个http服务,设置监听3000端口号

const http = require('http');

//加载文件模块
const fs = require("fs");


const hostname = '127.0.0.1';
//端口
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  
  fs.readFile('./game.html', (err, data) => {
    if (err) throw err;
    console.log(data.toString);
    res.end(data);
  });
  
  
 
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

3. 访问node.js 服务

当我们编写好相关代码后,我们开始启动服务.在vscode控制台输入命令【注意需要进入到相应的文件目录下执行命令】

node .\nodetest.js

image-20230302170633966

有正常返回提示服务在本地3000端口下，我们打开浏览器,访问http://127.0.0.1:3000/,出现贪吃蛇界面表示成功【游戏控制:键盘上下左右键】

image-20230302171105342

4.内网穿透

这里我们使用cpolar来进行内网穿透，支持http/https/tcp协议，不限制流量，无需公网IP，也不用设置路由器，使用简单。

4.1 安装配置cpolar内网穿透

cpolar官网：https://www.cpolar.com/

访问cpolar官网，注册一个账号，然后下载并安装客户端，具体安装教程可以参考官网文档教程。

  • windows系统：在官网下载安装包后，双击安装包一路默认安装即可。
  • linux系统：支持一键自动安装脚本，详细请参考官网文档——入门指南

20230130105715

4.2 创建隧道映射本地端口

cpolar安装成功后，在浏览器上访问本地9200端口http://localhost:9200，使用cpolar邮箱账号登录。

20230130105810

点击左侧仪表盘的隧道管理——创建隧道，创建一个指向本地3000端口的http隧道

  • 隧道名称：可自定义命名，注意不要与已有的隧道名称重复
  • 协议：选择http
  • 本地地址：3000
  • 域名类型：免费选择随机域名
  • 地区：选择China vip

点击创建

image-20230302171633772

隧道创建成功后，点击左侧的状态——在线隧道列表,查看所生成的公网地址，然后复制地址

image-20230302171740715

打开浏览器器,我们使用上面公网地址进行访问,至此,我们成功将本地·node.js 服务发布到了公网地址

image-20230302171817498

5.固定公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址，24小时内会随机变化，不利于长期远程访问。因此我们可以为其配置二级子域名，该地址为固定地址，不会随机变化。

  • 保留一个二级子域名

登录cpolar官网，点击左侧的预留，选择保留二级子域名，设置一个二级子域名名称，点击保留,保留成功后复制保留的二级子域名名称

image-20230302172317079

保留成功后复制保留的二级子域名地址

image-20230302172454064

  • 配置二级子域名

访问http://127.0.0.1:9200/，登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的3000隧道，点击右侧的编辑

image-20230302172856768

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

  • 域名类型：选择二级子域名
  • Sub Domain：填写保留成功的二级子域名

点击更新

image-20230302172806823

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了保留过的二级子域名名称,将其复制下来

image-20230302172935943

然后使用固定http地址打开浏览器访问

image-20230302173012863
访问成功，现在这个公网地址是固定的了，不会随机变化。成功通过cpolar内网穿透，实现在外远程访问node.js服务，无需公网IP ，也不用设置路由器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/554608.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CoFSM基于共现尺度空间的多模态遥感图像匹配方法--论文阅读记录

CoFSM基于共现尺度空间的多模态遥感图像匹配方法--论文阅读记录

目录 论文 Multi-Modal Remote Sensing Image Matching Considering Co-Occurrence Filter 参考论文&#xff1a;SIFT系列论文&#xff0c; SIFT Distinctive Image Features from Scale-Invariant Keypoints&#xff0c;作者&#xff1a;David G. Lowe 快速样本共识算法…
阅读更多...
Leetcode 53. 最大子数组和

Leetcode 53. 最大子数组和

心路历程&#xff1a; 子数组的和是可以通过前面的和加上当前值递推获得&#xff0c;所以可以用动态规划解决这道题 注意的点&#xff1a; 1、这道题再获取最大值时res不能用0而需要用负无穷初始化 解法&#xff1a;动态规划 class Solution:def maxSubArray(self, nums: …
阅读更多...
（十三）C++自制植物大战僵尸游戏多用户存档实现（二）

（十三）C++自制植物大战僵尸游戏多用户存档实现（二）

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/8UFMs UserData.h 在头文件中定义了枚举类型openUserDataReturnType&#xff0c;用于表示打开用户数据文件的返回状态。FileExistError表示文件存在但是打开错误&#xff0c;FileExistCorrect表示文件在且正确&#xff0…
阅读更多...
Python | Leetcode Python题解之第29题两数相除

Python | Leetcode Python题解之第29题两数相除

题目&#xff1a; 题解&#xff1a; class Solution:def divide(self, dividend: int, divisor: int) -> int:INT_MIN, INT_MAX -2**31, 2**31 - 1# 考虑被除数为最小值的情况if dividend INT_MIN:if divisor 1:return INT_MINif divisor -1:return INT_MAX# 考虑除数为…
阅读更多...
Pandas数据分析学习笔记

Pandas数据分析学习笔记

前言 开刷Pandas数据分析&#xff0c;看起来很好理解&#xff0c;不过没做笔记没敲代码心里总是不安稳&#xff0c;所以复现下课程代码并演示其中遇到的问题&#xff0c;顺便水一水笔记好了 参考资料&#xff1a; 课程视频链接&#xff1a;Pandas数据分析从入门到实战 数据…
阅读更多...
Halo自定义页面

Halo自定义页面

在使用Halo后台维护项目&#xff0c;有的页面是固定的&#xff0c;但内容需要一些自定义样式&#xff0c;内容动态编辑生成&#xff0c;这个时候就需要自定义页面; Halo版本 版本&#xff1a;2.121.首先在theme.yaml中添加自定义页面并指定文件名 spec:customTemplates:page:…
阅读更多...
面试题集中营—GC日志简析及频繁GC的调优

面试题集中营—GC日志简析及频繁GC的调优

如何查看GC日志 有两种方式查看GC日志&#xff0c;一种是动态命令行查看 jstat -gc <pid> 300 5 第二种就是在JVM参数中增加打印的参数&#xff0c;如下&#xff1a; -XX:PrintGCDetails -XX:PrintGCTimeStamps 表示打印每次GC的日志以及GC发生的时间 -Xloggc:gc.log …
阅读更多...
如何解决PPT中获取加载项是灰色的，无法链接到Power BI的问题？

如何解决PPT中获取加载项是灰色的，无法链接到Power BI的问题？

问题描述&#xff1a; 最近有朋友留言询问:“在尝试之前我发布的如何在PPT中展示Power BI报告的操作步骤的时候&#xff0c;想要在PPT中展示Power BI报告&#xff1f;只需这样做&#xff01; (qq.com) 碰到在PowerPoint中【获取加载项选项】是灰色&#xff0c;无法链加载Powe…
阅读更多...
WordPress网站上添加看板娘

WordPress网站上添加看板娘

续接上篇——基于LNMP部署wordpress-CSDN博客 目录 一.下载并解压 二.设置头文件 修改header.php 修改配置文件footer.php 三.将你设置的主题包上传到/usr/share/nginx/html/wp-content这个目录里 四.扩展——将看板娘修改到左侧 一.下载并解压 [rootaliyun ~]# wget htt…
阅读更多...
技术分享 | app测试中常用的Android模拟器

技术分享 | app测试中常用的Android模拟器

Emulator Emualor 是 Android Studio 自带的模拟器&#xff0c;是官方提供的工具&#xff0c;Android 开发最常使用的就是这一款。 它功能非常齐全&#xff0c;电话本、通话等功能都可正常使用。用户可以使用键盘输入&#xff0c;鼠标点击模拟器按键输入&#xff0c;甚至还可…
阅读更多...
安卓投屏延时数据如何测试，测试工具如何写？

安卓投屏延时数据如何测试，测试工具如何写？

背景&#xff1a; 投屏其实在android等使用场景非常非常多&#xff0c;比如现在火爆小米汽车的车机&#xff0c;上面涉及到手机和车机互联画面相关都是属于投屏范围。这种跨设备的投屏场景&#xff0c;流畅的体验是最重要的&#xff0c;这里就会要求投屏中最重要的一个性能指标…
阅读更多...
Nerf技术原理

Nerf技术原理

Neural Radiance Fields (NeRF) 是一种3D场景重建技术，用于从一组稀疏的2D图像创建高质量的3D模型。这一技术基于深度学习，通过训练一个神经网络来模拟场景的体积密度和颜色分布，实现在新的视角下渲染出高质量的3D图像。 NeRF的核心原理 NeRF的核心在于使用一个全连接的神经…
阅读更多...
开源事件通知库libevent及网络连接管理模块bufferevent详解

开源事件通知库libevent及网络连接管理模块bufferevent详解

目录 1、libevent介绍 1.1、什么是libevent&#xff1f; 1.2、libevent特点 1.3、网络连接管理模块bufferevent 2、bufferevent有什么用&#xff1f; 3、bufferevent的整体设计与实现细节 3.1、整体概况 3.2、evbuffer与bufferevent 3.3、defer callback 4、bufferev…
阅读更多...
听说英伟达和诺和诺德要共建医药研发超算，超算安腾默默笑了

听说英伟达和诺和诺德要共建医药研发超算，超算安腾默默笑了

继黄仁勋公开发表“生命科学才是未来”的观点后&#xff0c;英伟达押注生物计算赛道又有新动作。日前&#xff0c;诺和诺德基金会宣布将出资和英伟达合作&#xff0c;在丹麦建造一台专注于生成式AI应用的超级计算机&#xff0c;以推动医疗保健、生命科学和绿色转型领域的研究与…
阅读更多...
【JavaSE进阶】08-反射机制 09-注解

【JavaSE进阶】08-反射机制 09-注解

1 反射机制 a) 反射的基本概念 b) Java中的类反射 c) 安全性和反射 d) 反射的两个缺点 1.1 反射的基本概念 反射的概念是由 Smith 在 1982 年首次提出的&#xff0c;主要是指程序可以访问、检测和修改它本身状 态或行为的一种能力, 并能根据自身行为的状态和结果&#…
阅读更多...
六、项目发布 -- 2. 数据库环境准备

六、项目发布 -- 2. 数据库环境准备

之前我们是采用mock方式获取这些接口&#xff0c;也就是这些接口的数据其实是固定的&#xff0c;现在我们将从数据库中来获取这些数据并且在界面上进行展示。 1、数据库环境准备 到MYSQL官网上&#xff0c;主要下载服务端&#xff0c;社区版是免费的&#xff0c;安装好MYSQL …
阅读更多...
结构体（C语言）

结构体（C语言）

“点赞&#xff0c;留言&#xff0c;收藏&#xff0c;关注” 就是对阿林最大的支持 1.自定义类型 什么是自定义类型&#xff1f;C语言中有一些自带的数据类型&#xff0c;比如说char&#xff0c;int&#xff0c;float&#xff0c;double&#xff0c;long等数据类型就是C语言的…
阅读更多...
目标检测——标注鱼类数据集

目标检测——标注鱼类数据集

一、重要性及意义 鱼类的检测在多个领域都表现出其重要性和意义。以下是几个主要方面的阐述&#xff1a; 首先&#xff0c;从食品安全和营养价值的角度来看&#xff0c;鱼类作为人们日常生活中的重要蛋白质来源&#xff0c;其质量和安全性备受关注。鱼类营养成分检测能够评估…
阅读更多...
C++异步回调示例：多线程执行任务，主线程通过回调监测任务状态

C++异步回调示例：多线程执行任务，主线程通过回调监测任务状态

1、回调函数 回调函数定义&#xff1a;把函数的指针或者地址作为参数传递给另一个参数&#xff0c;当这个指针被用来调用其所指向的函数时&#xff0c;那么这就是一个回调的过程&#xff0c;这个被回调的函数就是回调函数。回调函数不是由该函数的实现方直接调用&#xff0c;而…
阅读更多...
反转二叉树（力扣226）

反转二叉树（力扣226）

解题思路&#xff1a;用队列进行前序遍历的同时把节点的左节点和右节点交换 具体代码如下&#xff1a; class Solution { public:TreeNode* invertTree(TreeNode* root) {if (root NULL) return root;swap(root->left, root->right); // 中invertTree(root->left)…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站