3 months 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>



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

Did you know that today is #InternationalJazzDay? 🎷😎

No? 😯 Well, we couldn't pass up this date!

And what better to celebrate this day than #Pecaminosa #OST? 🎷

Let us know what you think about it and have a great weekend!

We are under attack!

"Thanks guys for endless hours of fun." πŸ‘

(My first fan art. Read the article, please.)

#sonic #mario #photoshop

Today I was setting up the location of the first boss. His name is "Father" and he is the first of the Patagonians. His task is to guard the road to the House.πŸ›‘πŸ—‘ Bookmark pre-launch pageπŸ”–πŸ”–πŸ”–

https://www.kickstarter.com/projects/rdvindiegame/the-patagonian…

Quantum precognition is one of the most powerful cards. End game cards & equipment. Demo/alpha build boss is no match for this deck.

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

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

So here's the first of the zodiac signs i will make for the next weeks.

In the quest for accessibility, I'm adding Resurrection Shrines for players on the 'novice' end of the platforming spectrum.

In order to unlock the power of a Shrine, you must collect 3 'Souls' from your dead corpses! (the floating blue orbs)

Shuiro Haname. #Commission

Commission for @ShuHaname