变量越长越容易记

先学算法具有巨大的优势
一个是写的准 一个是调的快

如果wall会修改的话就用let 如果不会就用const

注解都进代码里拉 分开不太好 等会把项目地址放进来

两个等号会尝试转换类型 三个等于必须类型和值都相同

必须将前端写的逻辑好一点 不然就去讨论八股文了 将前端写的思维缜密 让面试官被逮着走而且实现能力非常强

一般有趣的操作逻辑都不会太简单 最好是去实践一下 cloud太水了
根据自己的想法去实现操作 很多操作都会变得非常的有趣

移动

抛出一个新球
this.cells[i]=this.cells[i-1];千万不能这样写 会有 复引用 (特殊强调)问题
需要使用json来新建一个用来复制
this.cells[i]=JSON.parse(JSON.stringify(this.cells[i-1]));
//注意这里长度为 3 但是下标为2 因此i是从下一位开始多了一位如下图

每个元素向后移动一位

1 2 3(i-1)->
1 1 2 3(i)//1没有动向后移动一位 相当于多了一个头部的复制

游戏逻辑

xswl 如果中间某个时刻 蛇的一左一右 一个向下 一个向右 拐弯 这时候这个蛇就会有一个缺口

提供的一个解决方法是 仅仅头部和尾部一起动 拐角的地方一直都是圆弧

回合制游戏 应该两个同时输入过后才能够移动

裁判应该放到公共的位置 不能每条蛇判断它自己能不能动 可以放到gamemap里边

js判断是否相同需要三个等号 不相同是!==

写所有游戏都是把
一些逻辑放到start里边
把每一帧需要更新的东西放到update里边

蛇的速度

只有每帧都处理以下 做出来的动画才显得不僵硬

update_move() {
this.cells[0].y -= this.speed * this.timedelta / 1000;//timedelta是父属性 直接使用this就可以了 此外speed是每秒5个格子 timedelta是每一帧
//距离上一帧的时间间隔 单位是毫秒 这个函数 是每帧移动的距离  所以speed除以1000
}

此外 这里的y 和 x都是经过 转换的 这才是符合逻辑的 y是r+0.5 后者传来是r的初始位置
注意正方向 只需要y-=而不需要转换为-y

绘画出来蛇

注意 这里不会覆盖掉墙是因为 先创建蛇 后创建墙 不会蛇把墙给覆盖掉
这里有snake写在gamemap的构造器里

render()渲染
画圆api ctx的ctx.beginPath();和ctx.arc(横,纵,半径,圆弧起始角度,圆弧的终止角度),数学上的xy不同于canvas的坐标

const L=this.gamemap.L;
const ctx=this.gamemap.ctx;

ctx.fillStyle=this.color;//ctx是引用
for(const cell of this.cells){//在js里边 of遍历的是值 in遍历的是下标
    ctx.beginPath();
    ctx.arc(cell.x*L,cell.y*L,L/2,0,Math.PI*2)//前两个参数是两个小圆的中点（圆心） 这里已经加过0.5了调用的是x
}

蛇是每一帧都需要画出来的 所以需要引入AcGameObject
构造时先调用父类

①可以存在仅仅引入对象尽管这个对象的属性并没有事先声明

constructor(info,gamemap){
        super();

        this.id=info.id;
        this.color=info.color;
        this.gamemap=gamemap;
    }

②可以声明数组 并在内部进行创建

new Snake({ id: 0, color: "#4876EC", r: this.rows - 2, c: 1 }, this),
new Snake({ id: 1, color: "#F94848", r: 1, c: this.cols - 2 }, this)];//花括号就代表一个对象并不需要单独声明这是info

学会敲代码

快速敲代码跳出括号还是得熟练使用方向键

删除出现成对的括号 仅仅需要删除一边的即可

使用符号本身用来跳出括号

定义过公共类后 new 类名+回车 会自动引入该类

<sc+回车 会补全一部分代码 完整的还是需要引入插件

自定义的关于shift+空格跳至行尾

双击类名就可以快速选择类名 

选择类名后点击`'`或`"`就可以给类名前后包裹起来

ctrl+z也可以在一定程度上避免回车符的乱改动

tab和shift+tab可以调整编排 不需要单独一个一个删除制表符

在不同的环境中`ctrl`+`/`会出现不同的 标识

如果遍历的时候没有调用属性`(cell.x)`打出`.`之后并没有成功出现x说明遍历的时候出错了 
遍历的对象引用错了`for(const cell of this.cells){//在js里边 of遍历的是值 in遍历的是下标`

cell逻辑

传统的坐标和canvas坐标需要存在转换
定义细胞 起始点应该是

constructor(r,c){
        this.r=r;
        this.c=c;
        this.x=c+0.5;
        this.y=r+0.5;
    }

制定游戏规则
前十步 蛇的长度增加1 后边每三步增加1

需要强调的是 现在实现的是前端实现地图 倘若两个玩家都在前端实现地图 那么对战时需要以玩家1还是玩家2 前端代码实现地图是不科学的
之后会把生成地图的逻辑传到sever端 生成的地图发给两个客户端 前端就没有地图的逻辑了

游戏策略判定

如果两条蛇下一时刻可以同时走到一个格子判定为平局 然而如果其中一条蛇只能走这个格子 另一条蛇一定不能走这个格子 会对优势蛇不公平

横纵坐标相加下一时刻必定加一 两个蛇都是奇偶奇偶 存在一个格子使两者相同格子(算法思想m)

解决上述问题仅需要将地图调整为偶数*奇数就可以了(妙啊)

但这时候就不能将地图看为轴对称了 我们需要改为中心对称

x’=rows-1-x;y=cols-1-y;

退出连接vue

ctrl+c在powershell退出vue连接