2015-11-12 111 views
1

我有一个关于使用键盘移动的正方形的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; 

    } 
    } 
); 
+0

你的问题是什么? –

+0

我该如何改变物体 –

回答

0

如果你的三角形的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类绘制形状如预期。

+0

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

+0

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