s

DenialRiver1434 · May 20, 2023 · b6e2f5b · b6e2f5b
1 parent 7ec0245
commit b6e2f5b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -2,11 +2,13 @@
 
 You lost the game? Or did I lose the game?
 
+![image](https://github.com/S-D-Ge/1434/assets/52391257/54d79418-7f47-4cbc-841c-92470207620e)
+
 ### Note
 
 I have never coded in html and javascript before. When making to project, I was trying my best to edit somebody else's code that I cannot read. As a result, there might be some rare bugs.
 
-# Instructions for Download (Works on school computers)
+### Instructions for Download (Works on school computers)
 1. Click on the green "<> Code" button, then download ZIP
 
 ![image](https://github.com/S-D-Ge/1434/assets/52391257/fa1b0af7-1bb6-4e69-8a2d-5b0c53cbc1f4)
@@ -20,11 +22,22 @@ I have never coded in html and javascript before. When making to project, I was
 
 ![image](https://github.com/S-D-Ge/1434/assets/52391257/506f1902-b393-4f44-85d7-1ef897430815)
 
+# Rules and Scoring
+
+Use your arrow keys to move the tiles. When two tiles with the same number touch, they merge into one!
+- When two 0s merge, you earn 1434 points
+- When two positive integers merge, you earn 6-8 times their sum
+
 # Credits
 This is a fork of gabrielecirculari's 2048, which is a small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone).
 
 ### Change Log
 
+5/20/2023 (THE POWER OF 0 UPDATE)
+- There is now an option for 0 to spawn
+- Point value change
+- Fixed the margins to make the game playable at 100% zoom
+
 5/19/2023
 - Added "reset high score button"
 - Improved format / coloring / button placement
@@ -34,7 +47,7 @@ This is a fork of gabrielecirculari's 2048, which is a small clone of [1024](htt
 5/18/2023
 - Major recoloring
 
-5/17/2023
+5/17/2023 (PROGRESSION TO 1434 UPDATE)
 - Changed the blocks to be the values of 1434 when divided by 2 and rounding down
 - Fixed coloring for blocks
 

diff --git a/index.html b/index.html
@@ -71,14 +71,19 @@ <h1 class="title">1434</h1>
 
       </div>
     </div>
-
+
+    <input class="allow0" type="checkbox" id="allow0">
+    <label class="allow0" for="allow0"> Spawn zero instead of 2</label>
     <a class="restart-button">Restart Losing the Game</a>
     <p class="game-explanation">
       <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
+      <strong class="important">SCORING:</strong> When two <strong>0s</strong> merge, you earn <strong>1434</strong> points, when two positive integers merge, you earn <strong>6-8 times their sum</strong>.
     </p>
     <hr>
     <p>
-    <strong class="important">Note:</strong> This site is not the official version of 1434. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites, like the one that you are on, are derivatives and fakes, and should be used with caution.
+    <strong class="important">Note from original creator:</strong> This site is not the official version of 1434. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites, like the one that you are on, are derivatives and fakes, and should be used with caution.
+    <br>
+    <strong class="important">Note from me:</strong>  I have never coded in html and javascript before. When making to project, I was trying my best to edit somebody else's code that I cannot read. As a result, there might be some rare bugs.
     </p>
     <hr>
     <p>

diff --git a/js/game_manager.js b/js/game_manager.js
@@ -73,7 +73,9 @@ GameManager.prototype.addStartTiles = function () {
 // Adds a tile in a random position
 GameManager.prototype.addRandomTile = function () {
   if (this.grid.cellsAvailable()) {
-    var value = Math.random() < 0.9 ? 1 : 2;
+    var value;
+    if(document.querySelector('.allow0').checked) value = Math.random() < 0.9 ? 1 : 0;
+    else value = Math.random() < 0.9 ? 1 : 2;
     var tile = new Tile(this.grid.randomAvailableCell(), value);
 
     this.grid.insertTile(tile);
@@ -169,8 +171,11 @@ GameManager.prototype.move = function (direction) {
           tile.updatePosition(positions.next);
 
           // Update the score
-          self.score += merged.value;
-          self.score = Math.round(self.score);
+
+          self.score += merged.value * Math.floor(6 + 3 * Math.random());
+          if (merged.value === 0) {
+            self.score += 1434;
+          } 
 
           // The mighty 1434 tile
 
@@ -179,6 +184,7 @@ GameManager.prototype.move = function (direction) {
           if (merged.value === 1434) {
             self.won = true;
           } 
+
         } else {
           self.moveTile(tile, positions.farthest);
         }

diff --git a/js/tile.js b/js/tile.js
@@ -1,7 +1,7 @@
 function Tile(position, value) {
   this.x                = position.x;
   this.y                = position.y;
-  this.value            = value || 2;
+  this.value            = value;
 
   this.previousPosition = null;
   this.mergedFrom       = null; // Tracks tiles that merged together

diff --git a/style/main.css b/style/main.css
@@ -8,7 +8,8 @@ html, body {
   font-size: 18px; }
 
 body {
-  margin: 80px 0; }
+  margin: 0px 0; 
+margin-bottom: 20px;}
 
 .heading:after {
   content: "";
@@ -139,7 +140,7 @@ hr {
   100% {
     opacity: 1; } }
 .game-container {
-  margin-top: 20px;
+  margin-top: 30px;
   margin-bottom: 20px;
   position: relative;
   padding: 15px;
@@ -335,7 +336,10 @@ hr {
     text-align: center;
     font-weight: bold;
     z-index: 10;
-    font-size: 55px; }
+  font-size: 55px; }
+  .tile.tile-0 .tile-inner {
+    background: #ff9100;
+    box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0); }
   .tile.tile-1 .tile-inner {
     background: #888e91;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
@@ -360,38 +364,39 @@ hr {
   .tile.tile-179 .tile-inner {
     color: #f9f6f2;
     background: #00a3b8;
-    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.15);
+    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
     font-size: 45px; }
     @media screen and (max-width: 520px) {
       .tile.tile-179 .tile-inner {
         font-size: 25px; } }
   .tile.tile-358 .tile-inner {
     color: #f9f6f2;
     background: #0069a7;
-    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.143);
+    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
     font-size: 45px; }
     @media screen and (max-width: 520px) {
       .tile.tile-358 .tile-inner {
         font-size: 25px; } }
   .tile.tile-717 .tile-inner {
     color: #f9f6f2;
     background: #0a438d;
-    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.143);
+    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
     font-size: 45px; }
     @media screen and (max-width: 520px) {
       .tile.tile-717 .tile-inner {
         font-size: 25px; } }
   .tile.tile-1434 .tile-inner {
     color: #f9f6f2;
     background: #1b046d;
-    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.143);
+    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
     font-size: 35px; }
     @media screen and (max-width: 520px) {
       .tile.tile-1434 .tile-inner {
         font-size: 15px; } }
   .tile.tile-super .tile-inner {
     color: #f9f6f2;
     background: #361e3d;
+    box-shadow: 0 0 30px 10px rgba(213, 116, 243, 1), inset 0 0 0 1px rgba(255, 255, 255, 1);
     font-size: 30px; }
     @media screen and (max-width: 520px) {
       .tile.tile-super .tile-inner {
@@ -517,14 +522,14 @@ hr {
 
 .game-intro {
   float: left;
-  line-height: 42px;
-  margin-bottom: 0; }
+  margin-top: 10px;
+  line-height: 0px; }
 
 .restart-button {
   display: inline-block;
   background: #66698f;
   border-radius: 3px;
-  padding: 0 20px;
+  padding: 0 12px;
   text-decoration: none;
   color: #f9f6f2;
   height: 40px;
@@ -533,6 +538,31 @@ hr {
   text-align: center;
   float: right; }
 
+  .allow0 {
+    display: block;
+    background: #ff8800;
+    border-radius: 3px;
+    height: 30px;
+    line-height: 32px;
+    padding: 0 8px;
+    color: #000000;
+    display: block;
+    text-align: center;
+    margin-left: 10px;
+    margin-top: 6px;
+    float: left; }
+
+  input[type=checkbox]
+  {
+    /* Double-sized Checkboxes */
+    margin-top: 6px;
+    -ms-transform: scale(2); /* IE */
+    -moz-transform: scale(2); /* FF */
+    -webkit-transform: scale(1.5); /* Safari and Chrome */
+    -o-transform: scale(1.5); /* Opera */
+    transform: scale(2);
+  }
+
 .best-reset-button {
   display: inline-block;
   background: #cf1010;