首页 >>  正文

javascript猜数游戏代码

来源:baiyundou.net   日期:2024-09-23

整理 | 苏宓

出品 | CSDN(ID:CSDNnews)

有些人玩游戏,是为了寻求刺激;有些人玩游戏,是为了休闲安静地打发时间。二者的感受如何才能兼得,近日,苏格兰爱丁堡的一位开发者 Anslo 潜心开发了 16 个月,发布了一款名为 《Slow Roads》(slowroads.io)的免费、轻松的驾驶游戏,可以让玩家在电脑上体验《速度与激情》的感觉,还能欣赏由程序自动生成的优美风景。此外,这款游戏可以直接在浏览器中运行,无需登录或者安装,对于玩家而言,即开即玩。

玩法

《Slow Roads》一经推出之后,便受到了不少玩家的关注和试玩。和传统驾驶类游戏有所不同,这款游戏在玩法和技术实现上有着巨大的差异。

首先,在游戏玩法上,它没有撞车、没有失败更没有输赢。随着汽车的行驶,道路会一直在延伸,风景秀丽的景观在身边飞驰,最为值得关注无论是春夏秋冬,还是白天、傍晚、黑夜,亦或是森林、沙漠、环山,场景都可以一键“无缝切换”。

另外,驾驶的车也可以切换为轿车、长途汽车、自行车。

如果你的方向盘偏离了道路,也可以按一下「R」键将车重新定位到快速道上,甚至道路也是可以选择的。当然,如果你愿意,还可以驾驶越野车或者体验一下水下行驶的感觉。

当然,玩累了,还可以开启自动驾驶模式。

同时,这款游戏的操作也非常简单,W 键或向上箭头是加速,S 键或向下箭头是刹车。A 键和 D 键(或左右箭头)控制转向;玩家也可以通过按住 Shift 或双击 W 键来升级汽车;C 键可改变摄像机角度,Q 键和 E 键在可用的天气和照明条件下循环。如果你不喜欢键盘控制,也可以改用基于鼠标的转向。

在技术实现上,与使用传统游戏引擎开发的游戏不同,Anslo 表示,《Slow Roads》使用了 three.js 的 3D JavaScript 库构建,可直接在 Chrome、Firefox、Safari 和 Edge 浏览器中运行。与此同时,上述的场景切换都是由程序自动生成,通过技术实现,可以动态生成无限地图和处理事务。这是一个相当复杂且有趣的技术演示。用开发者 Anslo 自己的话来形容,「该游戏的实验正在挑战浏览器游戏的合理边界」。

接下来,我们不妨一起来看一下具体的技术原理。

技术实现

事实上,这一款游戏的制作不仅需要深厚的开发功底,也需要有设计、物理学等知识储备。在《Slow Roads》中,作者首先通过生成一个高度图,采用了类似于 Perlin 噪声的算法,并进行了修改优化,从而实现更真实的山丘景观。

