在移动其他元素时保存元素在画布中的位置

Save position of elements in canvas while is moving others

本文关键字:元素 布中 位置 移动 其他 保存      更新时间:2023-09-26

我开始通过一个简单的游戏俄罗斯方块来学习Html5画布。当这些碎片到达画布底部时,我需要保存画布中碎片的位置,然后停留在那里。然后创建其他部分并将其移动到底部。但是当第一块到达画布的底部时,它消失了,新作品出现在顶部并开始下降。为什么第一块不留在底部?这是代码:

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);
      }
   };

方法"循环"迭代,直到片段位于画布底部,然后停止迭代清除间隔,创建一个新片段并再次开始间隔。

   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",则将该片段向右或向左移动)。"油漆"方法按照此指示的参数绘制作品。

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

你的 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)将永远为零。

祝你的俄罗斯方块游戏好运!