JavaScript强化教程 - 六步实现贪食蛇

最新推荐文章于 2025-12-21 13:39:47 发布

原创最新推荐文章于 2025-12-21 13:39:47 发布 · 746 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个使用HTML5和JavaScript实现的贪食蛇游戏教程。该教程详细讲解了如何创建游戏地图、蛇身和食物元素，并实现了蛇的移动、碰撞检测及用户交互等功能。

本文为 H5EDU 机构官方的 HTML5培训教程，主要介绍贪食蛇
JavaScript强化教程

1.首先创建div 并且给div加样式

<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>

给 <style...> 地图（div和表格）、所有的块（蛇头，食物身体加样式）

2.创建地图

    document.write("<table cellspacing='0px'>");
    for (var i = 0; i < 10; i++) {... }
    document.write("</table>");

3.调用createNode函数创建块

 var pannel = document.getElementById("pannel");
    function createNode(type) {... } //[i][b]根据type创建块（0头部 1食物 2身体）
[/b][/i]    //申请一些变量以便以后调用
    var allNode = new Array();//存所有吃到的身体
    var fooldNode = null;//指向食物a
    var headNode = null;//指向头部b
    headNode = createNode(0);//创建头部A
    headNode.value = 39;//给头部一个方向  37左 38上 39右 40下
    fooldNode = createNode(1);//创建食物B

4.定时器

function moveNode() {...};

setInterval(moveNode, 500);启动定时器

document.onkeydown = function () {通过
event.keyCode改变headNode.value
实现用户按键改变蛇头自动移动的方向}

6.核心逻辑
在第4中的 function moveNode() {...}; 定时执行此函数
实现了：1.移动所有身体
2.移动蛇头
3.创建新块并且新块在蛇尾产生，方向与蛇尾相同
------------------------------------------------------------------------------------------------

实现源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        td {
            width: 48px;
            height: 48px;
            border: solid 1px darkorange;
        }

        div {
            position: absolute;
            width: 50px;
            height: 50px;
        }

    </style>
</head>
<body>

<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>

<script>
    document.write("<table cellspacing='0px'>");
    for (var i = 0; i < 10; i++) {
        document.write("<tr>");
        for (var j = 0; j < 10; j++) {
            document.write("<td></td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
    //创建头部
    var pannel = document.getElementById("pannel");
    function createNode(type) {
        var div = document.createElement("div");
        pannel.appendChild(div);

        div.style.left = parseInt(Math.random() * 10) * 50 + "px";
        div.style.top = parseInt(Math.random() * 10) * 50 + "px";

        switch (type) {
            case 0:
                div.style.background = "red";//头
                break;
            case 1:
                div.style.background = "blue";//食物
                break;
            case 2:
                div.style.background = "yellow";//身体
                break;
        }
        return div;
    }
    var allNode = new Array();
    var fooldNode = null;
    var headNode = null;
    headNode = createNode(0);
    headNode.value = 39;
    fooldNode = createNode(1);
    function moveNode() {

//移动所有身体
        if (allNode.length > 0) {
            for (var n = allNode.length - 1; n >= 0; n--) {
                switch (parseInt(allNode[n].value)) {
                    case 37:
                        allNode[n].style.left = parseInt(allNode[n].style.left) - 50 + "px";
                        break;
                    case 38:
                        allNode[n].style.top = parseInt(allNode[n].style.top) - 50 + "px";
                        break;
                    case 39:
                        allNode[n].style.left = parseInt(allNode[n].style.left) + 50 + "px";
                        break;
                    case 40:
                        allNode[n].style.top = parseInt(allNode[n].style.top) + 50 + "px";
                        break;
                }
                if(n>0){
                    allNode[n].value = allNode[n-1].value;
                }else {
                    allNode[n].value = headNode.value;
                }
            }
        }

        var px = parseInt(headNode.style.left);
        var py = parseInt(headNode.style.top);
        switch (headNode.value) {
            case 37:
                headNode.style.left = px - 50 + "px";
                break;
            case 38:
                headNode.style.top = py - 50 + "px";
                break;
            case 39:
                headNode.style.left = px + 50 + "px";
                break;
            case 40:
                headNode.style.top = py + 50 + "px";
                break;
        }

        //碰撞检测
        if (headNode.style.left == fooldNode.style.left &&
                headNode.style.top == fooldNode.style.top) {
            var newbody = createNode(2);
            var lastbody = null;
            if (allNode.length == 0) {
                lastbody = headNode;
            } else {
                lastbody = allNode[allNode.length - 1];
            }
            newbody.value = lastbody.value;
//            lastbody.style.left = parseInt(lastbody.style.left)-50+"px";
            switch (parseInt(lastbody.value)) {
                case 37:
                    newbody.style.left = parseInt(lastbody.style.left) + 50 + "px";
                    newbody.style.top = lastbody.style.top;
                    break;
                case 38:
                    newbody.style.top = parseInt(lastbody.style.top) + 50 + "px";
                    newbody.style.left = lastbody.style.left;
                    break;
                case 39:
                    newbody.style.left = parseInt(lastbody.style.left) - 50 + "px";
                    newbody.style.top = lastbody.style.top;
                    break;
                case 40:
                    newbody.style.top = parseInt(lastbody.style.top) - 50 + "px";
                    newbody.style.left = lastbody.style.left;
                    break;
            }

            allNode.push(newbody);
            fooldNode.style.left = parseInt(Math.random() * 10) * 50 + "px";
            fooldNode.style.top = parseInt(Math.random() * 10) * 50 + "px";
        }//碰撞end

    }
    setInterval(moveNode, 500);
    document.onkeydown = function () {
        switch (event.keyCode) {
            case 37:
                headNode.value = 37;
                break;
            case 38:
                headNode.value = 38;
                break;
            case 39:
                headNode.value = 39;
                break;
            case 40:
                headNode.value = 40;
                break;
        }
    }

</script>

</body>
</html>