cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/javascript_code/games/tetris.js

@@ -0,0 +1,491 @@
+'use strict';
+var canvas = document.querySelector('canvas');
+canvas.width  = 640;
+canvas.height = 640;
+ 
+var g = canvas.getContext('2d');
+ 
+var right = { x: 1, y: 0 };
+var down = { x: 0, y: 1 };
+var left = { x: -1, y: 0 };
+
+var EMPTY = -1;
+var BORDER = -2;
+
+var fallingShape;
+var nextShape;
+var dim = 640;
+var nRows = 18;
+var nCols = 12;
+var blockSize = 30;
+var topMargin = 50;
+var leftMargin = 20;
+var scoreX = 400;
+var scoreY = 330;
+var titleX = 130;
+var titleY = 160;
+var clickX = 120;
+var clickY = 400;
+var previewCenterX = 467;
+var previewCenterY = 97;
+var mainFont = 'bold 48px monospace';
+var smallFont = 'bold 18px monospace';
+var colors = ['green', 'red', 'blue', 'purple', 'orange', 'blueviolet', 'magenta'];
+var gridRect = { x: 46, y: 47, w: 308, h: 517 };
+var previewRect = { x: 387, y: 47, w: 200, h: 200 };
+var titleRect = { x: 100, y: 95, w: 252, h: 100 };
+var clickRect = { x: 50, y: 375, w: 252, h: 40 };
+var outerRect = { x: 5, y: 5, w: 630, h: 630 };
+var squareBorder = 'white';
+var titlebgColor = 'white';
+var textColor = 'black';
+var bgColor = '#DDEEFF';
+var gridColor = '#BECFEA';
+var gridBorderColor = '#7788AA';
+var largeStroke = 5;
+var smallStroke = 2;
+
+// position of falling shape
+var fallingShapeRow;
+var fallingShapeCol;
+
+var keyDown = false;
+var fastDown = false;
+
+var grid = [];
+var scoreboard = new Scoreboard();
+
+addEventListener('keydown', function (event) {
+    if (!keyDown) {
+    keyDown = true;
+
+    if (scoreboard.isGameOver())
+        return;
+
+    switch (event.key) {
+ 
+        case 'w':
+        case 'ArrowUp':
+      if (canRotate(fallingShape))
+          rotate(fallingShape);
+      break;
+ 
+        case 'a':
+        case 'ArrowLeft':
+      if (canMove(fallingShape, left))
+          move(left);
+      break;
+ 
+        case 'd':
+        case 'ArrowRight':
+      if (canMove(fallingShape, right))
+          move(right);
+      break;
+ 
+        case 's':
+        case 'ArrowDown':
+      if (!fastDown) {
+          fastDown = true;
+          while (canMove(fallingShape, down)) {
+        move(down);
+        draw();
+          }
+          shapeHasLanded();
+      }
+    }
+    draw();
+      }
+  });
+ 
+addEventListener('click', function () {
+    startNewGame();
+});
+
+addEventListener('keyup', function () {
+    keyDown = false;
+    fastDown = false;
+});
+
+function canRotate(s) {
+  if (s === Shapes.Square)
+    return false;
+ 
+      var pos = new Array(4);
+      for (var i = 0; i < pos.length; i++) {
+    pos[i] = s.pos[i].slice();
+      }
+ 
+      pos.forEach(function (row) {
+    var tmp = row[0];
+    row[0] = row[1];
+    row[1] = -tmp;
+      });
+ 
+      return pos.every(function (p) {
+    var newCol = fallingShapeCol + p[0];
+    var newRow = fallingShapeRow + p[1];
+    return grid[newRow][newCol] === EMPTY;
+      });
+  }
+ 
+function rotate(s) {
+  if (s === Shapes.Square)
+    return;
+ 
+      s.pos.forEach(function (row) {
+    var tmp = row[0];
+    row[0] = row[1];
+    row[1] = -tmp;
+      });
+  }
+ 
+function move(dir) {
+      fallingShapeRow += dir.y;
+      fallingShapeCol += dir.x;
+  }
+ 
+function canMove(s, dir) {
+  return s.pos.every(function (p) {
+    var newCol = fallingShapeCol + dir.x + p[0];
+    var newRow = fallingShapeRow + dir.y + p[1];
+    return grid[newRow][newCol] === EMPTY;
+  });
+}
+ 
+function shapeHasLanded() {
+      addShape(fallingShape);
+      if (fallingShapeRow < 2) {
+    scoreboard.setGameOver();
+    scoreboard.setTopscore();
+      } else {
+    scoreboard.addLines(removeLines());
+      }
+      selectShape();
+  }
+ 
+function removeLines() {
+      var count = 0;
+      for (var r = 0; r < nRows - 1; r++) {
+    for (var c = 1; c < nCols - 1; c++) {
+        if (grid[r][c] === EMPTY)
+      break;
+        if (c === nCols - 2) {
+      count++;
+      removeLine(r);
+        }
+    }
+      }
+      return count;
+  }
+ 
+function removeLine(line) {
+      for (var c = 0; c < nCols; c++)
+    grid[line][c] = EMPTY;
+ 
+      for (var c = 0; c < nCols; c++) {
+    for (var r = line; r > 0; r--)
+        grid[r][c] = grid[r - 1][c];
+      }
+  }
+ 
+function addShape(s) {
+      s.pos.forEach(function (p) {
+    grid[fallingShapeRow + p[1]][fallingShapeCol + p[0]] = s.ordinal;
+      });
+  }
+ 
+function Shape(shape, o) {
+      this.shape = shape;
+      this.pos = this.reset();
+      this.ordinal = o;
+  }
+
+var Shapes = {
+    ZShape: [[0, -1], [0, 0], [-1, 0], [-1, 1]],
+    SShape: [[0, -1], [0, 0], [1, 0], [1, 1]],
+    IShape: [[0, -1], [0, 0], [0, 1], [0, 2]],
+    TShape: [[-1, 0], [0, 0], [1, 0], [0, 1]],
+    Square: [[0, 0], [1, 0], [0, 1], [1, 1]],
+    LShape: [[-1, -1], [0, -1], [0, 0], [0, 1]],
+    JShape: [[1, -1], [0, -1], [0, 0], [0, 1]]
+};
+
+function getRandomShape() {
+    var keys = Object.keys(Shapes);
+    var ord = Math.floor(Math.random() * keys.length);
+    var shape = Shapes[keys[ord]];
+    return new Shape(shape, ord);
+}
+
+Shape.prototype.reset = function () {
+    this.pos = new Array(4);
+    for (var i = 0; i < this.pos.length; i++) {
+      this.pos[i] = this.shape[i].slice();
+    }
+    return this.pos;
+}
+
+function selectShape() {
+  fallingShapeRow = 1;
+  fallingShapeCol = 5;
+  fallingShape = nextShape;
+  nextShape = getRandomShape();
+  if (fallingShape != null) {
+    fallingShape.reset();
+  }
+}
+ 
+function Scoreboard() {
+  this.MAXLEVEL = 9;
+
+  var level = 0;
+  var lines = 0;
+  var score = 0;
+  var topscore = 0;
+  var gameOver = true;
+
+  this.reset = function() {
+    this.setTopscore();
+    level = lines = score = 0;
+    gameOver = false;
+  }
+
+  this.setGameOver = function () {
+    gameOver = true;
+  }
+
+  this.isGameOver = function () {
+    return gameOver;
+  }
+
+  this.setTopscore = function () {
+    if (score > topscore) {
+      topscore = score;
+    }
+  }
+
+  this.getTopscore = function () {
+    return topscore;
+  }
+
+  this.getSpeed = function () {
+
+  switch (level) {
+    case 0: return 700;
+    case 1: return 600;
+    case 2: return 500;
+    case 3: return 400;
+    case 4: return 350;
+    case 5: return 300;
+    case 6: return 250;
+    case 7: return 200;
+    case 8: return 150;
+    case 9: return 100;
+    default: return 100;
+  }
+}
+ 
+      this.addScore = function (sc) {
+    score += sc;
+      }
+ 
+      this.addLines = function (line) {
+ 
+    switch (line) {
+        case 1:
+      this.addScore(10);
+      break;
+        case 2:
+      this.addScore(20);
+      break;
+        case 3:
+      this.addScore(30);
+      break;
+        case 4:
+      this.addScore(40);
+      break;
+        default:
+      return;
+    }
+ 
+    lines += line;
+    if (lines > 10) {
+        this.addLevel();
+    }
+      }
+ 
+      this.addLevel = function () {
+    lines %= 10;
+    if (level < this.MAXLEVEL) {
+        level++;
+    }
+      }
+ 
+      this.getLevel = function () {
+    return level;
+      }
+ 
+      this.getLines = function () {
+    return lines;
+      }
+ 
+      this.getScore = function () {
+    return score;
+      }
+  }
+ 
+function draw() {
+  g.clearRect(0, 0, canvas.width, canvas.height);
+
+   drawUI();
+
+  if (scoreboard.isGameOver()) {
+    drawStartScreen();
+  } else {
+    drawFallingShape();
+  }
+}
+
+function drawStartScreen() {
+  g.font = mainFont;
+
+  fillRect(titleRect, titlebgColor);
+  fillRect(clickRect, titlebgColor);
+
+  g.fillStyle = textColor;
+  g.fillText('Tetris', titleX, titleY);
+
+  g.font = smallFont;
+  g.fillText('click to start', clickX, clickY);
+}
+ 
+function fillRect(r, color) {
+  g.fillStyle = color;
+  g.fillRect(r.x, r.y, r.w, r.h);
+}
+ 
+function drawRect(r, color) {
+  g.strokeStyle = color;
+  g.strokeRect(r.x, r.y, r.w, r.h);
+}
+
+function drawSquare(colorIndex, r, c) {
+  var bs = blockSize;
+  g.fillStyle = colors[colorIndex];
+  g.fillRect(leftMargin + c * bs, topMargin + r * bs, bs, bs);
+
+  g.lineWidth = smallStroke;
+  g.strokeStyle = squareBorder;
+  g.strokeRect(leftMargin + c * bs, topMargin + r * bs, bs, bs);
+}
+ 
+function drawUI() {
+
+  // background
+  fillRect(outerRect, bgColor);
+  fillRect(gridRect, gridColor);
+
+  // the blocks dropped in the grid
+  for (var r = 0; r < nRows; r++) {
+    for (var c = 0; c < nCols; c++) {
+        var idx = grid[r][c];
+        if (idx > EMPTY)
+      drawSquare(idx, r, c);
+   }
+}
+ 
+      // the borders of grid and preview panel
+      g.lineWidth = largeStroke;
+      drawRect(gridRect, gridBorderColor);
+      drawRect(previewRect, gridBorderColor);
+      drawRect(outerRect, gridBorderColor);
+ 
+      // scoreboard
+      g.fillStyle = textColor;
+      g.font = smallFont;
+      g.fillText('hiscore    ' + scoreboard.getTopscore(), scoreX, scoreY);
+      g.fillText('level      ' + scoreboard.getLevel(), scoreX, scoreY + 30);
+      g.fillText('lines      ' + scoreboard.getLines(), scoreX, scoreY + 60);
+      g.fillText('score      ' + scoreboard.getScore(), scoreX, scoreY + 90);
+ 
+      // preview
+      var minX = 5, minY = 5, maxX = 0, maxY = 0;
+      nextShape.pos.forEach(function (p) {
+    minX = Math.min(minX, p[0]);
+    minY = Math.min(minY, p[1]);
+    maxX = Math.max(maxX, p[0]);
+    maxY = Math.max(maxY, p[1]);
+      });
+      var cx = previewCenterX - ((minX + maxX + 1) / 2.0 * blockSize);
+      var cy = previewCenterY - ((minY + maxY + 1) / 2.0 * blockSize);
+ 
+      g.translate(cx, cy);
+      nextShape.shape.forEach(function (p) {
+    drawSquare(nextShape.ordinal, p[1], p[0]);
+      });
+      g.translate(-cx, -cy);
+  }
+ 
+function drawFallingShape() {
+      var idx = fallingShape.ordinal;
+      fallingShape.pos.forEach(function (p) {
+    drawSquare(idx, fallingShapeRow + p[1], fallingShapeCol + p[0]);
+      });
+  }
+ 
+       function animate(lastFrameTime) {
+      var requestId = requestAnimationFrame(function () {
+    animate(lastFrameTime);
+      });
+ 
+      var time = new Date().getTime();
+      var delay = scoreboard.getSpeed();
+ 
+      if (lastFrameTime + delay < time) {
+ 
+    if (!scoreboard.isGameOver()) {
+ 
+        if (canMove(fallingShape, down)) {
+      move(down);
+        } else {
+      shapeHasLanded();
+        }
+        draw();
+        lastFrameTime = time;
+ 
+    } else {
+        cancelAnimationFrame(requestId);
+    }
+      }
+  }
+ 
+function startNewGame() {
+      initGrid();
+      selectShape();
+      scoreboard.reset();
+      animate(-1);
+  }
+ 
+function initGrid() {
+  function fill(arr, value) {
+    for (var i = 0; i < arr.length; i++) {
+      arr[i] = value;
+    }
+  }
+  for (var r = 0; r < nRows; r++) {
+    grid[r] = new Array(nCols);
+    fill(grid[r], EMPTY);
+    for (var c = 0; c < nCols; c++) {
+        if (c === 0 || c === nCols - 1 || r === nRows - 1)
+      grid[r][c] = BORDER;
+    }
+  }
+}
+ 
+function init() {
+  initGrid();
+  selectShape();
+  draw();
+}
+ 
+init();

