Question

我想在窗口中出现随机数量的球，并让它们以随机方向随机移动。我只有一个球上班，但是在推进多个球时，我试图了解ES6课程，而且我被困了。我尝试了一些不同的方法为数组的每个元素创建类Ball，其中包含随机坐标，速度和方向的数组，我查看了文档，在Stackoverflow中，我仍然感到困惑。我真的很想了解ES6课程发生了什么，因为所有新的React内容都是用ES6语法编写的，我以前不必担心这个.myMethod.bind（this），但现在我做，而且一切都非常压倒性的。如果有人想查看我的代码，我会在这里发布，如果我是愚蠢的，我会全神贯注地知道原因和方向。祝福！

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Bounce Test Multi!</title>
    <link rel='stylesheet' href='stylesheet.css'>
    <script src="script.js"></script>
  </head>
  <body>
    <button id="GO" onclick="goGoGadget(Ball, spaceTimeArr);">Balls
    </button>
  </body>
</html>

我也尝试过onclick =＆＃34; goGoGadget（）;＆＃34;

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}
button {
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    color: white;
    background-color: navy;
    height: 50px;
    width: 80px;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.ball {
    position = absolute;
    width = 40px;
    height = 40px;
    border-radius = 50%;
    background-color = crimson;
}

Aaand the Javascript：

var spaceTimeArr = [];

for (let i = 0; i < Math.ceil((Math.random() * 10)); i++) {
    let x = Math.random() * parseInt(window.innerWidth, 10);
    let y = Math.random() * parseInt(window.innerHeight, 10);
    if (x > (parseInt(window.innerWidth, 10) - 40)) {
            x -= 40;
    }
    if (y > (parseInt(window.innerHeight, 10) - 40)) {
            y -= 40;
    }
    let dx = Math.ceil(Math.random() * 5);
    let dy = Math.ceil(Math.random() * 5);
    let directions = ["upRight","upLeft","downRight","downLeft"];
    let dir = directions[Math.floor(Math.random() * 4)];
    spaceTimeArr.push([x, y, dx, dy, dir]);
}

class Ball {
    constructor(x, y, dx, dy, dir) {
        let ball = document.createElement("div");
        ball.setAttribute("class","ball");
        document.body.insertBefore(ball, document.getElementById('GO'));
        ball.style.left = `${x}px`;
        ball.style.top = `${y}px`;
        this.move = this.move.bind(this);
        var intervalThing;
    }
    move() {
        let xInM = ball.style.left;
        let yInM = ball.style.top;
        if (this.dir === "upRight") {
            intervalThing = setInterval(function() {
                xInM += dx;
                yInM -= dy;
                if (xInM > (window.innerWidth - parseInt(ball.style.width, 10))) {
                    this.dir = "upLeft";
                    clearInterval(intervalThing);
                    this.move();
                } else if (yInM < 0) {
                    this.dir = "downRight";
                    clearInterval(intervalThing);
                    this.move();
                } else {
                    ball.style.left = `${xInM}px`;
                    ball.style.top = `${yInM}px`;
                }
            });
        }
        if (this.dir === "upLeft") {
            intervalThing = setInterval(function() {
                xInM -= dx;
                yInM -= dy;
                if (xInM < 0) {
                    this.dir = "upRight";
                    clearInterval(intervalThing);
                    this.move();
                } else if (yInM < 0) {
                    this.dir = "downLeft";
                    clearInterval(intervalThing);
                    this.move();
                } else {
                    ball.style.left = `${xInM}px`;
                    ball.style.top = `${yInM}px`;
                }
            }, 16.6667);
        }
        if (this.direction === "downRight") {
            intervalThing = setInterval(function() {
                xInM += dx;
                yInM += dy;
                if (xInM > (window.innerWidth - parseInt(ball.style.width, 10))) {
                    this.direction = "downLeft";
                    clearInterval(intervalThing);
                    this.move();
                } else if (yInM > (window.innerHeight - parseInt(ball.style.height, 10))) {
                    this.direction = "upRight";
                    clearInterval(intervalThing);
                    this.move();
                } else {
                    ball.style.left = `${xInM}px`;
                    ball.style.top = `${yInM}px`;
                }
            }, 16.6667);
        }
        if (this.direction === "downLeft") {
            intervalThing = setInterval(function() {
                xInM -= dx;
                yInM += dy;
                if (xInM < 0) {
                    this.dir = "downRight";
                    clearInterval(intervalThing);
                    this.move();
                } else if (yInM > (window.innerHeight - parseInt(ball.style.height, 10))) {
                    this.dir = "upLeft";
                    clearInterval(intervalThing);
                    this.move();
                } else {
                    ball.style.left = `${xInM}px`;
                    ball.style.top = `${yInM}px`;
                }
            }, 16.6667);
        }
    }
}

function goGoGadget() {
    document.getElementById('GO').style.display = "none";
    return new Ball(...spaceTimeArr);
}

我也尝试在goGoGadget函数定义中包含参数，但我认为Ball和spaceTimeArr将全局定义。也许我对我处理数组的方式或Ball的构造函数的参数犯了错误。就目前而言，我得到了一个div class =＆＃34; ball＆＃34;插入到0px顶部的DOM和$ {窗口中像素数}的左侧。

es6类的多个实例：随机数的弹力球

0 个答案: