博客> JavaScript强化教程 - 六步实现贪食蛇
JavaScript强化教程 - 六步实现贪食蛇
2019-12-09 02:46 评论:0 阅读:767 哟猫Intry
js html5

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

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

给 <style...> 地图(div和表格)、所有的块(蛇头,食物身体加样式) 2.创建地图 [removed]("

"); for (var i = 0; i < 10>"); 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. [removed] = 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>

[removed] [removed]("

"); for (var i = 0; i < 10>"); for (var j = 0; j < 10>"); } "">removed; } "">removed; //创建头部 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);
[removed] = 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;
    }
}

[removed]

</body> </html> Enter your link description here:

收藏
0