javascript - 如何在键码的 switch case 语句中放置一个间隔，而不允许用户两次制表符

Question

我正在构建一个 pacman 游戏，我放置了一个 switch 语句并放置了间隔，以便用户必须按一次向右箭头，pacman 将继续向右移动问题是，如果我按两次它移动的速度是两倍，然后我按右然后离开它会左右移动......

我将显示第一个没有问题的代码，这段代码没有间隔

无间隔的JS代码：

const grid = document.querySelector('.grid');
const scoreEl = document.getElementById('score');
const width = 28;
let squares = [];
let score = 0;

const layout = [
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
    1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,
    1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
    1,3,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,3,1,
    1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
    1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
    1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,
    1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,
    1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,
    1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,
    1,1,1,1,1,1,0,1,1,4,4,4,4,4,4,4,4,4,4,1,1,0,1,1,1,1,1,1,
    1,1,1,1,1,1,0,1,1,4,1,1,1,2,2,1,1,1,4,1,1,0,1,1,1,1,1,1,
    1,1,1,1,1,1,0,1,1,4,1,2,2,2,2,2,2,1,4,1,1,0,1,1,1,1,1,1,
    4,4,4,4,4,4,0,0,0,4,1,2,2,2,2,2,2,1,4,0,0,0,4,4,4,4,4,4,
    1,1,1,1,1,1,0,1,1,4,1,2,2,2,2,2,2,1,4,1,1,0,1,1,1,1,1,1,
    1,1,1,1,1,1,0,1,1,4,1,1,1,1,1,1,1,1,4,1,1,0,1,1,1,1,1,1,
    1,1,1,1,1,1,0,1,1,4,1,1,1,1,1,1,1,1,4,1,1,0,1,1,1,1,1,1,
    1,0,0,0,0,0,0,0,0,4,4,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,1,
    1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
    1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
    1,3,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,3,1,
    1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1,
    1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1,
    1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1,
    1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1,
    1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1,
    1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
];

// 0 - pacdots
// 1 - wall
// 2 - ghost lair
// 3 - powerpellets
// 4 - empty

function createBoard() {
    for (let i = 0; i < layout.length; i++) {
        const square = document.createElement('div');
        grid.appendChild(square);
        squares.push(square);

        if (layout[i] === 0) {
            squares[i].classList.add('pac-dot');
        } else if (layout[i] === 1) {
            squares[i].classList.add('wall');
        } else if (layout[i] === 2) {
            squares[i].classList.add('ghost-lair');
        } else if (layout[i] === 3) {
            squares[i].classList.add('power-pallets');
        }
    }
}

createBoard();

let pacManPosition = 490;
squares[pacManPosition].classList.add('pac-man');

function move(e) {
    squares[pacManPosition].classList.remove('pac-man');
    //console.log(e.key)

    //fix all these cases
    switch (e.key) {
        case 'ArrowUp':
            if (!squares[pacManPosition - width].classList.contains('wall')) {
                pacManPosition -= width;
            }
        break;

        case 'ArrowRight':
            if (!squares[pacManPosition + 1].classList.contains('wall')) {
                pacManPosition++;
            }
        break;

        case 'ArrowDown':
            console.log('DOWN');

            if (!squares[pacManPosition + width].classList.contains('wall')) {
                pacManPosition += width;
            }

        break;

        case 'ArrowLeft':
            if (!squares[pacManPosition - 1].classList.contains('wall')) {
                pacManPosition--;
            }
        break;
    }
    squares[pacManPosition].classList.add('pac-man');
    pacdotsEaten();
    powerPelletsEaten();
}
document.addEventListener('keyup', move);

带有间隔的JS代码：

//
let myInt = '';
//
function move(e) {
    squares[pacManPosition].classList.remove('pac-man');
    //console.log(e.key)

    //fix all these cases
    switch (e.key) {
        case 'ArrowUp':
            myInt = setInterval( function () {
                //console.log('up')
                if (!squares[pacManPosition - width].classList.contains('wall')) {
                    squares[pacManPosition].classList.remove('pac-man');
                    pacManPosition -= width;
                    squares[pacManPosition].classList.add('pac-man');
                }
            }, 400)
        break;

        case 'ArrowRight':
            myInt = setInterval( function () {
                //console.log('up')
                if (!squares[pacManPosition + 1].classList.contains('wall')) {
                    squares[pacManPosition].classList.remove('pac-man');
                    pacManPosition++;
                    squares[pacManPosition].classList.add('pac-man');
                }
            }, 400)
        break;

        case 'ArrowDown':
            console.log('DOWN');

            myInt = setInterval( function () {
                //console.log('up')
                if (!squares[pacManPosition + width].classList.contains('wall')) {
                    squares[pacManPosition].classList.remove('pac-man');
                    pacManPosition += width;
                    squares[pacManPosition].classList.add('pac-man');
                    }
                }, 400)

        break;

        case 'ArrowLeft':
            myInt = setInterval( function () {
                //console.log('up')
                if (!squares[pacManPosition - 1].classList.contains('wall')) {
                    squares[pacManPosition].classList.remove('pac-man');
                    pacManPosition--;
                    squares[pacManPosition].classList.add('pac-man');
                }
            }, 400)
        break;
    }
    squares[pacManPosition].classList.add('pac-man');
    pacdotsEaten();
    powerPelletsEaten();
}

我怎样才能解决这个问题？

标签： javascript

Answer 1

有人回答说我应该清除每个按下的键的间隔。我不知道为什么我没想到

答案 ：

case 'ArrowUp':
            clearInterval(myInt);
            myInt = setInterval( function () {
                //console.log('up')
                if (!squares[pacManPosition - width].classList.contains('wall')) {
                    powerPelletsEaten();
                    squares[pacManPosition].classList.remove('pac-man');
                    pacManPosition -= width;
                    squares[pacManPosition].classList.add('pac-man');
                    pacdotsEaten();
                }
            }, 400)
        break;