data/lib/cyberweb/javascript_code/games/tic-tac-toe.js

@@ -0,0 +1,125 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const tiles = Array.from(document.querySelectorAll('.tile'));
+  const playerDisplay = document.querySelector('.display-player');
+  const resetButton = document.querySelector('#reset');
+  const announcer = document.querySelector('.announcer');
+
+  let board = ['', '', '', '', '', '', '', '', ''];
+  let currentPlayer = 'X';
+  let isGameActive = true;
+
+  const PLAYERX_WON = 'PLAYERX_WON';
+  const PLAYERO_WON = 'PLAYERO_WON';
+  const TIE = 'TIE';
+
+  /*
+    Indexes within the board
+    [0] [1] [2]
+    [3] [4] [5]
+    [6] [7] [8]
+  */
+
+  const winningConditions = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+  ];
+
+  function handleResultValidation() {
+    let roundWon = false;
+    for (let i = 0; i <= 7; i++) {
+      const winCondition = winningConditions[i];
+      const a = board[winCondition[0]];
+      const b = board[winCondition[1]];
+      const c = board[winCondition[2]];
+      if (a === '' || b === '' || c === '') {
+        continue;
+      }
+      if (a === b && b === c) {
+        roundWon = true;
+        break;
+      }
+    }
+
+  if (roundWon) {
+     announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
+     isGameActive = false;
+     return;
+  }
+
+  if (!board.includes(''))
+    announce(TIE);
+  }
+
+  const announce = (type) => {
+    switch(type){
+      case PLAYERO_WON:
+        announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
+        break;
+      case PLAYERX_WON:
+        announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
+        break;
+      case TIE:
+        announcer.innerText = 'Tie';
+    }
+    announcer.classList.remove('hide_tic_tac_toe');
+  };
+
+  const isValidAction = (tile) => {
+    if (tile.innerText === 'X' || tile.innerText === 'O'){
+      return false;
+    }
+
+    return true;
+  };
+
+  const updateBoard =  (index) => {
+    board[index] = currentPlayer;
+  }
+
+  const changePlayer = () => {
+    playerDisplay.classList.remove(`player${currentPlayer}`);
+    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+    playerDisplay.innerText = currentPlayer;
+    playerDisplay.classList.add(`player${currentPlayer}`);
+  }
+
+  const userAction = (tile, index) => {
+    if(isValidAction(tile) && isGameActive) {
+      tile.innerText = currentPlayer;
+      tile.classList.add(`player${currentPlayer}`);
+      updateBoard(index);
+      handleResultValidation();
+      changePlayer();
+    }
+  }
+  /*
+   * reset the game-board here
+   */
+  const resetBoard = () => {
+    board = ['', '', '', '', '', '', '', '', ''];
+    isGameActive = true;
+    announcer.classList.add('hide_tic_tac_toe');
+
+    if (currentPlayer === 'O') {
+      changePlayer();
+    }
+
+    tiles.forEach(tile => {
+      tile.innerText = '';
+      tile.classList.remove('playerX');
+      tile.classList.remove('playerO');
+    });
+  }
+
+  tiles.forEach( (tile, index) => {
+    tile.addEventListener('click', () => userAction(tile, index));
+  });
+
+  resetButton.addEventListener('click', resetBoard);
+});