From 7267c82bfa8d4b3ee9161cc1827ca19886752794 Mon Sep 17 00:00:00 2001 From: bikethief Date: Fri, 24 Aug 2018 20:30:43 +0200 Subject: [PATCH] Made code more readable. --- index.html | 1 + js/block.js | 151 +++++++++++++++++++-------------------------------- js/game.js | 44 +++++++++++---- js/input.js | 21 ++++--- js/main.js | 7 ++- js/visual.js | 140 +++++++++++++++++++---------------------------- master.css | 4 -- 7 files changed, 163 insertions(+), 205 deletions(-) diff --git a/index.html b/index.html index c4823cc..436f967 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Tetris diff --git a/js/block.js b/js/block.js index a54ca26..e4afdf4 100644 --- a/js/block.js +++ b/js/block.js @@ -9,21 +9,20 @@ function Block(size,y,x,type,save,field) this.blocked = false; } -function move(temp_block,movementy, movementx) +Block.prototype.move = function (y,x) { //We can only move if there is no block in our way - var coll = collided(temp_block,movementy,movementx); + var coll = this.collided(y,x); if(coll == 0) { //The actual moving part - temp_block.positiony += movementy; - temp_block.positionx += movementx; + this.positiony += y; + this.positionx += x; } return coll; -} - -function rotate_block() +}; +Block.prototype.rotate_block = function () { //Make next blocks //Check if anything is out of bounds @@ -34,7 +33,7 @@ function rotate_block() //else break //Choose next block - var next_type = current_block.type; + var next_type = this.type; next_type *= 10; if(Math.floor(next_type / 10000) > 0) @@ -43,48 +42,54 @@ function rotate_block() } //Create next block - temp_block = generate_block(next_type,current_block.positiony,current_block.positionx); + temp_block = generate_block(next_type,this.positiony,this.positionx); var direction = 1; var max_mov = 2; if(temp_block.positionx > playfield.width / 2) direction = -1; //If collided, don't change block - if(collided(temp_block,0,0)) + if(temp_block.collided(0,0)) { return; } - current_block = temp_block; -} + this.size = temp_block.size; + this.type = temp_block.type; + this.positiony = temp_block.positiony; + this.positionx = temp_block.positionx; + this.saveable = temp_block.saveable; + this.field = temp_block.field; + this.blocked = temp_block.blocked; +}; -function drop(temp_block) +Block.prototype.drop = function () { - while(!at_bottom(temp_block) && !move(temp_block,1,0)){} -} + while(!this.at_bottom() && !this.move(1,0)){} +}; -function at_bottom(temp_block) +Block.prototype.at_bottom = function () { - //Is at line 19 ? - if(temp_block.positiony + temp_block.size >= playfield.height - 1) + //Is at line the end of the field (19) ? + if(this.positiony + this.size >= playfield.height - 1) { //Find which line in field of temp_block is the last var targety = 0; - while(targety + temp_block.positiony < playfield.height - 1) + while(targety + this.positiony < playfield.height - 1) { targety++; } //Savety check : No out of bounds on temp_block.field - if(targety >= temp_block.size) + if(targety >= this.size) { return false; } //Check if it's not an empty line - for(var x = 0; x < temp_block.size; x++) + for(var x = 0; x < this.size; x++) { - if(temp_block.field[targety][x]) + if(this.field[targety][x]) { return true; } @@ -92,38 +97,37 @@ function at_bottom(temp_block) } return false; -} +}; -function collided(temp_block,movementy, movementx) -{ - for(var tempy = 0 ; tempy < temp_block.size; tempy++) +Block.prototype.collided = function (y,x) { + for(var tempy = 0 ; tempy < this.size; tempy++) { - for(var tempx = 0; tempx < temp_block.size; tempx++) + for(var tempx = 0; tempx < this.size; tempx++) { - if(temp_block.field[tempy][tempx] == 1) + if(this.field[tempy][tempx] == 1) { //Make sure we don't move out of bounds - while(temp_block.positionx+tempx+movementx >= playfield.width) + while(this.positionx+tempx+x >= playfield.width) { - temp_block.positionx--; + this.positionx--; } - while(temp_block.positionx+tempx+movementx < 0) + while(this.positionx+tempx+x < 0) { - temp_block.positionx++; + this.positionx++; } - while(temp_block.positiony+tempy+movementy < 0) + while(this.positiony+tempy+y < 0) { - temp_block.positiony++; + this.positiony++; } //Blocked - if(temp_block.positiony + tempy + movementy > 39) + if(this.positiony + tempy + y > playfield.height - 1) { return 1; } - if(playfield.field[temp_block.positiony+tempy+movementy][temp_block.positionx+tempx+movementx]) + if(playfield.field[this.positiony+tempy+y][this.positionx+tempx+x]) { return 2; } @@ -132,65 +136,24 @@ function collided(temp_block,movementy, movementx) } return 0; -} - -function is_rotateable_xd(temp_block) -{ - //Make sure we don't hit any walls - //Check if we're blocked - //If we are, look if move by 2 on x fixes - //else return false - - correct_possible_wall_collision(temp_block,0,0); - - var available_x_movement = 2; - //Move right by default - var movement_direction = 1; - - if(temp_block.postionx > playfield.width / 2) - { - movement_direction = -1; - } - - //Try resolving block - while(available_x_movement > 0 && collided_block(temp_block,0,0)) - { - if(available_x_movement > 0) - { - temp_block.positionx += movement_direction; - available_x_movement--; - } - } +}; - if(available_x_movement > 0) - { - return true; - } - return false; -} - -function toggle_backup() +Block.prototype.toggle_backup = function () { - //Doesn't save after loading. - //If nothing is saved, put curr into saved //generate new block and put into temp - //Load curr into temp - //Load saved into curr - //Load temp into saved - - //Save current block id - //Generate new block with id that is != current - //Set backup flag to false - - if(!current_block.saveable) + if(!this.saveable) { return; } //Save current_block into temp - var temp = current_block; + var temp = this; + + //Load curr into temp + //Load saved into curr + //Load temp into saved if(saved_block == 0) { @@ -202,14 +165,12 @@ function toggle_backup() saved_block = new Block(field_size,initialy,initialx,block_type,false,get_field(block_type, field_size)); } - current_block = saved_block; - current_block.positionx = initialx; - current_block.positiony = initialy; - current_block.saveable = false; + this.size = saved_block.size; + this.type = saved_block.type; + this.field = saved_block.field; + this.blocked = saved_block.blocked; + this.positionx = initialx; + this.positiony = initialy; + this.saveable = false; saved_block = temp; - - update_hold_block_window_frame(); - update_hold_block_window(); - update_next_block_window_frame(); - update_next_block_window(); -} +}; diff --git a/js/game.js b/js/game.js index 2f6fc9c..acc8e8a 100644 --- a/js/game.js +++ b/js/game.js @@ -3,8 +3,15 @@ function initialise_game_logic() return setInterval(lower_piece,1200); } +function initialise_visual_tools(temp_height, temp_width) +{ + var temp_canvas = document.getElementById('playfield_section'); + return new Toolkit(temp_canvas,temp_canvas.getContext('2d'),temp_height,temp_width); +} + function save_current_blocks_to_playfield() { + //TODO: current_block and playfield for(var cany = 0 ; cany < current_block.size; cany++) { for(var canx = 0 ; canx < current_block.size ; canx++) @@ -89,12 +96,12 @@ function generate_block(block_type, temp_position_y,temp_position_x) function locked() { - + //TODO: kit, playfield current_block save_current_blocks_to_playfield(); check_playfield_for_completed_line(); current_block = generate_block(choose_next_block(),initialy,initialx); - update_next_block_window_frame(); - update_next_block_window(); + kit.update_next_block_window_frame(playfield); + kit.update_next_block_window(playfield); //Check if game over if(check_game_over()) reset_game(); update_visuals(playfield,current_block,kit); @@ -114,14 +121,15 @@ function check_game_over() function lower_piece() { + //TODO: current_block //move //check if locked - if(at_bottom(current_block) || current_block.blocked) + if(current_block.at_bottom() || current_block.blocked) { locked(); } - if(move(current_block,1,0) == 2) + if(current_block.move(1,0) == 2) { current_block.blocked = true; } @@ -197,14 +205,13 @@ function reset_game() generate_block_ids(); current_block = generate_block(choose_next_block(),initialy,initialx); saved_block = 0; - update_next_block_window_frame(); - update_next_block_window(); - update_hold_block_window_frame(); - update_hold_block_window(); + kit.update_next_block_window_frame(playfield); + kit.update_next_block_window(playfield); + kit.update_hold_block_window_frame(playfield); + kit.update_hold_block_window(playfield, saved_block); update_visuals(playfield, current_block, kit); } - function overwrite_array_dimensions(temp_target_array, old_x, old_y) { temp_target_array = [old_y]; @@ -216,3 +223,20 @@ function overwrite_array_dimensions(temp_target_array, old_x, old_y) reset_array(temp_target_array,old_y,old_x); } + +function update_visuals(temp_playfield, temp_block, temp_toolkit) +{ + temp_toolkit.print_playfield_to_canvas(temp_playfield); + temp_toolkit.print_ghost_to_canvas(temp_playfield,temp_block); + temp_toolkit.print_currentblock_to_canvas(temp_block); + temp_toolkit.update_line_count(); +} + +function change_canvas_size(temp_height,temp_width) +{ + //TODO kit + kit.canvas.style.height = visual_height; + kit.canvas.style.width = visual_width; + kit.canvas.height = visual_height; + kit.canvas.width = visual_width; +} diff --git a/js/input.js b/js/input.js index 0cab7b7..995bd25 100644 --- a/js/input.js +++ b/js/input.js @@ -19,7 +19,7 @@ function check_input(e) case "s": case "S": case "ArrowDown": - move(current_block,1,0); + current_block.move(1,0); update_visuals(playfield, current_block,kit); break; @@ -28,7 +28,7 @@ function check_input(e) case "d": case "D": case "ArrowRight": - move(current_block,0,1); + current_block.move(0,1); update_visuals(playfield, current_block,kit); break; @@ -37,7 +37,7 @@ function check_input(e) case "a": case "A": case "ArrowLeft": - move(current_block,0,-1); + current_block.move(0,-1); update_visuals(playfield, current_block,kit); break; @@ -46,18 +46,21 @@ function check_input(e) case "w": case "W": case "ArrowUp": - rotate_block(current_block); + current_block.rotate_block(); update_visuals(playfield,current_block,kit); break; case " ": - drop(current_block); + current_block.drop(); locked(); break; case "c": case "C": - toggle_backup(); + current_block.toggle_backup(); + + kit.update_hold_block_window_frame(playfield); + kit.update_hold_block_window(playfield,saved_block); update_visuals(playfield, current_block,kit); break; @@ -73,11 +76,11 @@ function check_input(e) change_canvas_size(visual_height,visual_width); kit.brush.clearRect(0,0,visual_width,visual_height); - update_next_block_window(); + kit.update_next_block_window(); if(saved_block != 0) { - update_hold_block_window(); + this.update_hold_block_window(); } update_visuals(playfield,current_block,kit); @@ -98,7 +101,7 @@ function check_input(e) visual_width = ((block_size*zoom)+(block_border+zoom)) * (field_width + 10); change_canvas_size(visual_height,visual_width); - update_next_block_window(); + kit.update_next_block_window(); if(saved_block != 0) { update_hold_block_window(); diff --git a/js/main.js b/js/main.js index 918286e..2bd0861 100644 --- a/js/main.js +++ b/js/main.js @@ -39,14 +39,15 @@ function initialise_game() kit = initialise_visual_tools(visual_height, visual_width); current_block = generate_block(choose_next_block(),initialy,initialx); update_visuals(playfield, current_block, kit); - update_next_block_window_frame(); - update_next_block_window(); + kit.update_next_block_window_frame(playfield); + kit.update_next_block_window(playfield); logic_interval = initialise_game_logic(); set_input_capture(true); } -//TODO: line counter (and timer) +//TODO: line counter (and timer) change font to hellovetica +//TODO: change block to object based //TODO: infinite move and rotate if blocked //TODO: speed up key repeat diff --git a/js/visual.js b/js/visual.js index 2072dda..0952d75 100644 --- a/js/visual.js +++ b/js/visual.js @@ -11,63 +11,54 @@ function Toolkit(temp_canvas, temp_brush, temp_height, temp_width) this.canvas.width = temp_width; } -function initialise_visual_tools(temp_height, temp_width) -{ - var temp_canvas = document.getElementById('playfield_section'); - return new Toolkit(temp_canvas,temp_canvas.getContext('2d'),temp_height,temp_width); -} - -function draw_block_full(temp_toolkit,temp_y,temp_x) -{ - temp_toolkit.brush.fillStyle = color_block_full; - temp_toolkit.brush.fillRect(temp_x+(block_border*zoom)+(block_border*zoom),temp_y+(block_border*zoom)+(block_border*zoom),(block_size-block_border*2)*zoom,(block_size-block_border*2)*zoom); - temp_toolkit.brush.lineWidth = block_border*zoom; - temp_toolkit.brush.strokeStyle = color_block_ghost; - temp_toolkit.brush.strokeRect(temp_x+(block_border*zoom),temp_y+(block_border*zoom),block_size*zoom,block_size*zoom); +Toolkit.prototype.draw_block_full = function (y,x) { + + this.brush.fillStyle = color_block_full; + this.brush.fillRect( x+(block_border*zoom)+(block_border*zoom), + y+(block_border*zoom)+(block_border*zoom), + (block_size-block_border*2)*zoom, + (block_size-block_border*2)*zoom); + this.brush.lineWidth = block_border*zoom; + this.brush.strokeStyle = color_block_ghost; + this.brush.strokeRect( x+(block_border*zoom), + y+(block_border*zoom), + block_size*zoom, + block_size*zoom); +}; + +Toolkit.prototype.draw_block_empty = function (y,x) { + this.brush.fillStyle = color_block_empty; + this.brush.fillRect(x+(block_border*zoom),y+(block_border*zoom),block_size*zoom,block_size*zoom); + this.brush.lineWidth = block_border*zoom; + this.brush.strokeStyle = color_block_ghost; + this.brush.strokeRect(x+(block_border*zoom),y+(block_border*zoom),block_size*zoom,block_size*zoom); } -function draw_block_empty(temp_toolkit,temp_y,temp_x) +Toolkit.prototype.draw_block_ghost = function (y,x) { - temp_toolkit.brush.fillStyle = color_block_empty; - temp_toolkit.brush.fillRect(temp_x+(block_border*zoom),temp_y+(block_border*zoom),block_size*zoom,block_size*zoom); - temp_toolkit.brush.lineWidth = block_border*zoom; - temp_toolkit.brush.strokeStyle = color_block_ghost; - temp_toolkit.brush.strokeRect(temp_x+(block_border*zoom),temp_y+(block_border*zoom),block_size*zoom,block_size*zoom); + this.brush.fillStyle = color_block_ghost; + this.brush.fillRect(x+(block_border*zoom)+(block_border*zoom),y+(block_border*zoom)+(block_border*zoom),(block_size-block_border*2)*zoom,(block_size-block_border*2)*zoom); } -function draw_block_ghost(temp_toolkit,temp_y,temp_x) +Toolkit.prototype.print_playfield_to_canvas = function (temp_playfield) { - temp_toolkit.brush.fillStyle = color_block_ghost; - temp_toolkit.brush.fillRect(temp_x+(block_border*zoom)+(block_border*zoom),temp_y+(block_border*zoom)+(block_border*zoom),(block_size-block_border*2)*zoom,(block_size-block_border*2)*zoom); -} - -function update_visuals(temp_playfield, temp_block, temp_toolkit) -{ - print_playfield_to_canvas(temp_playfield,temp_toolkit); - print_ghost_to_canvas(playfield,kit); - print_currentblock_to_canvas(temp_block,temp_toolkit); - update_line_count(); -} - -function print_playfield_to_canvas(temp_playfield, temp_toolkit) -{ - for(var cany = initialy ; cany < temp_playfield.height; cany++) + for(var y = initialy ; y < temp_playfield.height; y++) { - for(var canx = 0 ; canx < temp_playfield.width; canx++) + for(var x = 0 ; x < temp_playfield.width; x++) { - if(temp_playfield.field[cany][canx]) + if(temp_playfield.field[y][x]) { - draw_block_full(temp_toolkit,(cany-initialy) * ((block_size*zoom)+(block_border*2*zoom)),canx * ((block_size*zoom)+(block_border*2*zoom))); + this.draw_block_full((y-initialy) * ((block_size*zoom)+(block_border*2*zoom)),x * ((block_size*zoom)+(block_border*2*zoom))); } else { - draw_block_empty(temp_toolkit,(cany-initialy) * ((block_size*zoom)+(block_border*2*zoom)),canx * ((block_size*zoom)+(block_border*2*zoom))); + this.draw_block_empty((y-initialy) * ((block_size*zoom)+(block_border*2*zoom)),x * ((block_size*zoom)+(block_border*2*zoom))); } } } -} +}; -function print_currentblock_to_canvas(temp_current_block, temp_toolkit) +Toolkit.prototype.print_currentblock_to_canvas = function (temp_current_block) { for(var y = 0 ; y < temp_current_block.size; y++) { @@ -75,16 +66,17 @@ function print_currentblock_to_canvas(temp_current_block, temp_toolkit) { if(temp_current_block.field[y][x]) { - draw_block_full(temp_toolkit,(y + (temp_current_block.positiony-initialy)) * ((block_size*zoom)+(block_border*2*zoom)),(x+temp_current_block.positionx) * (((block_size*zoom)+(block_border*2*zoom)))); + this.draw_block_full((y + (temp_current_block.positiony-initialy)) * ((block_size*zoom)+(block_border*2*zoom)),(x+temp_current_block.positionx) * (((block_size*zoom)+(block_border*2*zoom)))); } } } -} +}; + -function print_ghost_to_canvas(temp_playfield, temp_toolkit) +Toolkit.prototype.print_ghost_to_canvas = function (temp_playfield, temp_block) { - var temp_block = generate_block(current_block.type,current_block.positiony,current_block.positionx); - drop(temp_block); + temp_block = generate_block(temp_block.type,temp_block.positiony,temp_block.positionx); + temp_block.drop(); for(var y = 0 ; y < temp_block.size; y++) { @@ -92,13 +84,13 @@ function print_ghost_to_canvas(temp_playfield, temp_toolkit) { if(temp_block.field[y][x]) { - draw_block_ghost(temp_toolkit,(y + (temp_block.positiony-initialy)) * ((block_size*zoom)+(block_border*2*zoom)),(x+temp_block.positionx) * (((block_size*zoom)+(block_border*2*zoom)))); + this.draw_block_ghost((y + (temp_block.positiony-initialy)) * ((block_size*zoom)+(block_border*2*zoom)),(x+temp_block.positionx) * (((block_size*zoom)+(block_border*2*zoom)))); } } } -} +}; -function update_next_block_window() +Toolkit.prototype.update_next_block_window = function () { var offset_x = (((block_size*zoom)+(block_border*zoom))*(playfield.width+2)); var offset_y = (block_size*zoom)+(block_border*zoom); @@ -116,70 +108,50 @@ function update_next_block_window() { if(temp_block[y][x]) { - draw_block_full(kit,offset_y+(((block_size*zoom)+(block_border*2*zoom))*y),offset_x+(((block_size*zoom)+(block_border*2*zoom))*x)); + this.draw_block_full(offset_y+(((block_size*zoom)+(block_border*2*zoom))*y),offset_x+(((block_size*zoom)+(block_border*2*zoom))*x)); } } } } -function update_next_block_window_frame() +Toolkit.prototype.update_next_block_window_frame = function (temp_playfield) { - var offset_x = (((block_size*zoom)+(block_border*zoom))*(playfield.width+2)) - (block_border*zoom); + var offset_x = (((block_size*zoom)+(block_border*zoom))*(temp_playfield.width+2)) - (block_border*zoom); var offset_y = (block_size*zoom)+(block_border*zoom) - (block_border*zoom); - kit.brush.clearRect(offset_x,offset_y, + this.brush.clearRect(offset_x,offset_y, (((block_size*zoom)+(block_border+zoom))*4)+(block_border*7*zoom), (((block_size*zoom)+(block_border+zoom*2))*4)+(block_border*7*zoom)); } -function update_hold_block_window() +Toolkit.prototype.update_hold_block_window = function (temp_playfield,temp_saved) { - var offset_x = (((block_size*zoom)+(block_border*zoom))*(playfield.width+2)); + var offset_x = (((block_size*zoom)+(block_border*zoom))*(temp_playfield.width+2)); var offset_y = ((block_size*zoom)+(block_border*zoom))*8; - temp_block = saved_block; - for(var y = 0 ; y < temp_block.size; y++) + for(var y = 0 ; y < temp_saved.size; y++) { - for(var x = 0 ; x < temp_block.size; x++) + for(var x = 0 ; x < temp_saved.size; x++) { - if(temp_block.field[y][x]) + if(saved_block.field[y][x]) { - draw_block_full(kit,offset_y+(((block_size*zoom)+(block_border*2*zoom))*y),offset_x+(((block_size*zoom)+(block_border*2*zoom))*x)); + this.draw_block_full(offset_y+(((block_size*zoom)+(block_border*2*zoom))*y),offset_x+(((block_size*zoom)+(block_border*2*zoom))*x)); } } } } -function update_hold_block_window_frame() +Toolkit.prototype.update_hold_block_window_frame = function (temp_playfield) { - var offset_x = (((block_size*zoom)+(block_border*zoom))*(playfield.width+2)) - (block_border*zoom); + var offset_x = (((block_size*zoom)+(block_border*zoom))*(temp_playfield.width+2)) - (block_border*zoom); var offset_y = ((block_size*zoom)+(block_border*zoom))*8 - (block_border*zoom); - kit.brush.clearRect(offset_x,offset_y, + this.brush.clearRect(offset_x,offset_y, (((block_size*zoom)+(block_border+zoom))*4)+(block_border*zoom*7), (((block_size*zoom)+(block_border+zoom*2))*4)+(block_border*zoom*7)); } -function change_canvas_size(temp_height,temp_width) -{ - kit.canvas.style.height = visual_height; - kit.canvas.style.width = visual_width; - kit.canvas.height = visual_height; - kit.canvas.width = visual_width; -} - -function update_line_count() +Toolkit.prototype.update_line_count = function () { - return; - var offset_x = (((block_size*zoom)+(block_border*zoom))*(playfield.width+2)) - (block_border*zoom); - var offset_y = ((block_size*zoom)+(block_border*zoom))*16 - (block_border*zoom); - - var font_size = Math.pow(2,zoom); - font_size *= 20; - var string = font_size + "px monospace"; - - kit.brush.clearRect(offset_x,offset_y-font_size,offset_x,offset_y); - kit.brush.font = string; - kit.brush.fillStyle = color_block_full; - kit.brush.fillText(line_count+" ",offset_x,offset_y); + document.title = "Tetris : ["+line_count+"]"; } diff --git a/master.css b/master.css index 6a8908b..c6d6542 100644 --- a/master.css +++ b/master.css @@ -1,7 +1,5 @@ body { background: black; - font-family: monospace; - font-size: 16px; } * { @@ -10,8 +8,6 @@ body { } #playfield_section { - font-size: 7vh; margin-top: 2px; margin-left: 4px; - line-height: 65%; }