JavaScript实现贪吃蛇游戏

最新推荐文章于 2024-08-08 13:37:43 发布

陈老说

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量1.5k

点赞数 1

文章标签：山月记明哥 html/css js贪吃蛇案例游戏案例

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123609658

版权

1、贪吃蛇初级bate1效果图：

1、贪吃蛇初级bate1源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇初级</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        td {
            width: 48px;
            height: 48px;
            border: 1px solid black;
        }

        #pic {
            width: 400px;
            height: 400px;
            opacity: 0.6;
            position: absolute;
            background-color: antiquewhite;
        }

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

    </style>
</head>
<body>
<h3 id="score">分数：0</h3>
<div id="pic"></div>
<script>
    document.write("<table cellspacing='0'>")
    for (var i = 0; i < 8; i++) {
        document.write('</tr>')
        for (var j = 0; j < 8; j++) {
            document.write("<td></td>")
        }
    }
    document.write("</table>")

    var pic = document.getElementById("pic")

    function createPic(type) {
        var Node = document.createElement("div")
        Node.style.left = parseInt(Math.random() * 8) * 50 + "px"
        Node.style.top = parseInt(Math.random() * 8) * 50 + "px"
        pic.appendChild(Node)
        switch (type) {
            case "head":
                Node.style.backgroundColor = "red"
                break
            case "food":
                Node.style.backgroundColor = "blue"
                break
            case "body":
                Node.style.backgroundColor = "yellow"
                break
        }
        return Node
    }

    var Score = 0
    var snakeHead = createPic("head")
    snakeHead.value = "上"
    var snakeFood = createPic("food")
    var snakeArr = []  //存储身体元素
    var snakeAll = []  //存储所有元素
    var snakeScore = document.getElementById("score")

    function move() {
        if (snakeArr.length > 0) {
            for (var i = snakeArr.length - 1; i >= 0; i--) {
                switch (snakeArr[i].value) {
                    case "上":
                        snakeArr[i].style.top = parseInt(snakeArr[i].style.top) - 50 + "px"
                        break
                    case "下":
                        snakeArr[i].style.top = parseInt(snakeArr[i].style.top) + 50 + "px"
                        break
                    case "左":
                        snakeArr[i].style.left = parseInt(snakeArr[i].style.left) - 50 + "px"
                        break
                    case "右":
                        snakeArr[i].style.left = parseInt(snakeArr[i].style.left) + 50 + "px"
                        break
                }

                if (i == 0) {
                    snakeArr[i].value = snakeHead.value  //当i=0的时候，那个元素其实就是蛇头
                } else {
                    snakeArr[i].value = snakeArr[i - 1].value
                }
            }
        }

        switch (snakeHead.value) {
            case "上":
                snakeHead.style.top = parseInt(snakeHead.style.top) - 50 + "px"
                break
            case "下":
                snakeHead.style.top = parseInt(snakeHead.style.top) + 50 + "px"
                break
            case "左":
                snakeHead.style.left = parseInt(snakeHead.style.left) - 50 + "px"
                break
            case "右":
                snakeHead.style.left = parseInt(snakeHead.style.left) + 50 + "px"
                break
        }

        if (parseInt(snakeHead.style.left) < 0 || parseInt(snakeHead.style.top) < 0 || parseInt(snakeHead.style.left) > 350 || parseInt(snakeHead.style.top) > 350) {
            clearInterval(time)
            alert("撞墙,游戏结束！！！")
        }

        if (snakeArr.length > 0) {
            for (var i = 0; i < snakeArr.length; i++) {
                if (snakeHead.style.left == snakeArr[i].style.left && snakeHead.style.top == snakeArr[i].style.top) {
                    clearInterval(time)
                    alert("触碰到自己身体,游戏结束！！！")
                }
            }
        }

        if (snakeHead.style.left == snakeFood.style.left && snakeHead.style.top == snakeFood.style.top) {
            Score += 10
            snakeScore.innerHTML = "<h3>分数:" + Score + "</h3>"
            var bodyNode = createPic("body")
            snakeAll.push(snakeHead)
            var finallyNode

            if (snakeArr.length > 0) {
                finallyNode = snakeArr[snakeArr.length - 1]
            } else {
                finallyNode = snakeHead
            }

            switch (finallyNode.value) {
                case "上":
                    bodyNode.style.top = parseInt(finallyNode.style.top) + 50 + "px"
                    bodyNode.style.left = finallyNode.style.left
                    break
                case "右":
                    bodyNode.style.left = parseInt(finallyNode.style.left) - 50 + "px"
                    bodyNode.style.top = finallyNode.style.top
                    break
                case "下":
                    bodyNode.style.top = parseInt(finallyNode.style.top) - 50 + "px"
                    bodyNode.style.left = finallyNode.style.left
                    break
                case "左":
                    bodyNode.style.left = parseInt(finallyNode.style.left) + 50 + "px"
                    bodyNode.style.top = finallyNode.style.top
                    break
            }
            bodyNode.value = finallyNode.value
            snakeArr.push(bodyNode)
            snakeAll.push(bodyNode)

            var px = parseInt(Math.random() * 8) * 50
            var py = parseInt(Math.random() * 8) * 50

            for (var i = 0; i < snakeAll.length; i++) {
                if ((parseInt(snakeAll[i].style.left) == px && parseInt(snakeAll[i].style.top) == py)) {
                    px = parseInt(Math.random() * 8) * 50
                    py = parseInt(Math.random() * 8) * 50
                }
            }
            snakeFood.style.left = px + "px"
            snakeFood.style.top = py + "px"
            if (Score > 200) {
                clearInterval(time)
                window.location = "lastGame.html"
            }
        }
    }

    time = setInterval(move, 500)

    document.onkeydown = function (a) {
        switch (a.keyCode) {
            case 37:
                if (snakeHead.value = "右") {
                    snakeHead.value = "左"
                }
                break
            case 38:
                if (snakeHead.value = "下") {
                    snakeHead.value = "上"
                }
                break
            case 39:
                if (snakeHead.value = "左") {
                    snakeHead.value = "右"
                }
                break
            case 40:
                if (snakeHead.value = "上") {
                    snakeHead.value = "下"
                }
                break
        }
    }
