帮我用js写一个贪吃蛇小游戏

好的，以下是一个简单的贪吃蛇小游戏的JS代码，你可以在HTML页面中引用它：

// 定义画布大小
var canvasWidth = 600;
var canvasHeight = 600;

// 定义每个正方形格子的大小
var blockSize = 10;

// 计算画布中可以放置多少个正方形格子
var widthInBlocks = canvasWidth/blockSize;
var heightInBlocks = canvasHeight/blockSize;

// 定义画布和上下文
var canvas = document.createElement('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

// 定义贪吃蛇初始位置
var snake = {
    segments: [[6,4], [5,4], [4,4]],
    direction: 'right'
};

// 定义食物初始位置
var food = {
    location: [Math.floor(Math.random()*widthInBlocks), Math.floor(Math.random()*heightInBlocks)]
};

// 定义游戏进行与结束的变量
var intervalId;
var gameOver = false;

// 绘制正方形格子
var drawBlock = function(ctx, position) {
    var x = position[0] * blockSize;
    var y = position[1] * blockSize;
    ctx.fillRect(x, y, blockSize, blockSize);
};

// 绘制贪吃蛇
var drawSnake = function(ctx) {
    for (var i = 0; i < snake.segments.length; i++) {
        drawBlock(ctx, snake.segments[i]);
    }
};

// 绘制食物
var drawFood = function(ctx) {
    drawBlock(ctx, food.location);
};

// 移动贪吃蛇
var moveSnake = function() {
    var head = snake.segments[0];
    switch (snake.direction) {
        case 'up':
            snake.segments.unshift([head[0], head[1] - 1]);
            break;
        case 'down':
            snake.segments.unshift([head[0], head[1] + 1]);
            break;
        case 'left':
            snake.segments.unshift([head[0] - 1, head[1]]);
            break;
        case 'right':
            snake.segments.unshift([head[0] + 1, head[1]]);
            break;
    }
    if (snake.segments[0][0] === food.location[0] && snake.segments[0][1] === food.location[1]) {
        food = {
            location: [Math.floor(Math.random() * widthInBlocks), Math.floor(Math.random() * heightInBlocks)]
        };
    } else {
        snake.segments.pop();
    }
};

// 碰撞检测
var checkCollision = function() {
    var head = snake.segments[0];
    if (head[0] < 0 || head[0] >= widthInBlocks || head[1] < 0 || head[1] >= heightInBlocks) {
        return true;
    }
    for (var i = 1; i < snake.segments.length; i++) {
        if (head[0] === snake.segments[i][0] && head[1] === snake.segments[i][1]) {
            return true;
        }
    }
    return false;
};

// 游戏结束
var endGame = function() {
    clearInterval(intervalId);
    gameOver = true;
    ctx.font = 'bold 70px sans-serif';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Game Over', canvasWidth/2, canvasHeight/2);
};

// 游戏主循环
var gameLoop = function() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    drawSnake(ctx);
    drawFood(ctx);
    moveSnake();
    if (checkCollision()) {
        endGame();
    } else {
        intervalId = setTimeout(gameLoop, 100);
    }
};

// 开始游戏
intervalId = setTimeout(gameLoop, 100);

// 监听键盘事件
document.addEventListener('keydown', function(event) {
    if (event.keyCode === 37 && snake.direction !== 'right') {
        snake.direction = 'left';
    } else if (event.keyCode === 38 && snake.direction !== 'down') {
        snake.direction = 'up';
    } else if (event.keyCode === 39 && snake.direction !== 'left') {
        snake.direction = 'right';
    } else if (event.keyCode === 40 && snake.direction !== 'up') {
        snake.direction = 'down';
    }
});

以上代码可能有些简单，但足以让你了解贪吃蛇小游戏的基本实现原理，你可以在此基础上进行更复杂的开发。