Как перемещать объекты холста каждый раз, когда я нажимаю кнопку? - PullRequest
Новая
       1

Как перемещать объекты холста каждый раз, когда я нажимаю кнопку?

1 голос
/ 28 мая 2020

Я пытаюсь создать игру, и у меня появляются блоки случайным образом в сетке в одной фиксированной строке (например, строка 5 [по горизонтали]). Каждый раз, когда я нажимаю кнопку, я хочу, чтобы блоки перемещались из строки 5 в строку 4 (по вертикали). Затем я хочу, чтобы новые случайные блоки генерировались в строке 5 и так далее. Как я могу это сделать? Прямо сейчас он порождает новые блоки только под первой строкой (в строке 6, затем 7 и так далее).

screenshot for the visual reference

//Accessing canvas
var canvas = document.getElementById('grid');
var ctx = canvas.getContext('2d');

var w = ctx.canvas.width;
var h = ctx.canvas.height;

// Drawing grid
var drawingGrid = function() {

  for (x = 0; x <= w; x += 60) {
    for (y = 0; y <= h; y += 60) {

      // Gray grid
      ctx.globalCompositeOperation = 'destination-over';
      ctx.strokeStyle = "#cccccc";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);

      if (x % 240 === 0) {
        // Black X-axis grid |
        ctx.globalCompositeOperation = "source-over";


        if (x === 0 || x === 480) {
          ctx.lineWidth = 5;
        } else {
          ctx.lineWidth = 1;
        }
        // Middle vertical line
        if (x === 240) {
          // 0-480
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, 480);
          ctx.strokeStyle = "#222831";
          ctx.stroke();

          // 480-560
          ctx.beginPath();
          ctx.moveTo(x, 480);
          ctx.lineTo(x, 540);
          ctx.strokeStyle = "#cccccc";
          ctx.globalCompositeOperation = 'destination-over';

        } else {
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, h);
          ctx.strokeStyle = "#222831";
        }



      } else if (y % 240 === 0 || y === 540) {
        // Black Y-axis grid _
        ctx.globalCompositeOperation = "source-over";
        ctx.strokeStyle = "#222831";

        if (y === 0 || y === 540) {
          ctx.lineWidth = 5;
        } else if (y === 480) {
          ctx.lineWidth = 2.5;
        } else {
          ctx.lineWidth = 1;
        }

        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(h, y);

      }
      ctx.stroke();
    }
  }



};

drawingGrid(480, 540, 'grid');

// Starting coordinates
var posX = 0;
var posY = 240;
// Move blocks on Y axis
function moveY(){
  posY +=60;
}
// Spawn random amount of blocks on the field
function gener(){
  posX = 60*Math.floor(8*Math.random());
}

  function spawnRandomObject() {

    // Game Object
      ctx.fillStyle = '#f2a365';
      ctx.globalCompositeOperation = "destination-over";
      ctx.beginPath();
      ctx.fillRect(posX, posY, 60, 60);
      ctx.stroke();
  }

// Blocks moving up
document.getElementById("button").addEventListener("click", function(){
  // Spawn random amount of objects
  for (var i=0; i<Math.floor((Math.random()*8)+1)*2; i++){
    gener();
    spawnRandomObject();

  }
moveY();
});
body{
  background-color: #ececec;
}

