canvas贪吃蛇

Html

Css

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
canvas.style.border = "1px solid #ccc";

var ctx = canvas.getContext('2d');
// 记录蛇运行路径
var map = [];
// 每个矩形的宽高
var width = height = 8;
// 矩形的坐标
var x = y = 8;
var size = 8;
// 蛇身的长度
var len = 10;
// 默认方向向右
var code = 2;
// 食物坐标
var randX = randY = 0;
// 计时器
var timer;
// 开关
var play = true;

function setGame() {
    // 键盘方向 1向上  2向右  3向下  0向下
    switch (code) {
        case 1:
            y -= size;
            break;
        case 2:
            x += size;
            break;
        case 3:
            y += size;
            break;
        case 0:
            x -= size;
            break;
    }

// 蛇身碰撞限制
    for (var i = 0; i < map.length; i++) {
        if (parseInt(map[i].x) == x && parseInt(map[i].y) == y) {
            alert('你输了！');
            window.location.reload();
        }
        // 判断食物是否在自己身上
        if (parseInt(map[i].x) == randX && parseInt(map[i].y) == randY) {
            rand_frog();
        }
    }

// 出墙限制
    if (x > canvas.width || x < 0 || y > canvas.height || y < 0) {
        alert('你输了！');
        window.location.reload();
    }

// 控制蛇身长度
    if (map.length > len) {
        // 删除数组里面第一项并返回值
        var cl = map.shift();
        ctx.clearRect(cl['x'] - 1, cl['y'] - 1, size + 2, size + 2);

}

// 记录蛇身每个矩形X,Y轴的位置
    map.push({
        'x': x,
        'y': y
    });

// 画矩形
    ctx.fillStyle = '#069';
    ctx.strokeStyle = '#069';
    ctx.fillRect(x, y, width, height);

// 吃食物判断
    if (randX == x && randY == y) {
        len++;
        randFrog();
    }
}
document.onkeydown = function(event) {
    // 兼容
    var event = window.event || event;
    // 获取键盘码
    var keycode = event.keyCode - 37;
    // 键盘方向 1向上  2向右  3向下  0向左
    if (code == 1 && keycode != 3) {
        code = keycode;
    } else if (code == 2 && keycode != 0) {
        code = keycode;
    } else if (code == 3 && keycode != 1) {
        code = keycode;
    } else if (code == 0 && keycode != 2) {
        code = keycode;
    }
}
// 投放食物
function randFrog() {
    // 随机坐标
    randX = Math.ceil(Math.random() * 49) * 8;
    randY = Math.ceil(Math.random() * 49) * 8;
    ctx.fillStyle = '#000';
    ctx.strokeStyle = '#000';
    ctx.fillRect(randX, randY, size, size);
}
// 游戏开始与暂停的控制
function playGame(i) {
    if (i && play) {
        timer = setInterval(setGame, 100);
        play = false;
        randFrog();
    } else {
        play = true;
        clearInterval(timer);
        ctx.clearRect(randX, randY, size, size);
    }
}

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

立即下载

canvas贪吃蛇



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

请使用键盘方向键进行游戏，本代码加以注释说明，简单易懂，可用于教学

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

linjinnan

相关代码

canvas贪吃蛇

最新