我正在参与「码上挑战赛」概况请看：码上挑战赛来了！

1.布景:

用前端三件套复原了小时候玩的贪吃蛇小游戏，先是丰富了一下ui，然后凭‘技术’弥补了手残的惋惜（不死之身），乃至答应‘越界’行为。整个项目主要由两部分组成,第一个是布景框,这边选用的是护眼的绿色布景，加上对比色边框凸显出的小蛇的动画，然后就是小蛇元素,其移动速度恒定，生成的色彩随机，获取键盘事件转换移动方向，运转轨迹。整个完成该进程仍是非常有趣的,尽管比较简单,实际涉及的技术也不是很复杂,可是仍是get到了码上这个插件的方便之处。 项目链接: code./pen/7142291…

2.完成进程:

• 设置移动方向： 方向默以为四个，经过监听键盘的wsda键进行辨认，对应1-4四种方向

 function changeMd() {
            //更改记录方向的数组
            snakeNum = replaceNum(snakeNum);
            //调用移动方法，每节移动
            for (let i = 0; i < snakeNum.length; i++) {
                if (i === 0) {
                    moving(map.children[i], snakeNum[i], true);
                } else {
                    moving(map.children[i], snakeNum[i], false);
                }
            }
        }

• 随机在画布内生成食物

            let sBody = document.createElement('div');
            sBody.id = id;
            sBody.className = 'snake'
            if (isFood) {
                sBody.style.left = Math.ceil(Math.random() * 420 / 20) * 20 + 'px';
                sBody.style.top = Math.ceil(Math.random() * 420 / 20) * 20 + 'px';
            }
            id === 0 ? true : sBody.style.backgroundColor = color;
            return sBody;
        }

• 吃掉食物后发生蛇身改变

            let food = map.children[snakeNum.length]
            let foodLeft = food.offsetLeft;
            let foodTop = food.offsetTop;
            let isEat = false;
            switch (num) {//判断是否吃掉食物）
      if (isEat) {//吃掉后，改变小蛇的长度
                map.appendChild(AddSnake(snakeNum.length + 1, randomColor(), true));//生成新的食物
                snakeNum.push(0);//往记录方向的数组中增加一位
                //把新的蛇div放到蛇的结尾
                let snakeNewDom = map.children[snakeNum.length - 1];
                let snakeLastDom = map.children[snakeNum.length - 2];
                snakeNewDom.style.left = snakeLastDom.offsetLeft + 'px';
                snakeNewDom.style.top = snakeLastDom.offsetTop + 'px';
            }

3.完成截图: