贪吃蛇游戏价值观被打破答案

【问题标题】：Snake Game Values Broken贪吃蛇游戏价值观被打破
【发布时间】：2022-01-24 03:12:40
【问题描述】：

所以我的蛇游戏有问题，它是用 js 编码的，我试图弄清楚如何制作一个可以更改值的菜单，该值不会在控制台中记录不会出现在游戏中。

https://jsfiddle.net/Faxtixe/duq6ba3x/3/

class Apple {
    constructor() {
        let isTouching

        while (true) {
            isTouching = false;
            this.x = Math.floor(Math.random() * canvas.width / snake.size) * snake.size
            this.y = Math.floor(Math.random() * canvas.height / snake.size) * snake.size

            for (let i = 0; i < snake.tail.length; i++) {
                if (this.x == snake.tail[i].x && this.y == snake.tail[i].y) {
                    isTouching = false
                }
            }

            var tb1 = document.getElementById("setInterval").value // fps/Interval var curruntly not working
            var tb2 = document.getElementById("thisColor").value // color var also curruntly not working
            console.log(tb1);
            console.log(tb2);


            this.size = snake.size
            this.color = tb2.value // here is the color of the food

并且 Console Errors

window.onload = () => {
    gameLoop()
}

function gameLoop() {
    setInterval(show, 1000/tb1.value) // here is our fps value
}

这是 HTML 代码

<form>
    <label for="setInterval">Speed/FPS:</label>
    <input type="text" id="setInterval" name="setInterval"><br><br>
    <label for="this.color">Food Color:</label>
    <input type="text" id="thisColor" name="thisColor"><br><br>
    <input type="submit" value="Submit">
</form>

【问题讨论】：

这里不足以让我们看到这个问题。我们需要查看变量的范围和gameLoop 函数。我看到其中一行是this.color = tb2.value，这都是在一个类中吗？
我修复了它，this.color = tb1.value 已经显示你一定错过了它。
gameLoop() 是在哪里定义的？为什么tb1 有 value 属性？您应该显示更多代码...
@Faxtixe 您需要使用 JSFiddle 之类的网站添加一个工作示例，以便人们可以帮助您。您在此处发布的内容不足以弄清楚您需要什么。
codeandbox 或类似的工作示例会对您的事业有很大帮助。

标签： javascript html

【解决方案1】：

您至少需要初始化 tb1 变量。

const tb1 = document.getElementById("setInterval")

在表单中，您需要有一些初始值，假设您在页面加载时开始运行游戏，并且在用户有机会设置该变量之前。您还需要解决其他问题才能真正让事情按您的意愿工作，但这至少可以帮助您克服问题中的错误。

<input type="text" id="setInterval" name="setInterval" value="50"><br><br>

【讨论】：