用js做一个贪吃蛇的游戏，谢谢，最好有注释

JavaScript012

用js做一个贪吃蛇的游戏，谢谢，最好有注释,第1张

以前做的一个 部分注释 核心部分由注释 其实就是一个最后一个跟随前面一个位置的算法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        .body{width:600pxmargin:100px autotext-align:center}

        #main{height:300pxborder:1px solid #f00position:relative}

        #main div{width:20pxheight:20pxbackground-color:greenposition:absolute}

        #main div.snake{background-color:#ff0}

        .score{font-size:14px}

        .score strong{color:Red}

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var omain = document.getElementById("main")

            var r = 15, c = 30

            var asnake = []

            var speed = 150

            var odiv = document.createElement("div")

            asnake.push({ l: Math.floor(Math.random() * c), t: Math.floor(Math.random() * r), div: odiv, d: "l" })

            omain.appendChild(odiv)

            setPosition(asnake[0])

            //设置位置

            function setPosition(obj) {

                obj.div.style.left = obj.l * 20 + "px"

                obj.div.style.top = obj.t * 20 + "px"

            }

            var aEat = null

            var d = "l"

            //创建吃的

            function createEat() {

                var l = Math.floor(Math.random() * c)

                var t = Math.floor(Math.random() * r)

                var isexist = false

                //判断是否存在在设数组里面

                for (var i = 0 i < asnake.length i++) {

                    if (l == asnake[i].l && t == asnake[i].t) {

                        isexist = true

                        break

                    }

                }

                //如果存在再创建一个蛇

                if (isexist) {

                    createEat()

                    return

                }

                var onewdiv = document.createElement("div")

                onewdiv.className = "snake"

                aEat = { l: l, t: t, div: onewdiv, d: "l" }

                omain.appendChild(onewdiv)

                setPosition(aEat)

            }

            createEat()

            var obtn = document.getElementById("btn")

            var oscore = document.getElementById("score")

            var oaddspeed = document.getElementById("addspeed")

            var otimer = null

            var isitem = true

            oaddspeed.onclick = function () {

                clearInterval(otimer)

                speed = speed < 50 ? 50 : speed - 20

                setasnke()

            }

            obtn.onclick = function () {

                if (!isitem) {

                    clearInterval(otimer)

                    obtn.value = "继续游戏"

                    isitem = true

                    return false

                }

                obtn.value = "暂停游戏"

                setasnke()

                isitem = false

            }

            function setasnke() {

                otimer = setInterval(function () {

                    for (var i = asnake.length - 1 i > 0 i--) {

                        asnake[i].l = asnake[i - 1].l

                        asnake[i].t = asnake[i - 1].t

                        asnake[i].d = asnake[i - 1].d

                    }

                    switch (d) {

                        case "l":

                            asnake[0].l--

                            break

                        case "r":

                            asnake[0].l++

                            break

                        case "t":

                            asnake[0].t--

                            break

                        case "b":

                            asnake[0].t++

                            break

                    }

                    //判断蛇是否撞墙了

                    if (asnake[0].l < 0 || asnake[0].l >= c || asnake[0].t < 0 || asnake[0].t >= r) {

                        alert("你死掉了")

                        clearInterval(otimer)

                        return

                    }

                    //判断蛇是否撞到自己了

                    for (var n = 1 n < asnake.length n++) {

                        if (asnake[0].l == asnake[n].l && asnake[0].t == asnake[n].t) {

                            alert("你已经死掉了")

                            clearInterval(otimer)

                            return

                        }

                    }

                    //判断蛇是否吃到东西了

                    if (asnake[0].l == aEat.l && asnake[0].t == aEat.t) {

                        aEat.div.className = ""

                        oscore.innerHTML = parseInt(oscore.innerHTML) + 1

                        asnake.push(aEat)

                        createEat()

                    }

                    //重新设置蛇的位置

                    for (var j = 0 j < asnake.length j++) {

                        setPosition(asnake[j])

                    }

                }, speed)

            }

            //键盘改变蛇的方向

            document.onkeydown = function (event) {

                var oEn = event || window.event

                var oCode = oEn.keyCode

                switch (oCode) {

                    case 37:

                        d = "l"

                        break

                    case 38:

                        d = "t"

                        break

                    case 39:

                        d = "r"

                        break

                    case 40:

                        d = "b"

                        break

                }

            }

        }

    </script>

</head>

<body>

    <div class="body">

        <input type="button" value="加速" id="addspeed" /> <input type="button" id="btn" value="开始游戏" />&nbsp&nbsp<span class="score">积分：<strong id="score">0</strong></span>

        <div id="main">

        

        </div>

    </div>

</body>

</html>

关于写一个带存档的js游戏相关资料如下

最近使用 JS 写了一个贪吃蛇游戏，效果如下：

贪吃蛇作为一款经典又简单的小游戏，每个人都玩过。实现一个贪吃蛇游戏基本具有以下功能：

棋盘（也被称作 “地图”，我这里画的像一个围棋棋盘，索性就叫棋盘）

蛇 （细致一点分为：蛇头、蛇身、蛇尾）

方向（上下左右）控制，并且自动行走

碰撞检测（撞墙、撞自己）

食物在随机位置生成

蛇吃到食物，尾部生长一截

以上也便是我的实现步骤了，下面分享一些更详细的实现思路。