Webleb - UI Elements - Rapper battle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

<title>Street Rap Battle</title>

html, body {
  margin: 0;
  min-height: 100%;
  background: #0b0d12;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.game {
  width: 100%;
  max-width: 760px;
  margin: auto;
  padding: 8px;
}

.hud {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
  font-weight: bold;
}

.health {
  height: 22px;
  background: #8f3f49;
  border-radius: 12px;
  overflow: hidden;
  margin: 8px 0;
}

#blueHealth {
  display: block;
  margin-left: auto;
  width: 50%;
  height: 100%;
  background: #536f98;
}

.stage {
  position: relative;
}

canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #101323;
  border-radius: 14px;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.80);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.hidden {
  display: none;
}

.keys {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  margin-top: 10px;
}

button {
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  min-height: 58px;
  border: 1px solid #596173;
  border-radius: 12px;
  background: #242936;
  color: white;
  font-size: 30px;
  font-weight: bold;
}

.start {
  padding: 12px 24px;
  font-size: 16px;
}
</style>
</head>

<body>

<div class="hud">
    <span>ROUND <b id="round">1</b>/3</span>
    <span>⏱ <b id="timer">0:40</b></span>
    <span>SCORE <b id="score">0</b></span>
    <span>COMBO <b id="combo">0</b></span>
  </div>

<div id="overlay" class="overlay">
      <div>
        <h1 id="title">STREET RAP BATTLE</h1>

<p id="message">
          40 SECOND ROUNDS • LOWRIDERS • TRAFFIC LIGHT • CROSSWALK
        </p>

<button id="start" class="start">
          START ROUND 1
        </button>
      </div>
    </div>

</div>

<p id="judge">Hit START.</p>

</div>

