Einfaches modenes Snake Spiel wie es jeder kennen sollte
Code
<!DOCTYPE html>
<!-- saved from url=(0077)https://developermdcm.github.io/snake-game-javascript/JuegoSnakeJs/index.html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css_webseite/snake_all.min.css">
<link rel="stylesheet" href="/css_webseite/snake_index.css">
<link rel="icon" href="/favicon.ico" class="favicon">
<title>Snake</title>
</head>
<body>
<style>:root .amazon-best-sellers,:root *[title~='advertisement'],:root .sponsor_stories,:root *[data-before-content~='advertisement'],:root *[data-content~='Advertisement'],:root *[data-content~='ADVERTISEMENT'],:root *.searchRightBottomAds,:root *.searchCenterTopAds,:root *.searchCenterBottomAds,:root *.native-ad-item,:root #my-adsFOOT,:root #my-adsMON,:root .article-between-wrap .flash-sale,:root .article-between-wrap .shop-cont,:root .article-between-wrap .flash-container,:root *[class*='advertisement'],:root #center_col #tads,:root #center_col #bottomads,:root .Post.promotedlink,:root .Post.promotedvideolink,:root .darla-container,:root .bs-vc-wrapper.m_adbg,:root .rgt_ad,:root .top-ad-container,:root .footer-ad-labeling,:root section.ad-banner-container,:root .ytp-ad-action-interstitial,:root #masthead-ad,#advertisemet{display: none !important;}</style><div class="container">
<div class="home_game" id="home_game">
<h1 style="color: #fff; text-align: center; font-size: 5rem;">Snake Game</h1>
<img src="/image_webseite/Snake/snake1.png" class="img-home">
<button id="myBtn">Jugar</button></div>
<div id="myModal" class="modal">
<div class="modal-content">
<div onclick="gameStop()"><span class="close">×</span></div>
<div id="gameContainer">
<div class="data">
<div class="board-head">
<img src="/image_webseite/Snake/apple4.png" id="apple_board" alt="" width="40">
<div id="scoreText">0</div>
</div>
<div class="board-head">
<img src="/image_webseite/Snake/heart.png" alt="" width="40">
<div id="livesText">3</div>
</div>
<div class="board-head">
<img src="/image_webseite/Snake/hightscore.png" alt="" width="40">
<div id="hightscoreText">3</div>
</div>
<div class="board-head">
<button id="mute" class="mute" onclick="toggleMute() "><i class="fa-solid fa-volume-high"></i></button>
</div>
<div class="board-head">
<div onclick="gameStop()"><span class="close2"><i class="fa-solid fa-hand"></i></span></div>
</div>
<div class="menu">
<div class="menu_item" id="menu_item">
<h1 class="datos" id="scoreMenu">0</h1>
<h1 class="datos2" id="hscoreMenu">0</h1>
<img class="img-menu" id="apple_menu" src="/image_webseite/Snake/apple4.png" width="70">
<img class="img-menu" src="/image_webseite/Snake/hightscore.png" width="70">
<img class="snake" src="/image_webseite/Snake/snake1.png" id="snake_menu" width="250">
<img class="ground" src="/image_webseite/Snake/board1.png" id="ground_menu" alt="">
</div>
<div class="menu_item2" id="menu_item2">
<div><h1> <i onclick="goBack()" class="fa-solid fa-arrow-left configuracion"></i>Configuración</h1></div>
<hr>
<div class="fondo_menu">
<img id="board1" src="/image_webseite/Snake/board1.png" alt="" width="30">
<img id="board2" src="/image_webseite/Snake/board2.png" alt="" width="30">
<img id="board3" src="/image_webseite/Snake/board3.png" alt="" width="30">
<img id="board4" src="/image_webseite/Snake/board4.png" alt="" width="30">
<img id="board5" src="/image_webseite/Snake/board5.png" alt="" width="30">
<img id="board6" src="/image_webseite/Snake/board6.png" alt="" width="30">
<img id="board7" src="/image_webseite/Snake/board7.png" alt="" width="30">
<img id="board8" src="/image_webseite/Snake/board8.png" alt="" width="30">
</div>
<hr>
<div class="fondo_menu">
<img id="apple1" src="/image_webseite/Snake/apple1.png" alt="" width="30">
<img id="apple2" src="/image_webseite/Snake/apple2.png" alt="" width="30">
<img id="apple3" src="/image_webseite/Snake/apple3.png" alt="" width="30">
<img id="apple4" src="/image_webseite/Snake/apple4.png" alt="" width="30">
<img id="apple5" src="/image_webseite/Snake/apple5.png" alt="" width="30">
<img id="apple6" src="/image_webseite/Snake/apple6.png" alt="" width="30">
<img id="apple7" src="/image_webseite/Snake/apple7.png" alt="" width="30">
<img id="apple8" src="/image_webseite/Snake/apple8.png" alt="" width="30">
</div>
<hr>
<div class="fondo_menu">
<img src="/image_webseite/Snake/body1.png" id="body1" alt="" width="30">
<img src="/image_webseite/Snake/body2.png" id="body2" alt="" width="30">
<img src="/image_webseite/Snake/body3.png" id="body3" alt="" width="30">
<img src="/image_webseite/Snake/body4.png" id="body4" alt="" width="30">
<img src="/image_webseite/Snake/body5.png" id="body5" alt="" width="30">
<img src="/image_webseite/Snake/body6.png" id="body6" alt="" width="30">
<img src="/image_webseite/Snake/body7.png" id="body7" alt="" width="30">
<img src="/image_webseite/Snake/body8.png" id="body8" alt="" width="30">
</div>
<hr>
<div class="fondo_menu">
<img src="/image_webseite/Snake/game1.png" id="game1" alt="" width="30">
<img src="/image_webseite/Snake/game2.png" id="game2" alt="" width="30">
<img src="/image_webseite/Snake/game3.png" id="game3" alt="" width="30">
<img src="/image_webseite/Snake/game4.gif" id="game4" alt="" width="30">
<img src="/image_webseite/Snake/game5.webp" id="game5" alt="" width="30">
<img src="/image_webseite/Snake/game6.png" id="game6" alt="" width="30">
<img src="/image_webseite/Snake/game7.png" id="game7" alt="" width="30">
<img src="/image_webseite/Snake/game8.png" id="game8" alt="" width="30">
</div>
<hr>
<div class="fondo_menu">
<img src="/image_webseite/Snake/border1.png" id="border1" alt="" width="30">
<img src="/image_webseite/Snake/border2.png" id="border2" alt="" width="30">
<img src="/image_webseite/Snake/border3.png" id="border3" alt="" width="30">
<img src="/image_webseite/Snake/border4.png" id="border4" alt="" width="30">
<img src="/image_webseite/Snake/border5.png" id="border5" alt="" width="30">
<img src="/image_webseite/Snake/border6.png" id="border6" alt="" width="30">
<img src="/image_webseite/Snake/border7.png" id="border7" alt="" width="30">
<img src="/image_webseite/Snake/border8.png" id="border8" alt="" width="30">
</div>
<hr>
<div class="fondo_menu">
<img src="/image_webseite/Snake/ramdon.png" id="random1" alt="" width="70">
<img src="/image_webseite/Snake/IABOT.png" id="random1" alt="" width="70">
</div>
</div>
<button id="resetBtn"><i class="fa-solid fa-play"></i> Jugar</button>
<button id="startBtn" onclick="openMenu()"><i class="fa-solid fa-gear"></i></button>
</div>
</div>
<canvas id="gameBoard" width="500" height="500"></canvas>
</div>
</div>
</div>
</div>
<script src="/js_webseite/jquery.min.js"></script>
<script src="/js_webseite/Snake_index.js"></script>
</body></html>