studyup 1.0.1 → 1.0.2

package/2048-package/README.md

@@ -0,0 +1,29 @@
+# 2048 Game 🧠🎮
+
+A fun, interactive puzzle game inspired by the original 2048! This project was built using **HTML**, **CSS**, and **JavaScript**, with dynamic tile merging, score tracking, and keyboard controls.
+
+## 🎯 Features
+
+- Fully playable 2048 game (merge tiles with arrow keys)
+- Dynamic board updates and animations
+- Score tracker
+- Game-over detection
+- Responsive layout
+
+## 🧪 Tech Stack
+
+- HTML5
+- CSS3 (Flexbox/Grid)
+- Vanilla JavaScript (Event handling, DOM manipulation)
+
+## 📸 Screenshots
+
+### 💻 View
+![Screenshot](assets/Screenshots-2048-Game.jpg)
+
+
+## 🛠️ Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/rotariu-alexandra/2048-game.git

package/2048-package/css/style.css

@@ -0,0 +1,69 @@
+body {
+    background-color: #faf8ef;
+    display: flex;
+    justify-content: center;
+    font-family:"Clear Sans", Helvetica, serif;
+}
+
+h1 {
+    font-size: 5rem;
+    line-height: 0.7;
+    color: #776e65;
+    margin: 0;
+}
+
+p, h2 {
+    margin: 0;
+}
+
+.container {
+    width: 465px;
+    margin-top: 2rem;
+}
+
+.info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.3rem;
+}
+
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 456px;
+    height: 456px;
+    background-color: #bbada0;
+    border: 7px solid #bbada0;
+    border-radius: 6px;
+    margin-top: 1.3rem;
+}
+
+.grid div {
+    width: 100px;
+    height: 100px;
+    margin: 7px;
+    border-radius: 3px;
+    background-color: #eee4da;
+    color: #afa192;
+    font-weight: bold;
+    text-align: center;
+    font-size: 3.8rem;
+    line-height: 1.6;
+}
+
+.score-container {
+    text-align: center;
+    border-radius: 3px;
+    background-color: #8f7a66;
+    color: #fff;
+    width: 70px;
+    height: 60px;
+}
+
+#score {
+    font-size: 1.8rem;
+}
+
+.score-title {
+    font-size: 1rem;
+}

package/2048-package/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2048</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="info">
+            <h1>2048</h1>
+            <div class="score-container">
+                <p class="score-title">Score</p>
+                <h2 id="score">0</h2>
+            </div>
+        </div>
+        <p id="result">Join the numbers and get to the <b>2048</b> title!</p>
+        <div class="grid"></div>
+    </div>
+    <script src="src/script.js"></script>
+</body>
+</html>

package/2048-package/src/script.js

