Neon City — Mobile Open World

by EpicPhoenix98

119 lines1.9 KB

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Neon City — Mobile Open World</title>

<style>
*{
  box-sizing:border-box;
  user-select:none;
  -webkit-user-select:none;
}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  font-family:Arial,sans-serif;
}
#game{
  position:fixed;
  inset:0;
}
#hud{
  position:fixed;
  top:12px;
  right:12px;
  z-index:10;
  color:white;
  background:rgba(0,0,0,.55);
  padding:12px;
  border-radius:14px;
  min-width:170px;
  backdrop-filter:blur(5px);
}
.bar{
  height:10px;
  background:#333;
  border-radius:10px;
  overflow:hidden;
  margin:5px 0 8px;
}
#health{
  height:100%;
  width:100%;
  background:#e53935;
}
#wanted{
  color:#ffd54f;
  letter-spacing:4px;
}
#mission{
  position:fixed;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  color:white;
  background:rgba(0,0,0,.65);
  padding:12px 20px;
  border-radius:20px;
  text-align:center;
  max-width:80%;
}
#crosshair{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  width:24px;
  height:24px;
  pointer-events:none;
}
#crosshair:before,#crosshair:after{
  content:"";
  position:absolute;
  background:white;
}
#crosshair:before{
  width:24px;
  height:2px;
  top:11px;
}
#crosshair:after{
  width:2px;
  height:24px;
  left:11px;
}
#controls{
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
}
.btn{
  pointer-events:auto;
  position:absolute;
  width:65px;
  height:65px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(20,20,20,.55);
  color:white;
  font-size:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
}
#up{bottom:145px;left:105px}
#down{bottom:25px;left:105px}
#left{bottom:85px;left:30px}
#right{bottom:85px;left:180px}

#fire{bottom:42

Game Source: Neon City — Mobile Open World

Creator: EpicPhoenix98

Libraries: none

Complexity: moderate (119 lines, 1.9 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: neon-city-mobile-open-world-epicphoenix98" to link back to the original. Then publish at arcadelab.ai/publish.