<script>
(() => {

const $ = s => document.querySelector(s);

const canvas = $("#canvas");
const ctx = canvas.getContext("2d");

const lanes = [270,330,390,450];
const arrows = ["←","↓","↑","→"];

let playing = false;
let last = 0;

let time = 40;
let spawn = .3;

let round = 1;
let score = 0;
let combo = 0;

let health = 50;

let notes = [];
let lost = false;

let trafficClock = 0;

/* ---------------- CARS ---------------- */

const cars = [

{
    x:-100,
    direction:1,
    speed:0,
    maxSpeed:50,
    y:267,
    color:"#68447a"
  },

{
    x:-350,
    direction:1,
    speed:0,
    maxSpeed:44,
    y:267,
    color:"#7b5136"
  },

{
    x:820,
    direction:-1,
    speed:0,
    maxSpeed:47,
    y:335,
    color:"#3e6770"
  },

{
    x:1080,
    direction:-1,
    speed:0,
    maxSpeed:43,
    y:335,
    color:"#75434b"
  }

];

/* ---------------- TRAFFIC LIGHT ---------------- */

function signal() {

let t = trafficClock % 15;

if(t < 7) return "green";
  if(t < 10) return "yellow";

return "red";
}

/* ---------------- HUD ---------------- */

function updateHUD() {

let seconds = Math.max(0,Math.ceil(time));

$("#timer").textContent =
    "0:" + String(seconds).padStart(2,"0");

$("#round").textContent = round;
  $("#score").textContent = score;
  $("#combo").textContent = combo;

health = Math.max(0,Math.min(100,health));

$("#blueHealth").style.width =
    health + "%";
}

/* ---------------- ROUND ---------------- */

function startRound() {

playing = true;
  lost = false;

last = 0;

time = 40;
  spawn = .3;

health = 50;
  combo = 0;

notes = [];

$("#overlay").classList.add("hidden");

$("#judge").textContent = "GO!";

updateHUD();
}

function finishRound(title,message) {

playing = false;

$("#title").textContent = title;
  $("#message").textContent = message;

if(lost) {

$("#start").textContent =
      "RETRY ROUND " + round;

} else if(round < 3) {

$("#start").textContent =
      "START ROUND " + (round + 1);

} else {

$("#start").textContent =
      "PLAY AGAIN";
  }

$("#overlay").classList.remove("hidden");
}

/* ---------------- NOTE HIT ---------------- */

function hitNote(lane) {

if(!playing) return;

let best = null;
  let distance = 999;

for(const note of notes) {

if(note.hit || note.lane !== lane)
      continue;

let d = Math.abs(note.y - 500);

if(d < distance) {
      distance = d;
      best = note;
    }
  }

if(best && distance < 70) {

best.hit = true;

combo++;

if(distance < 22) {

score += 350;
      health += 3;

$("#judge").textContent =
        "SICK!!";

} else {

score += 180;
      health += 1.5;

$("#judge").textContent =
        "GOOD!";
    }

} else {

combo = 0;
    health -= 8;

$("#judge").textContent =
      "MISS!";
  }

updateHUD();

if(health <= 0) {

lost = true;

finishRound(
      "K.O.!",
      "RETRY ROUND " + round
    );
  }
}

/* ---------------- CAR MOVEMENT ---------------- */

function moveCars(dt) {

let light = signal();

for(const car of cars) {

let stop =
      car.direction > 0 ? 292 : 428;

let distance =
      Math.abs(car.x - stop);

let before =
      car.direction > 0
      ? car.x < stop
      : car.x > stop;

let target =
      car.maxSpeed;

/* YELLOW = SLOW */

if(light === "yellow")
      target *= .30;

/* RED = STOP */

if(
      light === "red" &&
      before &&
      distance < 170
    ) {

target =
        Math.max(
          0,
          car.maxSpeed *
          distance / 170
        );
    }

if(
      light === "red" &&
      before &&
      distance < 7
    ) {

target = 0;
    }

car.speed +=
      (target - car.speed) *
      Math.min(1,dt * 3.5);

car.x +=
      car.direction *
      car.speed *
      dt;

if(
      car.direction > 0 &&
      car.x > 820
    ) {

car.x = -160;
    }

if(
      car.direction < 0 &&
      car.x < -160
    ) {

car.x = 880;
    }
  }
}

/* ---------------- UPDATE GAME ---------------- */

function update(dt) {

trafficClock += dt;

moveCars(dt);

if(!playing)
    return;

time -= dt;

if(time <= 0) {

time = 0;

updateHUD();

finishRound(
      round === 3
      ? "MATCH COMPLETE!"
      : "ROUND " + round + " COMPLETE!",

"40 SECONDS CLEARED"
    );

return;
  }

spawn -= dt;

if(spawn <= 0) {

notes.push({

lane:
        Math.floor(
          Math.random()*4
        ),

y:55,

hit:false
    });

spawn = .43;
  }

for(const note of notes) {

note.y += 310 * dt;

if(
      !note.hit &&
      note.y > 570
    ) {

note.hit = true;

combo = 0;
      health -= 6;

updateHUD();

if(health <= 0) {

lost = true;

finishRound(
          "K.O.!",
          "RETRY ROUND " + round
        );

return;
      }
    }
  }

notes =
    notes.filter(
      n => !n.hit || n.y < 540
    );
}

/* ---------------- PEOPLE ---------------- */

function person(x,y,size,index) {

const skinColors = [
    "#76513c",
    "#91644a",
    "#5f402f",
    "#a27658"
  ];

const clothes = [
    "#33475a",
    "#693b45",
    "#3f5543",
    "#554166"
  ];

let skin =
    skinColors[index % 4];

/* head */

ctx.fillStyle = skin;

ctx.beginPath();

ctx.arc(
    x,
    y - 34*size,
    8*size,
    0,
    Math.PI*2
  );

ctx.fill();

/* shirt */

ctx.fillStyle =
    clothes[index % 4];

ctx.fillRect(
    x - 9*size,
    y - 27*size,
    18*size,
    28*size
  );

/* legs */

ctx.strokeStyle =
    "#282d37";

ctx.lineWidth =
    6*size;

ctx.beginPath();

ctx.moveTo(
    x - 4*size,
    y
  );

ctx.lineTo(
    x - 6*size,
    y + 22*size
  );

ctx.moveTo(
    x + 4*size,
    y
  );

ctx.lineTo(
    x + 6*size,
    y + 22*size
  );

ctx.stroke();
}

/* ---------------- APARTMENTS ---------------- */

function apartments() {

const buildings = [

{x:0,w:225},
    {x:495,w:225}

];

for(const building of buildings) {

ctx.fillStyle =
      "#25262c";

ctx.fillRect(
      building.x,
      5,
      building.w,
      215
    );

for(
      let y=22;
      y<205;
      y+=45
    ) {

for(
        let x=building.x+12;
        x<building.x+
          building.w-35;
        x+=52
      ) {

/* window */

ctx.fillStyle =
          "#a98d60";

ctx.fillRect(
          x,y,39,31
        );

ctx.strokeStyle =
          "#17191d";

ctx.strokeRect(
          x,y,39,31
        );

/* people watching */

person(
          x+12,
          y+28,
          .38,
          (x+y)%9
        );

if(
          (x+y)%3 === 0
        ) {

person(
            x+28,
            y+29,
            .35,
            (x+y+3)%9
          );
        }
      }
    }
  }
}

/* ---------------- TRAFFIC LIGHT DRAW ---------------- */

function drawTrafficLight() {

let active =
    signal();

/* pole */

ctx.fillStyle =
    "#292a2d";

ctx.fillRect(
    341,150,8,96
  );

ctx.fillRect(
    345,150,76,7
  );

/* light box */

ctx.fillStyle =
    "#111";

ctx.fillRect(
    400,141,27,68
  );

const lights = [

["red",155,"#db4d51"],

["yellow",176,"#d9b94b"],

["green",197,"#50a66a"]

];

lights.forEach(light => {

ctx.fillStyle =
      active === light[0]
      ? light[2]
      : "#37383b";

ctx.beginPath();

ctx.arc(
      413,
      light[1],
      7,
      0,
      Math.PI*2
    );

ctx.fill();
  });
}

/* ---------------- LOWRIDER ---------------- */

function drawCar(car,time) {

let bounce =
    car.speed < 2
    ? Math.abs(
        Math.sin(time*5)
      ) * 9
    : 2;

ctx.save();

ctx.translate(
    car.x,
    car.y - bounce
  );

if(car.direction < 0)
    ctx.scale(-1,1);

/* tires */

ctx.fillStyle =
    "#111";

ctx.beginPath();

ctx.arc(
    -28,11,10,
    0,Math.PI*2
  );

ctx.arc(
    28,11,10,
    0,Math.PI*2
  );

ctx.fill();

/* body */

ctx.fillStyle =
    car.color;

ctx.fillRect(
    -44,-5,88,19
  );

/* roof */

ctx.beginPath();

ctx.moveTo(-25,-5);
  ctx.lineTo(-14,-20);
  ctx.lineTo(20,-20);
  ctx.lineTo(31,-5);

ctx.fill();

/* window */

ctx.fillStyle =
    "#202b35";

ctx.fillRect(
    -11,-17,28,10
  );

ctx.restore();
}

/* ---------------- RAPPERS ---------------- */

function rapper(x,blue) {

let skin =
    blue
    ? "#79523c"
    : "#724a33";

ctx.save();

ctx.translate(
    x,
    350
  );

/* legs */

ctx.fillStyle =
    blue
    ? "#252a35"
    : "#4e5967";

ctx.fillRect(
    -38,80,32,95
  );

ctx.fillRect(
    6,80,32,95
  );

/* long basketball jersey */

ctx.fillStyle =
    blue
    ? "#182b4a"
    : "#842c37";

ctx.beginPath();

ctx.moveTo(-38,-55);
  ctx.lineTo(-58,-35);
  ctx.lineTo(-48,84);
  ctx.lineTo(48,84);
  ctx.lineTo(58,-35);
  ctx.lineTo(38,-55);

ctx.fill();

ctx.fillStyle =
    "#eee";

ctx.font =
    "900 29px Arial";

ctx.textAlign =
    "center";

ctx.fillText(
    blue ? "23" : "07",
    0,
    30
  );

/* face */

ctx.fillStyle =
    skin;

ctx.beginPath();

ctx.ellipse(
    0,-103,
    32,37,
    0,
    0,
    Math.PI*2
  );

ctx.fill();

/* fitted cap */

ctx.fillStyle =
    blue
    ? "#101923"
    : "#8a3039";

ctx.fillRect(
    -32,-137,64,14
  );

/* eyes */

ctx.fillStyle =
    "#fff";

ctx.beginPath();

ctx.ellipse(
    -14,-106,
    7,3,
    0,
    0,
    Math.PI*2
  );

ctx.ellipse(
    14,-106,
    7,3,
    0,
    0,
    Math.PI*2
  );

ctx.fill();

/* pupils */

ctx.fillStyle =
    "#111";

ctx.beginPath();

ctx.arc(
    -14,-106,
    3,
    0,
    Math.PI*2
  );

ctx.arc(
    14,-106,
    3,
    0,
    Math.PI*2
  );

ctx.fill();

/* serious mouth */

ctx.fillRect(
    -11,-82,
    22,4
  );

ctx.restore();
}

/* ---------------- DRAW GAME ---------------- */

function draw(time) {

/* sky */

ctx.fillStyle =
    "#101323";

ctx.fillRect(
    0,0,720,620
  );

apartments();

/* road */

ctx.fillStyle =
    "#17191d";

ctx.fillRect(
    0,205,720,170
  );

/* center road markings */

ctx.fillStyle =
    "#b7a75f";

for(
    let x=-40;
    x<760;
    x+=100
  ) {

ctx.fillRect(
      x,286,50,4
    );
  }

/* CROSSWALK */

ctx.fillStyle =
    "#eee";

for(
    let x=306;
    x<=414;
    x+=18
  ) {

ctx.fillRect(
      x,218,10,142
    );
  }

/* cars */

cars.forEach(
    car =>
      drawCar(car,time)
  );

drawTrafficLight();

/* SMALL SIDEWALK */

ctx.fillStyle =
    "#aaa9a3";

ctx.fillRect(
    0,375,720,10
  );

ctx.fillStyle =
    "#858680";

ctx.fillRect(
    0,385,720,53
  );

/* street crowd */

for(
    let i=0;
    i<14;
    i++
  ) {

person(
      15+i*53,
      421,
      .55,
      i
    );
  }

/* benches */

ctx.fillStyle =
    "#49362b";

ctx.fillRect(
    5,475,210,7
  );

ctx.fillRect(
    505,475,210,7
  );

/* people near benches */

for(
    let i=0;
    i<4;
    i++
  ) {

person(
      28+i*50,
      470,
      .68,
      i+20
    );

person(
      528+i*50,
      470,
      .68,
      i+28
    );
  }

/* speaker */

ctx.fillStyle =
    "#101115";

ctx.fillRect(
    315,370,90,115
  );

ctx.fillStyle =
    "#292c32";

ctx.beginPath();

ctx.arc(
    360,402,
    22,
    0,
    Math.PI*2
  );

ctx.arc(
    360,451,
    22,
    0,
    Math.PI*2
  );

ctx.fill();

/* stage floor */

ctx.fillStyle =
    "#141519";

ctx.fillRect(
    0,500,720,120
  );

/* rappers */

rapper(
    105,
    false
  );

rapper(
    615,
    true
  );

/* rhythm lanes */

ctx.fillStyle =
    "rgba(0,0,0,.67)";

ctx.fillRect(
    235,35,250,545
  );

/* hit line */

ctx.strokeStyle =
    "#fff";

ctx.lineWidth =
    4;

ctx.beginPath();

ctx.moveTo(
    240,500
  );

ctx.lineTo(
    480,500
  );

ctx.stroke();

ctx.font =
    "bold 38px Arial";

ctx.textAlign =
    "center";

arrows.forEach(
    (arrow,i) => {

ctx.fillStyle =
        "#777";

ctx.fillText(
        arrow,
        lanes[i],
        514
      );
    }
  );

/* falling notes */

for(const note of notes) {

if(note.hit)
      continue;

const colors = [
      "#9d5360",
      "#98774c",
      "#54876b",
      "#536f98"
    ];

ctx.fillStyle =
      colors[note.lane];

ctx.fillRect(
      lanes[note.lane]-27,
      note.y-24,
      54,
      48
    );

ctx.fillStyle =
      "#fff";

ctx.fillText(
      arrows[note.lane],
      lanes[note.lane],
      note.y+13
    );
  }
}

/* ---------------- LOOP ---------------- */

function loop(now) {

let dt =
    Math.min(
      .033,
      (now-last)/1000 || 0
    );

last = now;

update(dt);

draw(
    now/1000
  );

requestAnimationFrame(
    loop
  );
}

/* ---------------- IPHONE BUTTONS ---------------- */

document
.querySelectorAll("[data-key]")
.forEach(button => {

button.addEventListener(
    "pointerdown",
    event => {

event.preventDefault();

hitNote(
        Number(
          button.dataset.key
        )
      );

},
    {passive:false}
  );

button.addEventListener(
    "touchstart",
    event =>
      event.preventDefault(),
    {passive:false}
  );

});

/* ---------------- START BUTTON ---------------- */

$("#start")
.addEventListener(
  "click",
  () => {

if(
      !lost &&
      $("#title")
      .textContent
      .includes("COMPLETE")
    ) {

if(round === 3) {

round = 1;
        score = 0;

} else {

round++;
      }
    }

$("#title")
      .textContent =
      "STREET RAP BATTLE";

startRound();
  }
);

updateHUD();
draw(0);

requestAnimationFrame(
  loop
);

})();
</script>

</body>
</html>

CSS

JS

Rapper battle

Recommended