升级版贪吃蛇（可变地图与难度，有炸弹）-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<title>snake</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
background-color: #9fc;
}
body{
width: 80%;
}
.div{
position: absolute;
width: 50px;
height: 50px;
border-radius: 24px;
}

frame{

        position: relative;
        width: 105%;
        height: 650px;
        top: -10px;
        left: 200px;
    }
    #iframeone{
        width: 100%;
        height: 680px; 
        margin-top: -120px;
    }
    td{
        width: 48px;
        height: 48px;
        border: 1px solid #aaa;
        background-color: rgba(153,255,153,0.8);
        border-radius: 24px;
    }
    span{
        position: relative;
        width: 100px;
        height: 30px;
        top: 100px;
        left: 50px;
    }
    #btn{
        float: left;
        width: 100px;
        height: 100px;
        margin-top: 20px;
    }
    a{
        display: block;
        text-align: center;
        text-decoration: none;
        line-height: 30px;
        width: 150px;
        height: 30px;
        margin-top: 5px;
        margin-left: -20px;
        margin-right: 20px;
        background-color: #ddd;
        font-size: 30px;
        border-radius: 20px;
    }
    a:hover{
        font-size: 40px;
        background-color: #666;
        color: #ddd;
    }
    select{
        width: 100px;
        height: 20px;
    }
</style>

</head>
<body>
<span id="btn">
<br><br>
<a href="3X3.html" target="mainframe" class="on">3X3</a>
<a href="10X10.html" target="mainframe" class="on">10X10</a>
<a href="20X20.html" target="mainframe" class="on">20X20</a>
<a href="100X100.html" target="mainframe" class="on">100X100</a>
</span>
<div id="frame">

    <iframe id="iframeone" name="mainframe" src="10X10.html"></iframe>
</div>
<script type="text/javascript">

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>10X10</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
background-color: #9fc;
}
body{
width: 300px;
}
.div{
position: absolute;
width: 50px;
height: 50px;
border-radius: 24px;
}

box{

        position: absolute;
        width: 500px;
        height: 500px;
        border: 3px solid #98f;
        top: 120px;
        left: 100px;
        z-index: 1;
    }
    td{
        width: 48px;
        height: 48px;
        border: 1px solid #aaa;
        background-color: rgba(153,255,153,0.8);
        border-radius: 24px;
    }
    span{
        position: relative;
        width: 100px;
        height: 30px;
        top: 100px;
        left: 700px;
    }
    #btn{
        position: absolute;
        width: 250px;
        height: 100px;
        left: 600px;
        top: 150px;
    }
    button{
        float: right;
        width: 120px;
        height: 30px;
        margin-top: 5px;
        margin-left: -20px;
        margin-right: 20px;
        background-color: #ddd;
        font-size: 20px;
        margin-left: 700px;
    }
    button:hover{
        font-size: 22px;
    }
    select{
        display: block;
        margin-left: 700px;
        margin-top: 360px;
        width: 100px;
        height: 20px;
    }
</style>

</head>
<body>

<span id="ss"><h2>SCORE:0</h2></span>
<div id="btn">
    <button onclick="changeTime('5000')">脑残</button>
    <button onclick="changeTime('1000')">简单</button>
    <button onclick="changeTime('500')">一般</button>
    <button onclick="changeTime('300')">达人</button>
    <button onclick="changeTime('150')">超人</button>
    <button onclick="changeTime('80')">地狱</button>
    <button onclick="changeTime('10')">必死</button>
</div>
<br><br>
<select>
    <option onclick="changebomb('0')">0块</option>
    <option onclick="changebomb('1')">1块</option>
    <option onclick="changebomb('5')">5块</option>
    <option onclick="changebomb('10)'">10块</option>
    <option onclick="changebomb('20')">20块</option>
</select>
<div id="box">

