贪吃蛇 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css" media="screen">
    * {
        margin: 0;
        padding: 0;
    }
    #container {
        margin: 50px;
        border:1px solid #ccc;
        border-bottom: none;
        border-right: none;
        position: relative;
    }
    ul {
        list-style: none;
    }
    ul li {
        border:1px solid #ccc;
        border-top: none;
        border-left: none;
        float: left;
    }
    #container > div {
        float: right;
    }
    #person > div {
        background-color: #00ff00;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .food {
        position: absolute;
        left: 0px;
        top: 0px;
        background: blue;
    }
    /*.personBody{
        opacity:0.5;
    }*/


</style>
</head>
<body>
    <div id="container">
        <ul id="uls"></ul>
        <button id="btn">开始游戏</button>
        <div id="box">积分：0</div>
        <div id="person"></div>
    </div>

<script  type="text/javascript" >
var container = $id("container"),
// 定时器
    timer = null,
    food = null,
    index=0;
    uls = $id("uls"),
    btn = $id("btn"),
    person=$id("person"),
    box=$id("box"),
    personDiv=$tagName(person,"div"),
    // 获取li节点
    lis=$tagName(uls,"li"),
    // size即是宽高,小正方形宽是10，高是10，水平有10个小正方形，竖直有10个小正方形
    // 这里数值是20，其实是21，因为边框有1像素
    // 创建对象
    datas = {size:20,x:10,y:10},
    // 速度200，键值39
    perDate = {speed:200,code:39};



// 初始化游戏
function init(){
     creatMap();
}
// 创建地图
function creatMap(){
    container.style.width = (datas.size +1 ) * datas.x + "px";

    for (var i = 0; i < datas.x * datas.y; i++) {
        var oDiv = document.createElement("li");
        oDiv.style.width = oDiv.style.height = datas.size + "" + "px";
        uls.appendChild(oDiv);
        // 给li加索引
        oDiv.index=i;
    }
    start();
    
}    
// 点击开始游戏
function start(){
    btn.onclick = function(){
        creatPerson();
        movePerson();
        bindPerson();
        creatFood();
    }
        
}
function movePerson() {
    timer = setInterval(function(){

        if(isOut() || isSelf()){
            alert("game over");
            clearInterval(timer);
        }




        if(collapse(personDiv[0],food)){
            // 用appendchild()进行剪切粘贴
            food.removeAttribute("class");
            person.appendChild(food);
            creatFood();
            number();
        }
        for (var i = personDiv.length - 1; i > 0; i--) {
            personDiv[i].style.left=personDiv[i-1].offsetLeft+"px";
            personDiv[i].style.top=personDiv[i-1].offsetTop+"px";
            personDiv[i].index=personDiv[i-1].index;
        }


        switch(perDate.code){
            case 37:
                personDiv[0].style.left=personDiv[0].offsetLeft-(datas.size+1)+"px";
                personDiv[0].index-=1;
                break;
            case 38:
                personDiv[0].style.top=personDiv[0].offsetTop-(datas.size+1)+"px";
                personDiv[0].index-=datas.x;
                break;
            case 39:
                personDiv[0].style.left=personDiv[0].offsetLeft+datas.size+1+"px";
                personDiv[0].index+=1;
                break;
            case 40:
                personDiv[0].style.top=personDiv[0].offsetTop+(datas.size+1)+"px";
                personDiv[0].index+=datas.x;
                break;
        }

    },perDate.speed)

}
function bindPerson(){
    document.onkeydown = function(e){
        var e = e || window.event;
        switch(e.keyCode){
            case 37:
                perDate.code = 37;
                break;
            case 38:
                perDate.code = 38;
                break;
            case 39:
                perDate.code = 39;
                break;
            case 40:
                perDate.code = 40;
                break;
            
        }
    }
}
function collapse(elements1,elements2){
    var l1 = elements1.offsetLeft;
    var r1 = elements1.offsetLeft+elements1.offsetWidth;
    var t1 = elements1.offsetTop;
    var b1 = elements1.offsetTop+elements1.offsetHeight;

    var l2 = elements2.offsetLeft;
    var r2 = elements2.offsetLeft+elements2.offsetWidth;
    var t2 = elements2.offsetTop;
    var b2 = elements2.offsetTop+elements2.offsetHeight;
    

    if(r1<=l2 || l1>=r2 || t1>=b2 || b1<=t2){
        return false;
    }else{
        return true;
    }
}



// 改变积分
function number(){
    index+=10;
    box.innerHTML="积分:"+index;
}
// 是否出界
function isOut(){
    for (var i = 0; i < lis.length; i++) {
        if(collapse(lis[i],personDiv[0])){
            return false;
        }
    }
    return turn;
}
// 是否撞到自己
function isSelf(){
    for (var i = 1; i < personDiv.length; i++) {
        if(collapse(personDiv[i],personDiv[0])){
            return true;
        }
    }
    return false;
}
// 创建食物
function creatFood(){
    var hrr=[];
    for (var i = 0; i < lis.length; i++) {
        if(isFilter(lis[i])){
            hrr.push(lis[i]);
        }
    }
    function isFilter(li){
        for (var i = 0; i < personDiv.length; i++) {
            if(li.index==personDiv[i].index){
                return false;
            }
        }
        return true;
    }

    var random = Math.floor(Math.random()*(hrr.length-1));
    // food要定义为全局变量
    food = document.createElement("div");
    food.className="food";
    food.style.width=food.style.height=datas.size+1+"px";
    food.style.left=hrr[random].offsetLeft+"px";
    food.style.top=hrr[random].offsetTop+"px";
    container.appendChild(food);
}

// 创建人物，点击开始游戏，人物即出来
function creatPerson(){
    var oPerson = document.createElement("div");
    oPerson.style.width = oPerson.style.height = datas.size +1 + "px";
    oPerson.index=0;
    person.appendChild(oPerson);
}
// 获取id的方法
function $id(id){
    return document.getElementById(id)
}
// 获取集合元素的方法
function $tagName(parend,child) {
    return parend.getElementsByTagName(child);
}
init();


</script>
</body>
</html>
最后显示界面
来源：https://www.cnblogs.com/tasly/p/11521049.html
标签
贪吃蛇