关闭

JavaScript 贪吃蛇实现

标签: htmljavascript
184人阅读 评论(0) 收藏 举报
分类:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8"></meta>
    <title></title>
    <style type="text/css">
        .tb
        {
            font-size: 9px;
        }
        td{background-color:Silver;}
    </style>
</head>
<body>
    <div id="context">
    </div>
    <div id="test" style="font-size: 12px;">
    </div>
</body>
<script type="text/javascript">
    var Time = 350, sco = 100, FlagTemp = "", v = "", playInterval;
    function createTable() {
        //v = "13".charCodeAt(); //字符串转ascii
        //fromCharCode(13);//ascii转字符串
        var tableText = "<table border='0' bgcolor='#CEE0F9' cellpadding='0' cellspacing='1' align='center' class='tb'>";
        for (var i = 10; i < 34; i++) {
            tableText += "<td height='10px' width='10px' bgcolor='white' align='center'>" + i+ "</td>";
        }
        for (var i = 10; i < 34; i++) {
            tableText += "<tr><td height='10px' width='10px' bgcolor='white' align='center'>" + i + "</td>";
            for (var j = 10; j < 34; j++) {
                tableText += "<td height='10px' width='10px' bgcolor='white' id='bg" + i + j + "'></td>";
            }
            tableText += "</tr>";
        }
        tableText += "<tr><td align='center' colspan='25' style='font-size:12px;' valign='middle'>请选择难度:<select  name='level' onChange='setlevel();'><option value='400'>一般</option><option value='250'>中等</option><option value='150'>疯狂</option></select>";
        tableText += "(上:W 下:S 左:A 右:D)  |  (↑ ↓ ← →)</td></tr><tr><td colspan='25' align='center'><input type='button' value='开始' onClick='javascript:play();' name='playnow'></td></tr></table>";
        document.getElementById('context').innerHTML = tableText;
    }

    function snakecell(fx, fy)//定义蛇的结点
    {
        var snakecell = new Object();
        snakecell.cellx = fx;//结点的横坐标
        snakecell.celly = fy;//结点的纵坐标
        return snakecell;
    }

    var score = 0;//得分
    var Snake = new Array();
    var MoveFlag = ""; //定义行走方向,为空表示不行走

    function createpoint() //随机生成小于25大于9的整数
    {
        var suc = false;
        while (!suc) {
            var number = Math.floor(Math.random() * 35);
            if (number > 9)
                suc = true;
        }
        return number;
    }

    function checkfood(foodx, foody)//检测食物是否与snake的位置重叠并且坐标有效
    {
        if (foodx < 10 || foodx > 34 || foody < 10 || foody > 34)    //如果超出边界
            return false;
        else {
            for (var i = 0; i < Snake.length; i++) {
                if (foodx == Snake[i].cellx && foody == Snake[i].celly)    //如果坐标值与某个元素的坐标值一致
                    return false;
            }
            return true;
        }
    }

    function createfood()//随机生成食物,以蓝色显示
    {
        var i = -1;
        var j = -1;
        while (!checkfood(i, j)) {
            i = createpoint();
            j = createpoint();
        }
        document.getElementById("bg" + i + j).style.backgroundColor = "blue";
    }

    function createsnakehead()//创建蛇
    {
        Snake[0] = snakecell();
        Snake[0].cellx = createpoint();
        Snake[0].celly = createpoint();
        showsnake();
    }

    function ManageSnake()//控制这条蛇
    {
        if (MoveFlag == "")//如果标志为空表示暂停
            return;
        if (MoveFlag == "up")//向上移
        {
            if (Snake[0].cellx == 10)
                MoveSnake(34, Snake[0].celly % 35);
            else
                MoveSnake((Snake[0].cellx - 1) % 35, Snake[0].celly % 35);
        }
        if (MoveFlag == "down") {
            if (Snake[0].cellx == 34)
                MoveSnake(10, Snake[0].celly % 35);
            else
                MoveSnake((Snake[0].cellx + 1) % 35, Snake[0].celly % 35);
        }
        if (MoveFlag == "left") {
            if (Snake[0].celly == 10)
                MoveSnake((Snake[0].cellx) % 35, 34);
            else
                MoveSnake((Snake[0].cellx) % 35, (Snake[0].celly - 1) % 35);
        }
        if (MoveFlag == "right") {
            if (Snake[0].celly == 34)
                MoveSnake((Snake[0].cellx) % 35, 10);
            else
                MoveSnake((Snake[0].cellx) % 35, (Snake[0].celly + 1) % 35);
        }
        showsnake();
    }

    function MoveSnake(hx, hy)//移动这条蛇
    {
        var headx = hx;
        var heady = hy;
        var endx = Snake[Snake.length - 1].cellx;
        var endy = Snake[Snake.length - 1].celly;

        if (document.getElementById("bg" + headx + heady) == null
        || document.getElementById("bg" + headx + heady) == "null"
        || document.getElementById("bg" + headx + heady) == undefined
        || document.getElementById("bg" + headx + heady) == "undefined") {//碰到边线 挂掉,退出。

            clearInterval(playInterval);

            alert("本轮结束,得分为:" + score);
            location.reload();
            return;
        }
        if (document.getElementById("bg" + headx + heady).style.backgroundColor == "blue")//如果是食物
        {
            for (var step = Snake.length - 1; step > 0; step--)//从第二个蛇结点起把前一结点的x,y坐标赋给自身
            {
                Snake[step].cellx = Snake[step - 1].cellx;
                Snake[step].celly = Snake[step - 1].celly;
            }

            Snake[0].cellx = headx;//将蛇头位置探前一步
            Snake[0].celly = heady;

            Snake[Snake.length] = snakecell(endx, endy);//增加一个蛇结点,位于尾部

            createfood();//创建一个食物
            score = score + sco;//加单位分数
        }
        else {
            if (document.getElementById("bg" + headx + heady).style.backgroundColor == "red")//如果是蛇的某一部位
            {
                MoveFlag = "";//停止前进
                document.all.level.disabled = "";
                alert("你的得分是" + score);
                location.reload();
                return;
            }
            else {
                for (var step = Snake.length - 1; step > 0; step--)//从最后一个蛇结点起把前一结点的x,y坐标赋给自身
                {
                    Snake[step].cellx = Snake[step - 1].cellx;
                    Snake[step].celly = Snake[step - 1].celly;
                }

                Snake[0].cellx = headx;//将蛇头位置探前一步
                Snake[0].celly = heady;
            }
        }
        document.getElementById("bg" + endx + endy).style.backgroundColor = "silver";//恢复蛇尾处颜色                
    }

    function showsnake()//显示这条蛇
    {
        for (i = 0; i < Snake.length; i++)
            document.getElementById("bg" + Snake[i].cellx + Snake[i].celly).style.backgroundColor = "red";
    }

    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];

        if (e && (e.keyCode == '87' || e.keyCode=="38"))//按下W键↑
            MoveFlag = "up";
        if (e && (e.keyCode == '65' || e.keyCode=="37"))//按下A键←
            MoveFlag = "left";
        if (e && (e.keyCode == '83' || e.keyCode=="40"))//按下S键↓
            MoveFlag = "down";
        if (e && (e.keyCode == '68' ||e.keyCode=="39"))//按下D键 →
            MoveFlag = "right";
        if (e && e.keyCode == '27')//按下ESC
        {
            MoveFlag = "";
            document.all.playnow.value = "开始";
        }
    };

    function setlevel() {
        Time = document.all.level.options[document.all.level.selectedIndex].value;
        sco == 450 - Time;
    }
    
    function play() {
        document.all.level.disabled = "disabled";
        if (document.all.playnow.value == "暂停") {
            FlagTemp = MoveFlag;
            MoveFlag = "";
            document.all.playnow.value = "开始";
        }
        else {
            MoveFlag = FlagTemp;
            document.all.playnow.value = "暂停";
        }
        if (document.all.playnow.value == "重来")
            window.refresh;
        playInterval = setInterval("ManageSnake()", Time);   //开始
    }
    createTable()//初始化表格
    createfood(); //初始化一个食物
    createsnakehead(); //初始化一个蛇头
</script>

</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:50026次
    • 积分:1263
    • 等级:
    • 排名:千里之外
    • 原创:76篇
    • 转载:23篇
    • 译文:0篇
    • 评论:1条
    文章分类