canvas贪吃蛇游戏（原创）

Html

Css

#mycanvas {
	display:block;
	margin:0 auto;
	border:1px solid black;
}

let canvas = document.querySelector('#mycanvas');
let context = canvas.getContext('2d');

let direction = 2;
let timer = null;
let x = 8;
let y = 8;
let size = 8;
let len = 10;
let speed = 100;
let map = [];
let ranx;
let rany;

function game() {
    switch (direction) {
        case 0:
            x = x - size;
            break;
        case 1:
            y = y - size;
            break;
        case 2:
            x = x + size;
            break;
        case 3:
            y = y + size;
            break;

}

if (x > canvas.width || x < 0 || y > canvas.height || y < 0) {
        clearInterval(timer);
        alert('game over');
        location.reload();
    }

let crash = map.some(function(elm) {
        return elm.x === x && elm.y === y;
    });

if (crash) {
        clearInterval(timer);
        alert('game over');
        location.reload();
    }

map.push({
        x: x,
        y: y
    });

if (ranx == x && rany == y) {
        len++;
        getFood();
    }
    if (map.length > len) {
        let one = map.shift();
        context.clearRect(one.x, one.y, size, size);
    }

context.fillStyle = "green";
    context.fillRect(x, y, size, size);
}

timer = setInterval(game, speed);

document.onkeydown = function(ev) {
    if (ev.keyCode >= 37 && ev.keyCode <= 40) {
        direction = ev.keyCode - 37;
        console.log(direction);
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas贪吃蛇游戏（原创）

代码描述：canvas贪吃蛇游戏代码

更新时间：2020-09-21 00:15:45

1

最新

发表评论全部评论

暂时没有评论！

我家的猫咪叫英俊0

2020/11/6 18:17:35

有bug，不好意思回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

淡然

相关代码

canvas贪吃蛇游戏（原创）

最新