diff --git a/semag/crossnroad/index.html b/semag/crossnroad/index.html
new file mode 100644
index 00000000..4534641c
--- /dev/null
+++ b/semag/crossnroad/index.html
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <title>CrossNRoad</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+    <!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+    <style>
+      @import url('https://fonts.cdnfonts.com/css/press-start-2p');
+      body {
+                                                                            font-family: 'Press Start 2P', sans-serif;
+               background-color:green;                                 color:white;
+      }
+      .a {
+        display:none;
+      }
+      button {
+        background-color:green;
+        border:0;
+      }
+      html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
+
+    </style>
+    <script>
+    
+     $(document).ready(function(){
+  $("button").click(function(){
+    $(".a").css("display", "inline");
+
+
+
+  });
+}); 
+        $(document).ready(function(){
+  $("button").click(function(){
+    $(".b").css("display", "none");
+
+
+
+  });
+}); 
+      $(document).ready(function(){
+  $("button").click(function(){
+    $("body").css("background-color", "#00FF0F")
+
+
+
+  });
+}); 
+  
+
+    </script>
+  </head>
+  <body>
+        <main class="a">
+    </main>
+   <center>
+     <br>
+    <h1 class="b">CrossNRoad</h1>
+     <button  class="b">Click to Play</button> 
+ 
+<script>
+  function preload() { 
+  Press = loadFont('assets/Press.ttf');
+} 
+  var carX = 740;
+var carSpeed;
+var carType;
+
+var carX2 = 740;
+var carSpeed2;
+var carType2;
+
+var carX3 = 740;
+var carSpeed3;
+var carType3;
+
+var peepX = 350;
+var peepY = 622;
+var peepRadius = 10;
+
+var hasKey = "false";
+var keyX;
+var keyY;
+
+var score = 0;
+
+var lives = 3;
+var loseMode = false;
+
+function setup() {
+  createCanvas(700, 700);
+  carSpeed = random(5, 15);
+  carType = random(["🚗", "🚙", "🚓"]);
+
+  carSpeed2 = random(5, 15);
+  carType2 = random(["🚗", "🚙", "🚓"]);
+
+  carSpeed3 = random(5, 15);
+  carType3 = random(["🚗", "🚙", "🚓"]);
+
+  keyX = random([100, 200, 300, 400, 500, 600]);
+  keyY = random([560, 430, 280, 180]);
+}
+
+function draw() {
+  background(0, 255, 0);
+
+  lifeCount();
+  if (loseMode == false) {
+    push();
+    fill("grey");
+    noStroke();
+    rect(0, 330, 700, 275);
+    rect(0, 100, 700, 115);
+    pop();
+
+    for (var roadX = 10; roadX < 720; roadX += 50) {
+      push();
+      fill("white");
+      rect(roadX, 470, 30, 10);
+      pop();
+    }
+
+    push();
+    textSize(50);
+    text("Score: " + score, 10, 50);
+    pop();
+
+    cars();
+    player();
+    doorKey();
+    door();
+  }
+}
+
+function cars() {
+  var hitCar1 = rectRect(
+    peepX - peepRadius,
+    peepY - peepRadius,
+    20,
+    80,
+    carX,
+    500,
+    100,
+    70
+  );
+
+  var hitCar2 = rectRect(
+    peepX - peepRadius,
+    peepY - peepRadius,
+    20,
+    80,
+    carX2,
+    360,
+    100,
+    70
+  );
+
+  var hitCar3 = rectRect(
+    peepX - peepRadius,
+    peepY - peepRadius,
+    20,
+    80,
+    carX3,
+    115,
+    100,
+    70
+  );
+
+  push();
+  textSize(100);
+  text(carType, carX, 570);
+  pop();
+  carX -= carSpeed;
+
+  if (carX < -120) {
+    carX = 740;
+    carSpeed = random(5, 15);
+    carType = random(["🚗", "🚙", "🚓"]);
+  }
+
+  push();
+  textSize(100);
+  text(carType2, carX2, 430);
+  pop();
+  carX2 -= carSpeed2;
+
+  if (carX2 < -120) {
+    carX2 = 740;
+    carSpeed2 = random(5, 15);
+    carType2 = random(["🛻", "🚐", "🛺"]);
+  }
+
+  push();
+  textSize(100);
+  text(carType3, carX3, 185);
+  pop();
+  carX3 -= carSpeed3;
+
+  if (carX3 < -120) {
+    carX3 = 740;
+    carSpeed3 = random(5, 15);
+    carType3 = random(["🏍️", "🛵", "🚛"]);
+  }
+
+  if (hitCar1 || hitCar2 || hitCar3) {
+    peepX = 350;
+    peepY = 622;
+    hasKey = "false"
+    keyX = random([100, 200, 300, 400, 500, 600]);
+    keyY = random([560, 430, 280, 180]);
+    lives--;
+  }
+}
+
+function drawPeep(x, y, size) {
+  push();
+  strokeWeight(7);
+  fill("yellow");
+  ellipse(x, y, size);
+
+  let x0 = x;
+  let y0 = y + size / 2;
+  line(x0, y0, x0, y0 + 2 * size);
+
+  line(x0, y0 + size, x0 - size, y0);
+  line(x0, y0 + size, x0 + size, y0);
+
+  line(x0, y0 + 2 * size, x0 + size, y0 + size * 3);
+  line(x0, y0 + 2 * size, x0 - size, y0 + size * 3);
+  pop();
+}
+
+function player() {
+  drawPeep(peepX, peepY, peepRadius * 2);
+}
+
+function keyPressed() {
+  if (key == "w" || keyCode == UP_ARROW) {
+    peepY -= 50;
+  }
+
+  if ((key == "s" || keyCode == DOWN_ARROW) && peepY < 620) {
+    peepY += 50;
+  }
+
+  if ((key == "a" || keyCode == LEFT_ARROW) && peepX > 0) {
+    peepX -= 50;
+  }
+
+  if ((key == "d" || keyCode == RIGHT_ARROW) && peepX < 700) {
+    peepX += 50;
+  }
+}
+
+function doorKey() {
+  push();
+  textSize(60);
+  text("🔑", keyX, keyY);
+  pop();
+
+  var hitKey = rectRect(
+    peepX - peepRadius,
+    peepY - peepRadius,
+    20,
+    80,
+    keyX,
+    keyY - 60,
+    60,
+    80
+  );
+
+  if (hitKey) {
+    hasKey = "true";
+  }
+
+  if (hasKey == "true") {
+    keyX = peepX - 20;
+    keyY = peepY + 30;
+  }
+}
+
+function rectRect(r1x, r1y, r1w, r1h, r2x, r2y, r2w, r2h) {
+  if (
+    r1x + r1w >= r2x &&
+    r1x <= r2x + r2w &&
+    r1y + r1h >= r2y &&
+    r1y <= r2y + r2h
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function door() {
+ 
+  push();
+  textSize(80);
+  text("🚪", 320, 60);
+  pop();
+
+  if (peepX == 350 && peepY == 22 && hasKey == "true") {
+    peepY = 622;
+    peepX = 350;
+    keyX = random([100, 200, 300, 400, 500, 600]);
+    keyY = random([550, 450, 350, 250, 150]);
+    hasKey = "false";
+    score++;
+  }
+}
+
+function lifeCount() {
+  push();
+  textSize(50);
+  text("❤️", 510, 50);
+  text("❤️", 570, 50);
+  text("❤️", 630, 50);
+  pop();
+
+  if (lives <= 2) {
+    push();
+    fill(0, 255, 0);
+    noStroke();
+    rect(500, 0, 70, 80);
+    pop();
+  }
+
+  if (lives <= 1) {
+    push();
+    fill(0, 255, 0);
+    noStroke();
+    rect(560, 0, 70, 80);
+    pop();
+  }
+
+  if (lives <= 0) {
+    loseScreen();
+    loseMode = true;
+  }
+}
+
+function loseScreen() {
+  push();
+  fill("red");
+  noStroke();
+  rect(0, 0, 700, 700);
+  pop();
+
+  push();
+  textSize(70);
+  textAlign(CENTER, CENTER);
+    textFont('Press'); 
+  text("You Lose!", 350, 350);
+  textSize(30);
+  text("You got hit by a car three times.", 350, 420);
+  text("Your score was " + score + ".", 350, 460);
+  text("If you want to try again, just reload the page.", 350, 500);
+  pop();
+}
+
+    </script>
+  </body>
+</html>
