kosop https://kosop7.github.io/ Wed, 25 Feb 2026 05:42:14 +0000 Wed, 25 Feb 2026 05:42:14 +0000 Jekyll v3.10.0 <style> body{ margin:0; background:#ffffff; font-family: system-ui, -apple-system, Segoe UI, Roboto; } .wrapper{ max-width:980px; margin:30px auto; padding:12px; text-align:center; } canvas{ width:100%; background:#fff; border-radius:14px; border:1px solid #e5e5e5; outline:none; } .hud{ display:flex; justify-content:center; gap:16px; margin:10px 0; font-weight:700; } </style> <div class="wrapper"> <h2>NEON ARENA</h2> <p>방향키 / WASD 이동 · 버티기 게임</p> <div class="hud"> <div>❤️ HP: <span id="hp">100</span></div> <div>⭐ SCORE: <span id="score">0</span></div> </div> <canvas id="game" width="960" height="600" tabindex="0"></canvas> </div> <script> const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); canvas.focus(); /* ================= INPUT ================= */ const key={l:0,r:0,u:0,d:0}; addEventListener("keydown",e=>{ if(e.key==="ArrowLeft"||e.key==="a") key.l=1; if(e.key==="ArrowRight"||e.key==="d") key.r=1; if(e.key==="ArrowUp"||e.key==="w") key.u=1; if(e.key==="ArrowDown"||e.key==="s") key.d=1; }); addEventListener("keyup",e=>{ if(e.key==="ArrowLeft"||e.key==="a") key.l=0; if(e.key==="ArrowRight"||e.key==="d") key.r=0; if(e.key==="ArrowUp"||e.key==="w") key.u=0; if(e.key==="ArrowDown"||e.key==="s") key.d=0; }); /* ================= PLAYER (BIRD) ================= */ const player={ x:480,y:300, vx:0,vy:0, speed:3, hp:100 }; /* ================= ENEMIES ================= */ const enemies=[]; let spawnTimer=0; /* ================= HUD ================= */ const hpEl=document.getElementById("hp"); const scoreEl=document.getElementById("score"); let score=0; /* ================= UTILS ================= */ function clamp(v,a,b){ return Math.max(a,Math.min(b,v)); } /* ================= GAME LOOP ================= */ function update(){ /* player movement */ player.vx=(key.r-key.l)*player.speed; player.vy=(key.d-key.u)*player.speed; player.x+=player.vx; player.y+=player.vy; player.x=clamp(player.x,20,940); player.y=clamp(player.y,20,580); /* enemy spawn */ spawnTimer++; if(spawnTimer>80){ spawnTimer=0; enemies.push({ x:Math.random()*960, y:-20, r:10, speed:1.5+Math.random()*1.5 }); } /* enemy move + collision */ enemies.forEach(e=>{ const dx=player.x-e.x; const dy=player.y-e.y; const d=Math.hypot(dx,dy); e.x+=dx/d*e.speed; e.y+=dy/d*e.speed; if(d<18){ player.hp-=0.4; } }); /* cleanup */ for(let i=enemies.length-1;i>=0;i--){ if(enemies[i].x<-50||enemies[i].x>1010||enemies[i].y>650){ enemies.splice(i,1); score++; } } hpEl.textContent=Math.max(0,player.hp|0); scoreEl.textContent=score; } /* ================= DRAW ================= */ function draw(){ ctx.clearRect(0,0,960,600); /* grid */ ctx.strokeStyle="rgba(0,0,0,0.04)"; for(let x=0;x<960;x+=48){ ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,600); ctx.stroke(); } for(let y=0;y<600;y+=48){ ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(960,y); ctx.stroke(); } /* bird (player) */ ctx.fillStyle="#00c896"; ctx.beginPath(); ctx.ellipse(player.x,player.y,12,8,0,0,Math.PI*2); ctx.fill(); /* wing */ ctx.strokeStyle="#00a77a"; ctx.beginPath(); ctx.moveTo(player.x-6,player.y); ctx.lineTo(player.x-18,player.y-6); ctx.stroke(); /* beak */ ctx.fillStyle="#ffb703"; ctx.beginPath(); ctx.moveTo(player.x+12,player.y); ctx.lineTo(player.x+20,player.y-4); ctx.lineTo(player.x+20,player.y+4); ctx.fill(); /* enemies */ ctx.fillStyle="#ff4d4d"; enemies.forEach(e=>{ ctx.beginPath(); ctx.arc(e.x,e.y,e.r,0,Math.PI*2); ctx.fill(); }); } /* ================= LOOP ================= */ function loop(){ if(player.hp>0){ update(); draw(); requestAnimationFrame(loop); }else{ ctx.fillStyle="rgba(255,255,255,.9)"; ctx.fillRect(0,0,960,600); ctx.fillStyle="#111"; ctx.font="28px sans-serif"; ctx.fillText("GAME OVER",400,300); } } loop(); </script> Wed, 04 Feb 2026 00:00:00 +0000 https://kosop7.github.io/2026/02/neon-post https://kosop7.github.io/2026/02/neon-post <style> html, body { margin: 0; padding: 0; background: #ffffff; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } /* ===== 게임 영역 ===== */ .game-wrap { width: 100%; padding: 32px 0 60px; } canvas { display: block; margin: 0 auto; background: transparent; } .ui { position: absolute; left: 50%; transform: translateX(-50%); color: #222; font-weight: 800; pointer-events: none; user-select: none; } #score { top: 14px; font-size: 34px; } #hint { bottom: 18%; font-size: 14px; opacity: .6; } #over { top: 38%; font-size: 26px; display: none; text-align: center; } #over small { display: block; margin-top: 10px; font-size: 14px; opacity: .6; } </style> <section class="game-wrap"> <div style="position:relative;"> <canvas id="game"></canvas> <div id="score" class="ui">0</div> <div id="hint" class="ui">탭 / 클릭 / 스페이스</div> <div id="over" class="ui"> GAME OVER <small>다시 시작: 탭 / 클릭 / 스페이스</small> </div> </div> </section> <script> /* ====================== CANVAS / RESIZE ====================== */ const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const DPR = Math.min(window.devicePixelRatio || 1, 2); function resize() { const maxW = Math.min(window.innerWidth, 520); const h = Math.min(window.innerHeight * 0.72, 680); canvas.style.width = maxW + 'px'; canvas.style.height = h + 'px'; canvas.width = maxW * DPR; canvas.height = h * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); } window.addEventListener('resize', resize); resize(); /* ====================== GAME CONSTANTS ====================== */ const GRAVITY = 0.45; const FLAP = -8.6; const PIPE_GAP = 160; const PIPE_W = 62; const PIPE_SPEED = 2.0; const GROUND_H = 90; /* ====================== GAME STATE ====================== */ let running = false; let gameOver = false; let score = 0; const bird = { x: 120, y: 300, vy: 0, rot: 0 }; let pipes = []; let spawnTimer = 0; const scoreEl = document.getElementById('score'); const hintEl = document.getElementById('hint'); const overEl = document.getElementById('over'); /* ====================== INPUT ====================== */ function flap() { if (!running || gameOver) { reset(); running = true; hintEl.style.display = 'none'; return; } bird.vy = FLAP; } window.addEventListener('keydown', e => { if (e.code === 'Space') flap(); }); window.addEventListener('mousedown', flap); window.addEventListener('touchstart', e => { e.preventDefault(); flap(); }, { passive:false }); /* ====================== RESET ====================== */ function reset() { gameOver = false; score = 0; scoreEl.textContent = score; overEl.style.display = 'none'; bird.y = canvas.height / DPR / 2; bird.vy = 0; pipes = []; spawnTimer = 0; } /* ====================== PIPES ====================== */ function addPipe() { pipes.push({ x: canvas.width / DPR + 40, gapY: Math.random() * 260 + 120, passed: false }); } /* ====================== UPDATE ====================== */ function update() { if (!running || gameOver) return; bird.vy += GRAVITY; bird.y += bird.vy; bird.rot = Math.max(-0.5, Math.min(1.2, bird.vy / 10)); spawnTimer++; if (spawnTimer > 120) { addPipe(); spawnTimer = 0; } pipes.forEach(p => { p.x -= PIPE_SPEED; if (!p.passed && p.x + PIPE_W < bird.x) { p.passed = true; score++; scoreEl.textContent = score; } if ( bird.x + 14 > p.x && bird.x - 14 < p.x + PIPE_W && (bird.y < p.gapY - PIPE_GAP / 2 || bird.y > p.gapY + PIPE_GAP / 2) ) { gameOver = true; } }); if (bird.y > canvas.height / DPR - GROUND_H || bird.y < 0) { gameOver = true; } if (gameOver) overEl.style.display = 'block'; } /* ====================== DRAW BIRD (새 모양) ====================== */ function drawBird() { ctx.save(); ctx.translate(bird.x, bird.y); ctx.rotate(bird.rot); /* 몸통 */ ctx.fillStyle = '#ffdf3a'; ctx.beginPath(); ctx.ellipse(0, 0, 14, 11, 0, 0, Math.PI * 2); ctx.fill(); /* 날개 */ ctx.fillStyle = '#f1c40f'; ctx.beginPath(); ctx.moveTo(-4, 0); ctx.quadraticCurveTo(-22, -6, -18, 6); ctx.closePath(); ctx.fill(); /* 부리 */ ctx.fillStyle = '#ff8c00'; ctx.beginPath(); ctx.moveTo(14, -2); ctx.lineTo(22, 2); ctx.lineTo(14, 6); ctx.closePath(); ctx.fill(); /* 눈 */ ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(4, -4, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } /* ====================== DRAW LOOP ====================== */ function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); /* 파이프 */ ctx.fillStyle = '#2ecc71'; pipes.forEach(p => { ctx.fillRect(p.x, 0, PIPE_W, p.gapY - PIPE_GAP / 2); ctx.fillRect(p.x, p.gapY + PIPE_GAP / 2, PIPE_W, canvas.height / DPR); }); drawBird(); update(); requestAnimationFrame(draw); } draw(); </script> Wed, 04 Feb 2026 00:00:00 +0000 https://kosop7.github.io/2026/02/clumsy-bird https://kosop7.github.io/2026/02/clumsy-bird <style> canvas{ max-width:100%; border-radius:14px; touch-action:none; } </style> <div style="display:flex;justify-content:center;margin:40px 0;"> <canvas id="game" width="960" height="540"></canvas> </div> <script> /* ========================= A SMALL WORLD – EP.1 ========================= */ /* ---------- CORE ---------- */ const c = document.getElementById("game"); const ctx = c.getContext("2d"); /* ---------- MOBILE SAFETY ---------- */ document.addEventListener("touchmove",e=>e.preventDefault(),{passive:false}); /* ---------- SAVE ---------- */ const SAVE_KEY="smallworld_ep1"; const save = JSON.parse(localStorage.getItem(SAVE_KEY)) || { talked:{}, flags:{}, region:"village" }; function saveGame(){localStorage.setItem(SAVE_KEY,JSON.stringify(save));} /* ---------- STATE ---------- */ let state="title"; let dialog=null; let choiceIndex=0; /* ---------- WORLD ---------- */ const world={w:5200,h:2600}; let region=save.region; const regions={ village:{ sky1:"#6b88a6", sky2:"#14141a", ground:"#2b2926", name:"THE VILLAGE" }, forest:{ sky1:"#223322", sky2:"#000", ground:"#1a241a", name:"THE FOREST" }, gate:{ sky1:"#2a2a2a", sky2:"#000", ground:"#111", name:"THE GATE" } }; /* ---------- HERO ---------- */ const hero={x:1200,y:1400,speed:2.4,dir:1}; /* ---------- CAMERA ---------- */ const cam={x:0,y:0}; /* ---------- INPUT ---------- */ const keys={}; document.addEventListener("keydown",e=>{ keys[e.key]=true; if(state==="title") state="play"; }); document.addEventListener("keyup",e=>keys[e.key]=false); c.addEventListener("touchstart",e=>{ const t=e.touches[0]; if(t.clientX<c.width/2) keys["ArrowLeft"]=true; else keys["ArrowRight"]=true; }); c.addEventListener("touchend",()=>{keys["ArrowLeft"]=keys["ArrowRight"]=false}); /* ---------- NPC ---------- */ const npcs=[ {id:"old",x:900,y:1500,region:"village",name:"노인", talk:[ {t:"해가 지면, 사람은 자기 이야기를 하게 되지.",flag:"old1"}, {t:"길은 항상 있었어. 우리가 안 나갔을 뿐.",flag:"old2"} ]}, {id:"woman",x:1800,y:1480,region:"village",name:"여인", talk:[ {t:"숲 쪽으로 가봤어?",flag:"forest_hint"} ]}, {id:"child",x:2600,y:1450,region:"village",name:"아이", talk:[ {t:"저 멀리 반짝이는 게 있어.",flag:"gate_hint"} ]}, {id:"hunter",x:3400,y:1550,region:"forest",name:"사냥꾼", talk:[ {t:"여긴 길이 아니야. 선택이지.",flag:"hunter1"} ]}, {id:"guard",x:4800,y:1500,region:"gate",name:"문지기", talk:[ {t:"돌아갈 수도 있고, 넘어갈 수도 있다.",flag:"end_ready"} ]} ]; /* ---------- UTILS ---------- */ const clamp=(v,a,b)=>Math.max(a,Math.min(b,v)); /* ---------- UPDATE ---------- */ let time=0; function update(){ time+=0.04; if(state!=="play") return; if(!dialog){ if(keys["ArrowLeft"]){hero.x-=hero.speed;hero.dir=-1;} if(keys["ArrowRight"]){hero.x+=hero.speed;hero.dir=1;} if(keys["ArrowUp"]){hero.y-=hero.speed;} if(keys["ArrowDown"]){hero.y+=hero.speed;} } hero.x=clamp(hero.x,60,world.w-60); hero.y=clamp(hero.y,200,world.h-60); cam.x+=(hero.x-cam.x-c.width/2)*0.08; cam.y+=(hero.y-cam.y-c.height/2)*0.08; checkNPC(); } /* ---------- NPC CHECK ---------- */ function checkNPC(){ dialog=null; npcs.forEach(n=>{ if(n.region!==region) return; if(save.talked[n.id]) return; if(Math.abs(hero.x-n.x)<60 && Math.abs(hero.y-n.y)<60){ dialog=n; } }); } /* ---------- DRAW HERO ---------- */ function drawHero(){ const x=hero.x-cam.x,y=hero.y-cam.y; const sway=Math.sin(time)*4; ctx.fillStyle="rgba(0,0,0,.25)"; ctx.beginPath();ctx.ellipse(x,y+14,18,8,0,0,6.28);ctx.fill(); ctx.fillStyle="#f0c94a"; ctx.beginPath(); ctx.moveTo(x-20,y-10); ctx.lineTo(x+10,y-10); ctx.lineTo(x+24,y+28); ctx.lineTo(x-30,y+28); ctx.closePath();ctx.fill(); ctx.fillStyle="#3b3b3b"; ctx.fillRect(x-8,y-6,16,20); ctx.fillStyle="#efe8db"; ctx.beginPath();ctx.arc(x+hero.dir*2,y-22,9,0,6.28);ctx.fill(); } /* ---------- DRAW ---------- */ function draw(){ const r=regions[region]; const g=ctx.createLinearGradient(0,0,0,c.height); g.addColorStop(0,r.sky1);g.addColorStop(1,r.sky2); ctx.fillStyle=g;ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle=r.ground; ctx.fillRect(-cam.x,c.height-180-cam.y,world.w,260); npcs.forEach(n=>{ if(n.region!==region) return; const x=n.x-cam.x,y=n.y-cam.y; ctx.fillStyle="#888"; ctx.fillRect(x-6,y-20,12,20); ctx.fillStyle="#eee"; ctx.beginPath();ctx.arc(x,y-28,7,0,6.28);ctx.fill(); }); drawHero(); if(dialog){ ctx.fillStyle="rgba(0,0,0,.6)"; ctx.fillRect(80,c.height-140,c.width-160,80); ctx.fillStyle="#fff"; ctx.font="16px serif"; ctx.fillText(dialog.name+": "+dialog.talk[0].t,100,c.height-90); } if(state==="title"){ ctx.fillStyle="rgba(0,0,0,.6)"; ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle="#fff"; ctx.font="30px serif"; ctx.fillText("A SMALL WORLD",c.width/2-120,c.height/2-10); ctx.font="14px serif"; ctx.fillText("Tap / Press Any Key",c.width/2-80,c.height/2+20); } } /* ---------- INTERACT ---------- */ document.addEventListener("keydown",e=>{ if(e.key===" " && dialog){ save.talked[dialog.id]=true; saveGame(); dialog=null; if(hero.x>3000) region="forest"; if(hero.x>4400) region="gate"; save.region=region; } }); /* ---------- LOOP ---------- */ function loop(){update();draw();requestAnimationFrame(loop);} loop(); </script> Tue, 03 Feb 2026 00:00:00 +0000 https://kosop7.github.io/2026/02/game1-post https://kosop7.github.io/2026/02/game1-post <style> .tekken-wrap { display: flex; justify-content: center; margin: 40px 0 20px; } canvas { background: linear-gradient(#1a1a1a, #000); border: 2px solid #444; max-width: 100%; touch-action: none; } .controls { text-align: center; margin-bottom: 30px; user-select: none; } .controls button { font-size: 14px; padding: 10px 14px; margin: 4px; } </style> <div class="tekken-wrap"> <canvas id="tekken" width="820" height="420"></canvas> </div> <div class="controls"> <button ontouchstart="input.left=true;event.preventDefault()" ontouchend="input.left=false" onmousedown="input.left=true" onmouseup="input.left=false">◀</button> <button ontouchstart="input.right=true;event.preventDefault()" ontouchend="input.right=false" onmousedown="input.right=true" onmouseup="input.right=false">▶</button> <button ontouchstart="jump();event.preventDefault()" onclick="jump()">Q JUMP</button> <button ontouchstart="attack('punch');event.preventDefault()" onclick="attack('punch')">W PUNCH</button> <button ontouchstart="attack('kick');event.preventDefault()" onclick="attack('kick')">E KICK</button> <button ontouchstart="guard();event.preventDefault()" onclick="guard()">R GUARD</button> </div> <script> /* ===================== GLOBAL SAFETY ===================== */ document.addEventListener("touchmove", e => { e.preventDefault(); }, { passive:false }); /* ===================== CORE ===================== */ const canvas = document.getElementById("tekken"); const ctx = canvas.getContext("2d"); const GROUND = 330; /* ===================== INPUT ===================== */ const input = { left:false, right:false }; document.addEventListener("keydown", e=>{ if(e.key==="ArrowLeft"||e.key==="a") input.left=true; if(e.key==="ArrowRight"||e.key==="d") input.right=true; if(e.key==="q") jump(); if(e.key==="w") attack("punch"); if(e.key==="e") attack("kick"); if(e.key==="r") guard(); if(e.key==="Enter" && (gameState==="win"||gameState==="lose")) resetGame(); }); document.addEventListener("keyup", e=>{ if(e.key==="ArrowLeft"||e.key==="a") input.left=false; if(e.key==="ArrowRight"||e.key==="d") input.right=false; }); /* ===================== AUDIO (SAFE) ===================== */ let audio; document.addEventListener("pointerdown", ()=>{ if(!audio){ audio = new (window.AudioContext||window.webkitAudioContext)(); } },{once:true}); function hitSound(freq=180){ if(!audio) return; const o = audio.createOscillator(); o.frequency.value = freq; o.connect(audio.destination); o.start(); o.stop(audio.currentTime + 0.05); } /* ===================== FIGHTER ===================== */ function Fighter(x,color,dir,hp=100){ return { x, y:GROUND, vy:0, hp, maxHp:hp, dir, color, state:"idle", frame:0 }; } /* ===================== ENEMIES ===================== */ const enemies = [ { color:"#f44", hp:80 }, { color:"#fa4", hp:100 }, { color:"#f4f", hp:120 } ]; let enemyIndex = 0; /* ===================== GAME STATE ===================== */ let gameState = "fight"; let p1 = Fighter(180,"#4af",1,100); let p2 = Fighter(620,enemies[0].color,-1,enemies[0].hp); /* ===================== ACTIONS ===================== */ function jump(){ if(gameState!=="fight") return; if(p1.y===GROUND) p1.vy=-13; } function guard(){ if(gameState!=="fight") return; if(p1.state==="idle"){ p1.state="guard"; p1.frame=0; } } function attack(type){ if(gameState!=="fight") return; if(p1.state!=="idle") return; p1.state=type; p1.frame=0; const range = type==="kick"?50:35; if(Math.abs(p1.x-p2.x)<range){ if(p2.state!=="guard"){ p2.hp -= type==="kick"?14:10; p2.state="hit"; hitSound(type==="kick"?120:200); } } } /* ===================== AI ===================== */ function ai(){ if(gameState!=="fight") return; if(p2.state!=="idle") return; if(p2.x>p1.x+45) p2.x-=2; if(p2.x<p1.x-45) p2.x+=2; if(Math.random()<0.02){ p2.state=Math.random()<0.5?"punch":"kick"; if(Math.abs(p2.x-p1.x)<40){ if(p1.state!=="guard"){ p1.hp-=12; p1.state="hit"; hitSound(); } } } } /* ===================== PHYSICS ===================== */ function physics(p){ p.vy+=0.6; p.y+=p.vy; if(p.y>GROUND){ p.y=GROUND; p.vy=0; } } /* ===================== DRAW ===================== */ function drawFighter(p){ const x=p.x,y=p.y; ctx.strokeStyle=p.color; ctx.lineWidth=4; ctx.beginPath(); ctx.arc(x,y-80,10,0,Math.PI*2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x,y-70); ctx.lineTo(x,y-35); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x,y-60); ctx.lineTo(x+(p.state==="punch"?26:18)*p.dir,y-50); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x,y-35); ctx.lineTo(x+(p.state==="kick"?26:10)*p.dir,y); ctx.stroke(); } function hpBar(p,x){ ctx.fillStyle="#333"; ctx.fillRect(x,20,200,10); ctx.fillStyle="#0f0"; ctx.fillRect(x,20,(p.hp/p.maxHp)*200,10); } /* ===================== ROUND ===================== */ function nextEnemy(){ enemyIndex++; if(enemyIndex>=enemies.length){ gameState="win"; }else{ p2 = Fighter(620,enemies[enemyIndex].color,-1,enemies[enemyIndex].hp); } } function resetGame(){ enemyIndex=0; p1 = Fighter(180,"#4af",1,100); p2 = Fighter(620,enemies[0].color,-1,enemies[0].hp); gameState="fight"; } /* ===================== LOOP ===================== */ function update(){ if(gameState==="fight"){ if(input.left) p1.x-=4; if(input.right) p1.x+=4; physics(p1); physics(p2); ai(); [p1,p2].forEach(p=>{ p.frame++; if(p.frame>18){ p.state="idle"; p.frame=0; } }); if(p2.hp<=0) nextEnemy(); if(p1.hp<=0) gameState="lose"; } } function draw(){ ctx.clearRect(0,0,820,420); ctx.fillStyle="#555"; ctx.fillRect(0,GROUND,820,5); drawFighter(p1); drawFighter(p2); hpBar(p1,60); hpBar(p2,560); if(gameState==="win"||gameState==="lose"){ ctx.fillStyle="rgba(0,0,0,0.7)"; ctx.fillRect(0,0,820,420); ctx.fillStyle="#fff"; ctx.font="28px sans-serif"; ctx.fillText(gameState==="win"?"YOU WIN!":"YOU LOSE",320,180); ctx.font="16px sans-serif"; ctx.fillText("ENTER : 재시작",330,220); } } function loop(){ update(); draw(); requestAnimationFrame(loop); } loop(); </script> Tue, 03 Feb 2026 00:00:00 +0000 https://kosop7.github.io/2026/02/game-post https://kosop7.github.io/2026/02/game-post