js实现贪吃蛇

最新推荐文章于 2023-04-03 19:52:49 发布
最新推荐文章于 2023-04-03 19:52:49 发布
阅读量567 收藏
点赞数
分类专栏： 学习 文章标签： javascript vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63199952/article/details/125731827
版权

此贪吃蛇小项目是只用js开发的，在学习它的过程中，刷新了我对前后端的认知，我单纯的以为前端做的只是页面，没想到也能实现这么多功能，主要完成功能有:创建画布-创建蛇头和食物-蛇头移动-按下上下左右键进行改变方向-蛇头与食物重合食物重新刷新位置-吃到食物身体自动增加-身体跟随前一个进行移动-死亡条件等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #map{
            width: 500px;
            height: 500px;
            background-color: #6495ED;
            position:relative
        }
        table{
            position: absolute;
            top: 64px;
            left: 0;
        }
        td{
            width: 48px;
            height: 48px;
        }
    </style>
</head>
<body>
    <h1 id="score">Score:0</h1>
    <button id="bt1">快</button>
    <button id="bt2">中</button>
    <button id="bt3">慢</button>
    <div id="map">

    </div>
    <script>
        var s=0
        var sc=document.getElementById("score")
        document.write("<table border='1' cellspacing='0'")
            for(var n=0;n<10;n++){
                document.write("<tr>")
                    for(var j=0;j<10;j++)
                        document.write("<td></td>")
                    document.write("</tr>")
            }
        document.write("</table>")

        // 创建div随机位置，函数实现
        function createDiv(color){
            var div=document.createElement("div")
            div.style.width="50px"
            div.style.height="50px"
            div.style.backgroundColor=color
            // 设置位置随机出现
            div.style.position="absolute"
            div.style.left=parseInt(Math.random()*10)*50+"px"
            div.style.top=parseInt(Math.random()*10)*50+"px"
            var map=document.getElementById("map")
            map.appendChild(div)
            return div

            // // 创建蛇头
            // var headNode=document.createElement("div")
            // headNode.style.width="50px"
            // headNode.style.height="50px"
            // headNode.style.backgroundColor="red"
            // // 设置位置随机出现
            // headNode.style.position="absolute"
            // headNode.style.left=parseInt(Math.random()*10)*50+"px"
            // headNode.style.top=parseInt(Math.random()*10)*50+"px"
            // var map=document.getElementById("map")
            // map.appendChild(headNode)
            // // 蛇尾
            // var footNode=document.createElement("div")
            // footNode.style.width="50px"
            // footNode.style.height="50px"
            // footNode.style.backgroundColor="yellow"
            // footNode.style.position="absolute"
            // footNode.style.left=parseInt(Math.random()*10)*50+"px"
            // footNode.style.top=parseInt(Math.random()*10)*50+"px"
            // var map=document.getElementById("map")
            // map.appendChild(footNode)
        }

        var headNode=createDiv("red")
        var footNode=createDiv("blue")
        // 规定一个蛇头方向
        headNode.dirtion="左"
        var bodyNode=[]
        var t
        var bt1=document.getElementById("bt1")
        bt1.onclick=function(){
            window.t=setInterval(function(){
                if(bodyNode.length>0){
                    // 循环跟随
                    for(var n=bodyNode.length-1;n>=0;n--){
                        switch(bodyNode[n].dirtion){
                            case "左":
                                var l=parseInt(bodyNode[n].style.left)
                                bodyNode[n].style.left=l-50+"px"
                            break
                            case "右":
                                var l=parseInt(bodyNode[n].style.left)
                                bodyNode[n].style.left=l+50+"px"
                            break
                            case "上":
                                var l=parseInt(bodyNode[n].style.top)
                                bodyNode[n].style.top=l-50+"px"
                            break
                            case "下":
                                var l=parseInt(bodyNode[n].style.top)
                                bodyNode[n].style.top=l+50+"px"
                            break
                        }
                        if(n==0){
                            bodyNode[n].dirtion=headNode.dirtion
                        }else{
                            bodyNode[n].dirtion=bodyNode[n-1].dirtion
                        }
                        
                    }
                }
                switch(headNode.dirtion){
                    case "左":
                        var l=parseInt(headNode.style.left)
                        headNode.style.left=l-50+"px"
                    break
                    case "右":
                        var l=parseInt(headNode.style.left)
                        headNode.style.left=l+50+"px"
                    break
                    case "上":
                        var l=parseInt(headNode.style.top)
                        headNode.style.top=l-50+"px"
                    break
                    case "下":
                        var l=parseInt(headNode.style.top)
                        headNode.style.top=l+50+"px"
                    break
                    }
                // 判断蛇头是否出界
                if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>450||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450)
                {
                    clearInterval(window.t)
                    alert('撞到边界，死亡')
                }
                // 当蛇头移动后，进行与身体碰撞检测
                for(var n=0;n<bodyNode.length;n++){
                    if(headNode.style.left==bodyNode[n].style.left&&headNode.style.top==bodyNode[n].style.top){
                        clearInterval(window.t)
                        alert("咬到尾巴了")
                        return
                    }
                }
                // 进行碰撞检测  蛇头和食物重合，食物位置刷新
                // 重合到一起表示
                if(headNode.style.left==footNode.style.left&&headNode.style.top==footNode.style.top){
                    s=s+10
                    sc.innerHTML='Score:'+s
                    var newNode=createDiv("yellow")
                    var lastNode
                    if(bodyNode.length==0){
                        lastNode=headNode
                    }else{
                        lastNode=bodyNode[bodyNode.length-1]
                    }
                    switch(lastNode.dirtion){
                        case "左":
                            newNode.style.top=lastNode.style.top
                            var l=parseInt(lastNode.style.left)
                            newNode.style.left=l+50+"px"
                        break
                        case "右":
                            newNode.style.top=lastNode.style.top
                            var l=parseInt(lastNode.style.left)
                            newNode.style.left=l-50+"px"
                        break
                        case "上":
                            newNode.style.left=lastNode.style.left
                            var l=parseInt(lastNode.style.top)
                            newNode.style.top=l+50+"px"
                        break
                        case "下":
                            newNode.style.left=lastNode.style.left
                            var l=parseInt(lastNode.style.top)
                            newNode.style.top=l-50+"px"
                        break
                    }
                    // 新身体产生，移动方向
                    newNode.dirtion=lastNode.dirtion
                    // 放入数组
                    bodyNode.push(newNode)

                    // 尾重新随机出现
                    var px=parseInt(Math.random()*10)*50+"px"
                    var py=parseInt(Math.random()*10)*50+"px"
                    while(true){
                        for(var n=0;n<bodyNode.length;n++){
                            if(bodyNode[n].style.left==px&&bodyNode[n].style.top==py||headNode.style.left==px&&headNode.style.top==py){
                                px=parseInt(Math.random()*10)*50+"px"
                                py=parseInt(Math.random()*10)*50+"px"
                                break
                            }
                        }
                        if(n==bodyNode.length){
                            break
                        }
                    }
                    footNode.style.left=px
                    footNode.style.top=py
                }
                
            },300)
        }
        var bt2=document.getElementById("bt2")
        bt2.onclick=function(){
            window.t=setInterval(function(){
                if(bodyNode.length>0){
                    // 循环跟随
                    for(var n=bodyNode.length-1;n>=0;n--){
                        switch(bodyNode[n].dirtion){
                            case "左":
                                var l=parseInt(bodyNode[n].style.left)
                                bodyNode[n].style.left=l-50+"px"
                            break
                            case "右":
                                var l=parseInt(bodyNode[n].style.left)
                                bodyNode[n].style.left=l+50+"px"
                            break
                            case "上":
                                var l=parseInt(bodyNode[n].style.top)
                                bodyNode[n].style.top=l-50+"px"
                            break
                            case "下":
                                var l=parseInt(bodyNode[n].style.top)
                                bodyNode[n].style.top=l+50+"px"
                            break
                        }
                        if(n==0){
                            bodyNode[n].dirtion=headNode.dirtion
                        }else{
                            bodyNode[n].dirtion=bodyNode[n-1].dirtion
                        }
                        
                    }
                }
                switch(headNode.dirtion){
                    case "左":
                        var l=parseInt(headNode.style.left)
                        headNode.style.left=l-50+"px"
                    break
                    case "右":
                        var l=parseInt(headNode.style.left)
                        headNode.style.left=l+50+"px"
                    break
                    case "上":
                        var l=parseInt(headNode.style.top)
                        headNode.style.top=l-50+"px"
                    break
                    case "下":
                        var l=parseInt(headNode.style.top)
                        headNode.style.top=l+50+"px"
                    break
                    }
                // 判断蛇头是否出界
                if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>450||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450)
                {
                    clearInterval(window.t)
                    alert('撞到边界，死亡')
                }
                // 当蛇头移动后，进行与身体碰撞检测
                for(var n=0;n<bodyNode.length;n++){
                    if(headNode.style.left==bodyNode[n].style.left&&headNode.style.top==bodyNode[n].style.top){
                        clearInterval(window.t)
                        alert("咬到尾巴了")
                        return
                    }
                }
                // 进行碰撞检测  蛇头和食物重合，食物位置刷新
                // 重合到一起表示
                if(headNode.style.left==footNode.style.left&&headNode.style.top==footNode.style.top){
                    var newNode=createDiv("yellow")
                    var lastNode
                    if(bodyNode.length==0){
                        lastNode=headNode
                    }else{
                        lastNode=bodyNode[bodyNode.length-1]
                    }
                    switch(lastNode.dirtion){
                        case "左":
                            newNode.style.top=lastNode.style.top
                            var l=parseInt(lastNode.style.left)
                            newNode.style.left=l+50+"px"
                        break
                        case "右":
                            newNode.style.top=lastNode.style.top
                            var l=parseInt(lastNode.style.left)
                            newNode.style.left=l-50+"px"
                        break
                        case "上":
                            newNode.style.left=lastNode.style.left
                            var l=parseInt(lastNode.style.top)
                            newNode.style.top=l+50+"px"
                        break
                        case "下":
                            newNode.style.left=lastNode.style.left
                            var l=parseInt(lastNode.style.top)
                            newNode.style.top=l-50+"px"
                        break
                    }
                    // 新身体产生，移动方向
                    newNode.dirtion=lastNode.dirtion
                    // 放入数组
                    bodyNode.push(newNode)

                    // 尾重新随机出现
                    var px=parseInt(Math.random()*10)*50+"px"
                    var py=parseInt(Math.random()*10)*50+"px"
                    while(true){
                        for(var n=0;n<bodyNode.length;n++){
                            if(bodyNode[n].style.left==px&&bodyNode[n].style.top==py||headNode.style.left==px&&headNode.style.top==py){
                                px=parseInt(Math.random()*10)*50+"px"
                                py=parseInt(Math.random()*10)*50+"px"
                                break
                            }
                        }
                        if(n==bodyNode.length){
                            break
                        }
                    }
                    footNode.style.left=px
                    footNode.style.top=py
                    // 加分
                    score+=10
                    document.getElementById("score").innerHTML=score
                }
                
            },500)
            
        }
        var bt3=document.getElementById("bt3")
        bt3.onclick=function(){
            window.t=setInterval(function(){
                if(bodyNode.length>0){
                    // 循环跟随
                    for(var n=bodyNode.length-1;n>=0;n--){
                        switch(bodyNode[n].dirtion){
                            case "左":
                                var l=parseInt(bodyNode[n].style.left)
                                bodyNode[n].style.left=l-50+"px"
                            break
                            case "右":
                                var l=parseInt(bodyNode[n].style.left)
                                bodyNode[n].style.left=l+50+"px"
                            break
                            case "上":
                                var l=parseInt(bodyNode[n].style.top)
                                bodyNode[n].style.top=l-50+"px"
                            break
                            case "下":
                                var l=parseInt(bodyNode[n].style.top)
                                bodyNode[n].style.top=l+50+"px"
                            break
                        }
                        if(n==0){
                            bodyNode[n].dirtion=headNode.dirtion
                        }else{
                            bodyNode[n].dirtion=bodyNode[n-1].dirtion
                        }
                        
                    }
                }
                switch(headNode.dirtion){
                    case "左":
                        var l=parseInt(headNode.style.left)
                        headNode.style.left=l-50+"px"
                    break
                    case "右":
                        var l=parseInt(headNode.style.left)
                        headNode.style.left=l+50+"px"
                    break
                    case "上":
                        var l=parseInt(headNode.style.top)
                        headNode.style.top=l-50+"px"
                    break
                    case "下":
                        var l=parseInt(headNode.style.top)
                        headNode.style.top=l+50+"px"
                    break
                    }
                // 判断蛇头是否出界
                if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>450||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450)
                {
                    clearInterval(window.t)
                    alert('撞到边界，死亡')
                }
                // 当蛇头移动后，进行与身体碰撞检测
                for(var n=0;n<bodyNode.length;n++){
                    if(headNode.style.left==bodyNode[n].style.left&&headNode.style.top==bodyNode[n].style.top){
                        clearInterval(window.t)
                        alert("咬到尾巴了")
                        return
                    }
                }
                // 进行碰撞检测  蛇头和食物重合，食物位置刷新
                // 重合到一起表示
                if(headNode.style.left==footNode.style.left&&headNode.style.top==footNode.style.top){
                    var newNode=createDiv("yellow")
                    var lastNode
                    if(bodyNode.length==0){
                        lastNode=headNode
                    }else{
                        lastNode=bodyNode[bodyNode.length-1]
                    }
                    switch(lastNode.dirtion){
                        case "左":
                            newNode.style.top=lastNode.style.top
                            var l=parseInt(lastNode.style.left)
                            newNode.style.left=l+50+"px"
                        break
                        case "右":
                            newNode.style.top=lastNode.style.top
                            var l=parseInt(lastNode.style.left)
                            newNode.style.left=l-50+"px"
                        break
                        case "上":
                            newNode.style.left=lastNode.style.left
                            var l=parseInt(lastNode.style.top)
                            newNode.style.top=l+50+"px"
                        break
                        case "下":
                            newNode.style.left=lastNode.style.left
                            var l=parseInt(lastNode.style.top)
                            newNode.style.top=l-50+"px"
                        break
                    }
                    // 新身体产生，移动方向
                    newNode.dirtion=lastNode.dirtion
                    // 放入数组
                    bodyNode.push(newNode)

                    // 尾重新随机出现
                    var px=parseInt(Math.random()*10)*50+"px"
                    var py=parseInt(Math.random()*10)*50+"px"
                    while(true){
                        for(var n=0;n<bodyNode.length;n++){
                            if(bodyNode[n].style.left==px&&bodyNode[n].style.top==py||headNode.style.left==px&&headNode.style.top==py){
                                px=parseInt(Math.random()*10)*50+"px"
                                py=parseInt(Math.random()*10)*50+"px"
                                break
                            }
                        }
                        if(n==bodyNode.length){
                            break
                        }
                    }
                    footNode.style.left=px
                    footNode.style.top=py
                    // 加分
                    score+=10
                    document.getElementById("score").innerHTML=score
                }
                
            },800)
            
        }
        // 定时器使用
        // setInterval(function(){
        //     console.log(1)
        // },1000)

        // 按下键盘onkeydown上下左右时，改变蛇头方向
        // 事件处理函数中：事件对象event
        // event.keyCode键盘对应的键值
        document.onkeydown=function(event){
            // 根据按键改变方向
            switch(event.keyCode){
                case 37:
                if(!(headNode.dirtion=='右'&&bodyNode.length>0))
                    headNode.dirtion="左"
                break
                case 38:
                if(!(headNode.dirtion=='下'&&bodyNode.length>0))
                    headNode.dirtion="上"
                break
                case 39:
                if(!(headNode.dirtion=='左'&&bodyNode.length>0))
                    headNode.dirtion="右"
                break
                case 40:
                if(!(headNode.dirtion=='上'&&bodyNode.length>0))
                    headNode.dirtion="下"
                break
                
            }
        }
    </script>
    <!-- 定时器的shiyong
    <button id="bt1">开始定时器</button>
    <button id="bt2">停止定时器</button>
    <script>
        var bt1=document.getElementById("bt1")
        var t
        bt1.onclick=function(){
            t=setInterval(function(){
                console.log("hello world")
            },500)
        }
        var bt2=document.getElementById("bt2")
        bt2.onclick=function(){
            clearInterval(t)
        }
    </script> -->
