2015-11-12 109 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