game-development 相关问题

我是编程新手，我想使用 html、css 和 javascript 制作一个打字游戏。我想在开始时每 5 秒创建一个标签，并且喜欢每 5 个单词减少时间...... 我是编程新手，我想使用 html、css 和 javascript 制作一个打字游戏。我想在开始时每 5 秒创建一个 <p> 标签，并且喜欢每正确输入 5 个单词就减少时间。 <p>标签是用户必须正确书写的单词。 HTML <head> <title>Type game :D</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="main"> <div class="content grid"> <div class="container radius"> <div class="container-start" id="start-text"> <h2 class="start" onclick="gameLoop()">Start</h2> </div> <div class="words grid" id="wordSpawner"> </div> </div> <div class="container rules"> <h1 class="text-h1">RULES</h1> <p class="text-rules"> - Words will randomly appear in the container on the left <br> - They will move from the left border to the right <br> - Write the words before they reach the right border <br> - After every 5 words the game will get harder <br> - Dont forget to have fun! :D </p> </div> <div class="text-par"> <input type="text" name="" id="inputWord" class="text-game" onclick="keyPressed()"> </div> </div> </div> <script src="./scripts/scripts.js"></script> </body> </html> CSS @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { position: relative; background-color: #add2c9; height: 100vh; font-family: "Poppins", sans-serif; color: black; } ::selection { color: lightblue; background-color: white; } .main { position: relative; height: 100%; width: 100%; } .content.grid { display: grid; max-width: 1600px; margin: 0 auto; width: 100%; grid-template-columns: repeat(25, 1fr); } .container.radius { position: relative; grid-column-start: 2; grid-column-end: 14; border: 5px solid; height: 30rem; margin-top: 12rem; border-radius: 2.5rem; background-color: #faf9f9; overflow: hidden; } .container.rules { position: relative; grid-column-start: 17; grid-column-end: 23; height: 30rem; margin-top: 13rem; } .text-par { display: flex; position: relative; grid-column-start: 3; grid-column-end: 13; margin-top: 2.5rem; justify-content: center; } .text-h1 { font-family: "M PLUS Rounded 1c", sans-serif; text-align: center; } .text-rules { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 1.5rem; margin-top: 1rem; line-height: 150%; } .text-game { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 600; font-size: 3rem; border: none; outline: none; background: none; text-align: center; border-bottom: 4px solid black; } .container-start { display: flex; height: 100%; justify-content: center; align-items: center; } .hide { display: none; } .start { font-family: "Poppins", sans-serif; font-size: 3rem; font-weight: 400; z-index: 1000; } h2:hover { color: green; cursor: pointer; } .words.grid { display: grid; position: relative; height: 100%; width: 100%; top: 0; grid-template-rows: repeat(10, 1fr); } .spwn-words { position: relative; font-size: 1.5rem; align-self: center; animation: word 4s linear; } @keyframes word { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } Javascript var words = ["gatto","cane","calcio","pallavolo","sport","cibo","pizza"]; //7 var startxt = document.getElementById("start-text"); var inputValue = document.getElementById("inputWord"); var p = document.createElement("p"); var spawner = document.getElementById("wordSpawner").append(p); var typedWord; var playing = false; spawnedWord = words; function start(){ startxt.classList.add("hide"); playing = true; } function generateWord(){ p.classList.add("spwn-words"); p.style.gridRowStart = randomRow(); p.textContent = randomWord(); console.log(p); } function keyPressed(){ inputValue.addEventListener('keydown',(event)=>{ if(event.key === 'Enter' && playing == true){ console.log('Enter key pressed!'); typedWord = inputValue.value; } }); } function randomWord(){ var n = Math.floor(Math.random() * words.length); return spawnedWord[n]; } function randomRow(){ var nrow = Math.floor(Math.random() * 10); return nrow; } function gameLoop(){ start(); generateWord(); } 我对我写的代码感到抱歉，但正如我所说，我是初学者。我尝试添加一个 while 循环，但它不起作用...我尝试为标签创建一个构造函数，但我不知道如何使其正确，我还尝试了“new Date().getTime() /” 1000；”但我不知道如何进一步。在 Web JavaScript 中，要实现流畅的游戏循环，最好的方法就是使用 requestAnimationFrame 方法。 function gameLoop(){ start(); generateWord(); // request the next animation frame window.requestAnimationFrame(gameLoop); } 有关更多信息，请查看 MDN 文档。我希望这有帮助。

javascript html css loops game-development

回答 1 投票 0

在这种情况下，为什么我不能将“Mouse Y”（来自Input.GetAxis("Mouse Y")）直接传递到X轴变换旋转？（想了解更多关于C#的知识）

这里是菜鸟/初学者。我已经搜索过这个问题，但我自己没有找到任何内容（如果这个问题已经在这里解决/回答，我深表歉意）。我正在制作一个超级基本的 FP 角色控制器

c# unity-game-engine visual-studio-code game-development unityscript

回答 1 投票 0

在 M1 MacBook Pro 上玩 JavaScript 游戏速度太快

我刚刚使用普通的 Javascript 制作了一个小“太空入侵者”游戏，它在我的 2018 年 MacMini 上运行得非常漂亮，但在我的 2021 年 MacBook Pro 上运行得快得离谱且惊人（wh...

javascript game-development apple-m1

回答 1 投票 0

Godot C# - 使用泛型类型作为信号参数

在我当前项目的过程中，我发现自己在许多不同的类中重写了类似的样板，以便在变量发生更改时发出信号。举个例子...