在移动其他元素时保存元素在画布中的位置
Save position of elements in canvas while is moving others
我开始通过一个简单的游戏俄罗斯方块来学习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)
将永远为零。
祝你的俄罗斯方块游戏好运!
相关文章:
- 在元素列表中搜索给定字符串
- 未捕获错误:元素缓存中id为x的DOM元素与DOM中的元素不同
- 从父元素AngularJS中获取多个输入字段的值
- 如何从不同范围外的元素属性中获取求值表达式
- 另一个元素JAVAscript中的元素位置
- 从元素id中获取值,而不是从javascript中的名称中获取值
- 如何删除元素列表中的类并添加到另一个元素 Jquery.
- 如何替换元素属性中的部分文本
- 在元素 SVG 中使用 JavaScript 或 jQuery 进行事件单击
- XSLT:在元素标记中输出Javascript
- 增加在选择元素HTML中搜索的时间
- 来自Svc的数据未建模到视图元素AngularJS中
- 从元素'中选择一个元素;的兄弟姐妹
- 从定义的元素总数中获取第一个特定元素
- 选择克隆的元素变量中的元素
- 替换 href 元素菜单中的 SID 值数据
- 返回父元素 jquery 中的输入值
- 如何在 html 元素属性中使用 Angular 2 外推法
- 如何确定 HTML 元素文本中“新行”的位置
- jQuery将相同的类添加到两个不同容器中的同一元素索引中