Javascript 切换现有形状的形状

Question

我在 javascript 中有一个项目，它是关于一个使用键盘移动的正方形（上、下、右、左）现在我希望能够将正方形的形状更改为例如三角形或圆形。我想通过按例如 1 并将形状更改为圆形，按 2 并将形状更改为三角形来执行此操作。同时我希望新形状能够使用上、下、左、右移动

问题是，如何将正方形变成三角形？还是圆圈？

html

<!DOCTYPE html>
<html>
<head>
    <title>Interactiune cu tastatura</title>
    <script src="./main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="patrat"></div>
<div id="triangle"></div>
<div id="circle"></div>
<p id="demo"></p>

</body>
</html>

CSS

@CHARSET "UTF-8";

#patrat {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: blue;
}


#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}


#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

main.js

    var step = 100,
        squareLeft = 0,
        squareTop = 0,
        squareSide = 100,
        triangleLeft = 0,
        triangleTop = 0,
        triangleSide = 100,
        circleLeft = 0,
        circleTop = 0,
        circleSide = 0,
        screenWidth = 1920,
        screenHeight = 1080;


document.addEventListener('keydown', function(event)
    {

    var keyCode = event.keyCode,
        spaceLeft = 0,
        x = document.getElementById("patrat");
        y = document.getElementById("triangle");



    switch (keyCode) {
    case(49):
    document.getElementById("circle");

    case (13):  /*ENTER*/
        /*document.getElementById("demo").innerHTML = "Text test";*/
        /*document.getElementById("demo").innerHTML = x.style.backgroundColor;*/
            x.style.backgroundColor = "rgb(255,255,0)";
    break;

    case (37):  /*ArrowLeft*/
        if (squareLeft > 0) {
        squareLeft = (squareLeft > step) ? squareLeft - step : 0;
        x.style.left = squareLeft + "px";
        }
    break;

    case (39):  /*ArrowRight*/
        spaceLeft = screenWidth - squareLeft - squareSide;
        if (spaceLeft > 0) {
            squareLeft += (spaceLeft > step) ? step : spaceLeft;
            x.style.left = squareLeft + "px";       
        }
    break;

    case (38):  /*ArrowUp*/
        if (squareTop > 0) {
            squareTop = (squareTop > step) ? squareTop - step : 0;
            x.style.top = squareTop + "px";
        }
        break;

    case (40): /*ArrowDown*/
        spaceLeft = screenHeight - squareTop - squareSide;
        if (spaceLeft > 0) {
        squareTop += (spaceLeft > step) ? step : spaceLeft;
        x.style.top = squareTop + "px";
                }
    break;

    default:
    alert("Aceasta tasta nu este utilizata");
    break;

    }
    }
);

Answer 1

如果您的三角形 CSS class 是正确的，您似乎可以从更改元素的 ID 开始：

document.getElementById('circle').id = 'triangle';

...但是这种架构很脆弱，不推荐使用。改进之路的一个步骤是使用 classnames:

document.querySelector('.circle').className = 'triangle';

这会将 circle 的 class 的第一个 DOM 元素变成三角形。您的 CSS 看起来像

.circle {
    ...
}

.triangle {
    ...
}

要将所有 .circle 转换为 .triangle，请执行以下操作：

document.querySelectorAll('.circle').forEach(function(element) {
    element.className = triangle;
});

同样，这是假设您的 CSS class 正在按预期渲染形状。

Javascript 切换现有形状的形状

Javascript switch shape of an existing shape

javascript

shapes