贪吃蛇(原创)

Html

Css

html,body {
	margin:0;
	padding:0;
	background:#525d5f;
	position:relative;
	width:100%;
	height:100%;
}
.content {
	width:500px;
	height:500px;
	position:absolute;
	top:50%;
	margin-top:-250px;
	left:50%;
	margin-left:-250px;
	box-shadow:5px 8px 2px #333;
	border-radius:2px;
	background:#000;
}
.content>div {
	width:25px;
	height:25px;
	border:1px solid #000;
	box-sizing:border-box;
	background:#fff;
	position:absolute;
}

var tlrb = 'right';
var tlrbs = tlrb;

ShiWu();
YiDon(tlrb, false);

//改变移动方向 start
$(document).keydown(function(event) {
    tlrbs = tlrb;
    if (event.keyCode == 87) {
        tlrb = 'top';
    }
    if (event.keyCode == 83) {
        tlrb = 'bottom';
    }
    if (event.keyCode == 65) {
        tlrb = 'left';
    }
    if (event.keyCode == 68) {
        tlrb = 'right';
    }
});
//改变移动方向 end

function YiDon(F) { //移动(方向)(top, left, right, bottom)
    var left = $('.content>div:not(.active):first').position().left; //第一个div left
    var top = $('.content>div:not(.active):first').position().top; //第一个div top

var lefts = $('.content>div:nth-child(3)').position().left; //第二个div left
    var tops = $('.content>div:nth-child(3)').position().top; //第二个div top

var leftss = $('.content>.active').position().left; //食物 left
    var topss = $('.content>.active').position().top; //食物 top

var b = false;
    var bo = true;

if (F == 'right' && lefts <= left) {
        var l = left + 25 + 'px';
        var t = top + 'px';
        if (leftss == left && top == topss) {
            b = true;
            ShiWu();
        }
    } else if (F == 'right') {
        YiDon(tlrbs);
        return;
    }

if (F == 'left' && lefts >= left) {
        var l = left - 25 + 'px';
        var t = top + 'px';
        if (leftss == left && top == topss) {
            b = true;
            ShiWu();
        }
    } else if (F == 'left') {
        YiDon(tlrbs);
        return;
    }

if (F == 'top' && tops >= top) {
        var l = left + 'px';
        var t = top - 25 + 'px';
        if (leftss == left && top == topss) {
            b = true;
            ShiWu();
        }
    } else if (F == 'top') {
        YiDon(tlrbs);
        return;
    }

if (F == 'bottom' && tops <= top) {
        var l = left + 'px';
        var t = top + 25 + 'px';
        if (leftss == left && top == topss) {
            b = true;
            ShiWu();
        }
    } else if (F == 'bottom') {
        YiDon(tlrbs);
        return;
    }

$('.content>div:not(.active)').each(function(index, el) {
        var ls = $(this).position().left;
        var ts = $(this).position().top;

if (ls == parseInt(l) && ts == parseInt(t)) {
            bo = false;
        }
    });
    //判断 $('.content>div:not(.active):first') 是否与div重合 true 游戏结束 start
    if (parseInt(l) < 0 || parseInt(l) > 475 || parseInt(t) < 0 || parseInt(t) > 475) {
        bo = false;
    } else if (bo) {
        if (!b) {
            $('.content>div:not(.active):last').remove(); //吃到食物跳过此步骤
        }
        $('.content>div:not(.active):first').before('<div style="left: ' + l + ';top: ' + t + ';"></div>');
    }
    //判断 $('.content>div:not(.active):first') 是否与div重合 true 游戏结束 end

if (bo) {
        setTimeout(function() {
            YiDon(tlrb);
        }, 200);
    }
}

function ShiWu() { //随机生成食物
    var top = parseInt(Math.random() * 19); //生成0-19的随机数
    var left = parseInt(Math.random() * 19); //生成0-19的随机数
    $('.content .active').css({
        top: top * 25,
        left: left * 25
    });

var bo = true;
    //判断 $('.content .active') 是否与div重合 true 重新生成
    $('.content>div:not(.active)').each(function(index, el) {
        var l = $(this).position().left;
        var t = $(this).position().top;
        if (l == left * 25 && t == top * 25) {
            bo = false;
        }
    });

if (!bo) ShiWu();
}

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

立即下载

贪吃蛇(原创)

代码描述：贪吃蛇小游戏,请用a,s,d,w来控制方向

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

这是一只神兽

相关代码

贪吃蛇(原创)

最新