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%; } #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; } #youtube, #youtube-card { display: none; color: black; } @media (min-height: 425px) { /** Youtube logo by https://codepen.io/alvaromontoro */ #youtube { z-index: 50; width: 100px; display: block; height: 70px; position: fixed; bottom: 20px; right: 20px; background: red; border-radius: 50% / 11%; transform: scale(0.8); transition: transform 0.5s; } #youtube:hover, #youtube:focus { transform: scale(0.9); color: black; } #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; } #youtube:hover + #youtube-card { z-index: 49; display: block; position: fixed; bottom: 12px; right: 10px; padding: 25px 130px 25px 25px; width: 300px; background-color: white; } } </style> </head> <body > <div class="container"> <canvas id="game"></canvas> <div id="introduction"> <p>Hold down the mouse to raise</p> <p>Fly low to save fuel</p> </div> <button id="restart">RESTART</button> </div> <script > /* HTML Canvas tutorial walking through the source code of this game: https://youtu.be/Ymbv6m3EuNw Follow me on Twitter for more: https://twitter.com/HunorBorbely */ // Game data let gameStarted; // Boolean let balloonX; let balloonY; let verticalVelocity; // Current vertical velocity of the balloon let horizontalVelocity; // Current horizontal velocity of the balloon let fuel; // Percentage of fuel left let heating; // Boolean: Is the mouse down or not? let trees; // Metadata of the trees in an array let backgroundTrees; // Metadata of the trees on the hills in the background // Configuration const mainAreaWidth = 400; const mainAreaHeight = 375; let horizontalPadding = (window.innerWidth - mainAreaWidth) / 2; let verticalPadding = (window.innerHeight - mainAreaHeight) / 2; const hill1BaseHeight = 80; const hill1Speed = 0.2; const hill1Amplitude = 10; const hill1Stretch = 1; const hill2BaseHeight = 50; const hill2Speed = 0.2; const hill2Amplitude = 15; const hill2Stretch = 0.5; const hill3BaseHeight = 15; const hill3Speed = 1; const hill3Amplitude = 10; const hill3Stretch = 0.2; const canvas = document.getElementById("game"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const ctx = canvas.getContext("2d"); const introductionElement = document.getElementById("introduction"); const restartButton = document.getElementById("restart"); // Add a custom sin function that takes degrees instead of radians Math.sinus = function (degree) { return Math.sin(degree / 180 * Math.PI); }; // Initialize layout resetGame(); // Resets game variables and layouts but does not start the game (game starts on keypress) function resetGame() { // Reset game progress gameStarted = false; heating = false; verticalVelocity = 5; horizontalVelocity = 5; balloonX = 0; balloonY = 0; fuel = 100; introductionElement.style.opacity = 1; restartButton.style.display = "none"; trees = []; for (let i = 1; i < window.innerWidth / 50; i++) generateTree(); backgroundTrees = []; for (let i = 1; i < window.innerWidth / 30; i++) generateBackgroundTree(); draw(); } function generateBackgroundTree() { const minimumGap = 30; const maximumGap = 150; // X coordinate of the right edge of the furthest tree const lastTree = backgroundTrees[backgroundTrees.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)]; backgroundTrees.push({ x, color }); } function generateTree() { const minimumGap = 50; // Minimum distance between two trees const maximumGap = 600; // Maximum distance between two trees const x = trees.length ? trees[trees.length - 1].x + minimumGap + Math.floor(Math.random() * (maximumGap - minimumGap)) : 400; const h = 60 + Math.random() * 80; // Height const r1 = 32 + Math.random() * 16; // Radius const r2 = 32 + Math.random() * 16; const r3 = 32 + Math.random() * 16; const r4 = 32 + Math.random() * 16; const r5 = 32 + Math.random() * 16; const r6 = 32 + Math.random() * 16; const r7 = 32 + Math.random() * 16; const treeColors = ["#6D8821", "#8FAC34", "#98B333"]; const color = treeColors[Math.floor(Math.random() * 3)]; trees.push({ x, h, r1, r2, r3, r4, r5, r6, r7, color }); } resetGame(); // If space was pressed restart the game window.addEventListener("keydown", function (event) { if (event.key == " ") { event.preventDefault(); resetGame(); return; } }); window.addEventListener("mousedown", function () { heating = true; if (!gameStarted) { introductionElement.style.opacity = 0; gameStarted = true; window.requestAnimationFrame(animate); } }); window.addEventListener("mouseup", function () { heating = false; }); window.addEventListener("resize", function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; horizontalPadding = (window.innerWidth - mainAreaWidth) / 2; verticalPadding = (window.innerHeight - mainAreaHeight) / 2; draw(); }); // The main game loop function animate() { if (!gameStarted) return; const velocityChangeWhileHeating = 0.4; const velocityChangeWhileCooling = 0.2; if (heating && fuel > 0) { if (verticalVelocity > -8) { // Limit maximum rising spead verticalVelocity -= velocityChangeWhileHeating; } fuel -= 0.002 * -balloonY; } else if (verticalVelocity < 5) { // Limit maximum descending spead verticalVelocity += velocityChangeWhileCooling; } balloonY += verticalVelocity; // Move the balloon up or down if (balloonY > 0) balloonY = 0; // The balloon landed on the ground if (balloonY < 0) balloonX += horizontalVelocity; // Move balloon to the right if not on the ground // If a tree moves out of the .........完整代码请登录后点击上方下载按钮下载查看
网友评论0