Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <head>
- <meta charset="utf-8">
- <title>Tetris</title>
- <style>
- canvas {
- margin: auto;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- border: 2px solid #222;
- }
- </style>
- </head>
- <body>
- <script>
- // ^ y-achse
- // |
- // |
- // |
- // |
- // |
- // |
- // x--------------- > x-achse
- var WIDTH, HEIGHT;
- var SECTION = 20;
- var SPACE = 2;
- var gridpoints_x = 11;
- var gridpoints_y = 15;
- var canvas, ctx, keystate, cooldown;
- var DownArrow=40, RightArrow=39, LeftArrow=37, SKey=83, AKey=65, DKey=68;
- var game = {
- // int, int boolean, string, array
- // [[x, y] ...] = [used, color]
- grid: null,
- object: {
- x: null,
- y: null,
- color: null,
- grid: null,
- draw: function() {
- ctx.fillStyle = this.color;
- for(var i=0; i<gridpoints_x; i++) {
- for(var j=0; j<gridpoints_y; j++) {
- for(var h=0; h<this.grid.length; h++) {
- if(this.grid[h][0]+this.x == i && this.grid[h][1]+this.y == j) {
- ctx.fillRect(SECTION*i + SPACE*i, SECTION*j + SPACE*j,SECTION, SECTION);
- }
- }
- }
- }
- },
- set_object: function() {
- var obj = Math.floor((Math.random() * 6) + 1);
- this.x = Math.floor(gridpoints_x/2);
- this.y = 1;
- switch(obj) {
- case(1):
- this.color = "#0F0";
- this.grid = [[0, 0], [0, -1], [-1, 0], [1, 0]];
- break;
- case(2):
- this.color = "#F00";
- this.grid = [[-1, -1], [-1, 0], [-1, 1], [0, 1]];
- break;
- case(3):
- this.color = "#00F";
- this.grid = [[-1, -1], [0, -1], [0, 0], [1, 0]];
- break;
- case(4):
- this.color = "#FF0";
- this.grid = [[-1, -1], [0, -1], [0, 0], [-1, 0]];
- break;
- case(5):
- this.color = "#0FF";
- this.grid = [[-1, -1], [0, -1], [-1, 0], [0, 0], [1, 0], [0, 1], [1, 1], [-1, 1], [1, -1]];
- break;
- case(6):
- this.color = "#DF7401";
- this.grid = [[1, -1], [1, 0], [1, 1], [0, 1]];
- }
- }
- },
- generate_grid: function() {
- this.grid = [];
- for(var i=0; i<gridpoints_x; i++) {
- this.grid[i] = [];
- }
- for(var i=0; i<gridpoints_x; i++) {
- for(var j=0; j<gridpoints_y; j++) {
- this.grid[i][j] = [false, "#444"];
- }
- }
- },
- draw: function() {
- for(var i=0; i<gridpoints_x; i++) {
- for(var j=0; j<gridpoints_y; j++) {
- ctx.fillStyle = this.grid[i][j][1];
- ctx.fillRect(SECTION*i + SPACE*i, SECTION*j + SPACE*j,SECTION, SECTION);
- }
- }
- },
- update: function() {
- if(cooldown > 40) {
- for(var i=0; i<this.object.grid.length; i++) {
- var x = this.object.grid[i][0]+this.object.x;
- var y = this.object.grid[i][1]+this.object.y;
- if(typeof this.grid[x][y+1] === "undefined" || this.grid[x][y+1][0] == true) {
- this.grid[x][y] = [];
- this.grid[x][y][0] = true;
- this.grid[x][y][1] = this.object.color;
- this.object.set_object();
- } else {
- this.object.y++;
- }
- }
- cooldown = 0;
- } else {
- cooldown++;
- }
- }
- }
- function main() {
- init();
- canvas = document.createElement("canvas");
- canvas.width = WIDTH;
- canvas.height = HEIGHT;
- ctx = canvas.getContext("2d");
- document.body.appendChild(canvas);
- document.addEventListener("keydown", function(evt) {
- keystate[evt.keyCode] = true;
- });
- var loop = function() {
- update();
- draw();
- requestAnimationFrame(loop);
- }
- requestAnimationFrame(loop);
- }
- function init() {
- keystate = {};
- cooldown = 0;
- WIDTH = gridpoints_x*SECTION + (gridpoints_x-2)*SPACE;
- HEIGHT = gridpoints_y*SECTION + (gridpoints_y-2)*SPACE;
- game.generate_grid();
- game.object.set_object(5);
- }
- function update() {
- game.update();
- }
- function draw() {
- ctx.fillStyle = "#222";
- ctx.fillRect(0, 0, WIDTH, HEIGHT);
- game.draw();
- game.object.draw();
- }
- main();
- </script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement