JavaScript 贪吃蛇实现

最新推荐文章于 2024-08-18 21:08:41 发布
最新推荐文章于 2024-08-18 21:08:41 发布
阅读量447 收藏
点赞数
分类专栏： js 文章标签： html javascript 
<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>

wateryi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript做贪吃蛇
weixin_55743273的博客
01-05 2869
文章目录前言一、效果动画展示二、html主页面二、三个js包1.Game.js2.Snake.js （蛇的设置）3.Food.js (食物的设置) 前言 这个关卡是用JavaScript做的一个贪吃蛇游戏 一、效果动画展示 二、html主页面 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
JavaScript贪吃蛇
原地起飞
11-24 5519
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1279
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
javascript 贪吃蛇实现代码
10-30
JavaScript贪吃蛇游戏的实现是JavaScript初学者常用于练习动态效果的一个经典项目。在这个游戏中，JavaScript的主要作用是处理用户输入、更新游戏状态以及渲染游戏画面。以下是对代码中涉及的知识点的详细解释： 1....
JavaScript实现贪吃蛇.zip
04-10
通过这个JavaScript实现的贪吃蛇游戏，我们可以学习到JavaScript的事件处理、数据结构操作、DOM操作、定时器使用以及基本的动画制作等技能，这些都是Web开发中非常基础且重要的知识点。同时，这个项目也可以作为一个...
JavaScript实现简易贪吃蛇
04-20
内容概要：简易贪吃蛇 适合人群：一个简单的前端小项目，里面包含了css弹性盒布局，javascript获取节点，操作dom等练习想熟悉css，和js的小伙伴可以看看适合新手跟小白 能学到什么：体会到javascript对于网页的动态...
javascript实现简单的贪吃蛇游戏
10-24
本文主要介绍如何使用JavaScript语言实现一个简单的贪吃蛇游戏。游戏的实现过程中涉及到了HTML、JavaScript的基础知识，以及一些简单的编程逻辑。 首先，贪吃蛇游戏的基础组成部分包括地图、蛇、食物以及定时器。...
HTML知识点——CSS中几种常用的选择器
qq_62859013的博客
08-15 293
CSS中的几种常用的选择器
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
2301_78945238的博客
08-14 1288
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 398
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
基础到实践：深入了解HTML和CSS
最新发布
2302_80084329的博客
08-18 573
通过学习和实践HTML和CSS，你可以开始构建自己的Web页面，并逐步掌握更高级的Web技术。理解这些基础知识将为你未来的Web开发旅程奠定坚实的基础。希望本博客能够帮助你入门HTML和CSS，并激发你探索更多Web开发技术的兴趣。通过此项目，你不仅可以实践HTML和CSS的基本应用，还可以探索如何将网页组织为一个完整的项目。每个部分的设计都有助于加深你对Web开发的理解，为更复杂的项目打下坚实的基础。希望这个实战案例能够激发你继续学习和探索Web技术的热情。
使用HTML和cgi控制I.MX6ULL开发板上的LED
kaneki_lh的博客
08-14 251
在led.html网页中输入设备号为1，操作指令为1则可开灯，操作指令为0则关灯。
移动端的知识 以及 排静态网页的步骤
x15514104477的博客
08-14 1045
移动端的知识（基础知识） 以及 排静态网页的示例步骤
HTML补充——表格&表单
Fan_web的博客
08-14 1513
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
JavaScript HTML DOM 实例
wjs2024的博客
08-16 355
通过这些实例，我们可以看到JavaScript HTML DOM的强大功能。它可以让我们动态地添加、修改和删除页面元素，以及响应用户的交互操作。掌握DOM操作是前端开发的重要技能之一，希望这些实例能帮助您更好地理解和应用DOM操作。
HTML实现2048小游戏
m0_65134936的博客
08-18 501
JavaScript则是游戏逻辑的核心，它处理用户的输入（如键盘事件监听），控制游戏状态的更新（如瓷砖的移动和合并），以及动态地更新DOM以反映游戏状态的变化。通过这篇文章，你可以了解如何从头开始构建一个简单的 2048 游戏，包括 HTML、CSS 和 JavaScript 的使用。希望你能从中学习到有用的知识！HTML用于构建游戏的结构框架，包括游戏容器、网格布局以及可能的用户交互元素（如按钮或得分显示）。CSS则负责美化游戏界面，通过样式表定义网格的样式、瓷砖的外观、动画效果以及整体布局的视觉呈现。
HTML及CSS面试题4
2301_78675670的博客
08-14 1139
一些常见的HTML+CSS面试题及参考答案，对于有面试需求的小伙伴们来说，是一份比较不错的例题参考
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值