Tetris P5
Las diferentes rotaciones se representan con bitboards
const figuras = {
l: [3840,8738,240,17476,4],
j: [312,210,57,150,3],
o: [26112,26112,26112,26112,4],
s: [240,153,30,306,3],
t: [184,154,58,178,3],
z: [408,90,51,180,3],
};
const colors = ['#11B6CA','#CA1178','#DA522E'];
Clase Ficha y Dibujo
class Ficha{
constructor(rotacion =0,escala =100){
this.escala = escala;
this.rotacion = rotacion;
this.vida= 1;
this.x = 3*this.escala;
this.y=3*this.escala;
}
get color(){
this._color = this._color == undefined ? this.random(colors): this._color
return this._color;
}
set color(color){
this._color = color;
}
get forma(){
this._forma = this._forma == undefined? this.random(figuras): this._forma;
return this._forma;
}
set forma(forma){ return this._forma = forma}
get rotacion(){
this._rotacion = this._rotacion == undefined? 0:this._rotacion;
return this._rotacion
}
set rotacion(rotacion){
this._rotacion = rotacion;
return;
}
random(obj){
let key =Object.values(obj);
let fig = key[Math.floor(Math.random() * key.length)];
return fig;
}
mover(x,y =0){
this.x = this.x +(this.escala*x);
this.y = this.y +(this.escala*y);
}
verificar(x,y){
}
dibujar(){
let fig = this.forma[this.rotacion];
let cua = this.forma[4]
let bin = fig.toString(2);
bin = '0'.repeat((cua*cua)-bin.length)+ bin;
let escala=this.escala;
let x1 = this.x;
let y1 = this.y;
let v = 0;
for(let i=0;i< cua*cua;i++){
let mask = '0'.repeat(i)+'1'+'0'.repeat((cua*cua-1)-i);
if ((parseInt(mask,2)&fig) !=0){
fill(this.color);
rect(x1,y1,escala);
v=v+1;
beginShape();
vertex(x1+(escala/10), y1+(escala/10));
vertex(x1+(escala/10),y1+escala-(escala/15));
vertex(x1+escala-(escala/15),y1+(escala/10));
vertex(x1+(escala/10), y1+(escala/10));
endShape();
beginShape();
vertex(x1+escala-(escala/10), y1+escala-(escala/10));
vertex(x1+escala-(escala/10),y1+(escala/15));
vertex(x1+(escala/15),y1+escala-(escala/10));
vertex(x1+escala-(escala/10), y1+escala-(escala/10));
endShape();
}
x1=x1+escala;
if(((i+1)%cua) == 0){
y1=y1+escala;
x1=this.x;
}
}
}
rotar(){
this.rotacion = (++this.rotacion)%4;
return this.rotacion;
}
}
Temas y Tablero
class Tablero{
constructor(escala= 100,dimx =10 ,dimy=20){
this.escala = escala;
this.casillas = new Array(dimy).fill(new Array(dimx).fill('#FFFFFF'));
//this.color_tema = color(white);
}
dibujar(){
console.log(this.casillas.length);
for (let i=0;i<this.casillas.length;i++)
{
for(let x=0; x<this.casillas[i].length;x++)
{
fill(this.casillas[i][x])
rect((this.escala*i)+this.escala,(this.escala*x)+this.escala,this.escala);
}
}
}
dibujar_marco(){
let ancho = this.casillas.length;
let alto = this.casillas[0].length;
for(let i = 0;i<ancho+2;i++){
image(img,i*this.escala,0,this.escala,this.escala);
}
for(let i = 0;i<ancho+2;i++){
image(img,i*this.escala,(alto+1)*this.escala,this.escala,this.escala);
}
for(let i = 0;i<alto+2;i++){
image(img,0,i*this.escala,this.escala,this.escala);
}
for(let i = 0;i<alto+2;i++){
image(img,0,i*this.escala,this.escala,this.escala);
}
for(let i = 0;i<alto+2;i++){
image(img,(ancho+1)*this.escala,i*this.escala,this.escala,this.escala);
}
}
}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Configuracion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Tema</h3>
<div class="row">
<div class="col">
<button onclick="tema(2)" value="2"><img decoding="async" src="img/texture2.jpg" alt="10" width="100"></button>
</div>
<div class="col">
<button onclick="tema(1)" value="1"><img decoding="async" src="img/texture1.jpg" alt="10" width="100"></button>
</div>
<div class="col">
<button onclick="tema(3)" value="3"><img decoding="async" src="img/texture3.jpg" alt="10" width="100"></button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>