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 правильно, это выглядит, как вы могли бы начать с изменения идентификатора элемент:

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

... но эта архитектура является хрупкой и не рекомендуется. Шаг вниз по пути к улучшению будет использовать имена классов:

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

, которые перевернут первый элемент DOM с классом circle в треугольник. Ваш CSS будет выглядеть

.circle { 
    ... 
} 

.triangle { 
    ... 
}

Чтобы включить все .circle сек в .triangle с, сделать что-то вроде:

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

Опять же, это если ваши классы CSS оказывают формы, как и ожидалось.

источник

2015-11-12 20:09:36 Ben

, он был оцеплен, но теперь у меня есть другая проблема, новый элемент не получает функцию движения. Я имею в виду, например, когда я переключаюсь с квадрата на треугольник, треугольник не перемещается с клавиатуры. –

@DanMihai большой! Движение будет отдельным вопросом, но, очевидно, что-то в вашем обработчике keydown. Я знаю, что это кажется сумасшедшим, но я бы рекомендовал вам начать больше, а не отлаживать - вы многому научились, и во второй раз вы пойдете намного быстрее, с меньшими ошибками и сможете найти, где проблема движения вероятно, исходит. Добро пожаловать в SO и удачи! – Ben

Javascript-переключатель формы существующей формы

ответ

Смежные вопросы