JS实现最简单的贪吃蛇小游戏（面向对象思想）

本次练习主要是练习javaScript的面对对象思想

话不多说，先看看效果图

功能描述：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束

                  2.通过上、下、左、右四个按键，控制小蛇运动的方向

                   3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物

                    4.统计分数，每吃一个食物就加一分

具体封装如下

1.食物对象(食物的横纵坐标,宽和高,背景颜色)
     *
     * 食物需要画出来---渲染出来--画,随机的画,在画食物的时候要先删除原来的食物
     *
 2 .小蛇对象(宽，高,方向)
     * 蛇需要画出来---渲染出来--画,每走一次,需要把前一次的小蛇删除
     * 蛇走的时候,需要方向,是否吃到了食物
     * 小蛇移动的时候,是否吃了食物(吃了就要把小蛇的后面加一个食物的宽和高，颜色,无非就是把原来的蛇尾复制了一个加入到        body中,------>把蛇尾拿出来再次加入到蛇尾的后面)
     
 3. 游戏对象(初始化食物,初始化小蛇,自动移动小蛇,判断按键)

     * 自动的设置小蛇移动,判断小蛇是否撞墙,用户按下了什么方向键

具体实现代码如下：

1.html部分，html部分比较简单，主要是显示一个地图，设置样式

    
    
    



贪吃蛇

    
0分

2.js部分的代码

背景图：bg.jpg