JavaScript强化教程 - 六步实现贪食蛇
JavaScript强化教程 - 六步实现贪食蛇
哟猫Intry 发表于1年前
JavaScript强化教程 - 六步实现贪食蛇
  • 发表于 1年前
  • 阅读 15
  • 收藏 3
  • 点赞 0
  • 评论 0

本文为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);启动定时器

5.

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>

http://www.h5edu.cn/htm/step/h5edu_44.html

共有 人打赏支持
粉丝 0
博文 46
码字总数 31138
×
哟猫Intry
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: