网页游戏“贪食蛇”改进(1)

    功能:蛇吃食物有四种情况:走到的地方有食物;走到的地方没有食物;走到的地方是墙壁;走到的地方是自己的身体。吃到食物后,蛇的身体会变长;碰到墙壁或咬到自己 Game Over,询问是否重新开始。

    整个游戏是在一个<div>框子(地图)里展开的,蛇有地图里的一系列<div>构成,初始状态(刚刚打开页面)蛇是一个<div>框,蛇头和蛇尾是在一起的,就是这个<div>框,以后吃了食物后<div>个数会变多,蛇就会长长。食物用一个<span>框表示,初始时和蛇一样其位置是随机产生的。蛇和食物的坐标用<div>和<span>的绝对位置表示。

    算法的关键是当蛇移动到新的位置后,判断前述的几种情况,做出相应的处理。而二维数组 Map[][] 就是判断的依据。二维数组 Map[][]通过其元素的值来表示蛇身、食物和空地。蛇身、食物和空地的值分别为'S'、'F' 和 '0'。

    用 Javascript 编程和其他语言的一个大的区别就是键盘的控制代码不同。js是通过 Key=event.keyCode 语句获取键盘码,再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。

    当然该段代码的最大价值还是让我们了解到网页游戏的大概写法,而算法其实是最重要的,把一个游戏的设想变为一堆包含许多的函数的结构化的代码,是值得我们借鉴和学习的。这里的难点是确定蛇是怎么移动的。

    代码里有我的注释,结合我的以上大概分析介绍差不多能看懂了。

    本人在调试的时候打算给原来的代码加一段地图内方格显示功能,就写了个ShowGrid()函数,采用代码生成方格。但由于在2层循环内完成方格显示,效率十分低下,基本不能采用此方法。改进以后,不是生成多个包含单个单元格的表格,而是生成一个包含若干单元格的表格,结果效率有巨大的提高。

    改进后,有如下功能:
    - 可改变单元格数;
    - 可控制暂停;
    - 速度控制功能;
    - 蛇头、蛇身和蛇尾形状美化;
    - 可控制显示和隐藏背景图片、方格线;
    - 修正了长度等于或大于2节的蛇体,按倒退键时结束游戏的错误;

    进一步改进建议:
    - 控制蛇头的方向,可用动画图片代替蛇头。
    - 蛇身和蛇尾也可用图片代替。
    - 增加声音;
    - 增加换肤功能:背景、方格、蛇的皮肤可定制;
    - 自动演示功能;
    ……

    查看代码:http://blog.csdn.net/zhangking/archive/2008/09/23/2965292.aspx

    作者:张庆(网眼)
    演示地址:http://www.why100000.com/_lab/docs/js_code/snake_pro/snake_pro.htm
    更多文章:http://blog.why100000.com
    2008-9-23

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值