今天心血来潮,想给自己的网站整个小游戏玩玩,弄个啥就决定是你,贪吃蛇!以前老喜欢在诺基亚上面玩,满满的回忆。
开干!先得把游戏界面整出来,这玩意儿得用 HTML 搭个框架。我琢磨着用个 标签应该就差不多,这玩意儿画图方便。给它设置个宽高,再来个边框,像那么回事儿。
搞个格子
光秃秃的界面可不行,得给它画上网格,这样蛇和食物才有地方待。咋画?我想着用循环来画横线和竖线,间距啥的都调看着舒服就行。
让蛇动起来
重头戏来,得让蛇动起来!咱得有条蛇?我用数组来表示这条蛇,数组里的每个元素都是一个对象,记录蛇身体每个部分的位置(x 坐标和 y 坐标)。
蛇咋动?我的想法是,每隔一段时间,就给蛇的数组里加个新的元素,这个新元素就是新的蛇头,它的位置根据蛇当前移动的方向来定。把蛇尾巴去掉,这样看起来就像蛇在往前爬一样。
还得能控制蛇往哪儿走。我用键盘事件来监听,按下上、下、左、右箭头键的时候,就改变蛇的移动方向。
来点吃的
光让蛇瞎跑可不行,还得给它来点吃的。我弄个“食物”对象,也是记录它的位置。这个食物的位置得随机生成,不能跟蛇重叠,不然就穿帮。
咋判断蛇吃到食物?很简单,只要蛇头的坐标跟食物的坐标一样,那就说明吃到。吃到之后,蛇的身体就得变长,咋变长?就在蛇的数组里多加个元素呗。
游戏结束
玩游戏总得有个结束的时候,啥时候结束?我想两个条件:
满足这两个条件中的任意一个,游戏就结束,弹个提示框,告诉玩家游戏结束。
把这些代码都整合起来,再加点细节上的处理,比如计分、调整速度啥的,一个简单的贪吃蛇小游戏就大功告成!
看着自己在网站上弄的小游戏,还挺有成就感的。虽然简单,但也是自己一点一点折腾出来的,以后再慢慢琢磨,加点新花样!