html5贪吃蛇

Html

Css


    贪吃蛇

分数:

0

开始游戏

//获取画布
var c = document.getElementById('myCanvas');

//画笔
var cxt = c.getContext("2d");

//定义蛇的大小
var size = 8;

//蛇的长度
var t = 2;

//蛇元素的集合
var map = [];

//蛇的移动速度(毫秒)

var time = 160;

//蛇的坐标
var x = y = 8;

//蛇移动的方向 
var dir = 39;

//定义食物的坐标
var fx = fy = 0;

//定义计时器，作用:让蛇一直运动
var intenval;

var gard = 0; //定义分数

//蛇移动的方法
function setGameSpeed() {
    //通过移动的方向，改变蛇的位置
    switch (dir) {
        case 37:
            //左
            x = x - size;

break;
        case 38:
            //上
            y = y - size;
            break;
        case 39:
            //右
            x = x + size;
            break;
        case 40:
            //下
            y = y + size;
            break;
        default:
            break;
    }
    //	console.log("x:" + x + ",Y:" + y);

//游戏判定
    //撞墙挂了
    if (x < 0 || y < 0 || x > 400 || y > 400) {
        window.clearInterval(intenval);
        if (confirm("你Game Over 了! 分数为：" + gard + ", 需要重新开始游戏吗?")) {
            window.location.reload();
        }

}
    //吃自己挂
    for (var i = 0; i < map.length; i++) {
        if (parseInt(map[i].x) == x && parseInt(map[i].y) == y) {
            alert("你挂了,分数为：" + gard);
        }

}

if (x == fx * 8 && y == fy * 8) {
        randFrog();
        t++;
        gard = gard + 30;
    }

if (map.length > t) {
        //删除数组中的首项
        var cl = map.shift();
        //擦掉刚删除的内容
        cxt.clearRect(cl['x'], cl['y'], size, size);
    }

//将坐标放入集合中
    map.push({
        'x': x,
        'y': y
    });

//画蛇身
    cxt.fillStyle = "#ff0000";
    cxt.fillRect(x, y, size, size);

gard++;
    reflashGard(gard);
}

//获取键盘单击事件（方向）
document.onkeydown = function(e) {
    //获取键盘按钮code值
    var code = e.keyCode;
    console.log("点击" + code);
    switch (code) {
        case 37:
            dir = 37;
            break;
        case 38:
            dir = 38;
            break;
        case 39:
            dir = 39;
            break;
        case 40:
            dir = 40;
            break;

default:
            console.log("请点击规定按键")
            break;
    }

}

//随机食物的方法

randFrog();

function startGame() {
    intenval = window.setInterval(setGameSpeed, time);

}

//刷新分数
function reflashGard(i) {
    document.getElementById("gardId").innerHTML = i;
}

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

立即下载

html5贪吃蛇



代码描述：通过html5实现贪吃蛇

1、原生js实现
2、可以学习使用
3、有详细注释

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

迩俄De世界

相关代码

贪吃蛇

分数:

0

开始游戏

html5贪吃蛇

最新