现有形状的Javascript开关形状

我有一个关于使用键盘移动的正方形的javascript项目（上，下，右，左），现在我希望能够将广场的形状改为例如三角形或圆形。我想通过按例1来做到这一点，并将形状变成一个圆形2，并将形状变成三角形。同时，我希望新形状能够使用向上，向下，向左，向右移动。现有形状的Javascript开关形状

问题是，如何将我的方形的形状更改为三角形？或一个圆圈？

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; 

    } 
    } 
);

来源

2015-11-12 Dan Mihai

你的问题是什么？ –

我该如何改变物体 –

如果你的三角形的CSS类是正确的，它看起来像你可以通过改变的ID开始元素：

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

...但这种架构很脆弱，不推荐使用。降压的道路上的改进是使用类名：

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

这将导通第一DOM元素与类的circle成三角形。你的CSS看起来像

.circle { 
    ... 
} 

.triangle { 
    ... 
}

把所有.circle s转换.triangle S，这样做：

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

再次，这是假设你的CSS类绘制形状如预期。

来源

2015-11-12 20:09:36 Ben

的形状，但现在我又遇到了另一个问题，新物体没有获得运动功能。我的意思是，例如，当我从正方形切换到三角形时，三角形不随键盘移动。 –

@DanMihai太棒了！该运动将是一个单独的问题，但显然是你的keydown处理程序中的一些东西。我知道这听起来很疯狂，但我建议你重新开始而不是调试 - 你已经学到了很多东西，第二次你会更快，更少的错误，并且能够找到移动问题的位置可能来自于。欢迎来到SO，祝你好运！ – Ben

现有形状的Javascript开关形状

回答

相关问题