5 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>

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

Have a good Boi

Protege el conocimiento, salva la historia. Guardian of Lore es un platformer 2D en el que debes luchar para mantener viva la memoria de la mitología latinoamericana. El juego llegará a Steam el 18 de mayo: https://steam.pm/app/1211740 #ScreenshotSaturday

What you all think

Spaaaace~

These are background sprites I've created for a game I'm working on at school ^w^ Click on the post to see how the sprites connect. You won't regret it! (personally, I think it's pretty heheh)

Drawn in Piskel using my mouse. Whaddya think?

Only true badasses may pass! #conceptart #art #gamedesign

Some Shadow boss fight gameplay 👾

Some time ago, we posted a screenshot of the Mexico level. A curiosity about it is that, like some other scenarios of the game, it was inspired by a real landscape, The Basaltic Prisms of Santa María Regla. It is one of the natural wonders of the country!

A 1h30 painting, coffee break.

My twitter: https://twitter.com/loupil100