Спрайты выше спрайтов или холст как HTML фон - PullRequest
Новая
       18

Спрайты выше спрайтов или холст как HTML фон

1 голос
/ 07 апреля 2020

Я планирую использовать координаты моих спрайтов на холсте, чтобы сделать настольную игру, превратив холст в фоновое изображение.

Вот код js доски 8x8. 

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.fillStyle = "#ffb933";

c.fillRect(0,0,100,100);
c.fillRect(200,0,100,100);
c.fillRect(400,0,100,100);
c.fillRect(600,0,100,100);

c.fillRect(100,100,100,100);
c.fillRect(300,100,100,100);
c.fillRect(500,100,100,100);
c.fillRect(700,100,100,100);

c.fillRect(0,200,100,100);
c.fillRect(200,200,100,100);
c.fillRect(400,200,100,100);
c.fillRect(600,200,100,100);

c.fillRect(100,300,100,100);
c.fillRect(300,300,100,100);
c.fillRect(500,300,100,100);
c.fillRect(700,300,100,100);

c.fillRect(0,400,100,100);
c.fillRect(200,400,100,100);
c.fillRect(400,400,100,100);
c.fillRect(600,400,100,100);

c.fillRect(100,500,100,100);
c.fillRect(300,500,100,100);
c.fillRect(500,500,100,100);
c.fillRect(700,500,100,100);

c.fillRect(0,600,100,100);
c.fillRect(200,600,100,100);
c.fillRect(400,600,100,100);
c.fillRect(600,600,100,100);

c.fillRect(100,700,100,100);
c.fillRect(300,700,100,100);
c.fillRect(500,700,100,100);
c.fillRect(700,700,100,100);

Можно ли как-нибудь сделать это фоновым изображением моего html файла, чтобы я все еще мог использовать те же координаты и создавать над ним новые спрайты, которыми я мог бы манипулировать также с помощью js. Спасибо!

1 Ответ

0 голосов
/ 08 апреля 2020

Вы можете значительно уменьшить это ...
Это всего лишь пара циклов и условие 

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.fillStyle = "#ffb933";

size = 20

for (i = 0; i < 8; i++) {
  for (j = 0; j < 8; j++) {
    if ((i + j) % 2 != 0)
      c.fillRect(i * size, j * size, size, size); 
  }
}
<canvas width=200 height=200>

Если вы настроены на использование изображения, простой вариант с изображением SVG
Я получил это из Викимедиа:
https://upload.wikimedia.org/wikipedia/commons/7/70/Checkerboard_pattern.svg

function svgimage() {
  var image = `
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 5 5">
<rect width="5" height="5"/>
<path d="M0,0V5H1V0zM2,0V5H3V0zM4,0V5H5V0zM0,0H5V1H0zM0,2H5V3H0zM0,4H5V5H0z" fill="#fff" fill-rule="evenodd"/>
</svg>`;
  return encodeURIComponent(image);
}

function drawImage() {
  ctx.drawImage(img, 0, 0, 500, 500);
}

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.onload = drawImage
img.src = 'data:image/svg+xml;charset=utf-8,' + svgimage(); 
<canvas id=canvas width=500 height=500></canvas>

Вы можете нарисовать все что угодно, вот пример: 

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.globalAlpha = 0.5

function drawBoard() {
  c.beginPath()
  c.fillStyle = "#ffb933";
  size = 20
  for (i = 0; i < 8; i++) {
    for (j = 0; j < 8; j++) {
      if ((i + j) % 2 != 0)
        c.fillRect(i * size, j * size, size, size);
    }
  }
}

delta = 0
function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height)
  drawBoard()
  delta += 0.05
  x = Math.sin(delta) * 40 + 80
  y = Math.cos(delta) * 20 + 60
  c.beginPath()
  c.fillStyle = "#ff0000";
  c.arc(x, y, 10, 0, 2 * Math.PI);
  c.fill()
}

setInterval(draw, 20);
<canvas width=200 height=200>

Вы можете видеть, что я преобразовал пример двойного l oop в функцию, которую мы вызываем каждый раз, когда рисуем

...