javascript--贪食蛇（完整版-逻辑思路）

最新推荐文章于 2024-08-08 13:37:43 发布
最新推荐文章于 2024-08-08 13:37:43 发布
阅读量7k 收藏 21
点赞数 7
分类专栏： HTML5+CSS3 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012054869/article/details/51734537
版权

逻辑思路：

  1. 创建表格，目的画线分割
  2. 创建地图div，让蛇在上面移动
  3. 创建所有的块，蛇头、身体、食物
  • 创建的蛇头、身体、食物div，添加到地图中
  • 蛇头、身体、食物随机产生坐标
  • 设置蛇头的初始方向
  • 设置按键改变蛇头方向
  • 开启定时器，自动移动蛇头

      4.食物

  • 判断是否吃到食物（蛇头的left和top等于食物的left和top）
  • 碰撞则随机产生食物（随机坐标）

     5.身体

  • 存所有的身体(数组)
  • 创建新身体newbody
  • 和蛇头方向相比，判断最后一个身体的方向
  • 新的身体的方向等于最后一个身体方向
  • 把新的身体移动到蛇头的后边，通过函数改变style.left和top的值
  • 新的身体添加到所有的身体数组中：allNode.push(bodyNode),目的遍历所有身体
  • 遍历所有的身体，链接在一起并一起移动

     6.设置如果所有身体.length>0时，按键不能在对面进行移动（onkeydown）
     7.判断蛇头有没有出边界（判断头部的top和style坐标）
     8.判断食物和身体不能重叠（身体和食物的坐标进行判断）
     9.设置速度
    10.分数
    11.判断头部不能碰撞身体（判断头部和所有的身体数组的坐标是否一致）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style type="text/css">
        body, table, td, tr {
            padding: 0;
            margin: 0;
        }

        td {
            width: 48px;
            height: 48px;
            border: 1px solid #6eb3d8;
        }

        #map {
            background: #6eb3d8;
            width: 500px;
            height: 500px;
            opacity: 0.3;
            position: absolute;
            top: 0;
        }

        div {
            width: 50px;
            height: 50px;
            position: absolute;
        }

        #game {
            position: absolute;
            top: 510px;
            left: 20px;
        }

        #a {
            position: absolute;
            top: 515px;
        }

        #b {
            position: absolute;
            top: 515px;
            left: 50px;
        }

        #c {
            position: absolute;
            top: 515px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<h3 id="game"><p id="score">本轮成绩为:</p></h3>
