前端原生js贪吃蛇代码

最新推荐文章于 2024-09-15 22:12:53 发布

电脑令人发狂的

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/qq_40306697/article/details/104688951

版权

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>

    <style>
        form div {
            width: 25px;
            height: 25px;
            background: black;
            position: absolute;
            margin: 0;
        }

        #diva {
            width: 1000px;
            height: 625px;
            position: absolute;
            left: 275px;
            top: 50px;
            border: 2px solid black;
        }

        #ddd {
            width: 25px;
            height: 25px;
            background: white;
            position: absolute;
            left: 275px;
            top: 50px;
            border: 2px solid black;
            border-bottom-color: white;
            border-right-color: white;
        }
    </style>
</head>
<body id="body">
<h2>
    当前得分:
    <span id="span">0</span>
</h2>
<div id="diva">                                             <!--边界-->
    <form id="div0">                                            <!--作为中间媒介选出蛇的每段身体-->
        <div id="div1"></div>                                       <!--蛇头-->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </form>
</div>
<!--<div id="ddd"></div>-->
<script src="script/贪吃蛇.js"></script>
</body>
</html>

js

var timer = null;
var p = 0;                                          //p用来屏蔽按键
var interval = 100;
var oDiva = document.getElementById('diva');
var oDiv0 = document.getElementById('div0');
var oDivo;                                          //添加食物,食物是oDivo
var oLeft;                                          //随机生成left坐标
var oTop;                                           //随机生成top坐标
var oDivz;                                          //新增加的蛇长部分
var score=0;
window.onload = function () {
    SetFood();

    function Move(dir, Tdir, speed) {                                     //运动函数
        timer = setInterval(function () {
            var oDiv1 = document.getElementById('div1');
            oDiv1.style[dir] = oDiv1[Tdir] + speed + 'px';
            var aDiv0 = oDiv0.getElementsByTagName('div');

            for (var i = aDiv0.length - 1; i > 0; i--) {                          //每个div都跟着前一个走
                aDiv0[i].style.left = aDiv0[i - 1].offsetLeft + 'px';
                aDiv0[i].style.top = aDiv0[i - 1].offsetTop + 'px';
            }


            for (var j = 2; j < aDiv0.length; j++) {                        //死亡条件
                if (aDiv0[j].offsetLeft === oDiv1.offsetLeft && aDiv0[j].offsetTop === oDiv1.offsetTop) {
                    clearInterval(timer);
                    alert('Game Over!');
                }
            }


            if (oDiv1.offsetLeft < 0 || oDiv1.offsetLeft > 975 || oDiv1.offsetTop < 0 || oDiv1.offsetTop > 600) {   //死亡条件
                clearInterval(timer);
                alert('Game Over!');
            }
            IsEat();
        }, interval);
    }


    function SetFood() {
        oDivo = document.createElement('div');
        oLeft = Math.floor(Math.floor(Math.random() * 100) / 2.5) * 25;
        oTop = Math.floor(Math.floor(Math.random() * 100) / 4) * 25;
        oDivo.style.width = '25px';
        oDivo.style.height = '25px';
        oDivo.style.background = 'red';  //为食物设置样式
        oDivo.style.position = 'relative';
        oDivo.style.left = oLeft + 'px';
        oDivo.style.top = oTop + 'px';
        oDiva.appendChild(oDivo);

    }

    var IsEat = function () {
        var oDiv1 = document.getElementById('div1');
        if (oDiv1.style.left === oDivo.style.left && oDiv1.style.top === oDivo.style.top)          //判断是否吃掉食物
        {

            oDivo.style.display = 'none';
            SetFood();

            Grow();

            interval -= 5;
            score++;
            setScore();
        }
    };

    function setScore(){
        var myScore=document.getElementById('span');
        myScore.innerHTML=score;
    }

    var Grow = function () {                            //吃掉食物后调用此函数,每个div代表一节身体
        var aDiv0 = oDiv0.getElementsByTagName('div');                 //获取所有的身体
        oDivz = document.createElement('div');                         //新增加一节身体
        oDivz.style.left=aDiv0[aDiv0.length - 1].offsetLeft + 'px';    //给新增身体定位横坐标
        oDivz.style.top=aDiv0[aDiv0.length - 1].offsetTop + 'px';      //给新增身体定位纵坐标
        oDiv0.appendChild(oDivz);                       //把新增身体贴到蛇屁股上
    };

    document.onkeydown = function (ev) {
        var oEvent = ev || event;

        if (oEvent.keyCode === 32) {
            clearInterval(timer);
            Move('left', 'offsetLeft', 25);
            p = 39
        }    //空格开始
        if (oEvent.keyCode === 37 && p !== 39) {                    //向左
            clearInterval(timer);
            p = 37;
            Move('left', 'offsetLeft', -25);
        }
        if (oEvent.keyCode === 38 && p !== 40) {                    //向上
            clearInterval(timer);
            p = 38;
            Move('top', 'offsetTop', -25);
        }
        if (oEvent.keyCode === 39 && p !== 37) {                    //向右
            clearInterval(timer);
            p = 39;
            Move('left', 'offsetLeft', 25);
        }
        if (oEvent.keyCode === 40 && p !== 38) {                    //向下
            clearInterval(timer);
            p = 40;
            Move('top', 'offsetTop', 25);
        }
    };
};