在移动其他元素时将元素的位置保存在 canvas 中

Question

我开始学习 Html5 canvas 一个简单的游戏，俄罗斯方块。当这个棋子到达canvas的底部时，我需要保存canvas中棋子的位置，然后留在那里。然后创建另一块并将其移动到底部。但是当第一块到达 canvas 的底部时，它消失了，新的一块出现在顶部并开始下降。为什么第一块不留在底部？这是代码：

var canvas;
var context;
var _this;
var pantalla = {
    width: 325,
    height: 650,
    figuras: []
}

对象"pantalla"是一个对象，有屏幕的属性，宽度，高度，画的块

function Game(dificulty){
   this.time = dificulty; 
   this.initGame = function(){
      canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");
      //context = canvas.getContext("3d");  

      _this = this;
      figura = _this.generarFigura();
      interval = setInterval(function(){_this.loop()},_this.time);  
   };

"initGame"方法创建上下文并创建第一个片段然后启动循环。

   this.loop = function(){
      figura.update();
      figura.paint();
      if((figura.y)>=pantalla.height){
        clearInterval(interval);
        figura = _this.generarFigura();
        interval = setInterval(function(){_this.loop()},_this.time);
      }
   };

方法"loop"迭代直到片在canvas的底部，然后停止迭代清除间隔，创建一个新片并再次开始间隔。

   this.generarFigura = function(){
      var numeroFigura = Math.floor(Math.random() * 0);
      var numeroPosFigura = Math.floor(Math.random() * 10);
      var figurasPosibles = ['i','j','t','o','z','s','l'];
      var figura;

      switch(figurasPosibles[numeroFigura]){
        case 'i': figura = new Figura('i'); break;
        case 'j': break;
        case 't': break;
        case 'o': break;
        case 'z': break;
        case 's': break;
        case 'l': break;
      }

      pantalla.figuras[pantalla.figuras.length] = figura;


      //Si sale un numero que colocando la posicion se salga de la pantalla
      //No me complico y la dejo en la (0,0)
      if(((numeroPosFigura * 32.5) + figura.width) <= pantalla.width){
          figura.x = 32.5 * numeroPosFigura;
      }

      figura.paint();
      return figura;
   };

方法"generarFigura"随机选择一块并添加到对象屏幕（pantalla）的块列表中。然后这件作品是在上下文中绘制的。

 function Figura(tipo){
    this.x = 0;
    this.y = 0;
    switch(tipo){
       case 'i': this.width = 162.5; this.height = 32.5; 
          this.update = function(direccion){
            context.clearRect(this.x,this.y,this.width,this.height);    
            if(direccion){
                if(direccion=='derecha' && (this.x+this.width)<pantalla.width){
                    this.x += 32.5;
                }else if(direccion=='izquierda' && this.x>0){
                    this.x -= 32.5;
                }
            }else{//Si no se mueve en ninguna dirección la figura baja
                this.y += 32.5;
            }
          };
          this.paint = function(){
            context.beginPath();
            context.canvas.width = context.canvas.width;        
            context.fillRect(this.x,this.y,this.width,this.height);
            context.stroke();
          }; break;
     }
  };

每个棋子的"update"方法删除棋子的旧位置并更新参数（如果"direccion"存在则将棋子向右或向左移动）。 "paint" 方法在指定的参数中绘制这块。

有人可以帮助我吗？谢谢。

Answer 1

您的 update() 函数仍在移动棋子，即使它们已到达底部。解决方法是仅在未到达底部时才移动棋子：

// in update()
if(this.y<pantalla.height-this.height){
    this.y+=32.5;
    // adjust if the piece is slightly below the bottom
    if(this.y>pantally.height-this.height{
        this.y=pantally.height-this.height;
    }
}

顺便说一句，您的 Math.floor(Math.random() * 0) 将始终为零。

祝你玩俄罗斯方块游戏好运！

在移动其他元素时将元素的位置保存在 canvas 中

Save position of elements in canvas while is moving others

javascript

html

canvas

2d-games