@@ -0,0 +1,270 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const gridDisplay = document.querySelector('.grid');
+    const scoreDisplay = document.querySelector('#score');
+    const resultDisplay = document.querySelector('#result');
+    const width = 4;
+    let squares = [];
+    let score = 0;
+
+    function createBoard() {
+        for(let i = 0; i < width * width; i++) {
+            const square = document.createElement('div');
+            square.innerHTML = 0;
+            gridDisplay.appendChild(square);
+            squares.push(square);
+        }
+        generate();
+        generate();
+    }
+    createBoard();
+
+
+    function generate() {
+        const randomNumber = Math.floor(Math.random() * squares.length);
+        if(squares[randomNumber].innerHTML == 0){
+            squares[randomNumber].innerHTML = 2;
+            checkForGameOver();
+        } else {
+            generate(); 
+        }
+    }
+
+    function moveRight() {
+        for (let i = 0; i < 16; i++) {
+            if (i % 4 === 0) {
+                let totalOne = squares[i].innerHTML;
+                let totalTwo = squares[i+1].innerHTML;
+                let totalThree = squares[i+2].innerHTML;
+                let totalFour = squares[i+3].innerHTML;
+
+                let row = [
+                    parseInt(totalOne),
+                    parseInt(totalTwo),
+                    parseInt(totalThree),
+                    parseInt(totalFour)
+                ];
+                let filteredRow = row.filter(num => num);
+                let missing = 4 - filteredRow.length;
+                let zeros = Array(missing).fill(0);
+                let newRow = zeros.concat(filteredRow);
+                console.log(newRow);
+                squares[i].innerHTML = newRow[0];
+                squares[i+1].innerHTML = newRow[1];
+                squares[i+2].innerHTML = newRow[2];
+                squares[i+3].innerHTML = newRow[3];
+            }
+        }
+    }
+
+    function moveLeft(){
+         for (let i = 0; i < 16; i++) {
+            if (i % 4 === 0) {
+                let totalOne = squares[i].innerHTML;
+                let totalTwo = squares[i+1].innerHTML;
+                let totalThree = squares[i+2].innerHTML;
+                let totalFour = squares[i+3].innerHTML;
+
+                let row = [
+                    parseInt(totalOne),
+                    parseInt(totalTwo),
+                    parseInt(totalThree),
+                    parseInt(totalFour)
+                ];
+                let filteredRow = row.filter(num => num);
+                let missing = 4 - filteredRow.length;
+                let zeros = Array(missing).fill(0);
+                let newRow = filteredRow.concat(zeros);
+                console.log(newRow);
+                squares[i].innerHTML = newRow[0];
+                squares[i+1].innerHTML = newRow[1];
+                squares[i+2].innerHTML = newRow[2];
+                squares[i+3].innerHTML = newRow[3];
+            }
+        }
+    }
+    
+    function moveUp(){
+        for(let i =0; i < 4; i++){
+            let totalOne = squares[i].innerHTML;
+                let totalTwo = squares[i+width].innerHTML;
+                let totalThree = squares[i+width*2].innerHTML;
+                let totalFour = squares[i+width*3].innerHTML;
+
+                let column = [
+                    parseInt(totalOne),
+                    parseInt(totalTwo),
+                    parseInt(totalThree),
+                    parseInt(totalFour)
+                ];
+                let filteredColumn = column.filter(num => num);
+                let missing = 4 - filteredColumn.length;
+                let zeros = Array(missing).fill(0);
+                let newColumn = filteredColumn.concat(zeros);
+                console.log(newColumn);
+                squares[i].innerHTML = newColumn[0];
+                squares[i+width].innerHTML = newColumn[1];
+                squares[i+width*2].innerHTML = newColumn[2];
+                squares[i+width*3].innerHTML = newColumn[3];
+        }
+    }
+
+
+    function moveDown(){
+    for(let i =0; i < 4; i++){
+            let totalOne = squares[i].innerHTML;
+                let totalTwo = squares[i+width].innerHTML;
+                let totalThree = squares[i+width*2].innerHTML;
+                let totalFour = squares[i+width*3].innerHTML;
+
+                let column = [
+                    parseInt(totalOne),
+                    parseInt(totalTwo),
+                    parseInt(totalThree),
+                    parseInt(totalFour)
+                ];
+                let filteredColumn = column.filter(num => num);
+                let missing = 4 - filteredColumn.length;
+                let zeros = Array(missing).fill(0);
+                let newColumn = zeros.concat(filteredColumn);
+
+                squares[i].innerHTML = newColumn[0];
+                squares[i+width].innerHTML = newColumn[1];
+                squares[i+width*2].innerHTML = newColumn[2];
+                squares[i+width*3].innerHTML = newColumn[3];
+        }
+    }
+
+
+function combineRow(){
+    for(let i=0; i < 15; i++){
+        if(squares[i].innerHTML === squares[i+1].innerHTML){
+            let combineTotal = parseInt(squares[i].innerHTML) + parseInt(squares[i+1].innerHTML);
+            squares[i].innerHTML = combineTotal;
+            squares[i+1].innerHTML = 0;
+            score += combineTotal;
+            scoreDisplay.innerHTML = score;
+        }
+    }
+}
+
+function combineColumn(){
+    for(let i=0; i < 11; i++){
+        if(squares[i].innerHTML === squares[i+width].innerHTML){
+            let combineTotal = parseInt(squares[i].innerHTML) + parseInt(squares[i+width].innerHTML);
+            squares[i].innerHTML = combineTotal;
+            squares[i+width].innerHTML = 0;
+            score += combineTotal;
+            scoreDisplay.innerHTML = score;
+        }
+    }
+    checkForWin();
+}
+
+ //async function
+ function control(e){
+    if (e.key === 'ArrowLeft'){
+        keyLeft();
+    } else if(e.key === 'ArrowRight'){
+        keyRight();
+    } else if(e.key === 'ArrowUp'){
+        keyUp();
+    }else if(e.key === 'ArrowDown'){
+        keyDown();
+    }
+ }
+ document.addEventListener('keydown', control);
+  
+function keyLeft(){
+    moveLeft();
+    combineRow();
+    moveLeft();
+    generate();
+}
+
+function keyRight(){
+    moveRight();
+    combineRow();
+    moveRight();
+    generate();
+}
+
+function keyUp(){
+    moveUp();
+    combineColumn();
+    moveUp();
+    generate();
+}
+
+function keyDown(){
+    moveDown();
+    combineColumn();
+    moveDown();
+    generate();
+}
+
+//check number for to win
+
+function checkForWin(){
+    for(let i = 0; i < squares.length ;i++){
+        if(squares[i].innerHTML == 2048) {
+            resultDisplay.innerHTML = "You win";
+            document.removeEventListener('keydown', control);
+        }
+    }
+}
+
+//check lose
+function checkForGameOver(){
+    let zeros = 0;
+    for(let i=0; i < squares.length; i++){
+        if(squares[i].innerHTML == 0){
+            zeros++;
+        }
+    }
+
+    if(zeros === 0){
+        resultDisplay.innerHTML = "You lose";
+        document.removeEventListener('keydown', control);
+    }
+}
+
+function clear(){
+    resultDisplay.innerHTML = "You lose";
+    document.removeEventListener('keydown', control);
+    setTimeout(clear, 3000);
+}
+//add colors 
+function addColors(){
+    for(let i=0; i < squares.length; i++){
+        if(squares[i].innerHTML == 0){
+            squares[i].style.backgroundColor = '#afa192';
+        } else if(squares[i].innerHTML == 2){
+            squares[i].style.backgroundColor = '#eee4da';
+        } else if(squares[i].innerHTML == 4){
+            squares[i].style.backgroundColor = '#ede0c8';
+        } else if(squares[i].innerHTML == 8){
+            squares[i].style.backgroundColor = '#f2b179';
+        } else if(squares[i].innerHTML == 16){
+            squares[i].style.backgroundColor = '#ffcea4';
+        } else if(squares[i].innerHTML == 32){
+            squares[i].style.backgroundColor = '#e8c064';
+        } else if(squares[i].innerHTML == 64){
+           squares[i].style.backgroundColor = '#ffab6e';
+        } else if(squares[i].innerHTML == 128){
+            squares[i].style.backgroundColor = '#fd9982';
+        } else if(squares[i].innerHTML == 256){
+            squares[i].style.backgroundColor = '#ead79c';
+        } else if(squares[i].innerHTML == 512){
+            squares[i].style.backgroundColor = '#76daff';
+        } else if(squares[i].innerHTML == 1024){
+            squares[i].style.backgroundColor = '#beeaa5';
+        } else if(squares[i].innerHTML == 2048){
+            squares[i].style.backgroundColor = '#d7d4f0';
+        }
+    }
+}
+
+addColors();
+let myTimer = setInterval(addColors, 50);
+
+});

