贪吃蛇Js

来源:互联网 发布:传奇db数据库下载 编辑:程序博客网 时间:2024/04/19 17:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">     
        .style1
        {
            border-collapse:collapse;      
        }
        td
        {
            width:40px;
            height:40px;
            border:solid 1px blue;
            text-align: center;
        }
    </style>
   
</head>
<body >

<table id="table1" class="style1" cellpadding="0" align="center">
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
    <!--<span id="span1"></span>-->
<script type="text/javascript">
    var width=10;
    var height=10;
    var direction="down";
       
    var Point = function(x, y)
    {
        this.x = x;
        this.y = y;
    }

    var egg = new Point(1, 1);
   
    var createRandomEgg = function()
    {
        var tempx = Math.random() * width;
        egg.x = Math.floor(tempx);
        var tempy = Math.random() * height;
        egg.y = Math.floor(tempy);
    }

    var snake = new Array();
    snake[0] = new Point(0, 0);
    snake[1] = new Point(1, 0);
    snake[2] = new Point(2, 0);

    var nextPositionOfHead = function()
    {
        switch (direction)
         {
            case "left":
                return new Point(snake[snake.length - 1].x - 1, snake[snake.length - 1].y);
                break;
            case "right":
                return new Point(snake[snake.length - 1].x + 1, snake[snake.length - 1].y);
            case "up":
                return new Point(snake[snake.length - 1].x, snake[snake.length - 1].y - 1);
            case "down":
                return new Point(snake[snake.length - 1].x, snake[snake.length - 1].y + 1);
            default:
                alert("错误!");

        }
    }
    var insertEggToHead = function()
    {
        snake[snake.length] = new Point(egg.x, egg.y);
    }
    var move = function()
     {
        if (nextPositionOfHead().x > width - 1 || nextPositionOfHead().y > height - 1) {
            alert("撞墙啦!");
            clearInterval(a);
            return;
        }
        if (nextPositionOfHead().x == egg.x && nextPositionOfHead().y == egg.y) {
            insertEggToHead();
            createRandomEgg();
            refresh();
            return;
        }
        for (i = 0; i < snake.length - 1; i++) {
            snake[i].x = snake[i + 1].x;
            snake[i].y = snake[i + 1].y;
        }
        snake[snake.length - 1].x = nextPositionOfHead().x;
        snake[snake.length - 1].y = nextPositionOfHead().y;
        refresh();

    }
    function refresh()
     {
        var t = document.getElementById("table1");

        for (var j = 0; j < width; j++) {
            for (var k = 0; k < height; k++) {
                t.rows[k].cells[j].style.cssText = "background-color:white;";
            }
        }
       
        t.rows[egg.y].cells[egg.x].style.cssText = "background-color:red;";
       
        for (i = 0; i < snake.length; i++) {
//            span1.innerHTML += "(" + snake[i].x + "," + snake[i].y + "---"+")";
            t.rows[snake[i].y].cells[snake[i].x].style.cssText = "background-color:yellow;";
        }
       
    }
    function keyDown()
    {

        switch (event.keyCode) {
            case 37:
                direction="left"; break;
            case 38:
                direction="up"; break;
            case 39:
                direction="right"; break;
            case 40:
                direction="down"; break;

        }
    }
    document.onkeydown = keyDown;
    var a = setInterval("move()", 500);
    move();
</script>
   
</body>
</html>

原创粉丝点击