原生js面向对象贪吃蛇

初学js的面向对象编程,便用贪吃蛇小游戏练练手~

1.蛇实例

1. 蛇头,身体,尾,食物都通过方块构造函数实例出来,传入坐标(x,y),类名className参数设置位置及样式,把蛇身每一个方块位置存为数组。
2.把头,身体,尾形成链表关系,保证能一起移动,在后续生成新蛇头和身体时,随时更新链表关系
 
1     snakeHead.last = null;
2     snakeHead.next = snakeBody1;
3 
4     snakeBody1.last = snakeHead;
5     snakeBody1.next = snakeBody2;
6 
7     snakeBody2.last = snakeBody1;
8     snakeBody2.next = null;
3. 移动:把蛇头当前坐标加上走的方向就是蛇头下一步走的坐标,走的方向用对象表示
 this.directionNum = {
        left: {x: -1, y: 0},
        right: {x: 1, y: 0},
        up: {x: 0, y: -1 },
        down: {x: 0, y: 1}
    };

    this.direction = this.directionNum.right//设置默认方向

    this.head.x + this.direction.x,
    this.head.y + this.direction.y

注:每次移动就在蛇头要走的下一坐标生成新蛇头,旧蛇头移除,在该位置生成新身体(更新链表)

假如下一坐标是食物,则吃,不移除蛇尾。没有食物,正常移动,移除蛇尾(更新链表),并把蛇的每一个方块坐标数组更新

2.生成食物实例

1. 将随机出来的食物坐标与蛇身上的每一个方块坐标对比,并且要保证随机位置不会出现在蛇身上
2. 食物坐标与蛇头要走下一位置坐标相等,即代表吃,之后只需要改变食物的位置即可,不需要生成新食物

3.添加定时器

不断让蛇头坐标与方向属性相加,蛇就可以移动了

4.键盘事件(keydown)

1. 控制上下左右四个方向(键值e.which=37~40)保证改变方向时,当前方向不与之相反
2. 改变`this.direction`的值使之变向
原文地址:https://www.cnblogs.com/isommer/p/12731505.html