YASH CITY LIFE
by PlasmaFox31440 lines6.1 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>YASH CITY LIFE</title>
<style>
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background:#55a447;
font-family:Arial;
}
canvas{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
#top{
position:fixed;
top:10px;
left:10px;
right:10px;
display:flex;
justify-content:space-between;
color:white;
font-size:20px;
font-weight:bold;
text-shadow:2px 2px black;
z-index:5;
}
#buttons{
position:fixed;
bottom:15px;
left:15px;
right:15px;
display:flex;
justify-content:space-between;
z-index:10;
}
#move{
width:160px;
height:160px;
position:relative;
}
button{
background:#3150d8;
color:white;
border:3px solid #777;
font-weight:bold;
}
.move{
position:absolute;
width:55px;
height:55px;
border-radius:15px;
font-size:25px;
}
#up{left:52px;top:0}
#down{left:52px;bottom:0}
#left{left:0;top:52px}
#right{right:0;top:52px}
.actions{
display:flex;
gap:8px;
align-items:end;
}
.action{
width:65px;
height:65px;
border-radius:50%;
}
#message{
position:fixed;
left:50%;
bottom:190px;
transform:translateX(-50%);
background:#000;
color:#fff;
padding:12px;
border-radius:10px;
display:none;
z-index:20;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<div id="top">
<div>YASH CITY LIFE</div>
<div id="time">08:00 ☀️</div>
<div>₹50000 ❤️100</div>
</div>
<div id="message"></div>
<div id="buttons">
<div id="move">
<button class="move" id="up">▲</button>
<button class="move" id="down">▼</button>
<button class="move" id="left">◀</button>
<button class="move" id="right">▶</button>
</div>
<div class="actions">
<button class="action" id="talk">TALK</button>
<button class="action" id="car">CAR</button>
<button class="action" id="phone">PHONE</button>
</div>
</div>
<script>
var canvas=document.getElementById("game");
var ctx=canvas.getContext("2d");
function resize(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}
resize();
window.addEventListener("resize",resize);
var player={
x:700,
y:500
};
var keys={
up:false,
down:false,
left:false,
right:false
};
var cars=[
{x:400,y:400,color:"red"},
{x:850,y:400,color:"blue"},
{x:1100,y:700,color:"yellow"},
{x:500,y:850,color:"purple"}
];
var buildings=[
{x:100,y:100,w:250,h:180,name:"YASH HOME",color:"#875f43"},
{x:500,y:100,w:300,h:180,name:"MEGA MALL",color:"#934bbb"},
{x:950,y:100,w:250,h:180,name:"SCHOOL",color:"#c78336"},
{x:100,y:600,w:250,h:180,name:"CLOTH SHOP",color:"#bd4672"},
{x:950,y:550,w:250,h:180,name:"PET SHOP",color:"#c99440"},
{x:500,y:900,w:300,h:180,name:"CAR SHOWROOM",color:"#399879"}
];
function draw(){
var w=canvas.width;
var h=canvas.height;
ctx.fillStyle="#58a448";
ctx.fillRect(0,0,w,h);
var camX=w/2-player.x;
var camY=h/2-player.y;
ctx.save();
ctx.translate(camX,camY);
ctx.fillStyle="#444";
ctx.fillRect(0,350,1500,100);
ctx.fillRect(0,800,1500,100);
ctx.fillRect(350,0,100,1300);
ctx.fillRect(800,0,100,1300);
ctx.strokeStyle="#eee";
ctx.lineWidth=4;
ctx.setLineDash([25,25]);
ctx.beginPath();
ctx.moveTo(0,400);
ctx.lineTo(1500,400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,850);
ctx.lineTo(1500,850);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(400,0);
ctx.lineTo(400,1300);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(850,0);
ctx.lineTo(850,1300);
ctx.stroke();
ctx.setLineDash([]);
for(var i=0;i<buildings.length;i++){
var b=buildings[i];
ctx.fillStyle=b.color;
ctx.fillRect(
b.x,
b.y,
b.w,
b.h
);
ctx.fillStyle="white";
ctx.font="bold 20px Arial";
ctx.fillText(
b.name,
b.x+15,
b.y+35
);
ctx.fillStyle="#bde5ff";
for(var xx=b.x+20;xx<b.x+b.w-20;xx+=55){
for(var yy=b.y+60;yy<b.y+b.h-15;yy+=50){
ctx.fillRect(xx,yy,30,28);
}
}
}
for(var i=0;i<cars.length;i++){
var c=cars[i];
ctx.fillStyle=c.color;
ctx.fillRect(
c.x-40,
c.y-20,
80,
40
);
ctx.fillStyle="#111";
ctx.fillRect(
c.x-22,
c.y-15,
44,
15
);
ctx.beginPath();
ctx.arc(c.x-25,c.y+20,9,0,Math.PI*2);
ctx.arc(c.x+25,c.y+20,9,0,Math.PI*2);
ctx.fill();
}
ctx.fillStyle="#ffd0a0";
ctx.beginPath();
ctx.arc(
player.x,
player.y-25,
18,
0,
Math.PI*2
);
ctx.fill();
ctx.fillStyle="#1670c0";
ctx.fillRect(
player.x-20,
player.y-5,
40,
50
);
ctx.fillStyle="white";
ctx.font="bold 16px Arial";
ctx.fillText(
"YASH",
player.x-23,
player.y+70
);
ctx.restore();
}
function update(){
var speed=5;
if(keys.up)player.y-=speed;
if(keys.down)player.y+=speed;
if(keys.left)player.x-=speed;
if(keys.right)player.x+=speed;
player.x=Math.max(30,Math.min(1450,player.x));
player.y=Math.max(30,Math.min(1250,player.y));
draw();
requestAnimationFrame(update);
}
function control(id,key){
var b=document.getElementById(id);
b.addEventListener("touchstart",function(e){
e.preventDefault();
keys[key]=true;
});
b.addEventListener("touchend",function(e){
e.preventDefault();
keys[key]=false;
});
b.addEventListener("mousedown",function(){
keys[key]=true;
});
b.addEventListener("mouseup",function(){
keys[key]=false;
});
}
control("up","up");
control("down","down");
control("left","left");
control("right","right");
document.getElementById("talk").onclick=function(){
var m=document.getElementById("message");
m.innerHTML="👋 Yash: Namaste! City mein sab log se baat kar sakte ho.";
m.style.display="block";
setTimeout(function(){
m.style.display="none";
},2500);
};
document.getElementById("car").onclick=function(){
var m=document.getElementById("message");
m.innerHTML="🚗 Car ke paas jaakar CAR button dabao.";
m.style.display="block";
setTimeout(function(){
m.style.display="none";
},2500);
};
document.getElementById("phone").onclick=function(){
var m=document.getElementById("message");
m.innerHTML="📱 Yash Phone — Map, Contacts, Cars aur Properties";
m.style.display="block";
setTimeout(function(){
m.style.display="none";
},2500);
};
var minutes=480;
setInterval(function(){
minutes++;
if(minutes>=1440)minutes=0;
var hour=Math.floor(minutes/60);
var min=minutes%60;
document.getElementById("time").innerHTML=
String(hour).padStart(2,"0")+":"+
String(min).padStart(2,"0")+" "+
(hour>=6&&hour<18?"☀️":"🌙");
},1000);
update();
</script>
</body>
</html>Game Source: YASH CITY LIFE
Creator: PlasmaFox31
Libraries: none
Complexity: complex (440 lines, 6.1 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: yash-city-life-plasmafox31" to link back to the original. Then publish at arcadelab.ai/publish.