package/classicube-package/README.md

@@ -0,0 +1,5 @@
+# ClassiCube-HTML
+Offline HTML Version Of ClassiCube.
+Official ClassiCube Repo: https://github.com/ClassiCube/ClassiCube
+Preview: [HERE!](https://al3x77777.github.io/ClassiCube-HTML)
+![IMG](https://github.com/Al3x77777/ClassiCube-HTML/assets/112645002/91ef029b-66bf-46a7-b616-fa0eccf819a6)

package/classicube-package/css/style.css

@@ -0,0 +1,7 @@
+body 
+{
+    padding: 0;
+    margin: 0; 
+    overflow: hidden;
+    
+}

package/classicube-package/index.html

@@ -0,0 +1,72 @@
+<html><head>
+	<title>ClassiCube</title>
+    <meta name="viewport" content="width=device-width">
+    <link href="css/style.css" rel="stylesheet">
+    <script src="js/jquery.js"></script>
+  </head>
+  <body>
+<div id="body">
+<div class="sec">
+  <div class="row">
+    <canvas id="canvas" style="display:block; box-sizing:border-box; border-width:0px; padding:0; margin:0 auto; background-color: black; width:100%; height:auto;" oncontextmenu="event.preventDefault()" tabindex="-1" width="1000" height="562"></canvas>
+    <span id="logmsg" style="font-size:18px;color:#F67;"></span>
+  </div>
+</div>
+<script type="text/javascript">
+  function resizeGameCanvas() {
+    var cc_canv = $('canvas#canvas');
+
+     cc_canv[0].width  = window.innerWidth;
+     cc_canv[0].height = window.innerHeight;
+	 
+	 cc_canv.focus();
+  }
+  
+  function setFocusOnClick() {
+    // Set focus on the canvas when the iframe is clicked
+    var cc_canv = $('canvas#canvas');
+    cc_canv.focus();
+  }
+  document.getElementById('canvas').addEventListener('click', setFocusOnClick);
+  
+  window.addEventListener('load', function() {
+    document.getElementById('canvas').focus();
+  });
+  
+
+  var Module = {
+    preRun: [ resizeGameCanvas ],
+    postRun: [],
+    arguments: ['Singleplayer'],
+    print: function(text) {
+      if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+      console.log(text);
+    },
+    printErr: function(text) {
+      if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+      console.error(text);
+    },
+    canvas: (function() { return document.getElementById('canvas'); })(),
+    setStatus: function(text) {
+      console.log(text);
+      document.getElementById('logmsg').innerHTML = text;
+    },
+    totalDependencies: 0,
+    monitorRunDependencies: function(left) {
+      this.totalDependencies = Math.max(this.totalDependencies, left);
+      Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+    }
+  };
+  Module.setStatus('Downloading...');
+  window.onerror = function(msg) {
+    // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+    Module.setStatus('Exception thrown, see JavaScript console (' + msg + ')');
+    Module.setStatus = function(text) {
+      if (text) Module.printErr('[post-exception status] ' + text);
+    };
+  };
+</script>
+<script async="" type="text/javascript" src="js/ClassiCube.js"></script>
+        </div>
+    
+</body></html>