canvas{
  padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.row{
  padding: 20px;
  margin: 0;
}
.firstrow{
  width:20%;
}

.mainrow{
  width:60%;
  display: block;
}

.thirdrow{
  width: 20%;
}

.header{
  background-color: #222831;
  color: #ececec;
  padding: 20px;
}

.container{
  margin-top: 20px;
  padding: 0px;
  display: flex;
  box-sizing: inherit;
}
.thirdrow{
  text-align: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Shmetris</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- Local CSS -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Header -->
  <div class="header">
    <h1>Shmetris</h1>
  </div>
  <div class="container">

  <!-- Controls -->
    <div class="row first">
        <div class="col">
            <h1>Score: 0</h1>
            <br>
            <button type="button" class="btn btn-dark" id="button">Refresh</button>
        </div>
    </div>

    <!-- Game Area -->
    <div class="row mainrow">
      <div class="col-" id="gamearea">
   
          

        <!-- Canvas -->
        <canvas id="grid" width="480" height="540" style="background: #ececec "></canvas>

      </div>
    </div>

    <!--  -->
    <div class="row thirdrow">
      <div class="col" style="text-align:left;">
        

      </div>
    </div>
  </div>
<!-- Script -->
  <script src="app.js"></script>
  </body>
</html>

1 Ответ

0 голосов
/ 28 мая 2020

Я удалил вашу функцию moveY() и добавил функцию moveRow(). Игровые объекты (прямоугольники) сохраняются в списке objects. Их положение по оси Y увеличивается при каждом нажатии кнопки. Старые разыгранные позиции удаляются, новые позиции рисуются. Затем случайно сгенерированные блоки добавляются в 5-ю строку.

Обратите внимание, что функция clearRect() внутри removeCell() также удаляет части сетки. Это заставляет каждый раз перерисовывать сетку. Вы можете улучшить код, разделив создание сетки с помощью подфункции, которая отображает сетку только на одной ячейке. Затем вы можете перерисовывать сетку только на тех ячейках, которые нужны. Вероятно, это повышение производительности и делает код более красивым в моих глазах, но он работает и так.

Я также предлагаю использовать length вместо 60 и вычислять более толстые линии сетки по длина, например, 8 * length вместо 480 и т. д. 

//Accessing canvas
var canvas = document.getElementById('grid');
var ctx = canvas.getContext('2d');

var w = ctx.canvas.width;
var h = ctx.canvas.height;

// Drawing grid
var drawingGrid = function() {

  for (x = 0; x <= w; x += 60) {
    for (y = 0; y <= h; y += 60) {

      // Gray grid
      ctx.globalCompositeOperation = 'destination-over';
      ctx.strokeStyle = "#cccccc";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);

      if (x % 240 === 0) {
        // Black X-axis grid |
        ctx.globalCompositeOperation = "source-over";


        if (x === 0 || x === 480) {
          ctx.lineWidth = 5;
        } else {
          ctx.lineWidth = 1;
        }
        // Middle vertical line
        if (x === 240) {
          // 0-480
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, 480);
          ctx.strokeStyle = "#222831";
          ctx.stroke();

          // 480-560
          ctx.beginPath();
          ctx.moveTo(x, 480);
          ctx.lineTo(x, 540);
          ctx.strokeStyle = "#cccccc";
          ctx.globalCompositeOperation = 'destination-over';

        } else {
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, h);
          ctx.strokeStyle = "#222831";
        }



      } else if (y % 240 === 0 || y === 540) {
        // Black Y-axis grid _
        ctx.globalCompositeOperation = "source-over";
        ctx.strokeStyle = "#222831";

        if (y === 0 || y === 540) {
          ctx.lineWidth = 5;
        } else if (y === 480) {
          ctx.lineWidth = 2.5;
        } else {
          ctx.lineWidth = 1;
        }

        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(h, y);

      }
      ctx.stroke();
    }
  }



};

drawingGrid(480, 540, 'grid');

var length = 60;
// Starting coordinates
var posX = 0;
var posY = 4 * length;
var objects = []

function moveRows(){
  for(var i = 0; i < objects.length; i++){
    // remove old objects
    removeCell(objects[i][0], objects[i][1]);
    // move objects
    objects[i][1] += length;
  }
  
  drawingGrid();
  
  for(var i = 0; i < objects.length; i++){
    // redraw objects on new location
    drawCell(objects[i][0], objects[i][1]);
  }
}
// Spawn random amount of blocks on the field
function gener(){
  posX = length*Math.floor(8*Math.random());
}

  function spawnRandomObject() {

    // Game Object
    drawCell(posX, posY);
    objects.push([posX, posY]);
  }

function drawCell(x, y, color){
    ctx.fillStyle = "#f2a365";
    ctx.globalCompositeOperation = "destination-over";
    ctx.beginPath();
    ctx.fillRect(x, y, length, length);
    ctx.stroke();
}

function removeCell(x, y){
    ctx.clearRect(x, y, length, length);
}

// Blocks moving up
document.getElementById("button").addEventListener("click", function(){
  // Spawn random amount of objects
  moveRows();
  for (var i=0; i<Math.floor((Math.random()*8)+1)*2; i++){
    gener();
    spawnRandomObject();

  }
});
body{
  background-color: #ececec;
}

canvas{
  padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.row{
  padding: 20px;
  margin: 0;
}
.firstrow{
  width:20%;
}

.mainrow{
  width:60%;
  display: block;
}

.thirdrow{
  width: 20%;
}

.header{
  background-color: #222831;
  color: #ececec;
  padding: 20px;
}

.container{
  margin-top: 20px;
  padding: 0px;
  display: flex;
  box-sizing: inherit;
}
.thirdrow{
  text-align: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Shmetris</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- Local CSS -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Header -->
  <div class="header">
    <h1>Shmetris</h1>
  </div>
  <div class="container">

  <!-- Controls -->
    <div class="row first">
        <div class="col">
            <h1>Score: 0</h1>
            <br>
            <button type="button" class="btn btn-dark" id="button">Refresh</button>
        </div>
    </div>

    <!-- Game Area -->
    <div class="row mainrow">
      <div class="col-" id="gamearea">
   
          

        <!-- Canvas -->
        <canvas id="grid" width="480" height="540" style="background: #ececec "></canvas>

      </div>
    </div>

    <!--  -->
    <div class="row thirdrow">
      <div class="col" style="text-align:left;">
        

      </div>
    </div>
  </div>
<!-- Script -->
  <script src="app.js"></script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...