Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
https://github.com/kittykatattack/learningPixi
http://pixijs.download/release/docs/index.html

Start
- Placera spelare på rad 8, slumpmässig kolumn
- Generera 3 fallande block-samlingar

Spelare klickar på tangent, som leder till
- Uppdateringar
-- SpelarBoxen får nytt värde
-- Alla fallande stenboxar får nya värden

- Beräkna (ifall)
-- Spelare träffats av sten
-- Någon ny stenbox ska bli permanent.
-- En full rad av stenar har skapats. (Alla stenar ovanför ska bli fallande)
-- Vilket stenblock en missil kommer att träffa
-- Om ny block-samling ska skapas 

- Animera (i fall det behövs)
-- Alla förflyttningar
-- Spelars död.
-- Sprängning av full rad.
-- Missil och sprängning av stenblock
-->
              
            
!

CSS

              
                
              
            
!

JS

              
                // consts
var application_size = 512;
var boxSize = 32;
var grid_squares = 16;
var speed = 4; // boxSize must be divabable with this number
var new_rock_every = 4;

// variable
var check_animation = false;
var key_counter = 0; 
var game_stage;
var playerBox; 
var stoneBoxes = [];
var stoneBoxIdCount = 0;

//Create a Pixi Application
let app = new PIXI.Application({width: application_size, height: application_size});

document.body.appendChild(app.view);

initiateGameStage();

app.ticker.add(delta => gameLoop(delta));

// Add the 'keydown' event listener to our document
document.addEventListener('keydown', onKeyDown);

function onKeyDown(key) {
  if(key.keyCode === 82) { // R
    initiateGameStage();
    return;
  }
  
  if(check_animation)
    return;
  
  check_animation = true;
  key_counter++;
  
  if (key.keyCode === 87 || key.keyCode === 38) { // W Key is 87, Up arrow is 87
    if (playerBox.gridY > 0) playerBox.gridY--;
  }
  else if (key.keyCode === 83 || key.keyCode === 40) { // S Key is 83,  Down arrow is 40
    if (playerBox.gridY != grid_squares - 1) playerBox.gridY++;
  }
  else if (key.keyCode === 65 || key.keyCode === 37) { // // A Key is 65,  Left arrow is 37
    if (playerBox.gridX > 0) playerBox.gridX--;
  }
  else if (key.keyCode === 68 || key.keyCode === 39) { // D Key is 68,  Right arrow is 39
    if (playerBox.gridX != grid_squares - 1) playerBox.gridX++;
  }
  
  // Move all falling rocks down
  stoneBoxes.forEach( function(stoneBox)  {
    if(stoneBox.gridY < grid_squares - 1 && stoneBox.isFalling)
      stoneBox.gridY++;
  });
  
  CalculateFallingStatusOnRocks();
  
  // Add new rock
  if(key_counter >= new_rock_every) {
    GenerateStockFormation();
    key_counter = 0;
  }
  
  key.preventDefault();
}

function CalculateFallingStatusOnRocks() {
  var grid_matrix = new Array(grid_squares);
  for(var i = 0; i < grid_matrix.length; i++) {
    grid_matrix[i] = new Array(grid_squares); 
  }
 
  stoneBoxes.forEach( function(stoneBox)  {
    if(stoneBox.gridY >= 0)
      grid_matrix[stoneBox.gridY][stoneBox.gridX] = stoneBox;
  });
  
  for(var row = grid_squares-1; row >= 0; row--) { // From bottom to top
      for(var column = 0; column < grid_squares; column++) { // From left to right
        if(grid_matrix[row][column] !== undefined){
          var stone = grid_matrix[row][column];
          
          if(!stone.isFalling)
            continue;
          
          if(row == grid_squares-1) // If last row, stopp falling
            stone.isFalling = false;
          else if(grid_matrix[row+1][column] !== undefined) { // If has rock below it.
            if(grid_matrix[row+1][column].isFalling === false)
              stone.isFalling = false;
          }

          if(!stone.isFalling) {
            // Stop all stoneblocks that are in the same group.
            stoneBoxes.filter(stoneBox3 => stoneBox3.groupId == stone.groupId)
              .forEach( function(stoneBox2)  {
                stoneBox2.isFalling = false;
            });
          }
        }
      }
  }
  
}

