我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

1.背景:

用前端三件套还原了小时候玩的贪吃蛇小游戏，先是丰富了一下ui，然后凭‘技术’弥补了手残的遗憾（不死之身），甚至允许‘越界’行为。整个项目主要由两部分组成,第一个是背景框,这边选用的是护眼的绿色背景，加上对比色边框凸显出的小蛇的动画，然后就是小蛇元素,其移动速度恒定，生成的颜色随机，获取键盘事件转换移动方向，运行轨道。整个实现该过程还是十分有趣的,虽然比较简单,实际涉及的技术也不是很复杂,但是还是get到了码上掘金这个插件的方便之处。 项目链接: code.juejin.cn/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.实现截图: