为什么键盘事件不起作用

<!DOCTYPE html>




<br> h2{<br> text-align: center;<br> }<br> p{<br> text-align: center;<br> }<br> #snakeMap{<br> width: 500px;<br> height: 500px;<br> border: 5px solid gold;<br> margin: 0 auto;<br> }<br> .row{<br> height: 20px;<br> /*border: 1px solid red;*/<br> background: rgb(181,68,52);<br> }<br> .col{<br> width: 20px;<br> height: 20px;<br> border: 1px solid black;<br> box-sizing: border-box;<br> float: left;<br> }<br> .activeSnake{<br> background: rgb(178,143,206);<br> }<br> .food{<br> background: green;<br> }<br>



贪吃蛇


0


        </div>
    </div>
</body>
<script type="text/javascript">
    //获取分数
    var score = document.getElementById('score');
    //获取地图
    var snakeMap = document.getElementById('snakeMap');
    //设置行数
    var rowNumber = 15;
    //设置列数
    var colNumber = 10;
    //设置地图的宽,高
    snakeMap.style.width = colNumber * 20 + 'px';
    snakeMap.style.height = rowNumber * 20 + 'px';
    var arrMap = [];//记录地图中的行
    var direction = 'right';// 记录方向
    var changeDir = true ;//设置点击按键是否改变方向
    var timerDelay;//设置一个延时器
    var timerMove;//设置一个定时器
    //定义蛇的位置
    var x = 2;
    var y = 0;
    //食物的坐标
    var foodX = 0;
    var foodY = 0;
    var scoreNum = 0;//记录分数
    //设置地图中的单元格
    for (var i = 0;i < rowNumber;i++) {
        //创建行
        var rowDiv = document.createElement('div');
        //给行添加 class 名
        rowDiv.className = 'row';
        //添加元素节点
        snakeMap.appendChild(rowDiv);
        var arrRow = [];//记录行中的每一个单元格
        for (var j = 0; j < colNumber;j++) {
            var colDiv = document.createElement('div');
            colDiv.className = 'col';
            rowDiv.appendChild(colDiv);
            arrRow.push(colDiv);
        }
        //往数组里添加元素
        arrMap.push(arrRow);
    }
    console.log(arrMap)
    var snakeBody = [];//定义蛇身
    for (var i = 0;i < 3;i++){
        //蛇身设置颜色
        arrMap[0][i].className = 'col activeSnake';
        snakeBody[i] = arrMap[0][i];
    }
    //为页面添加键盘事件
    document.onkeydown = function (e) {
        //如果 changeDir 值为 false, 则直接跳出键盘事件
        if (!changeDir){
            return;
        }
        var event = window.event|e;
        //如果蛇向右移动,而且点击左按键,则不作任何操作
        if (direction == 'right' && event.keyCode == 37) {
            return;
        } else if (direction == 'left' && event.keyCode == 39){
            return;
        }else if (direction == 'top' && event.keyCode == 40){
            return;
        }else if (direction == 'bottom' && event.keyCode == 38){
            return;
        }
        //方向键控制方向
        switch (event.keyCode) {
            case 37:{
                direction = 'left';
                break;
            }
            case 38:{
                direction = 'top';
                break;
            }
            case 39:{
                direction = 'right';
                break;
            }
            case 40:{
                direction = 'bottom';
                break;
            }
            default:{
                break;
            }
        }
        //为了避免快速对此点击方向按键(修改方向)
        //防止出现 bug
        changeDir = false;
        //300毫秒后,将bool 的值赋值为 true;
        timerDelay = setTimeout(function () {
            changeDir = true;
        },100)
    }
    //蛇的移动
    timerMove = setInterval (function(){
        //清除延时器
        clearTimeout(timerDelay);
        //为了防止下次点击按键触发事件
        changeDir = true;
        //判断蛇移动的方向
        switch (direction) {
            case 'right':{
                x++;
                break;
            }
            case 'left':{
                x--;
                break;
            }
            case 'top':{
                y--;
                break;
            }
            case 'bottom':{
                y++;
                break;
            }
            default:{
                break;
            }
        }
        //超出范围
        if (x >= colNumber||x < 0 || y >= rowNumber || y < 0){
            alert('game over');
            clearInterval(timerMove);
            return;
        }
        //碰到自己
        for (var i = 0;i < snakeBody.length;i++) {
            //将此时移动之后的蛇头位置和再次之前的所有蛇身所在的 div 比较,如果相同,则说明吃到蛇身
            if (snakeBody[i] == arrMap[y][x]) {
                alert('game over');
                //关闭蛇移动的定时器
                clearInterval (timerMove);
                return;// 终止函数执行
            }
        }
        //判断前方是否是食物
        if (foodX == x && foodY == y) {
            arrMap[y][x].className = 'col activeSnake';
            //添加蛇的长度
            snakeBody.push(arrMap[y][x]);
            //加分
            scoreNum++;
            score.innerHTML = scoreNum;
            //随机食物
            ranFood();
        }else {
            //删除蛇尾
            snakeBody[0].className = 'col';
            snakeBody.shift();
            //增加蛇头
            arrMap[y][x].className = 'col activeSnake';
            snakeBody.push(arrMap[y][x]);
        }
    },300) 

    //随机数
    function ranNum (min,max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    //随机食物
    function ranFood () {
        foodX = ranNum(0,colNumber - 1);
        foodY = ranNum(0,rowNumber - 1);
        //判断食物的位置是否与蛇身重合
        if (arrMap[foodY][foodX].className == 'col activeSnake') {
            ranFood();//继续随机食物
        } else {
            //将随机出的食物设置颜色
            arrMap[foodY][foodX].className = 'food col';
        }
    }
    ranFood();

</script>

这是一段贪吃蛇代码,找了半天没发现哪里有错,键盘事件总是不起作用

2个回答

f12 进去, 打断点, 找问题

在函数里面输出一下e看看获取的对不

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问