<input type="button" value="慢" onclick="speed('1000')" id="a">
<input type="button" value="中" onclick="speed('500')" id="b">
<input type="button" value="块" onclick="speed('100')" id="c">
<script>
    //分数的id
    var score = document.getElementById("score");
    //初始化分数为0
    var scoreNum = 0;

    //第一步：创建表格
    document.write("<table cellspacing='0'>");
    for (var n = 0; n < 10; n++) {
        document.write("<tr>")
        for (var m = 0; m < 10; m++) {
            document.write("<td></td>");
        }
        document.write("</tr>")
    }
    document.write("</table>");
    //第二步：创建地图
    var map = document.getElementById("map");
    //第三步：创建所有块，蛇头 身体 食物
    function createNode(type) {
        //获取蛇头的随机坐标
        var x = parseInt(Math.random() * 10) * 50;
        var y = parseInt(Math.random() * 10) * 50;
        //alert(x);
        //添加三块的div
        var div = document.createElement("div");
        div.style.left = x + "px";
        div.style.top = y + "px";
        map.appendChild(div);
        if (type == 0) {//蛇头
            div.style.background = "red";
        }
        if (type == 1) {//身体
            div.style.background = "yellow";
        }
        if (type == 2) {//食物
            div.style.background = "blue";
        }
        return div;
    }
    var allNode = new Array();//存所有的身体
    var allHeadBody = new Array();//存头和身体
    //第三步：创建头部的div
    var headNode = null;
    var foodNode = null;
    headNode = createNode(0);
    foodNode = createNode(2);
    allHeadBody.push(headNode);//把蛇头添加到存储头和身体的数组中


    headNode.value = 37;
    //第三步：移动头部
    function moveNode() {
        //判断游戏有没有出界
        if (parseInt(headNode.style.top) >= 500 || parseInt(headNode.style.left) >= 500 || parseInt(headNode.style.top) < 0 || parseInt(headNode.style.left) < 0) {
            alert("游戏结束");
            //停止游戏，停止定时器，则把定时器给一个变量
            clearInterval(stopGame);
        }

        //第四步：检测是否碰撞
        if (headNode.style.left == foodNode.style.left && headNode.style.top == foodNode.style.top) {
            //碰撞一次加0分
            scoreNum += 10;
            //写入到score中
            score.innerHTML = "本轮成绩为：" + scoreNum;

            //第五步：创建身体,记录当前的身体
            var bodyNode = createNode(1);
            var lastNode = null;//身体的最后一块
            //判断身体最后一块的方向（键盘位置）
            if (allNode.length == 0) {
                lastNode = headNode;
            } else {
                lastNode = allNode[allNode.length - 1];
            }
            bodyNode.value = lastNode.value;

            switch (parseInt(lastNode.value)) {//根据蛇头判断 身体的位置
                case 37:
                    bodyNode.style.left = parseInt(lastNode.style.left) + 50 + "px";
                    bodyNode.style.top = lastNode.style.top;
                    break;
                case 38:
                    bodyNode.style.top = parseInt(lastNode.style.top) + 50 + "px";
                    bodyNode.style.left = lastNode.style.left;
                    break;
                case 39:
                    bodyNode.style.left = parseInt(lastNode.style.left) - 50 + "px";
                    bodyNode.style.top = lastNode.style.top;
                    break;
                case 40:
                    bodyNode.style.top = parseInt(lastNode.style.top) - 50 + "px";
                    bodyNode.style.left = lastNode.style.left;
                    break;
            }
            allNode.push(bodyNode);//存所有的身体
            allHeadBody.push(bodyNode);//存的头和身体


            //判断食物和身体不能重叠
            var foodbool = true;
            var px = 0;
            var py = 0;
            var num = 0;
            while (foodbool) {
                px = parseInt(Math.random() * 10) * 50 + "px";
                py = parseInt(Math.random() * 10) * 50 + "px";
                for (var n = 0; n < allHeadBody.length; n++) {
                    if (allHeadBody[n].style.left == px && allHeadBody[n].style.top == py) {
                        num++;
                    }
                }
                if (num == 0) {
                    foodbool = false;
                } else {
                    num = 0;
                }

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


//

        }
        //让身体跟着蛇头走
        if (allNode.length > 0) {
            for (var n = allNode.length - 1; n >= 0; n--) {
                //判断蛇头和身体不能碰撞
                if (headNode.style.left == allNode[n].style.left && headNode.style.top == allNode[n].style.top) {
                    alert("游戏结束，碰撞身体了！");
                    clearInterval(stopGame);

                }

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

            }
        }

        //根据headNode.value的初始值移动蛇头方向
        switch (parseInt(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;
        }


    }//移动蛇头结束

    //控制速度

    //初始默认的速度
    var newspeed = 500;
    function speed(num) {
        newspeed = num;
//        clearInterval(stopGame);
        stopGame = setInterval(moveNode, newspeed);
        speed=null;//函数执行一次，第二次调用则函数为空
    }
    //stopGame = setInterval(moveNode, newspeed);
    document.onkeydown = function () {
        // alert(event.keyCode);
        switch (event.keyCode) {
            case 37://左
                if (headNode.value != 39 || allNode.length <= 0) {
                    headNode.value = 37;
                }
                break;
            case 38://上
                if (headNode.value != 40 || allNode.length <= 0) {
                    headNode.value = 38;
                }
                break;
            case 39://右
                if (headNode.value != 37 || allNode.length <= 0) {
                    headNode.value = 39;
                }
                break;
            case 40://上
                if (headNode.value != 38 || allNode.length <= 0) {
                    headNode.value = 40;
                }
                break;
        }
    }
</script>
</body>
</html>
ZhangXD_BLOG
关注
专栏目录
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
贪吃蛇思路详解
前端之虎陈随易
08-10 8136
很多人学习编程，竟然不曾自己动手写过小游戏。 这或多或少，在编程生涯中，应该是缺少了一些乐趣的。 而没有动手写过的人，无外乎这么几种。 1，不屑。老子很牛逼，这种小儿科，浪费时间。 2，不会。思前想后，挝耳挠腮，无处下手。 3，不愿。我只对钱感兴趣，对写小游戏，没兴趣。 不知道该如何评判，也不想评判，每个人都有自己的世界观，人生观，价值观。 那么，对于那些有兴趣，却又无处下手的同学，本文将一步一...
【JavaScript】实现贪吃蛇小游戏
最新发布
2201_75503057的博客
08-08 482
通过JavaScropt实现的简单贪吃蛇小游戏。
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
javascript-贪吃蛇
weixin_44038355的博客
12-11 270
html: &amp;amp;amp;lt;body&amp;amp;amp;gt; &amp;amp;amp;lt;h2 style=&amp;amp;quot;margin-left: 200px ; margin-top: 15px&amp;amp;quot;&amp;amp;amp;gt;温馨提示：蛇头不能碰到自己的身体和最外面的边框，否则游戏结束！！&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
JavaScript——贪吃蛇
qq_41973154的博客
08-31 310
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> <script type="text/javascript"> var map; var snake; var food; v...
使用JavaScript实现一个网页版贪食蛇小游戏
04-18
在本项目中，我们将探讨如何使用JavaScript来实现一个经典的网页版贪食蛇小游戏。JavaScript是一种广泛应用于网页开发的脚本语言，它允许我们为网页添加交互性和动态效果。在这个项目中，我们将主要关注以下几个关键...
简单创意的html5贪食蛇小游戏代码
11-03
本项目以"简单创意的html5贪食蛇小游戏代码"为主题，将介绍如何使用HTML5、CSS3和JavaScript来构建一个在线版本的贪食蛇游戏。 首先，我们需要理解HTML5中的Canvas元素。Canvas是HTML5中用于绘制图形的一个二维绘图...
贪食蛇特效代码
03-20
【贪食蛇特效代码】是基于经典游戏"贪食蛇"的一个实现，它展示了如何用编程语言和相关技术来创建一款具有视觉效果的游戏。这款简单的贪食蛇游戏可能使用了HTML、CSS和JavaScript这三种核心技术，这是一套常见的前端...
HTML5创意无按钮风格贪食蛇代码.zip
07-04
总的来说，这个HTML5创意无按钮风格贪食蛇代码展示了如何利用HTML5的特性，结合JavaScript和CSS3，实现一个完全基于键盘输入的互动游戏。对于学习HTML5游戏开发或希望提升网页交互性的开发者来说，这是一个很好的...
javascript小游戏贪吃蛇实现思路讲解(完整代码实现)
weixin_57259948的博客
09-25 1532
效果流程 首先我们要操作的canvas <!doctype html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> </head> <body> <canvas id="canvas"></canvas> <!-- 我们要操作的canvas --> <input type="button"
JavaScript版贪吃蛇
03-13
使用JavaScript中对象、定时器以及html5新增的Canvas标签等知识制作的一款纯js贪吃蛇游戏，大家下载来学习下
JavaScript实现贪吃蛇
08-07
简单定时器实现游戏，附有代码注释....................
javascript实现简单的贪吃蛇游戏
10-24
本文很简单，给大家分享了一段使用javascript实现简单的贪吃蛇游戏的代码，算是对自己学习javascript的一次小小的总结，代码参考了网友的部分内容，推荐给大家，希望对大家能够有所帮助。
JavaScript贪吃蛇
原地起飞
11-24 5701
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
JavaScript—贪吃蛇游戏
m0_56712012的博客
04-15 3005
用JavaScript做一个贪吃蛇游戏，小时候的玩过的小游戏原来是这样做出来的，一起来看看吧！ 文章目录创建页面html文件css文件创建js文件创建方格创建蛇处理蛇头碰撞创建食物创建键盘事件游戏的开始暂停 1.创建HTML和css文件 2.创建js文件实现功能 创建页面 html文件 <body> <div class="content"> <div class="btn startBtn"> <button&
贪吃蛇逻辑
麦田守望者
12-06 2106
<br />#ifndef _VRE_APP_Snake_ #define _VRE_APP_Snake_ #include "assert.h" #include "string.h" #include "stdlib.h" #include "math.h" /* 注意坐标系，本程序假定屏幕原点在左 */ /* 上交，横向是X轴正轴，纵向是Y轴正轴 */ /* 程序中所用数组，列对应X轴，行对应Y轴*/ /* 是否使用系统控制的蛇跟控制的蛇竞争 *
javaScript 贪吃蛇
24K丿丑男的博客
09-22 756
JavaScript 贪吃蛇自己用js写的贪吃蛇小游戏一、制作游戏界面1 定义游戏中需要的变量
详细设计-贪食蛇游戏软件
03-11
贪食蛇游戏是一款经典的游戏，玩家通过控制一条蛇在一个有边界的区域内移动，吃掉食物来增长身体长度，同时要避免撞到自己的身体或者撞到边界。下面是贪食蛇游戏软件的详细设计： 1. 游戏界面设计： - 游戏区域：一个矩形区域，用于显示游戏的进行，包括蛇和食物的位置。 - 分数显示：显示玩家当前的得分。 - 游戏状态显示：显示游戏的状态，如开始、暂停、结束等。 2. 蛇的设计： - 蛇的身体：由一系列相连的方块组成，每个方块代表蛇的一个身体部分。 - 蛇的移动：根据玩家的输入控制蛇的移动方向，蛇每次移动一个方块的距离。 - 蛇的生长：当蛇吃到食物时，蛇的身体长度增加一个方块。 3. 食物的设计： - 食物的位置：随机生成在游戏区域内的一个空白位置。 - 食物的消失与生成：当蛇吃到食物后，食物消失并重新生成在另一个位置。 4. 碰撞检测： - 蛇与自身的碰撞：当蛇的头部与身体的其他部分重叠时，游戏结束。 - 蛇与边界的碰撞：当蛇的头部碰到游戏区域的边界时，游戏结束。 - 蛇与食物的碰撞：当蛇的头部与食物重叠时，蛇的身体增长，并生成新的食物。 5. 游戏控制： - 开始游戏：玩家点击开始按钮或者按下空格键开始游戏。 - 暂停游戏：玩家点击暂停按钮或者按下空格键暂停游戏。 - 结束游戏：当蛇与自身或边界碰撞时，游戏结束。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值