Exploring how to use canvas
This commit is contained in:
		
							
								
								
									
										26
									
								
								tetris.js
									
									
									
									
									
								
							
							
						
						
									
										26
									
								
								tetris.js
									
									
									
									
									
								
							@ -46,10 +46,9 @@ let tetris = function () {
 | 
				
			|||||||
    ];
 | 
					    ];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    let timer, canvas, ctx, bs;
 | 
					    let timer, canvas, ctx, bs;
 | 
				
			||||||
    let score, speed;
 | 
					 | 
				
			||||||
    let next_t;
 | 
					    let next_t;
 | 
				
			||||||
    
 | 
					    
 | 
				
			||||||
    let board=Array.from(Array(grid_x), () => new Array(grid_y));
 | 
					    let board;
 | 
				
			||||||
    let t = {t:null,x:0,y:0,r:0};
 | 
					    let t = {t:null,x:0,y:0,r:0};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -112,7 +111,7 @@ let tetris = function () {
 | 
				
			|||||||
    function glue(p) {
 | 
					    function glue(p) {
 | 
				
			||||||
        p.t.r[p.r].forEach(b => { board[p.x+b[0]][p.y+b[1]]=1; } );
 | 
					        p.t.r[p.r].forEach(b => { board[p.x+b[0]][p.y+b[1]]=1; } );
 | 
				
			||||||
        draw(t);
 | 
					        draw(t);
 | 
				
			||||||
        setShape(t);
 | 
					        dropShape(t);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    function collision(p) {
 | 
					    function collision(p) {
 | 
				
			||||||
@ -121,26 +120,27 @@ let tetris = function () {
 | 
				
			|||||||
        return false
 | 
					        return false
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    function setShape(p) {
 | 
					    function getNextT() {
 | 
				
			||||||
        let tNum = Math.floor(Math.random() * tetrimonios.length);
 | 
					        let tNum = Math.floor(Math.random() * tetrimonios.length);
 | 
				
			||||||
        if ( !next_t ) {
 | 
					        return tetrimonios[ tNum ];
 | 
				
			||||||
            next_t = tetrimonios[ tNum ];
 | 
					    }
 | 
				
			||||||
            setShape(p);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    function dropShape(p) {
 | 
				
			||||||
        p.t = next_t;
 | 
					        p.t = next_t;
 | 
				
			||||||
        p.x = 0;
 | 
					        p.x = 0;
 | 
				
			||||||
        p.y = grid_x/2 - 1;
 | 
					        p.y = grid_x/2 - 1;
 | 
				
			||||||
        p.r = 0;
 | 
					        p.r = 0;
 | 
				
			||||||
        
 | 
					        
 | 
				
			||||||
        next_t = tetrimonios[ tNum ];
 | 
					        next_t = getNextT();
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    function newGame() {
 | 
					    function newGame() {
 | 
				
			||||||
        score = 0;
 | 
					        ctx.fillStyle = "#FFFFFF";
 | 
				
			||||||
        speed = 1;
 | 
					        ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
 | 
				
			||||||
        next_t = null;
 | 
					
 | 
				
			||||||
        setShape( t );
 | 
					        board = Array.from(Array(grid_x), () => new Array(grid_y));
 | 
				
			||||||
 | 
					        next_t = getNextT();
 | 
				
			||||||
 | 
					        dropShape( t );
 | 
				
			||||||
        if (!timer) timer = setInterval(()=>moveDown(t), 1000);
 | 
					        if (!timer) timer = setInterval(()=>moveDown(t), 1000);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user