原生js实现一个搭木桥小游戏代码
代码语言:html
所属分类:游戏
代码描述:原生js实现一个搭木桥小游戏代码,按住鼠标左键生成木桥
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; cursor: pointer; } .container { display: flex; justify-content: center; align-items: center; height: 100%; } #score { position: absolute; top: 30px; right: 30px; font-size: 2em; font-weight: 900; } #introduction { width: 200px; height: 150px; position: absolute; font-weight: 600; font-size: 0.8em; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-align: center; transition: opacity 2s; } #restart { width: 120px; height: 120px; position: absolute; border-radius: 50%; color: white; background-color: red; border: none; font-weight: 700; font-size: 1.2em; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; display: none; cursor: pointer; } #perfect { position: absolute; opacity: 0; transition: opacity 2s; } #youtube { display: none; } @media (min-height: 425px) { /** Youtube logo by https://codepen.io/alvaromontoro */ #youtube { z-index: 2; display: block; width: 100px; height: 70px; position: absolute; bottom: 20px; left: 20px; background: red; border-radius: 50% / 11%; transform: scale(0.8); transition: transform 0.5s; } #youtube:hover, #youtube:focus { transform: scale(0.9); } #youtube::before { content: ""; display: block; position: absolute; top: 7.5%; left: -6%; width: 112%; height: 85%; background: red; border-radius: 9% / 50%; } #youtube::after { content: ""; display: block; position: absolute; top: 20px; left: 40px; width: 45px; height: 30px; border: 15px solid transparent; box-sizing: border-box; border-left: 30px solid white; } #youtube span { font-size: 0; position: absolute; width: 0; height: 0; overflow: hidden; } } </style> </head> <body> <div class="container"> <div id="score"></div> <canvas id="game" width="375" height="375"></canvas> <div id="introduction">按住鼠标伸出一根棍子</div> <div id="perfect">双倍积分</div> <button id="restart">重新开始</button> </div> <script> /* If you want to know how this game was made, check out this video, that explains how it's made: https://youtu.be/eue3UdFvwPo Follow me on twitter for more: https://twitter.com/HunorBorbely */ // Extend the base functionality of JavaScript Array.prototype.last = function () { return this[this.length - 1]; }; // A sinus function that acceps degrees instead of radians Math.sinus = function (degree) { return Math.sin((degree / 180) * Math.PI); }; // Game data let phase = "waiting"; // waiting | stretching | turning | walking | transitioning | falling let lastTimestamp; let heroX; // Changes when moving forward let heroY; // Only changes when falling let sceneOffset; // Moves the whole game let platforms = []; let sticks = []; let trees = []; // Todo: Save high score to localStorage (?) let score = 0; // Configuration const canvasWidth = 375; const canvasHeight = 375; const platformHeight = 100; const heroDistanceFromEdge = 10; // While waiting const paddingX = 100; // The waiting position of the hero in from the original canvas size const perfectAreaSize = 10; const backgroundSpeedMultiplier = 0.2; const hill1BaseHeight = 100; const hill1Amplitude = 10; const hill1Stretch = 1; const hill2BaseHeight = 70; const hill2Amplitude = 20; const hill2Stretch = 0.5; const stretchingSpeed = 4; // Milliseconds it takes to draw a pixel const turningSpeed = 4; // Milliseconds it takes to turn a degree const walkingSpeed = 4; const transitioningSpeed = 2; const fallingSpeed = 2; const heroWidth = 17; // 24 const heroHeight = 30; // 40 const canvas = document.getElementById("game"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const ctx = canvas.getContext("2d"); const introductionElement = document.getElementById("introduction"); const perfectElement = document.getElementById("perfect"); const restartButton = document.getElementById("restart"); const scoreElement = document.getElementById("score"); // Initialize layout resetGame(); // Resets game variables and layouts but does not start the game (game starts on keypress) function resetGame() { // Reset game progress phase = "waiting"; lastTimestamp = undefined; sceneOffset = 0; score = 0; introductionElement.style.opacity = 1; perfectElement.style.opacity = 0; restartButton.style.display = "none"; scoreElement.innerText = score; // The first platform is always the same // x + w has to match paddingX platforms = [{ x: 50, w: 50 }]; generatePlatform(); generatePlatform(); generatePlatform(); generatePlatform(); sticks = [{ x: platforms[0].x + platforms[0].w, length: 0, rotation: 0 }]; trees = []; generateTree(); generateTree(); generateTree(); generateTree(); generateTree(); generateTree(); generateTree(); generateTree(); generateTree(); generateTree(); heroX = platforms[0].x + platforms[0].w - heroDistanceFromEdge; heroY = 0; draw(); } function generateTree() { const minimumGap = 30; const maximumGap = 150; // X coordinate of the right edge of the furthest tree const lastTree = trees[trees.length - 1]; let furthestX = lastTree ? lastTree.x : 0; const x = furthestX + minimumGap + Math.floor(Math.random() * (maximumGap - minimumGap)); const treeColors = ["#6D8821", "#8FAC34", "#98B333"]; const color = treeColors[Math.floor(Math.random() * 3)]; trees.push({ x, color }); } function generatePlatform() { const minimumGap = 40; const maximumGap = 200; const minimumWidth = 20; const maximumWidth = 100; // X coordinate of the right edge of the furthest platform const lastPlatform = platforms[platforms.length - 1]; let furthestX = lastPlatform.x + lastPlatform.w; const x = furthestX + minimumGap + Math.floor(Math.random() * (maximumGap - minimumGap)); const w = minimumWidth + Math.floor(Math.random() * (maximumWidth - minimumWidth)); platforms.push({ x, w }); } resetGame(); // If space was pressed restart the game window.addEventListener("keydown", function (event) { if (event.key == " ") { event.preventDefault(); resetGame(); return; } }); window.addEventListener("mousedown", function (event) { if (phase == "waiting") { lastTimestamp = undefined; introductionElement.style.opacity = 0; phase = "stretching"; window.requestAnimationFrame(animate); } }); window.addEventListener("mouseup", function (event) { if (phase == "stretching") { phase = "turning"; } }); window.addEventListener("resize", function (event) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; draw(); }); window.requestAnimationFrame(animate); // The main game loop function animate(timestamp) { if (!lastTimestamp) { lastTimestamp = timestamp; window.requestAnimationFrame(animate); return; } switch (phase) { case "waiting": return; // Stop the loop case "stretching": { sticks.last().length += (timestamp - lastTimestamp) / stretchingSpeed; break; } case "turning": { sticks.last().rotation += (timestamp - lastTimestamp) / turningSpeed; if (sticks.last().rotation > 90) { sticks.last().rotation = 90; const [nextPlatform, perfectHit] = thePlatformTheStickHits(); if (nextPlatform) { // Increase score score += perfectHit ? 2 : 1; scoreElement.innerText = score;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0