5 days ago

There is a lot of bugs sorry not the undertale the game its gostie world demo


Hey look i got yall something look its the demo but its going to be an apk file its not done and its on html sorry

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Gostie World - Full Battle</title>

<style>

body, html {margin:0; padding:0; width:100%; height:100%; overflow:hidden; font-family:Arial,sans-serif; background:#000;}

.fade {transition: opacity 1s; opacity:1;}

.hidden {opacity:0; pointer-events:none; display:none;}

#menu {position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000;color:white; z-index:20;}

#menu h1{font-size:3em;margin-bottom:40px;text-shadow:0 0 10px #fff;}

#menu button{margin:10px;padding:15px 40px;font-size:1.2em;color:black;background:white;border:none;border-radius:8px;cursor:pointer;transition: all 0.3s;}

#menu button:hover{transform:scale(1.1);background:#ddd;}

#menu button:active{transform:scale(0.95);background:#bbb;}

#cutscene{position:absolute;width:100%;height:100%;background: linear-gradient(to bottom,#111 0%,#333 100%); display:flex;align-items:flex-end;justify-content:center; z-index:19; opacity:0; display:none;}

.character{width:50px;height:100px;background:white;margin:0 20px;animation:walk 8s linear forwards;}

@keyframes walk {0% {transform:translateX(-300px);} 100%{transform:translateX(300px);}}

#bridge{position:absolute;bottom:50px;width:100%;height:20px;background:#555;}

.lightning{position:absolute;width:100%;height:100%;background:white;opacity:0;}

#titleScene{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-size:3em;opacity:0; z-index:18; display:none;}

#ghost{font-size:2em;opacity:0;margin-top:20px;}

#game{position:absolute;width:100%;height:100%;background:#111; z-index:1; display:flex;justify-content:center;align-items:center; opacity:0; display:none;}

#map{position:relative;width:800px;height:600px;background:#222;overflow:hidden;}

#player{position:absolute;width:40px;height:40px;background:rgba(255,255,255,0.8);border-radius:50%;top:280px;left:380px;}

#npc{position:absolute;width:40px;height:40px;background:blue;border-radius:5px;top:200px;left:400px;opacity:0;}

#dialogueBox{position:absolute;bottom:20px;width:90%;height:120px;background:black;color:white;font-size:1.2em;padding:10px;opacity:0; z-index:25;border-radius:10px; display:none;}

.enemyBullet{position:absolute;width:10px;height:10px;background:white;border-radius:50%;}

#qteButton{position:absolute;width:80px;height:80px;background:red;border-radius:50%;bottom:150px;left:50%;transform:translateX(-50%);display:none; z-index:30;}

#battleMenu{position:absolute;width:300px;height:150px;background:rgba(0,0,0,0.8);bottom:20px;left:50%;transform:translateX(-50%);border-radius:10px;display:none; flex-direction:column; justify-content:center; align-items:center; z-index:30;}

#battleMenu button{margin:5px;padding:10px 20px;font-size:1.2em;color:white;background:#444;border:none;border-radius:5px;cursor:pointer;}

#battleMenu button:hover{background:#666;}

#door{position:absolute;width:60px;height:100px;background:brown;bottom:0;left:370px;display:none;}

#joystickContainer{position:absolute;bottom:50px;left:50px;width:120px;height:120px;background:rgba(255,255,255,0.2);border-radius:50%;touch-action:none; z-index:11;}

#joystick{position:absolute;width:60px;height:60px;background:rgba(255,255,255,0.6);border-radius:50%;top:30px;left:30px;transform-origin:center;}

</style>

</head>

<body>

<div id="menu">

<h1>Gostie World</h1>

<button onclick="startCutscene()">New Game</button>

<button onclick="alert('Load Game not ready')">Load Game</button>

<button onclick="alert('Settings not ready')">Settings</button>

<button onclick="window.close()">Exit</button>

</div>

<div id="cutscene">

<div class="character"></div>

<div class="character"></div>

<div id="bridge"></div>

<div id="lightning" class="lightning"></div>

</div>

<div id="titleScene">

<div id="titleText"></div>

<div id="ghost">👻</div>

</div>

<div id="game">

<div id="map">

<div id="player"></div>

<div id="npc"></div>

<div id="door"></div>

</div>

</div>

<div id="dialogueBox"></div>

<div id="qteButton"></div>

<div id="battleMenu">

<button onclick="playerAction('Attack')">Attack</button>

<button onclick="playerAction('Talk')">Talk</button>

<button onclick="playerAction('Flee')">Flee</button>

</div>

<div id="joystickContainer">

<div id="joystick"></div>

</div>

<audio id="bgSound" loop autoplay>

<source src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_87adba54d3.mp3?filename=rain-and-thunder-ambient-111154.mp3" type="audio/mpeg">

</audio>

<script>

// Elements

const menu=document.getElementById('menu');

const cutscene=document.getElementById('cutscene');

const titleScene=document.getElementById('titleScene');

const lightning=document.getElementById('lightning');

const titleText=document.getElementById('titleText');

const ghost=document.getElementById('ghost');

const game=document.getElementById('game');

const player=document.getElementById('player');

const map=document.getElementById('map');

const npc=document.getElementById('npc');

const dialogueBox=document.getElementById('dialogueBox');

const qteButton=document.getElementById('qteButton');

const battleMenu=document.getElementById('battleMenu');

const door=document.getElementById('door');

// Fade functions

function fadeIn(el){el.style.display='block'; setTimeout(()=>{ el.style.opacity=1; },10); el.style.pointerEvents='auto';}

function fadeOut(el){el.style.opacity=0; el.style.pointerEvents='none'; setTimeout(()=>{ el.style.display='none'; },1000);}

// Cutscene

function startCutscene(){

fadeOut(menu);

fadeIn(cutscene);

setTimeout(()=>{lightning.style.opacity=1; setTimeout(()=>{lightning.style.opacity=0;},200);},4000);

setTimeout(()=>{fadeOut(cutscene); startTitleScene();},8000);

}

// Title

function startTitleScene(){

fadeIn(titleScene);

titleText.innerHTML='';

typeWriter("Gostie World",0,100,()=>{

fadeIn(ghost);

setTimeout(()=>{fadeOut(titleScene); startGame();},2000);

});

}

function typeWriter(text,i,speed,callback){

if(i<text.length){ titleText.innerHTML+=text.charAt(i); setTimeout(()=>typeWriter(text,i+1,speed,callback),speed);}

else callback();

}

// Game start

function startGame(){fadeIn(game); setTimeout(startNPCEncounter,1000);}

// Player movement

const speed=4; const keys={};

document.addEventListener('keydown',e=>keys[e.key]=true);

document.addEventListener('keyup',e=>keys[e.key]=false);

// Joystick

let joystick=document.getElementById('joystick');

let joystickContainer=document.getElementById('joystickContainer');

let joystickCenter={x:joystickContainer.offsetWidth/2,y:joystickContainer.offsetHeight/2};

let moveVector={x:0,y:0};

joystickContainer.addEventListener('pointerdown',startJoystick);

joystickContainer.addEventListener('pointermove',moveJoystick);

joystickContainer.addEventListener('pointerup',resetJoystick);

joystickContainer.addEventListener('pointercancel',resetJoystick);

function startJoystick(e){ e.preventDefault(); moveJoystick(e);}

function moveJoystick(e){

const rect=joystickContainer.getBoundingClientRect();

let x=e.clientX-rect.left-joystickCenter.x;

let y=e.clientY-rect.top-joystickCenter.y;

let distance=Math.sqrt(x*x+y*y); const maxDistance=40;

if(distance>maxDistance){x=x/distance*maxDistance;y=y/distance*maxDistance;}

joystick.style.transform=`translate(${x}px,${y}px)`; moveVector.x=x/maxDistance; moveVector.y=y/maxDistance;

}

function resetJoystick(){ joystick.style.transform='translate(0px,0px)'; moveVector={x:0,y:0};}

function movePlayer(){

let top=player.offsetTop; let left=player.offsetLeft;

if(keys['ArrowUp']||keys['w']) top-=speed;

if(keys['ArrowDown']||keys['s']) top+=speed;

if(keys['ArrowLeft']||keys['a']) left-=speed;

if(keys['ArrowRight']||keys['d']) left+=speed;

top+=moveVector.y*speed; left+=moveVector.x*speed;

top=Math.max(0,Math.min(map.offsetHeight-40,top));

left=Math.max(0,Math.min(map.offsetWidth-40, left));

player.style.top=top+'px';

player.style.left=left+'px';

requestAnimationFrame(movePlayer);

}

movePlayer();

// NPC Dialogue & Battle

let enemyHP=5;

let enemyAlive=true;

function startNPCEncounter(){

fadeIn(npc);

dialogueBox.innerText="Oh, what are you doing here? Let me show you how things work around here.";

fadeIn(dialogueBox);

setTimeout(()=>{dialogueBox.innerText="...Well I guess you're human. The master would be happy for your power.";},2000);

setTimeout(()=>{fadeOut(dialogueBox); startBattle();},4000);

}

let enemyInterval;

function startBattle(){

showBattleMenu();

startEnemyAttack();

}

function startEnemyAttack(){

if(!enemyAlive) return;

enemyInterval=setInterval(()=>{

let pattern=Math.random()<0.5?enemyAttackPattern1:enemyAttackPattern2;

pattern();

},2000);

}

function stopEnemyAttack(){ clearInterval(enemyInterval); }

// Enemy attack patterns

function enemyAttackPattern1(){

for(let i=0;i<5;i++){

spawnBullet(Math.random()*760,0,5,0);

}

}

function enemyAttackPattern2(){

for(let i=0;i<10;i++){

spawnBullet(i*80,0,3,0);

}

}

// Spawn bullet

function spawnBullet(x,y,vy,vx){

if(!enemyAlive) return;

let b=document.createElement('div'); b.className='enemyBullet';

b.style.top=y+'px'; b.style.left=x+'px';

map.appendChild(b);

let fall=setInterval(()=>{

let top=parseInt(b.style.top); let left=parseInt(b.style.left);

top+=vy; left+=vx;

b.style.top=top+'px'; b.style.left=left+'px';

if(top>600 || left>800){ b.remove(); clearInterval(fall);}

else checkPlayerHit(b,fall);

},16);

}

// Check hit

function checkPlayerHit(b,interval){

let pTop=parseInt(player.style.top), pLeft=parseInt(player.style.left);

let bTop=parseInt(b.style.top), bLeft=parseInt(b.style.left);

if(bTop+10>pTop && bTop<pTop+40 && bLeft+10>pLeft && bLeft<pLeft+40){

b.remove(); clearInterval(interval);

dialogueBox.innerText="You got hit!"; fadeIn(dialogueBox);

setTimeout(()=>fadeOut(dialogueBox),500);

}

}

// Battle Menu

function showBattleMenu(){ fadeIn(battleMenu); stopEnemyAttack(); }

function hideBattleMenu(){ fadeOut(battleMenu); startEnemyAttack(); }

// Player Actions

function playerAction(action){

if(!enemyAlive) return;

hideBattleMenu();

if(action==='Attack'){

// QTE Attack

fadeIn(qteButton); let success=false;

qteButton.onclick=()=>{success=true; fadeOut(qteButton);}

function keyPress(e){ if(e.key===' '){success=true; fadeOut(qteButton); } }

document.addEventListener('keydown',keyPress);

setTimeout(()=>{

document.removeEventListener('keydown',keyPress);

fadeOut(qteButton);

if(success){ enemyHP--; dialogueBox.innerText="Hit!"; fadeIn(dialogueBox); setTimeout(()=>fadeOut(dialogueBox),500);}

else { dialogueBox.innerText="Miss!"; fadeIn(dialogueBox); setTimeout(()=>fadeOut(dialogueBox),500);}

if(enemyHP<=0) enemyDefeated();

else showBattleMenu();

},2000);

}

else if(action==='Talk'){

enemyHP--; // Talking weakens enemy

dialogueBox.innerText="You tried talking... enemy seems calmer."; fadeIn(dialogueBox); setTimeout(()=>fadeOut(dialogueBox),1000);

if(enemyHP<=0) giveMercy();

else showBattleMenu();

}

else if(action==='Flee'){

dialogueBox.innerText="You fled the battle!"; fadeIn(dialogueBox);

fadeIn(door); fadeOut(npc);

}

}

// Enemy defeated

function enemyDefeated(){

enemyAlive=false;

dialogueBox.innerText="You're stronger than I thought."; fadeIn(dialogueBox);

fadeOut(npc); fadeIn(door);

}

// Give mercy

function giveMercy(){

enemyAlive=false;

dialogueBox.innerText="Thanks human"; fadeIn(dialogueBox);

fadeOut(npc); fadeIn(door);

}

</script>

</body>

</html>

1


0 comments

Loading...

Next up

Game in development problem was here so i had to give a menu screen hope you like it sorry for not showing something bigger

Shoobies leave a sticky trail of mucus in their wake, which can impede movement for any creature that steps in it.

What do you think guys in my robot?Just a beginner in 3d modeling..

My instagram https://www.instagram.com/rojhonbb/

A Shiny Mega Gengar 🌟 For @ManutkArt 's #ThreeColorsChallenge!

If you have more of an acquired taste, the restaurants in Niravasi have you covered! Maybe skip the salad bar, though.

I mostly build 3D First Person Shooter game mechanics in Unity, and in this I'm just showing C4 mechanics I made for a little side project I am working on! :)

I made a small jungle house.

NEW AWP DESIGN !

Let's gooo! Sub-15 minutes achieved thanks to a new skip found by @mazou !

My new Endfall demo Any% world record is 14:48! Used safe strats and got too excited here and there, but I'm satisfied. Thanks to @ElPichon for the game, and y'all beat my time! ;D