原生js实现贪吃蛇游戏带音效代码
代码语言: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.1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0