make snake with touch controls's game

Click here for free DL of the app version that can save data.

No:52319

107

←

Prev Next

→

make snake with touch controls
Developer User21843｜Date and time 24/3/20 14:56:44
Build time 9.702 sec｜Game capacity 2.489KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

canvas.width = 400;
    canvas.height = 400;

document.body.appendChild(canvas);

const grid = 20;
    const snake = {
        x: 10,
        y: 10,
        dx: 0,
        dy: 0,
        cells: [],
        maxCells: 4
    };

const apple = {
        x: 5,
        y: 5
    };

function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight' && snake.dx === 0) {
            snake.dx = grid;
            snake.dy = 0;
        }

if (e.key === 'ArrowLeft' && snake.dx === 0) {
            snake.dx = -grid;
            snake.dy = 0;
        }

if (e.key === 'ArrowUp' && snake.dy === 0) {
            snake.dx = 0;
            snake.dy = -grid;
        }

if (e.key === 'ArrowDown' && snake.dy === 0) {
            snake.dx = 0;
            snake.dy = grid;
        }
    });

function update() {
        snake.x += snake.dx;
        snake.y += snake.dy;

if (snake.x < 0) {
            snake.x = canvas.width - grid;
        }

if (snake.x >= canvas.width) {
            snake.x = 0;
        }

if (snake.y < 0) {
            snake.y = canvas.height - grid;
        }

if (snake.y >= canvas.height) {
            snake.y = 0;
        }

if (snake.cells.some(cell => cell.x === snake.x && cell.y === snake.y)) {
            snake.x = 10;
            snake.y = 10;
            snake.cells = [];
            snake.maxCells = 4;
            snake.dx = 0;
            snake.dy = 0;
        }

snake.cells.unshift({ x: snake.x, y: snake.y });

if (snake.cells.length > snake.maxCells) {
            snake.cells.pop();
        }

if (snake.x === apple.x && snake.y === apple.y) {
            snake.maxCells++;
            apple.x = getRandomInt(0, 20) * grid;
            apple.y = getRandomInt(0, 20) * grid;
        }
    }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'red';
        ctx.fillRect(apple.x, apple.y, grid, grid);

ctx.fillStyle = 'green';
        snake.cells.forEach(cell => {
            ctx.fillRect(cell.x, cell.y, grid, grid);
        });
    }

function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
    }

loop();
</script>