使用数据结构给女朋友写个Html5走迷宫游戏

2020-04-25 07:37:05易采站长站整理

先看效果图(在线电脑尝试地址http://biggsai.com/maze.html):

在这里插入图片描述

起因

在这里插入图片描述
 

又到深夜了,我按照以往在

公众号
写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满!

在这里插入图片描述
 

超越妹妹时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个小游戏啥的!

在这里插入图片描述
 

当我码完字准备睡觉时:写不好别睡觉!

在这里插入图片描述

分析

如果用数据结构与算法造出东西来呢?

什么东西简单容易呢?我百度一下,我靠,这个鸟游戏原来不好搞啊,得接触一堆不熟悉的东西,搞不来搞不来。

有了(

灵光一闪
),写个猜数字游戏,问他加减乘除等于几。

超越妹妹又不是小孩子,糊弄不过去。

经过一番折腾,终于在半夜12点确定写迷宫小游戏了。大概弄清楚其中的几个步骤。

大概是:

画线—>画迷宫(擦线)—>方块移动、移动约束(不出界不穿墙)—>完成游戏。画线(棋盘)

对于html+js(canvas)画的东西,之前学过javaswing应该有点映像。在html中有个

canvas
的画布,可以在上面画一些东西和声明一些监听(键盘监听)。

对于迷宫来说,那些线条是没有属性的,只有