我有一個關於使用鍵盤移動的正方形的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;
}
}
);
你的問題是什麼? –
我該如何改變物體 –