Как сделать вращающиеся фигуры? - PullRequest
Новая
       54

Как сделать вращающиеся фигуры?

0 голосов
/ 24 февраля 2020

Я использую javascript для написания игры. И у меня возникли проблемы с такой проблемой: если вы щелкнете один раз на доске (холсте), то на ней будет нарисован круг aws, и важно то, что он должен вращаться (чтобы вы могли вращать его на четыре позиции: 0, 90, 180, 270 градусов). После того, как игрок выбрал позицию, кликните второй раз на экране, и позиция будет зафиксирована. Решение не должно использовать доску, как показано на иллюстрации (это можно сделать только на чистом холсте). Я с нетерпением жду вашего ответа! Ваша помощь была бы очень полезна, и извините, если мой вопрос глуп, но я все еще только начинающий. Заранее благодарим вас за ваш ответ!

Здесь выше иллюстрация и код (для рисования X и O):

Illustration

document.getElementById("canvas").addEventListener("click", function(event) {
  onClick(event);
});
 var ctx = canvas.getContext("2d");

 function drawX(x, y) {

ctx.beginPath();

ctx.moveTo(x + -36, y + -35);

ctx.lineTo(x + 35, y + 36);

ctx.moveTo(x + -36, y + 35);

ctx.lineTo(x + 35, y + -36);

ctx.moveTo(x + -36, y + -35);

ctx.lineTo(x + 0, y - 75);

ctx.moveTo(x + 36, y + -35);

ctx.lineTo(x + 0, y - 75); 

ctx.moveTo(x + -36, y + -35);

ctx.lineTo(x + 35, y + -36);

ctx.stroke();

}

  function drawO(x, y, r) {

  ctx.beginPath();

  ctx.arc(x, y, r, 0, Math.PI * 2, true);

  ctx.strokeStyle = "Indigo";
   
  ctx.lineWidth = 2;

  ctx.moveTo(x + -36, y + -35);

ctx.lineTo(x + 0, y - 75);

ctx.moveTo(x + 36, y + -35);

ctx.lineTo(x + 0, y - 75); 
  
ctx.moveTo(x + -36, y + -35);

ctx.lineTo(x + 35, y + -36);

  ctx.stroke();

}

  var x = e.x - canvas.offsetLeft;

  var y = e.y - canvas.offsetTop;
<canvas id="canvas" ></canvas>
...