如何使重力球停止下沉？Javascript SVG_Javascript_Html_Svg

如何使重力球停止下沉？Javascript SVG

javascript html svg

如何使重力球停止下沉？Javascript SVG,javascript,html,svg,Javascript,Html,Svg,球反弹得很好，但一旦开始减速，它就开始下沉到SVG边界之外。我只是不知道怎么解决这个问题预览图像：项目文件夹的Dropbox（您需要安装“Web Server For Chrome”扩展并通过Web Server扩展运行html文件）：代码： Sprite.js： export default class sprite { constructor(shape, x, y, dx, dy, width, height) { this.shape = shape

球反弹得很好，但一旦开始减速，它就开始下沉到SVG边界之外。我只是不知道怎么解决这个问题

预览图像：

项目文件夹的Dropbox（您需要安装“Web Server For Chrome”扩展并通过Web Server扩展运行html文件）：

代码：

Sprite.js：

export default class sprite {
    constructor(shape, x, y, dx, dy, width, height) {
        this.shape = shape
        this.x = x
        this.y = y
        this.dx = dx
        this.dy = dy
        this.width = width
        this.height = height
    }
    move() {
        this.x += this.dx
        this.y += this.dy
        //did we hit the svg edge?
        //if so, which one, and then bounce
        if(this.x + this.shape.radius > this.width){
            this.dx *= -1
        }
        if (this.y + this.shape.radius > this.height){
            this.dy *= -1
        }
        if (this.x - this.shape.radius < 0){
            this.dx *= -1
        }
        if (this.y - this.shape.radius < 0){
            this.dy *= -1
        }
        this.shape.showAt(this.x, this.y)
        //simulate gravity
        this.dy += 1;
    }
}

Circle.js：

import Shape from './Shape.js'

export default class Circle extends Shape {
    constructor(svg, radius, color, onclick) {
        super('circle', svg,color,onclick)
        this.radius = radius
        this.shape.setAttribute("r", this.radius)
    }
    get radius() {
        return this._radius
    }
    set radius(value) {
        if (typeof (value) !== 'number') {
            return
        }
        this._radius = value
    }
    showAt(cx, cy) {
        this.shape.setAttribute('cx', cx)
        this.shape.setAttribute('cy', cy)
    }
}

index.html：

<!DOCTYPE html>

<head>
    <style>
        * {
            font-family: sans-serif;
        }
        svg{
            background-color: aqua
        }
    </style>
</head>
<html>

<body>
    <div>


        <label for="score">Score</label>
        <input type="text" readonly id="score" value="0"> <br>
        <svg id="mySvg" width="400" height="400" style="border:1px solid #000000;">
        </svg>
    </div>
    <script type="module">
        import Game from './Game.js'
        const svg = document.getElementById("mySvg")
        const game = new Game(svg)
        game.play()
    </script>    

</body>

</html>


* {
字体系列：无衬线；
}
svg{
背景颜色：浅绿色
}
分数


从“./Game.js”导入游戏
const svg=document.getElementById（“mySvg”）
const游戏=新游戏（svg）
游戏

请在此处添加一些代码。并非所有人都使用Chrome或希望使用Dropbox。请在您的问题中添加不起作用的代码部分。对于给您带来的不便，我深表歉意。这是我在Stackoverflow上的第一篇帖子。我适当地编辑了这篇文章。请在这里发布一个复制问题的代码的最小示例。为了方便起见，请继续添加一个类似jsbin的链接（而不是dropbox，也绝对不需要任何扩展名），但请确保问题中的代码也是可运行的（如果可能的话，只包含一个文件——包含多个代码文件的问题不太可能得到回答）

import Shape from './Shape.js'

export default class Circle extends Shape {
    constructor(svg, radius, color, onclick) {
        super('circle', svg,color,onclick)
        this.radius = radius
        this.shape.setAttribute("r", this.radius)
    }
    get radius() {
        return this._radius
    }
    set radius(value) {
        if (typeof (value) !== 'number') {
            return
        }
        this._radius = value
    }
    showAt(cx, cy) {
        this.shape.setAttribute('cx', cx)
        this.shape.setAttribute('cy', cy)
    }
}

<!DOCTYPE html>

<head>
    <style>
        * {
            font-family: sans-serif;
        }
        svg{
            background-color: aqua
        }
    </style>
</head>
<html>

<body>
    <div>


        <label for="score">Score</label>
        <input type="text" readonly id="score" value="0"> <br>
        <svg id="mySvg" width="400" height="400" style="border:1px solid #000000;">
        </svg>
    </div>
    <script type="module">
        import Game from './Game.js'
        const svg = document.getElementById("mySvg")
        const game = new Game(svg)
        game.play()
    </script>    

</body>

</html>