</script>
</body>
</html>

2、贪吃蛇进阶bate2效果图：

2、贪吃蛇进阶bate2源码如下：

<!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">
  <title>贪吃蛇高级</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }

    td{
      width: 48px;
      height: 48px;
      border: 1px solid black;
    }

    #map{
      width: 700px;
      height: 700px;
      opacity: 0.4;
      position: absolute;
      background-color: rgb(29, 236, 10);
      /* 背景颜色是这个 */
    }

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

    span{
      position: relative;
      width: 100px;
      height: 100px;
    }

    h1{
      margin-left: 300px;
    }

    button{
      margin-left: 150px;
    }
  </style>


</head>
<body>
<span id="score1"><h1>分数:0</h1></span>
<span>
        <button onclick="changTime('100')">快</button>
        <button onclick="changTime('300')">中</button>
        <button onclick="changTime('1000')">慢</button>
    </span>
<div id="map"></div>
<script>
  //首先创建地图 地图的规模是14*14即一行14格，共计14行
  document.write("<table cellspacing ='0'");
  for(var i=0;i<14;i++){
    document.write("</tr>");
    for(var j=0;j<14;j++){
      document.write("<td></td>");
    }
  }
  document.write("</table>")

  var map =document.getElementById("map")  //获取地图的标签

  function createDiv(type){
    var node =document.createElement("div")  // 一个创建函数，主要是创建一个小格
    node.style.left=parseInt(Math.random()*14)*50+"px"  //随机生成一个距离左边的位置
    node.style.top=parseInt(Math.random()*14)*50+"px"  //随机生成一个距离右边的位置
    map.appendChild(node)     //将创建的div 50*50的一个颜色为传入的color的小格，添加到map地图中去

    switch(type){  //给创建的新的元素赋“含义”  红色的是蛇头  蓝色的是食物  黄色的是身体
      case "head":
        node.style.backgroundColor="red"
        break;
      case "food":
        node.style.backgroundColor="blue"
        break;
      case "body":
        node.style.backgroundColor="yellow"
        break;
    }
    return node
  }

  var arrAll =[]  //放置蛇身体的元素
  var NodeAll=[]  //放置所有的元素
  var score =0; //用来计分的
  var headNode =createDiv("head") //红色的是蛇头的颜色
  var spanScore =document.getElementById("score1")  //获取计分数的，目的是当吃了一个食物后，就能够将分数进行更新
  var footNode =createDiv("food") //蓝色的是食物的部分
  headNode.value="下"  //初始化蛇头的运动状态

  //创建函数，此函数主要功能是贪吃蛇的移动
  function move(){

    //贪吃蛇移动身体
    if(arrAll.length>0){
      for(var i=arrAll.length-1;i >= 0;i--){
        switch(arrAll[i].value){
          case "上":
            arrAll[i].style.top =parseInt(arrAll[i].style.top)-50+"px"
            break
          case "下":
            arrAll[i].style.top =parseInt(arrAll[i].style.top)+50+"px"
            break
          case "左":
            arrAll[i].style.left =parseInt(arrAll[i].style.left)-50+"px"
            break
          case "右":
            arrAll[i].style.left =parseInt(arrAll[i].style.left)+50+"px"
            break
        }

        if(i==0){
          arrAll[i].value=headNode.value  //当i=0的时候，那个元素其实就是蛇头
        }else{
          arrAll[i].value=arrAll[i-1].value
        }
      }
    }

    //确定蛇头的移动方向，根据蛇头的移动方向，来确定移动方向
    switch(headNode.value){
      case "上":
        headNode.style.top =parseInt(headNode.style.top)-50+"px"
        break
      case "下":
        headNode.style.top =parseInt(headNode.style.top)+50+"px"
        break
      case "左":
        headNode.style.left =parseInt(headNode.style.left)-50+"px"
        break
      case "右":
        headNode.style.left =parseInt(headNode.style.left)+50+"px"
        break
    }

    //这个判断是如果蛇咬到了自己，那么就停止游戏
    if(arrAll.length>0){
      for(var i=0;i<arrAll.length;i++){
        if(headNode.style.left ==arrAll[i].style.left && headNode.style.top ==arrAll[i].style.top){
          clearInterval(time)
          alert("触碰到自己身体，游戏结束！！！")
        }
      }
    }

    //如果蛇碰到四周的墙壁，那么蛇就会死亡
    if(parseInt(headNode.style.left) <0 ||parseInt(headNode.style.left)>650  || parseInt(headNode.style.top) <0 ||parseInt(headNode.style.top)>650){
      //判断的条件是地图的四条边框线
      clearInterval(time)  //在这里是清除定时器
      alert("撞墙，游戏结束！！！刷新重新开始游戏")

      switch(headNode.value){
        case "上":
          headNode.style.top =0+"px"
          break
        case "下":
          headNode.style.top =650+"px"
          break
        case "左":
          headNode.style.left =0+"px"
          break
        case "右":
          headNode.style.left =650+"px"
          break
      }
      //这个switch的作用是不让蛇头在死亡后再次移动
    }

    //重合检测  保证贪吃蛇不能够重合
    if(headNode.style.left ==footNode.style.left && headNode.style.top ==footNode.style.top){
      score =score +10
      spanScore.innerHTML="<h1>分数:"+score+"</h1>"

      var bodyNode =createDiv("body")
      NodeAll.push(headNode)
      var lastNode
      if(arrAll.length >0){
        lastNode=arrAll[arrAll.length-1]
      }else{
        lastNode=headNode
      }

      switch(lastNode.value){
        case "上":
          bodyNode.style.top=parseInt(lastNode.style.top)+50+"px"
          bodyNode.style.left=lastNode.style.left
          break
        case "右":
          bodyNode.style.left=parseInt(lastNode.style.left)-50+"px"
          bodyNode.style.top=lastNode.style.top
          break
        case "下":
          bodyNode.style.top=parseInt(lastNode.style.top)-50+"px"
          bodyNode.style.left=lastNode.style.left
          break
        case "左":
          bodyNode.style.left=parseInt(lastNode.style.left)+50+"px"
          bodyNode.style.top=lastNode.style.top
          break
      }
      bodyNode.value=lastNode.value
      arrAll.push(bodyNode)
      NodeAll.push(bodyNode)

      var px =parseInt(Math.random()*14)*50
      var py =parseInt(Math.random()*14)*50

      for(var i=0;i<NodeAll.length;i++){
        if((parseInt(NodeAll[i].style.left) ==px &&parseInt(NodeAll[i].style.top) ==py)){
          px =parseInt(Math.random()*14)*50
          py =parseInt(Math.random()*14)*50
        }
      }
      footNode.style.left =px+"px"
      footNode.style.top=py+"px"
    }
    if(score>=300){
      clearInterval(time)
      window.open("finally.html")
    }
  }

  function changTime(speed){
    time =setInterval(move,speed)
  }

  //按住键盘的值，函数做出相应的反应  37对应的是左  38对应上  39对应右  40对应下
  document.onkeydown=function(e){
    switch(e.keyCode){
      case 37:
        if(headNode.value ="右" ){
          headNode.value="左"
        }
        break
      case 38:
        if(headNode.value ="下"){
          headNode.value="上"
        }
        break
      case 39:
        if(headNode.value ="左" ){
          headNode.value="右"
        }
        break
      case 40:
        if(headNode.value ="上"){
          headNode.value="下"
        }
        break
    }
  }
</script>
</body>
</html>