JavaScript 贪吃蛇实现

转载 2015年11月19日 17:32:11
<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>

javascript--贪食蛇(完整版-逻辑思路)

逻辑思路: 创建表格,目的画线分割创建地图div,让蛇在上面移动创建所有的块,蛇头、身体、食物 创建的蛇头、身体、食物div,添加到地图中蛇头、身体、食物随机产生坐标设置蛇头的初始方向设置...
  • u012054869
  • u012054869
  • 2016年06月22日 15:21
  • 1551

javascript之【贪吃蛇系列】第一弹:简单的贪吃蛇实现

参考博客:http://blog.csdn.net/sunxing007/article/details/4187038 以上博客是参考,毕竟第一次做,真让自己盲人摸象做不出来。 不过我在其上做了...
  • u010800530
  • u010800530
  • 2014年07月27日 19:11
  • 2399

JS版本_贪吃蛇

用JS实现了贪吃蛇  有兴趣的可以增加计分功能....
  • CrazyCat8023
  • CrazyCat8023
  • 2015年11月29日 23:48
  • 412

HTML5 + js 贪吃蛇游戏设计与实现

游戏架构: 此游戏架构大概分为三层: Game.html: 说明:包含了界面的展示,以及一些事件的入口。   完整代码: html5 snake game     游戏面板 --...
  • csharp25
  • csharp25
  • 2011年08月03日 17:59
  • 3616

javascript贪吃蛇完整版

javascript贪吃蛇完整版 注释完整,面向对象作者sunxing007 转载请注明来自:http://blog.csdn.net/sunxing007运行代码...
  • sunxing007
  • sunxing007
  • 2009年05月14日 23:30
  • 13530

利用Canvas+js实现贪吃蛇(4)

将贪吃蛇改造成面向对象,类似插件的东西。 过程中,要把握好this的指向,因为这个,调试了好大会 将randFood进行了修正,添加了一个配置参数与默认参数合并方法,其他的都还是一样的。 html代码...
  • u013742084
  • u013742084
  • 2016年06月25日 13:54
  • 832

【JavaScript】贪吃蛇

看起来好像很复杂的贪吃蛇,到底是怎么用JavaScript去实现的? 其实你只要会用setInterval去现实一个时钟,会使用JavaScript的键盘响应事件,会使用JavaScript去操作ht...
  • yongh701
  • yongh701
  • 2014年11月17日 14:41
  • 1719

js开发实现简单贪吃蛇游戏(20行代码)

曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊 代码: 01 02 html>...
  • hj7jay
  • hj7jay
  • 2016年03月30日 09:45
  • 49053

js实现一个贪吃蛇的小游戏(已经没有Bug了,已经完善)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #c...
  • qq1355541448
  • qq1355541448
  • 2012年11月29日 20:15
  • 2328

纯原生js 贪吃蛇(锻炼你逻辑思维)

贪吃蛇游戏 * { margin: 0; padding: 0; }.wrap { width: 600px; margin: 0 a
  • qq_26386171
  • qq_26386171
  • 2017年05月03日 15:48
  • 1007
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 贪吃蛇实现
举报原因:
原因补充:

(最多只允许输入30个字)