Merge pull request #91 from MrNullus/tetris-game-javascript

Tetris game javascript

JavaScript/Tetris/README.md

@@ -0,0 +1,3 @@
+# Tetris
+A vanilla javascript game
+

JavaScript/Tetris/css/style.css

@@ -0,0 +1,237 @@
+:root {
+  font-size: 0.625em;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Montserrat", sans-serif;
+  font-size: 1.6rem;
+  margin: auto;
+  max-width: 60rem;
+  color: #d8edea;
+  background: radial-gradient(
+    circle,
+    rgba(175, 196, 174, 1) 0%,
+    rgba(104, 204, 191, 1) 89%,
+    rgba(94, 191, 178, 1) 100%
+  );
+}
+
+header {
+  text-align: center;
+  margin-top: 3rem;
+}
+
+h1 {
+    color: #fff;
+}
+
+div {
+  height: 2rem;
+  width: 2rem;
+}
+
+/* some utility classes */
+.t-ucase {
+  text-transform: uppercase;
+}
+
+.t-big {
+  font-size: 1.5em;
+}
+
+.t-wide {
+  letter-spacing: 1.5rem;
+}
+
+.t-close {
+  letter-spacing: 1rem;
+}
+
+.fw-300 {
+  font-weight: 300;
+}
+
+.fw-400 {
+  font-weight: 400;
+}
+
+.score-display {
+  font-size: 5rem;
+  color: rgb(133, 121, 107, 0.5);
+}
+
+.game-area {
+  display: flex;
+  justify-content: center;
+}
+
+.game {
+  height: 0;
+  width: 300px;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 20rem;
+  height: 40rem;
+}
+
+.previous-shape {
+  width: 10rem;
+  padding-left: 2rem;
+  margin-top: -5rem;
+}
+
+.previous-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 8rem;
+  height: 8rem;
+}
+
+.block {
+  background-image: url(../images/blue_block.png);
+}
+
+.block2 {
+  background-image: url(../images/purple_block.png);
+}
+
+.block3 {
+  background-image: url(../images/green_block.png);
+}
+
+.block4 {
+  background-image: url(../images/navy_block.png);
+}
+
+.block5 {
+  background-image: url(../images/pink_block.png);
+}
+
+.end {
+  background-color: #d8edea;
+}
+
+.button {
+  position: relative;
+  width: 22rem;
+  height: 2.2rem;
+  text-align: center;
+  color: #fff;
+  letter-spacing: 1px;
+  text-decoration: none;
+  line-height: 23px;
+  font-size: 10px;
+  display: block;
+  margin: 30px;
+  text-shadow: -1px -1px 0 #a84155;
+  background: #d25068;
+  border: 1px solid #d25068;
+  width: 12rem;
+  background-image: linear-gradient(to bottom, #f66c7b, #d25068);
+  border-radius: 5px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+    0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #ad4257,
+    0 4px 2px rgba(0, 0, 0, 0.5);
+}
+
+.button:before {
+  background: #f0f0f0;
+  background-image: linear-gradient(#d0d0d0, #f0f0f0);
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
+  position: absolute;
+  content: "";
+  left: -6px;
+  right: -6px;
+  top: -6px;
+  bottom: -10px;
+  z-index: -1;
+}
+
+.button:active {
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+    0 -1px 0 rgba(255, 255, 255, 0.1) inset;
+  top: 5px;
+}
+
+.button:active:before {
+  top: -11px;
+  bottom: -5px;
+  content: "";
+}
+
+.button:hover {
+  background: #f66c7b;
+  background-image: linear-gradient(top, #d25068, #f66c7b);
+}
+
+.end {
+  background-image: url(/images/blue_block.png);
+}
+
+.display {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  margin-top: 1rem;
+  width: 17.5rem;
+  height: 25rem;
+  background: #f0f0f0;
+  background-image: linear-gradient(#d0d0d0, #f0f0f0);
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
+  color: #85796b;
+}
+
+.score,
+.lines-display {
+  padding-top: 1rem;
+  font-size: 1.2rem;
+}
+
+.menu {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(24, 39, 51, 0.85);
+}
+
+.menu-content {
+  text-align: center;
+  width: 600px;
+  align-items: center;
+  margin-top: 230px;
+  justify-content: center;
+    height: 200vh;
+  border-radius: 50%;
+  transition: all 0.8s ease;
+}
+
+.menu-content {
+    width: 200vw;
+}
+
+.rules {
+  font-size: 12px;
+  transition: color 0.4s ease;
+}
+
+.key {
+  color: #f8de7e;
+}

JavaScript/Tetris/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="utf-8">
+    <title>Tetris!</title>
+    <script src="js/app.js" charset="utf-8"></script>
+    <link rel="stylesheet" href="css/style.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
+  </head>
+
+  <body>
+    <header>
+      <h1 class="fw-300 t-ucase">
+        <span class="fw-400 t-wide t-big t-ucase">tetris</span>
+      </h1>
+    </header>
+
+    <main class="game-area">
+      <div class="game">
+        <div class="grid"></div>
+      </div>
+
+      <section>
+        <div class="display">
+          <h1 class="score fw-400 t-ucase">
+            Your Score <br> <span class="score-display t-ucase fw-300">0</span>
+          </h1>
+          <div class="previous-shape">
+            <div class="previous-grid"></div>
+          </div>
+          <h2 class="lines-display fw-400 t-ucase">Lines:<span class="lines-score">0</span></h2>
+        </div>
+
+        <button class="button t-ucase" href="#">Start / Pause</button>
+      </section>
+    </main>
+  </body>
+</html>