原生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`的值使之变向