My Horror Sonic

by FrostRaven87

157 lines2.3 KB

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>My Horror Sonic</title>

<style>
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#050505;
  font-family:Arial,sans-serif;
}

#game{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:
    linear-gradient(#4fc3ff 0 55%,#16852c 55% 100%);
}

#world{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:5000px;
}

.ground{
  position:absolute;
  left:0;
  bottom:0;
  width:5000px;
  height:45%;
  background:
    repeating-linear-gradient(
      45deg,
      #15912f 0,
      #15912f 35px,
      #107526 35px,
      #107526 70px
    );
  border-top:8px solid #7b4b20;
}

.platform{
  position:absolute;
  height:22px;
  background:#b36a25;
  border:4px solid #613716;
  border-radius:5px;
}

.ring{
  position:absolute;
  width:30px;
  height:30px;
  border:6px solid gold;
  border-radius:50%;
  box-shadow:0 0 10px #ffe900;
}

.spike{
  position:absolute;
  width:0;
  height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-bottom:35px solid #aaa;
  filter:drop-shadow(0 0 4px #fff);
}

#sonic{
  position:absolute;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#1265ff;
  border:4px solid #07348c;
  z-index:10;
}

#sonic:before{
  content:"";
  position:absolute;
  width:18px;
  height:20px;
  right:-2px;
  top:8px;
  background:white;
  border-radius:50%;
}

#sonic:after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  right:5px;
  top:14px;
  background:#111;
  border-radius:50%;
}

#exe{
  position:absolute;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#050505;
  border:4px solid #b00000;
  z-index:9;
  box-shadow:0 0 18px red;
}

#exe:before,
#exe:after{
  content:"";
  position:absolute;
  width:12px;
  height:24px;
  background:red;
  border-radius:50%;
  top:13px;
}

#exe:before{left:11px}
#exe:after{right:11px}

#hud{
  position:fixed;
  top:12px;
  left:12px;
  z-index:30;
  padding:8px 12px;
  background:#000b;
  border:2px solid white;
  border-radius:8px;
  font-size:18px;
}

#message{
  position:fixed;
  top:65px;
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  text-align:center;
  font-size:18px;
  text

Game Source: My Horror Sonic

Creator: FrostRaven87

Libraries: none

Complexity: moderate (157 lines, 2.3 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: my-horror-sonic-frostraven87" to link back to the original. Then publish at arcadelab.ai/publish.