语言写贪吃蛇墙角符号_超迷你贪吃蛇背后的代码趣谈 JavaScript

8b70551c1f7f68e31c2cd9bd0e62767c.png

趣乐博思教育 | 软件博览系列

趣乐博思源自清华,用心专业的少儿科学教育

史上最小的贪吃蛇,你能得几分?

一款迷你贪吃蛇

URL 是英文单词统一资源定位符的含义,这么说你或许不太理解,但我们每天都在使用它。

打开任何一种浏览器,我们上网前要做的第一件事情就是输入网址,在哪里输入呢?

对,就是这个 URL 地址栏:

4df4fda0ecd5d1f1254d477b01da49b7.png

Chrome 浏览器的地址栏

那你知道,这个 URL 地址栏除了能够输入网站地址外,还能做什么呢?

或许你想不到,聪明的电脑极客居然可以利用这个小小的地址栏空间开发出一款游戏!

这或许是世界上最迷你的贪吃蛇游戏了:

b5576bf6d2a426dac99335790ad83e96.gif

URL 贪吃蛇 | Ferrei

想试一试你的手速吗?点击下方阅读原文,挑战一下吧!

JavaScript 语言

这一类的游戏也有很多,比如还有类似于 Chrome 断网时的小恐龙游戏 T-Rex 也可以放置在 URL 地址栏中:

50bb76ec99edfb7b3a11a11fd75fb416.png

我也可以在地址栏中|T-Rex

好奇如你,一定会有这样的疑问,这些游戏是怎么做出来的?

这不得不提到一种神奇的计算机语言 — JavaScript。

不要被它的名字误解,虽然 JavaScript 带有 Java 这个词,它跟 Java 语言却没有任何关联。

或许 JavaScript 的发明者 Brendan Eich 最后悔的一件事就是把这款语言的名字加上了 Java,也怪不得他,那时的 Java 语言如日中天,谁都想蹭一下热度。

0ab770d785fe2ef3a4885088dbccc8f8.png

布兰登 艾克|Wikipedia

JavaScript 语言应用极为广泛,在著名“程序员社交网站” GitHub 上,占比最高的语言就是它:

55e34b6cd521c1528afc2bbfb3463552.png

GitHub Language Rank

编程领域有个著名的 Atwood 定律,它是这么说的:任何可以使用 JavaScript 来编写的应用,最终都会由 JS 编写:

Any application that can be written in JavaScript, will eventually be written in JavaScript. 

Atwood's Law

而 JavaScript 能做什么?

几乎可以说无所不能,从前端到服务器,从 Web 到游戏,从桌面到手机,从程序到艺术,从软件到硬件,到处都是 JavaScript 大显身手的舞台。

好了,最后我们来看一下,这一类 URL 地址栏游戏到底是怎么实现的。

代码的原理

URL 地址栏游戏都是使用 JavaScript 语言编写的,为什么?

因为 JS 可以控制地址栏的内容,尤其是 JS 可以对地址栏的历史 History进行访问。

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>URL 地址栏游戏核心代码title>
head>
<body>
<h1>foo.htmlh1>
body>
<script>var stateObj = { foo: "bar" };
    history.replaceState(stateObj, "page 2", "bar.html⡏⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁");script>
html>

把这段代码保存为一个 foo.html 页面,打开你就会发现地址栏中已经出现了一条贪吃蛇和它喜欢吃的小果子,不难发现核心的语句就在这里:

history.replaceState()

这句话可以修改地址栏的历史记录,而页面始终保持不变,这就是 URL 地址栏游戏的秘密!

当然,要让蛇能动起来,还需要不断的变换地址,添加键盘响应时间,设置记分系统等等周边工作,你有兴趣来做一款自己的 URL 迷你游戏吗?

一本广受好评的书推荐给喜欢编程的你:


趣乐博思教育「剑指信奥 | 算法系列」正在进行时:

程序的灵魂|写在算法的开篇

7c5c9b4ea2052753aba123835b5ac3a9.png


如果您喜欢趣乐博思教育,请关注我们的公众号,发现您更优秀的孩子!

如果您从这篇文章有所收获,请点亮下方在看,或转发到朋友圈,谢谢!

好文在看安排下~

20522a4ba8dfd62d0cb1389a41fc8605.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值