function gameLoop(delta) {
  if (!check_animation)
    return;
  
  var update_mades = 0;
  
  update_mades += updateBoxGraphicPosition(playerBox);
  stoneBoxes.forEach( function(stoneBox) {update_mades += updateBoxGraphicPosition(stoneBox);});
  
  if(update_mades === 0)
    check_animation = false;
}

function initiateGameStage() {
  game_stage = new PIXI.Container();

  playerBox = makeBox(Math.floor(Math.random() * grid_squares), 8, 0x3498db ); 
 
  stoneBoxes = [];
  GenerateStockFormation(14);
  GenerateStockFormation(10);
  GenerateStockFormation(6);
  GenerateStockFormation(2);
 
  app.stage = game_stage;
}

function makeBox(x, y, color, group_id = 0) {
  var box = {gridX:x,gridY:y,graphic:new PIXI.Graphics(),isFalling:true,groupId:group_id };
  box.graphic.beginFill(color);
  box.graphic.drawRect(0, 0, boxSize, boxSize);
  box.graphic.endFill();
  box.graphic.position.x = x * boxSize;
  box.graphic.position.y = y * boxSize;
  game_stage.addChild(box.graphic)
  return box;
}

function updateBoxGraphicPosition(box) {
  var update_mades = 0;
  
  if(box.gridX * boxSize > box.graphic.position.x)
    { box.graphic.position.x += speed; update_mades++; }
  else if (box.gridX * boxSize < box.graphic.position.x)
    { box.graphic.position.x -= speed; update_mades++; }
  
  if(box.gridY * boxSize > box.graphic.position.y)
    { box.graphic.position.y += speed; update_mades++; }
  else if (box.gridY * boxSize < box.graphic.position.y)
    { box.graphic.position.y -= speed; update_mades++; }
  
  return update_mades;
}

function GenerateStockFormation(start_y = -2) {
  var trigger = 0.8;
  var top_made = false;
  var left_made = false;
  var right_made = false;
  var bottom_made = false;
  var start_x = Math.floor(Math.random() * grid_squares+1)-1;
  stoneBoxIdCount++;
  
  stoneBoxes.push(makeBox(start_x, start_y, 0x808080, stoneBoxIdCount));

  if(Math.random() > trigger) {
    stoneBoxes.push(makeBox(start_x, start_y-1, 0x808080, stoneBoxIdCount)); 
    top_made = true; 
  };
  if(start_x-1 >= 0 && Math.random() > trigger) {
    stoneBoxes.push(makeBox(start_x-1, start_y, 0x808080, stoneBoxIdCount)); 
    left_made = true; 
  };
  if(Math.random() > trigger) {
    stoneBoxes.push(makeBox(start_x+1, start_y, 0x808080, stoneBoxIdCount)); 
    right_made = true;
  };
  
  if(start_x-1 < grid_squares && Math.random() > trigger) {
    stoneBoxes.push(makeBox(start_x, start_y+1, 0x808080, stoneBoxIdCount)); 
    bottom_made = true 
  };
  
  if((top_made || left_made) && start_x-1 >= 0 && Math.random() > trigger) 
    stoneBoxes.push(makeBox(start_x-1, start_y-1, 0x808080, stoneBoxIdCount));
  if((top_made || right_made) && start_x-1 < grid_squares && Math.random() > trigger) 
    stoneBoxes.push(makeBox(start_x+1, start_y-1, 0x808080, stoneBoxIdCount));
  
  if((bottom_made || left_made) && start_x-1 >= 0 && Math.random() > trigger) 
    stoneBoxes.push(makeBox(start_x-1, start_y+1, 0x808080, stoneBoxIdCount));
  if((bottom_made || right_made) && start_x-1 < grid_squares && Math.random() > trigger) 
    stoneBoxes.push(makeBox(start_x+1, start_y+1, 0x808080, stoneBoxIdCount));
}
              
            
!
999px

Console