原生js实现贪吃蛇游戏带音效代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：原生js实现贪吃蛇游戏带音效代码，按键盘上下左右键开始
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Courier Prime Regular'), local('CourierPrime-Regular'), url(https://fonts.gstatic.com/s/courierprime/v2/u-450q2lgwslOqpF_6gQ8kELaw9pWt_-.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Courier Prime Regular'), local('CourierPrime-Regular'), url(https://fonts.gstatic.com/s/courierprime/v2/u-450q2lgwslOqpF_6gQ8kELawFpWg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, html {
    margin: 0;
    padding: 0;
    background-color: #131417;
    color: white;
    text-align: center;
    position: relative;
}
@media only screen and (max-width: 850px) {
    /* For mobile phones: */
    .game {
        transform: scale(.75);
    }
  }
  @media only screen and (max-width: 650px) {
    /* For mobile phones: */
    .warning-rotate {
        transform: scale(1) !important;
    }
    body, html {
        overflow: hidden;
    }
  }
.snake .header h1 {
    font-family: 'Courier Prime', monospace;
    font-size: 50px;
}
.snake .details {
   width: 400px;
   margin: auto;
   padding: 20px 0;
}
.snake .details .new_Score {
    float: left;
}
.snake .details .best_Score {
    float: right;
}
.snake .game {
    width: 625px;
    height: 400px;
    background-color: rgb(37 40 48);
    margin: auto;
    margin-top: 15px;
    overflow: auto;
    border: 1px solid #5a5f73;
    position: relative;
}
.snake .game .box {
    width: 25px;
    height: 25px;
    float: left;
    position: relative;
    
}
.snake .game .box.even {
    background-color: #131417;
}
.snake .game .box.odd {
    background-color: rgb(37 40 48);
}

.snake .game .snake_Box {
    background-color: #0078d4;
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 2;
}
.snake .game .snake_Head {
    transition: all .1s linear;
}

.snake .game .fruit {
    position: absolute;
    width: 25px;
    height: 25px;
}

.end {
    transform: scale(0);
    transition: all .2s linear;
    width: 100%;
    height: 100%;
    top: 0%;
    overflow: hidden;
    position: absolute;
    z-index: 30;
}

.fail {
    width: 400px;
    background-color: #131417;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.bkColor {
    width: 100%;
    height: 100%;
    background-color:rgba(19, 20, 23, .7);
    position: absolute;
    top: 0%;
    left: 0%;
    overflow: hidden;
}
.fail img {
    width: 70%;
    margin: auto;
    text-align: center;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hidden-Sound {
    display: none;
}

.buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: .5;
    transform: scale(1.5) translate(21px, -21px);
    z-index: 20;
}
.buttons button {
    padding: 5px;
    background-color: #455f73;
    border: none;
    margin: auto;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 40;
}
button:focus {
    outline: none;
}
.buttons svg {
    width: 30px;
}
.buttons .rightBtn {
    margin-left: 15px;
}
.buttons .leftBtn {
    margin-right: 15px;
}

.warning-rotate {
    background-color: #131417;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 30;
    transition: all .2s linear;
    transform: scale(0);
}