</body>
</html>

小菜鸡1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
用js代码实现贪吃蛇小游戏
最新发布
guai_guai_guai的博客
05-02 1333
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
用js做一个贪吃蛇小游戏
c535643152的博客
04-03 289
h5部分代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
原生js实现贪吃蛇游戏
01-18
原生JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 代码： [removed] var timer = null; var oMain = document.getElementById(main); function Map(atom,xnum,ynum){//地图,设置单位大小，及...
用JavaScript实现贪吃蛇游戏
10-14
总的来说，用JavaScript实现贪吃蛇游戏涉及HTML、CSS和JavaScript的结合应用，通过DOM操作动态更新游戏状态，以及利用JavaScript的面向对象编程来构建游戏的各个组件。这是一个很好的练习项目，可以帮助开发者提升对...
javascript实现贪吃蛇游戏（娱乐版）
10-14
【JavaScript实现贪吃蛇游戏详解】 在编程领域，贪吃蛇游戏是一个经典的实践项目，它可以帮助初学者理解基本的游戏逻辑和交互处理。本篇将详细讲解如何使用JavaScript语言实现一个娱乐版的贪吃蛇游戏。 首先，我们...
JavaScript实现贪吃蛇
07-31
JavaScript实现贪吃蛇
基于JavaScript实现贪吃蛇游戏
12-28
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 1.结构 创建一个盒子box作为蛇的身体，当前盒子中只有一个子元素，代表此时蛇的长度为1. 在创建一个盒子food作为贪吃蛇的食物。...
JS做贪吃蛇
05-17
使用JScript制作的一款小游戏——贪吃蛇，代码相对容易，便于初学者研究自学
原生javascript制作贪吃蛇小游戏的方法分析
01-19
本文实例讲述了原生javascript制作贪吃蛇小游戏的方法。分享给大家供大家参考，具体如下： <!–1、 创建场景 –> <!– 2、定义初始数据  以及随机食物 –> <!– 3、控制贪吃蛇方向 –> <!– 4、判断位置以及和随机食物的位置 增加贪吃蛇长度 –> HTML部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> html,body{ width: 100%; height: 100%; over
js写贪吃蛇
11-14
js写贪吃蛇，纯js和html 写的绝对可以用 用起来很方便
html小游戏--纯页面html小游戏贪吃蛇（基础版）
热门推荐
nanZhaiXiaoLang的博客
02-24 1万+
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
javascript——贪吃蛇项目制作
DS153的博客
12-22 3527
虽然在写这个项目很多东西都没有学习，但是根据这个视频的内容我还是跟着把贪吃蛇项目写了出来：web前端实战项目系列，JavaScript面相对象开发贪吃蛇（全套教程），并且一步步搞懂内部的东西。同时感谢我们的大佬的文章：JavaScript贪吃蛇给我带来了很多的帮助。贪吃蛇项目的制作我觉得更多是需要懂得制作的思路，接下来让我们寻找其中的重点，解析这个过程。 一、效果展示 首先让我们看看实际上的效果是什么样子的：贪吃蛇小游戏 这里有一个参考网站给大家看。我这里上一份我执着的样子： ...
js贪吃蛇（完整版）
whjwhja6的专栏
11-20 466
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 /*如果是.map下面就要用class=map*/ #container{  width:800px;  margin:auto;  margin_top:60px;  } #ma
js实现小游戏 贪吃蛇
sun_qqq的博客
02-08 132
代码很基础，我初学js时写的，适合新手营的同学们用来提高学习趣味性。
用js实现贪吃蛇游戏
05-26
以下是一个简单的贪吃蛇游戏示例，使用纯 JavaScript 编写： ... ...<!... 贪吃蛇游戏 ...通过 JavaScript 实现了贪吃蛇的移动、吃到食物、撞到边界或自身等基本功能，并使用定时器实现了游戏的持续进行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值