继而使用一个 npm 包 Alea(https://www.npmjs.com/package/alea)用作 PRNG(伪随机数生成器,Preudo Random Number Generator),用于复制和粘贴实现。

当完成第一步开发之后,第二步便是进行车子行驶的道路规划。Anslo 选择采用了以下步骤:

选择地图中一个不太陡峭、不太深的地方,作为行驶的起点。同时,这也是道路中线的第一个点。

进而选择一个方向,并测量周围的高度图,以此评估横向和纵向的坡度。

然后,道路中线最好是能向坡度下滑的方向移动 10 米。点被编码在一个双向链表中,每个点都使用元数据(如坡度、道路宽度和曲率)注释。

上面这个过程是会一直重复的(以从车辆位置开始的 15 公里的地平线为界),但注意行驶的车道不要有自相交的情况,这也是游戏中道路规划最难的地方。

中线点的高度用一个 9 个点的窗口进行追溯平滑,以避免海拔的突然急剧变化。

在一个较短的地平线上,大概 10 米的中线被用二次贝塞尔曲线以 1 米的分辨率进行平滑点的注释。

当道路规划完成之后,第三步便是渲染环境。这里可以使用一个 5x5 的大粗网格(这款游戏中,作者采用的是 10 米的分辨率和 1 公里的最大视距)来渲染大型场景。这被称之为“远网格”。

在靠近道路的地方,是一个由更细的 5x5 网格组成的,每个网格拼接到一起,沿着道路中线行进,形成一个连续的 "走廊"。这就是 "近网格",从车辆的位置向前生成一个固定的水平线。

同时,远处网格现在重叠的顶点被粗略地 "隐藏 "起来,把它们沉到几米以下。

然后离道路中线接近的地方,在道路的高度和底层环境的高度之间插值,以实现无缝过渡。

除了以上,Anslo 还采用了一个额外的 3x3 网格,渲染离道路中线更近的地方,优化细节,实现更精细的体验。

在图形细节中,这名开发者在游戏中的地面纹理使用世界坐标的 UV,并与 perlin 噪声混合,以改变草的颜色。另外,在树叶地图下应用了一个暗色的纹理,用来产生树影的感官。

正如上文所述,这款游戏还采用了一些物理学的基础知识,如汽车每个轮子的动力学都是独立计算的,使用围绕重力、表面摩擦力和地面法线的常规运动学方程式。

最后

目前这款游戏已经基本完成,不过,Anslo 认为也还有不少需要优化的地方,后续可能会改善天气效果、更多的车辆类型和控制器支持。

作为一款没有使用如 Unity、UE5 等游戏引擎,而仅是使用了 JavaScript 实现的游戏而言,它的轻量级获得了不少好评:

火星地图很有趣。另外,我发现汽车在倒挡时候可以同样快!

如果能教会自动驾驶漂移会很酷。

现在的我没有驾照,但是也能通过浏览器获得驾驶通信证了,荣誉!

期待后续可以加上背景音乐!

也有不少网友感叹似乎回到了高中时期玩《Geep Simulator》的年代。不过,目前《Slow Roads》暂时还没有开源版本的计划,但作者表示将来不排除有这种可能性。同时根据游戏的页面显示,Anslo 称正在致力于保持《Slow Roads》免费提供且没有广告,「享受这作为逃离资本主义的喘息之机」。

试玩地址:slowroads.io

参考资料:

https://anslo.medium.com/slow-roads-tl-dr-a664ac6bce40

https://twitter.com/anslogen

https://arstechnica.com/gaming/2022/10/slow-roads-offers-a-chill-endless-driving-experience-in-your-browser/

https://twitter.com/anslogen/status/1583850492463296517

☞☞

","force_purephv":"0","gnid":"9f7a881188ecc0ef0","img_data":[{"flag":2,"img":[{"desc":"","height":"80","s_url":"https://p0.ssl.img.360kuai.com/t0186957a1ca5352752_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0186957a1ca5352752.gif","width":"640"},{"desc":"","height":"1141","title":"","url":"https://p0.ssl.img.360kuai.com/t01f6997c24bc861b01.jpg","width":"1080"},{"desc":"","height":"162","title":"","url":"https://p0.ssl.img.360kuai.com/t01e0f618659081d9c8.jpg","width":"1080"},{"desc":"","height":"652","title":"","url":"https://p0.ssl.img.360kuai.com/t010f557715bf1822a3.jpg","width":"866"},{"desc":"","height":"410","title":"","url":"https://p0.ssl.img.360kuai.com/t01b0fe5139f3835f6d.jpg","width":"330"},{"desc":"","height":"1159","title":"","url":"https://p0.ssl.img.360kuai.com/t01ae263c7f246ba4a6.jpg","width":"1080"},{"desc":"","height":"506","title":"","url":"https://p0.ssl.img.360kuai.com/t01be64703c2389150f.jpg","width":"1080"},{"desc":"","height":"599","title":"","url":"https://p0.ssl.img.360kuai.com/t0114519c7728d7e597.jpg","width":"1080"},{"desc":"","height":"550","title":"","url":"https://p0.ssl.img.360kuai.com/t01aba14af202183505.jpg","width":"1080"},{"desc":"","height":"730","title":"","url":"https://p0.ssl.img.360kuai.com/t01692c8c7ed00f3455.jpg","width":"1080"}]}],"original":0,"pat":"art_src_1,otherc,sexf,sex8,sexc,disu_label,fts0,sts0","powerby":"hbase","pub_time":1668062948000,"pure":"","rawurl":"http://zm.news.so.com/39830c92a79beac0bd856c39a47fdbc5","redirect":0,"rptid":"5447b06a3996a011","s":"t","src":"CSDN","tag":[{"clk":"kgame_1:java","k":"java","u":""},{"clk":"kgame_1:twitter","k":"twitter","u":""},{"clk":"kgame_1:速度与激情","k":"速度与激情","u":""}],"title":"浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!

通轰炭4238一个有关猜数字游戏的javascript帮看看有什么错误 -
阮沿阁15731267367 ______ 脚本的分号用的中文的分号,最后一个方法还多了个加号 function Newgame() { document.myform.checknum.value=Math.round(Math.random()*999)+1; document.myform.inputnum.value=""; document.myform.displaynum.value="请在上面输入...

通轰炭4238了解和掌握Javascript的语法规则;熟练掌握Javascript语言的流程控制语句、过程控制和函数的语法
阮沿阁15731267367 ______ <html> <head> <script language="javascript"> var theNumber=parseInt(Math.random()*100); function resetNumber(){ theNumber=parseInt(Math.random()*100); } function guess(){ var inputNumber=prompt("请输入你猜测的数字"...

通轰炭4238谁有猜数字小游戏的JSP代码啊 -
阮沿阁15731267367 ______ rand.jsp<br><%@ page contentType="text/html;charset=gb2312"%><br><%@ page import="java.io.*,javax.servlet.*"%><br><html><br><script language=javascript><br>function out(obj){<br>var i = obj ;<br>if(i==0)<br>document.location.href=...

通轰炭4238用ASP编写一个 猜数字游戏的代码 -
阮沿阁15731267367 ______ 这可是本人亲自编的,e79fa5e98193e58685e5aeb931333264633438我只编了一个1-9数字的,猜字游戏,你可以改成你想要的<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><% action=request("action") dim sum,znum sum=...

通轰炭4238JSP 代码 猜数游戏 急拜托了各位 谢谢 -
阮沿阁15731267367 ______ test1.jsp <% Random rand = new Random(); int a = rand.nextInt(10); String aaa = request.getParameter("aaa"); int tmp = Integer.parseInt(aaa); if(tmp == a){ response.sendRedirect("test.jsp?mess=yes"); } else{ response.sendRedirect("test....

通轰炭4238求助高手修改下 100以内的随机数的产生 -
阮沿阁15731267367 ______ 你把下面的15改成100就行了 键盘输入不同种子,得不同的0-15无重复随机数 #include <stdio.h> #include <stdlib.h> main() { int seed=1000; // 种子 int i; int m[16] ; int nn=0; double r; printf("enter seed please\n"); scanf("%d",&seed); srand(...

通轰炭4238急!!!JAVA SCRIPT编程猜数字范围的小游戏 -
阮沿阁15731267367 ______ <script><br>function guess(){<br>var x=parseInt(Math.random()*10);<br>var y,i=1;<br>while(y!=x,i++<5){<br>y=prompt("请输入一个数字:");<br>if(x>y){alert('您猜的数字太小了'+',还剩下'+(5-i)+'次机会!');}<br>else if(x<y){alert('您猜...

通轰炭4238用JAVASCRIPT判断输入的是否为数字 -
阮沿阁15731267367 ______ 根据规则,NaN与任何东西比较,返回都是false.你需要调用isNaN函数 if(isNaN(x)) { document.write("输入错误"); }else { document.write("输入正确"); }

通轰炭4238JAVA 猜数字范围的小游戏 -
阮沿阁15731267367 ______ 猜数字范围的小游戏不知道什么意思,根据我的理解写了一个.<br>大小(1-10000):<span id='result'></span><br><form name='form1'><br> <input type="text" name="result"><br> <input type="button" onclick="showresult()" value="...

通轰炭4238java 编写猜数字游戏
阮沿阁15731267367 ______ 我现在去编码 你等等啊 我也是新手 呵呵 import javax.swing.JOptionPane; public class tt { public static void main(String args[]) { int realNumber=(int)(Math.random()*10000)+1; int yourGuess=0; int a1,b1,c1,d1;//系统产生的数,获取单个字符 a1=...

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024