原生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 {
    visi.........完整代码请登录后点击上方下载按钮下载查看