</div>  
<script type="text/javascript">
    var box = document.getElementById("box");
    var img = document.createElement("img");

    document.write("<table id='table' cellspacing = '0'>");
    var table = document.getElementById("table")
    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>");
    box.appendChild(table);
    function CreateNode(type){//创建所有块的类
        var div = document.createElement("div");
        div.className = "div";

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

        box.appendChild(div);

        switch(type){
            case 1:
                div.style.background = "#f60";
                break;
            case 2:
                div.style.background = "#369";
                break;
            case 3:
                div.style.background = "green";
                break;
            case 4:
                div.style.background = "#000";
                break;
        }

        return div;
    }
    var score = 0;
    var span = document.getElementById("ss");
    var allNode = new Array();
    var headNode = CreateNode(1);
    var foodNode = CreateNode(2);
    var bombNode = CreateNode(4);
    var bomb = document.getElementsByTagName("option");

    /*function changebomb(num){
        for (var b = 0 ; b < parseInt(num); b++) {
            bombNode = CreateNode(4);
        }
    }*/

    var everyNode = [];
    everyNode.push(headNode);
    headNode.value = 37;

    headNode.appendChild(img);

    function update(){

        if (parseInt(headNode.style.left)>=500parseInt(headNode.style.left)<0parseInt(headNode.style.top)>=500parseInt(headNode.style.top)<0) {
            alert("你挂了！");
        }

        if (allNode.length>0) {
            for (var i = allNode.length-1; i >= 0; i--) {

                if (headNode.style.left == allNode[i].style.left && headNode.style.top == allNode[i].style.top) {
                    alert("你挂了！");  
                }

                switch(allNode[i].value){
                    case 37:
                        allNode[i].style.left = parseInt(allNode[i].style.left) - 50 +"px";
                        break;
                    case 38:
                        allNode[i].style.top = parseInt(allNode[i].style.top) - 50 +"px";
                        break;
                    case 39:
                        allNode[i].style.left = parseInt(allNode[i].style.left) + 50 +"px";
                        break;
                    case 40:
                        allNode[i].style.top = parseInt(allNode[i].style.top) + 50 +"px";
                        break;
                }
                if (i == 0) {
                    allNode[i].value = headNode.value;
                }else{
                    allNode[i].value = allNode[i-1].value;
                }
            }
        }

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

        if (foodNode.style.left == headNode.style.left && foodNode.style.top == headNode.style.top) {

            score += 10;
            span.innerHTML = "<h2>SCORE:" + score + "</h2>";

            var newBody = CreateNode(3);
            var lastBody = null;
            if (allNode.length ==0) {
                lastBody = headNode;
            }else{
                lastBody = allNode[allNode.length-1];
            }

            newBody.value = lastBody.value;
            switch(newBody.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);
            everyNode.push(newBody);

            var px = 0;
            var py = 0;
            var fbool = true;
            var num = 0;

            while(fbool){
                px = parseInt(Math.random()*10)*50 + "px";
                py = parseInt(Math.random()*10)*50 + "px";
                for (var m = 0; m < everyNode.length; m++) {
                    if (everyNode[m].style.left == px && everyNode[m].style.top == py) {
                        num++;
                    }
                }
                if (num == 0) {
                    break;
                }else{
                    num = 0;
                }
            }

            foodNode.style.left = px;
            foodNode.style.top = py;

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

        if (bombNode.style.left == headNode.style.left && bombNode.style.top == headNode.style.top) {

            score -= 10;
            span.innerHTML = "<h2>SCORE:" + score + "</h2>";

            var bx = 0;
            var by = 0;
            var bbool = true;
            var bnum = 0;
            var bf = true;
            var bfnum = 0;

            while(bbool){
                bx = parseInt(Math.random()*10)*50 + "px";
                by = parseInt(Math.random()*10)*50 + "px";
                for (var v = 0; v < everyNode.length; v++) {
                    if (everyNode[v].style.left == bx && everyNode[v].style.top == by) {
                        bnum++;
                    }
                }
                if (bnum == 0) {
                    break;
                }else{
                    bnum = 0;
                }
            }

            while(bf){
                if (px == bx && py == by) {
                    bfnum++;
                }
                if (bfnum == 0) {
                    break;
                }else{
                    bfnum = 0;
                }
            }

            bombNode.style.left = bx;
            bombNode.style.top = by;
        }
    }

    function changeTime(speed){
        setInterval(update, speed);
    }
    /*var t = setInterval(update, 300);*/

    document.onkeydown = function(){
        /*clearInterval(t);*/
        switch(event.keyCode){
            case 37:
                if (headNode.value != 39allNode.length == 0) {
                    headNode.value = 37;
                }
                img.src = "s1.png";
                break;
            case 38:
                if (headNode.value != 40allNode.length == 0) {
                    headNode.value = 38;
                }
                img.src = "s2.png";
                break;
            case 39:
                if (headNode.value != 37allNode.length == 0) {
                    headNode.value = 39;
                }
                img.src = "s3.png";
                break;
            case 40:
                if (headNode.value != 38allNode.length == 0) {
                    headNode.value = 40;
                }
                img.src = "s4.png";
                break;
        }
    }
</script>

</body>
</html>
其他的内嵌网页都类似，只要改一下参数即可