原生js实现贪吃蛇小游戏代码
代码语言:html
所属分类:游戏
代码描述:原生js实现贪吃蛇小游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/all.5.15.4.js"></script> <style> @font-face { font-family: "game"; src: url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap"); } * { padding: 0; margin: 0; box-sizing: border-box; } button:focus { outline: 0; } html, body { height: 100%; font-family: "Poppins", sans-serif; color: #6e7888; } body { background-color: #222738; display: flex; justify-content: center; align-items: center; color: #6e7888; } canvas { background-color: #181825; } .container { display: flex; width: 100%; height: 100%; flex-flow: column wrap; justify-content: center; align-items: center; } #ui { display: flex; align-items: center; font-size: 10px; flex-flow: column; margin-left: 10px; } h2 { font-weight: 200; transform: rotate(270deg); } #score { margin-top: 20px; font-size: 30px; font-weight: 800; } .noselect { user-select: none; } #replay { font-size: 10px; padding: 10px 20px; background: #6e7888; border: none; color: #222738; border-radius: 20px; font-weight: 800; transform: rotate(270deg); cursor: pointer; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } #replay:hover { background: #a6aab5; background: #4cffd7; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } #replay svg { margin-right: 8px; } @media (max-width: 600px) { #replay { margin-bottom: 20px; } #replay, h2 { transform: rotate(0deg); } #ui { flex-flow: row wrap; margin-bottom: 20px; } #score { margin-top: 0; margin-left: 20px; } .container { flex-flow: column wrap; } } #author { width: 100%; bottom: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: inherit; text-transform: uppercase; padding-left: 35px; } #author span { font-size: 10px; margin-left: 20px; color: inherit; letter-spacing: 4px; } #author h1 { font-size: 25px; } .wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; margin-bottom: 20px; } </style> </head> <body > <div class="container noselect"> <div class="wrapper"> <button id="replay"> <i class="fas fa-play"></i> RESTART </button> <div id="canvas"> </div> <div id="ui"> <h2>SCORE </h2> <span id="score">00</span> </div> </div> <div id="author"> <h1>SNAKE</h1> <span>by Fariat</span> </div> </div> <script > /** This is a snake game I made with Vanilla Javascript. Follow me on twitter @fariatondo **/ let dom_replay = document.querySelector("#replay"); let dom_score = document.querySelector("#score"); let dom_canvas = document.createElement("canvas"); document.querySelector("#canvas").appendChild(dom_canvas); let CTX = dom_canvas.getContext("2d"); const W = (dom_canvas.width = 400); const H = (dom_canvas.height = 400); let snake, food, currentHue, cells = 20, cellSize, isGameOver = false, tails = [], score = 00, maxScore = window.localStorage.getItem("maxScore") || undefined, particles = [], splashingParticleCount = 20, cellsCount, requestID; let helpers = { Vec: class { constructor(x, y) { this.x = x; this.y = y; } add(v) { this.x += v.x; this.y += v.y; return this; } mult(v) { if (v instanceof helpers.Vec) { this.x *= v.x; this.y *= v.y; return this; } else { this.x *= v; this.y *= v; return this; } } }, isCollision(v1, v2) { return v1.x == v2.x && v1.y == v2.y; }, garbageCollector() { for (let i = 0; i < particles.length; i++) { if (particles[i].size <= 0) { particles.splice(i, 1); } } }, drawGrid() { CTX.lineWidth = 1.1; CTX.strokeStyle = "#232332"; CTX.shadowBlur = 0; for (let i = 1; i < cells; i++) { let f = (W / cells) * i; CTX.beginPath(); CTX.moveTo(f, 0); CTX.lineTo(f, H); CTX.stroke(); CTX.beginPath(); CTX.moveTo(0, f); CTX.lineTo(W, f); CTX.stroke(); CTX.closePath(); } }, randHue() { return ~~(Math.random() * 360); }, hsl2rgb(hue, saturation, lightness) { if (hue == undefined) { return [0, 0, 0]; } let chroma = (1 - Math.abs(2 * lightness - 1)) * saturation; let huePrime = hue / 60; let secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1)); huePrime = ~~huePrime; let red; let green; let blue; if (huePrime === 0) { red = chroma; green = secondComponent; blue = 0; } else if (huePrime === 1) { red = secondComponent; green = chroma; blue = 0; } else if (huePrime === 2) { red = 0; green = chroma; blue = secondComponent; } else if (huePrime === 3) { red = 0; green = secondComponent; blue = chroma; } else if (huePrime === 4) { red = secondComponent; green = 0; blue = chroma; } else if (huePrime === 5) { red = chroma; green = 0; blue = secondComponent; } let lightnessAdjustment = lightness - chroma / 2; red += lightnessAdjustment; green += lightnessAdjustment; blue += lightnessAdjustment; return [ Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255) ]; }, lerp(start, end, t) { return start * (1 - t) + end * t; } }; let KEY = { ArrowUp: false, ArrowRight: false, ArrowDown: false, ArrowLeft: false, resetState() { this.ArrowUp = false; this.ArrowRight = false; this.ArrowDown = false; this.ArrowLeft = false; }, listen() { addEventListener( "keydown", (e) => { if (e.key ===.........完整代码请登录后点击上方下载按钮下载查看
网友评论0