.warning-rotate h1 {
    text-align: center;
    font-size: x-large;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.profile {
    width: 65px;
    height: 65px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-image: url(https://mohamedelghandour.github.io/Snake/img/profile.png);
    border-radius: 50%;
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: 45% 2%;
    z-index: 9999;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-family: 'Courier Prime', monospace;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 15%;
    right: 114%;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 39%;
    left: 104%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    transform: rotate(-90deg);
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>




</head>

<body translate="no" >
  <div class="snake">
        <div class="header">
            <h1>Snake JavaScript</h1>
        </div>
        <div class="details">
            <span class="new_Score">Current Score: <span class="score_Number">0</span></span>
            <span class="best_Score">Best Score: <span class="best_Score_Number">0</span></span>
        </div>
        <div class="game">
          <div class="container"></div>
        </div>
        <div class="buttons">
            <button type="button" data-num="1" class="topBtn btn">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #fff;
                            }
                        </style>
                    </defs>
                    <title>arrow-up-outline</title>
                    <path class="cls-1"
                        d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.63,0-213.33-95.7-213.33-213.33S138.37,42.67,256,42.67,469.33,138.37,469.33,256,373.63,469.33,256,469.33Z" />
                    <path class="cls-1"
                        d="M271.08,155.58a21.33,21.33,0,0,0-30.17,0l-64,64a21.33,21.33,0,0,0,30.17,30.17l27.58-27.58V384a21.33,21.33,0,1,0,42.67,0V222.17l27.58,27.58a21.33,21.33,0,0,0,30.17-30.17Z" />
                </svg></button>
            <br>
            <button type="button"  data-num="2"  class="leftBtn btn">
                <svg id="Layer_1" data-name="Layer 1"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #fff;
                            }
                        </style>
                    </defs>
                    <title>arrow-left-outline</title>
                    <path class="cls-1"
                        d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.63,0-213.33-95.7-213.33-213.33S138.37,42.67,256,42.67,469.33,138.37,469.33,256,373.63,469.33,256,469.33Z" />
                    <path class="cls-1"
                        d="M384,234.67H222.17l27.58-27.58a21.33,21.33,0,0,0-30.17-30.17l-64,64a21.33,21.33,0,0,0,0,30.17l64,64a21.33,21.33,0,1,0,30.17-30.17l-27.58-27.58H384a21.33,21.33,0,0,0,0-42.67Z" />
                </svg></button>
            <button type="button"  data-num="3"  class="rightBtn btn">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #fff;
                            }
                        </style>
                    </defs>
                    <title>arrow-right-outline</title>
                    <path class="cls-1"
                        d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.63,0-213.33-95.7-213.33-213.33S138.37,42.67,256,42.67,469.33,138.37,469.33,256,373.63,469.33,256,469.33Z" />
                    <path class="cls-1"
                        d="M292.42,176.92a21.33,21.33,0,0,0-30.17,30.17l27.58,27.58H128a21.33,21.33,0,0,0,0,42.67H289.83l-27.58,27.58a21.33,21.33,0,1,0,30.17,30.17l64-64a21.33,21.33,0,0,0,0-30.17Z" />
                </svg></button>
            <br>
            <button type="button"  data-num="4"  class="downBtn btn">
                <svg id="Layer_1" data-name="Layer 1"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #fff;
                            }
                        </style>
                    </defs>
                    <title>arrow-down-outline</title>
                    <path class="cls-1"
                        d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.64,0-213.33-95.7-213.33-213.33S138.36,42.67,256,42.67,469.33,138.37,469.33,256,373.64,469.33,256,469.33Z" />
                    <path class="cls-1"
                        d="M304.92,262.25l-27.58,27.58V128a21.33,21.33,0,1,0-42.67,0V289.83l-27.58-27.58a21.33,21.33,0,1,0-30.17,30.17l64,64a21.33,21.33,0,0,0,30.17,0l64-64a21.33,21.33,0,1,0-30.17-30.17Z" />
                </svg></button>
        </div>
    </div>
    <div class="end">
        <div class="bkColor"></div>
        <div class="fail">
            <img class="img" src="//repo.bfw.wiki/bfwrepo/icon/5f71f9bf3dc40.png" />
           
        </div>
    </div>
    <div class="warning-rotate">
        <h1>try to rotate the phone to play with The best performance.</h1>
    </div>
    <div class="hidden-Sound">
        <audio class="eat-sound" controls>
            <source src="//repo.bfw.wiki/bfwrepo/sound/5f3e2258e5862.mp3" type="audio/mpeg">
        
            Your browser does not support the audio element.
        </audio>
        <audio class="die-sound" controls>
            <source src="//repo.bfw.wiki/bfwrepo/sound/5f71f8ca3e9ac.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <audio class="background-sound" controls loop>
            <source src="//repo.bfw.wiki/bfwrepo/sound/5e16a04d75540.mp3" type="audio/ogg">
            Your browser does not support the audio element.
        </audio>
    </div>


      <script>
(function snakeGame() {

  const game = document.querySelector('.container'),
  pexelNumber = 625 / 25 * (400 / 25);
  var arr = [],
  gameIsWorked = true;
  var arrSnakeBody = [],
  newNum,
  indexScore = 0;
  //create Pexel
  for (var index = 0; index < pexelNumber; index++) {
    var pexel = document.createElement("div");
    pexel.setAttribute('number', index);
    if (index % 2 == 0) // even
      pexel.classList.add('box', 'even');else
      // odd
      pexel.classList.add('box', 'odd');
    arr.push(pexel);
    game.appendChild(pexel);
  }
  //create snake
  var snake = document.createElement("div"),
  randomArrItem = Math.round(Math.random() * arr.length);
  snake.classList.add('snake_Head');
  function createSnake(snake, randomArrItem) {
    snake.setAttribute("number", randomArrItem);
    snake.classList.add('snake_Box');
    game.appendChild(snake);
    snake.style.left = ` ${arr[snake.getAttribute("number")].offsetLeft}px`;
    snake.style.top = ` ${arr[snake.getAttribute("number")].offsetTop}px`;
    return snake;
  }
  createSnake(snake, randomArrItem);

  //move Snake
  window.addEventListener('keydown', function (e) {
    snakeMove(e);
  });

  // Class Interval
  function Interval(fn, time) {
    var timer = false;
    this.start = function () {
      if (!this.isRunning())
      timer = setInterval(fn, time);
    };
    this.stop = function () {
      clearInterval(timer);
      timer = false;
    };
    .........完整代码请登录后点击上方下载按钮下载查看