בירור | עזרה ביצירת אפליקציה!

[טרמינל]

from pathlib import Path
html = r'''<!doctype html>
<html lang="he" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Harley Monster Ride</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#090909;font-family:Arial}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:18px;right:18px;color:#fff;background:#000b;padding:14px 18px;border:1px solid #777;border-radius:12px;font-size:18px}
#start{position:fixed;inset:0;display:grid;place-items:center;background:#000d;color:white}
button{font-size:24px;padding:16px 30px;border:0;border-radius:12px;cursor:pointer}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">מהירות: <span id="speed">0</span> קמ"ש<br>כוח: 999,000 כ"ס<br>חצים / WASD לנהיגה</div>
<div id="start"><button id="go">🏍️ START ENGINE</button></div>
<script>
const c=document.getElementById("c"),ctx=c.getContext("2d"),speedEl=document.getElementById("speed");
let W,H,keys={},started=false,speed=0,road=0;
function resize(){W=c.width=innerWidth*devicePixelRatio;H=c.height=innerHeight*devicePixelRatio;ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);W=innerWidth;H=innerHeight}
addEventListener("resize",resize);resize();
addEventListener("keydown",e=>keys[e.key.toLowerCase()]=1);
addEventListener("keyup",e=>keys[e.key.toLowerCase()]=0);

let audio,osc,gain;
function engine(){
 audio=new (window.AudioContext||window.webkitAudioContext)();
 osc=audio.createOscillator(); gain=audio.createGain();
 osc.type="sawtooth"; osc.frequency.value=65; gain.gain.value=.035;
 osc.connect(gain).connect(audio.destination);osc.start();
}
document.getElementById("go").onclick=()=>{started=true;document.getElementById("start").style.display="none";engine()};

function draw(){
 ctx.fillStyle="#18221a";ctx.fillRect(0,0,W,H);
 // sky
 ctx.fillStyle="#52789b";ctx.fillRect(0,0,W,H*.48);
 // road
 const cx=W/2, rw=Math.min(W*.72,760);
 ctx.fillStyle="#222";ctx.beginPath();ctx.moveTo(cx-rw*.22,H*.48);ctx.lineTo(cx-rw/2,H);ctx.lineTo(cx+rw/2,H);ctx.lineTo(cx+rw*.22,H*.48);ctx.closePath();ctx.fill();
 // lane marks
 ctx.strokeStyle="#eee";ctx.lineWidth=5;ctx.setLineDash([35,35]);ctx.lineDashOffset=-road;
 ctx.beginPath();ctx.moveTo(cx,H*.5);ctx.lineTo(cx,H);ctx.stroke();ctx.setLineDash([]);
 // scenery
 ctx.fillStyle="#111";for(let i=0;i<9;i++){let y=(i*90+road*.7)%H;ctx.fillRect(40,y,35,20);ctx.fillRect(W-75,y,35,20)}
 // bike
 const bx=cx, by=H*.74;
 ctx.fillStyle="#090909";ctx.beginPath();ctx.arc(bx-38,by+62,30,0,7);ctx.arc(bx+42,by+62,30,0,7);ctx.fill();
 ctx.strokeStyle="#aaa";ctx.lineWidth=10;ctx.beginPath();ctx.moveTo(bx-38,by+62);ctx.lineTo(bx,by+15);ctx.lineTo(bx+42,by+62);ctx.stroke();
 ctx.fillStyle="#b31313";ctx.beginPath();ctx.ellipse(bx,by+30,52,25,0,0,7);ctx.fill();
 ctx.fillStyle="#111";ctx.fillRect(bx+35,by-5,65,8);
 // exhaust glow
 ctx.fillStyle="#ff7a00";ctx.beginPath();ctx.arc(bx+48,by+48,8,0,7);ctx.fill();
 if(started){
   let accel=keys.w||keys.arrowup, brake=keys.s||keys.arrowdown;
   if(accel)speed=Math.min(420,speed+2.5); else speed=Math.max(0,speed-0.7);
   if(brake)speed=Math.max(0,speed-5);
   road+=speed*.12;
   if(keys.a||keys.arrowleft)road-=2;
   if(keys.d||keys.arrowright)road+=2;
   speedEl.textContent=Math.round(speed);
   if(osc)osc.frequency.value=55+speed*.7;
 }
 requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>'''
p=Path("/mnt/data/harley_monster_ride.html")
p.write_text(html,encoding="utf-8")
print(p)

יש לי את הקודים האלו וזה קודים ליצירת משחק ואני לא זוכר את הסדר ליצירת תיקיה קבצים וכו אולי מישהו זוכר יודע אשמח לתגובה תודה רבה!

[המלאך]

@טרמינל יש תבנית קוד בסרגל כלים, יהיה יותר נח לעזור לך אם תשתמש בו.

[בינארי חכם]

פשוט תייצא את זה בתור HTML
ונראה לי שחסרים כמה פריטים במשחק...

Spoiler

ואתה שוב לא כותב נכון את הכותרת לנושא...