mirror of
https://github.com/MrEidam/bigredbutton.git
synced 2026-04-17 15:43:31 +00:00
Secret RPG game :D
This commit is contained in:
34
RPG/index.html
Normal file
34
RPG/index.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>BRB - Secret RPG</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/rpg.css">
|
||||||
|
<link rel="shortcut icon" href="../img/rpg.svg" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="game">
|
||||||
|
<div id="stats">
|
||||||
|
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||||
|
<span class="stat">Health: <strong><span id="hpText">100</span></strong></span>
|
||||||
|
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||||
|
</div>
|
||||||
|
<div id="controls">
|
||||||
|
<button id="button1">Go to Store</button>
|
||||||
|
<button id="button2">Go to Cave</button>
|
||||||
|
<button id="button3">Fight the Dragon</button>
|
||||||
|
</div>
|
||||||
|
<div id="monsterStats">
|
||||||
|
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||||
|
<span class="stat">Health: <strong><span id="monsterHp"></span></strong></span>
|
||||||
|
</div>
|
||||||
|
<div id="text">
|
||||||
|
Welcome to BRB - Secret RPG. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../js/rpg.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
css/rpg.css
Normal file
43
css/rpg.css
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
body{
|
||||||
|
background-color: darkblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text{
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game{
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 400px;
|
||||||
|
background: lightgray;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls{
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px #000 solid;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats{
|
||||||
|
border: 1px #000 solid;
|
||||||
|
color: #000;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monsterStats{
|
||||||
|
display: none;
|
||||||
|
border: 1px #000 solid;
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
background: #f00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat{
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
32
img/rpg.svg
Normal file
32
img/rpg.svg
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
|
||||||
|
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
|
||||||
|
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
|
||||||
|
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
|
||||||
|
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
|
||||||
|
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
|
||||||
|
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
|
||||||
|
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
|
||||||
|
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
|
||||||
|
]>
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37.5 37.5"
|
||||||
|
style="enable-background:new 0 0 37.5 37.5;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<metadata>
|
||||||
|
<sfw xmlns="&ns_sfw;">
|
||||||
|
<slices></slices>
|
||||||
|
<sliceSourceBounds bottomLeftOrigin="true" height="37.5" width="37.5" x="3.5" y="2"></sliceSourceBounds>
|
||||||
|
</sfw>
|
||||||
|
</metadata>
|
||||||
|
<path class="st0" d="M19.4,2l3.9,11.8c0.1,0.2,0.2,0.4,0.4,0.4l11.8,3.9c0.6,0.2,0.6,1.1,0,1.3l-11.8,3.9c-0.2,0.1-0.4,0.2-0.4,0.4
|
||||||
|
l-3.9,11.8c-0.2,0.6-1.1,0.6-1.3,0l-3.9-11.8c-0.1-0.2-0.2-0.4-0.4-0.4L2,19.4c-0.6-0.2-0.6-1.1,0-1.3l11.8-3.9
|
||||||
|
c0.2-0.1,0.4-0.2,0.4-0.4L18.1,2C18.4,1.4,19.2,1.4,19.4,2z"/>
|
||||||
|
<path d="M18.8,37.5c-0.9,0-1.8-0.6-2.1-1.5L13,24.6L1.5,20.9C0.6,20.6,0,19.8,0,18.8c0-0.9,0.6-1.8,1.5-2.1L12.9,13l3.8-11.5
|
||||||
|
C17,0.6,17.8,0,18.8,0s1.8,0.6,2.1,1.5l3.7,11.4L36,16.6c0.9,0.3,1.5,1.1,1.5,2.1c0,0.9-0.6,1.8-1.5,2.1l-11.4,3.7l-3.7,11.4
|
||||||
|
C20.6,36.9,19.7,37.5,18.8,37.5z M4.9,18.8l9.4,3.1c0.7,0.2,1.2,0.7,1.4,1.4l3.1,9.4l3.1-9.4c0.2-0.7,0.7-1.2,1.4-1.4l9.4-3.1
|
||||||
|
l-9.4-3.1c-0.7-0.2-1.2-0.7-1.4-1.4l-3.1-9.4l-3.1,9.4c-0.2,0.7-0.7,1.2-1.4,1.4C14.3,15.7,4.9,18.8,4.9,18.8z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
372
js/rpg.js
Normal file
372
js/rpg.js
Normal file
@@ -0,0 +1,372 @@
|
|||||||
|
let xp = 0;
|
||||||
|
let hp = 100;
|
||||||
|
let gold = 50;
|
||||||
|
let currentWeapon = 0;
|
||||||
|
let fighting = 0;
|
||||||
|
let monsterHp;
|
||||||
|
let inventory = [
|
||||||
|
'Boxing gloves',
|
||||||
|
];
|
||||||
|
|
||||||
|
//? Buttons
|
||||||
|
const btn1 = document.querySelector('#button1');
|
||||||
|
const btn2 = document.querySelector('#button2');
|
||||||
|
const btn3 = document.querySelector('#button3');
|
||||||
|
|
||||||
|
//? Player Texts
|
||||||
|
const text = document.querySelector('#text');
|
||||||
|
const xpText = document.querySelector('#xpText');
|
||||||
|
const hpText = document.querySelector('#hpText');
|
||||||
|
const goldText = document.querySelector('#goldText');
|
||||||
|
|
||||||
|
//? Monster
|
||||||
|
const monsterStats = document.querySelector('#monsterStats');
|
||||||
|
const monsterName = document.querySelector('#monsterName');
|
||||||
|
const monsterHpText = document.querySelector('#monsterHp');
|
||||||
|
|
||||||
|
const monsters = [
|
||||||
|
{
|
||||||
|
name: 'Slime',
|
||||||
|
level: 2,
|
||||||
|
hp: 15,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Unicorn',
|
||||||
|
level: 8,
|
||||||
|
hp: 70,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Dragon',
|
||||||
|
level: 25,
|
||||||
|
hp: 500,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const weapons = [
|
||||||
|
{
|
||||||
|
name: 'Boxing gloves',
|
||||||
|
power: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Oak Stick',
|
||||||
|
power: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Iron Dagger',
|
||||||
|
power: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Nordic Hammer',
|
||||||
|
power: 50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Royal Broadsword',
|
||||||
|
power: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const locations = [
|
||||||
|
{
|
||||||
|
name: 'Town Square',
|
||||||
|
'btn text': [
|
||||||
|
`Go to Store`,
|
||||||
|
`Go to Cave`,
|
||||||
|
`Fight the Dragon`
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
goStore,
|
||||||
|
goCave,
|
||||||
|
fightDragon
|
||||||
|
],
|
||||||
|
text: `You are in the Town Square. You can see a sign that says "Jonathan's Store"`,
|
||||||
|
},{
|
||||||
|
name: 'Store',
|
||||||
|
'btn text': [
|
||||||
|
`Buy 10 hp (10 gold)`,
|
||||||
|
`Buy weapon (30 gold)`,
|
||||||
|
`Go to Town Square`,
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
buyHp,
|
||||||
|
buyWeapon,
|
||||||
|
goTown,
|
||||||
|
],
|
||||||
|
text: `You've entered the store. You can buy something from Jonathan or go back to Town square. Note that your current weapon is ${weapons[currentWeapon].name}.`,
|
||||||
|
},{
|
||||||
|
name: 'Cave',
|
||||||
|
'btn text': [
|
||||||
|
`Fight Slime`,
|
||||||
|
`Fight Unicorn`,
|
||||||
|
`Go to Town Square`,
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
fightSlime,
|
||||||
|
fightUni,
|
||||||
|
goTown,
|
||||||
|
],
|
||||||
|
text: `You've entered the Cave. You see some dangerous monsters...`,
|
||||||
|
},{
|
||||||
|
name: 'Fight',
|
||||||
|
'btn text': [
|
||||||
|
`Attack`,
|
||||||
|
`Dodge`,
|
||||||
|
`Run`
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
attack,
|
||||||
|
dodge,
|
||||||
|
goTown,
|
||||||
|
],
|
||||||
|
text: `You are fighting a monster.`
|
||||||
|
},{
|
||||||
|
name: 'Monster Killed',
|
||||||
|
'btn text': [
|
||||||
|
`Go to Town Square`,
|
||||||
|
`Go to Town Square`,
|
||||||
|
`Go to Town Square`,
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
goTown,
|
||||||
|
goTown,
|
||||||
|
egg,
|
||||||
|
],
|
||||||
|
text: `Exiting the nearby cavern, one ${monsters[fighting].name} lies defeated. Its final cry fades as you gain experience. Among the remnants, you find gold—a reward for your bravery.`,
|
||||||
|
},{
|
||||||
|
name: 'Lose',
|
||||||
|
'btn text': [
|
||||||
|
`Replay?`,
|
||||||
|
`Replay?`,
|
||||||
|
`Replay?`,
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
restart,
|
||||||
|
restart,
|
||||||
|
restart,
|
||||||
|
],
|
||||||
|
text: `Your resolve falters as weariness sets in, and the ground trembles with the arrival of another ${monsters[fighting].name} from the shadows. Despite your valiant efforts in battle, the relentless onslaught proves too much, and you find yourself overpowered. As darkness descends upon your vision, the echoing roar of the ${monsters[fighting].name} serves as a grim reminder of your valiant but ultimately unsuccessful struggle.`,
|
||||||
|
},{
|
||||||
|
name: 'Win',
|
||||||
|
'btn text': [
|
||||||
|
`Replay?`,
|
||||||
|
`Replay?`,
|
||||||
|
`Replay?`,
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
restart,
|
||||||
|
restart,
|
||||||
|
restart,
|
||||||
|
],
|
||||||
|
text: `With the thunderous roar of The Mighty Dragon silenced, the once trembling town now stands firm and secure. Its people, once shackled by fear, now breathe freely, their gratitude echoing through the cobblestone streets. Amidst the jubilant celebrations, you, the hero, stand tall, your courage and valor earning you the heartfelt thanks of every man, woman, and child. Your name shall be etched in the annals of history, a testament to your unwavering resolve and selflessness in the face of adversity.`,
|
||||||
|
},{
|
||||||
|
name: 'Egg',
|
||||||
|
'btn text': [
|
||||||
|
`2`,
|
||||||
|
`8`,
|
||||||
|
`Go to Town Square`,
|
||||||
|
],
|
||||||
|
'btn fun': [
|
||||||
|
pickTwo,
|
||||||
|
pickEight,
|
||||||
|
goTown,
|
||||||
|
],
|
||||||
|
text: `You've founded a secret secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you'll win!`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
//? Buttons workforce
|
||||||
|
btn1.onclick = goStore;
|
||||||
|
btn2.onclick = goCave;
|
||||||
|
btn3.onclick = fightDragon;
|
||||||
|
|
||||||
|
function update(location){
|
||||||
|
monsterStats.style.display = 'none';
|
||||||
|
|
||||||
|
btn1.innerText = location['btn text'][0];
|
||||||
|
btn2.innerText = location['btn text'][1];
|
||||||
|
btn3.innerText = location['btn text'][2];
|
||||||
|
|
||||||
|
btn1.onclick = location['btn fun'][0];
|
||||||
|
btn2.onclick = location['btn fun'][1];
|
||||||
|
btn3.onclick = location['btn fun'][2];
|
||||||
|
|
||||||
|
text.innerText = location.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
//? Locations
|
||||||
|
function goTown(){
|
||||||
|
update(locations[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function goStore(){
|
||||||
|
update(locations[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function goCave(){
|
||||||
|
update(locations[2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
//? Shopping
|
||||||
|
function buyHp(){
|
||||||
|
if(gold>=10){
|
||||||
|
gold -= 10;
|
||||||
|
hp += 10;
|
||||||
|
textUp();
|
||||||
|
}else{
|
||||||
|
text.innerText = `You need ${10-gold} more Gold to buy more HP.`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function buyWeapon(){//TODO current weapon in shop entry
|
||||||
|
if(currentWeapon < weapons.length-1){
|
||||||
|
if(gold>=30){
|
||||||
|
gold -= 30;
|
||||||
|
currentWeapon++;
|
||||||
|
text.innerText = `You now have a ${weapons[currentWeapon].name}, you are now stronger.`;
|
||||||
|
inventory.push(weapons[currentWeapon].name);
|
||||||
|
text.innerText += `In your inventory of weapons you have: ${inventory}.`;
|
||||||
|
textUp();
|
||||||
|
}else{
|
||||||
|
text.innerText = `You need ${30-gold} more Gold to buy a new Weapon.`;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
text.innerText = `You already have the most powerfull Weapon! Go slay The Dragon!`;
|
||||||
|
btn2.innerText = `Sell Old Weapon for 15 gold`;
|
||||||
|
btn2.onclick = sellWeapon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sellWeapon(){
|
||||||
|
if(inventory.length > 1){
|
||||||
|
gold += 15;
|
||||||
|
goldText.innerText = gold;
|
||||||
|
let currentWeapon = inventory.shift();
|
||||||
|
text.innerText = `You'have sold a ${currentWeapon}.`
|
||||||
|
text.innerText += ` In your inventory of weapons you have: ${inventory}.`
|
||||||
|
}else{
|
||||||
|
text.innerText = `Don't sell your only weapon!`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//? Fighting
|
||||||
|
function fightSlime(){
|
||||||
|
fighting = 0;
|
||||||
|
goFight();
|
||||||
|
}
|
||||||
|
function fightUni(){
|
||||||
|
fighting = 1;
|
||||||
|
goFight();
|
||||||
|
}
|
||||||
|
function fightDragon(){
|
||||||
|
fighting = 2;
|
||||||
|
goFight();
|
||||||
|
}
|
||||||
|
|
||||||
|
function goFight(){
|
||||||
|
update(locations[3]);
|
||||||
|
monsterHp = monsters[fighting].hp;
|
||||||
|
monsterStats.style.display = 'block';
|
||||||
|
monsterName.innerText = monsters[fighting].name;
|
||||||
|
monsterHpText.innerText = monsterHp;
|
||||||
|
}
|
||||||
|
function attack(){
|
||||||
|
text.innerText = `The ${monsters[fighting].name} attacks. `;
|
||||||
|
text.innerText += `You attack it with your ${weapons[currentWeapon].name}.`;
|
||||||
|
if(isMonsterHit()){
|
||||||
|
hp -= getMonsterAttackValue(monsters[fighting].level);
|
||||||
|
}else{
|
||||||
|
text.innerText += ` You missed.`
|
||||||
|
}
|
||||||
|
monsterHp -= weapons[currentWeapon].power + Math.floor(Math.random()*xp) + 1;
|
||||||
|
textUp();
|
||||||
|
if(hp<=0) lose();
|
||||||
|
else if(monsterHp<=0){
|
||||||
|
fighting === 2 ? winGame() : defeatMonster();
|
||||||
|
}
|
||||||
|
|
||||||
|
if(Math.random() <= .1 && inventory.length !== 1){
|
||||||
|
text.innerText += `Your ${inventory.pop()} breaks.`;
|
||||||
|
currentWeapon--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMonsterAttackValue(level){
|
||||||
|
return (level*5) - (Math.floor(Math.random()*xp));
|
||||||
|
}
|
||||||
|
|
||||||
|
function isMonsterHit(){
|
||||||
|
return Math.random()>.2 || hp<20;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dodge(){ //TODO round up when monster hits (lichá) % sudá misses
|
||||||
|
text.innerText = `You dodge the attack from the ${monsters[fighting].name}.`
|
||||||
|
}
|
||||||
|
|
||||||
|
function defeatMonster(){
|
||||||
|
gold += Math.floor(monsters[fighting].level * 6.7);
|
||||||
|
xp += monsters[fighting].level;
|
||||||
|
textUp();
|
||||||
|
update(locations[4]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function lose(){
|
||||||
|
update(locations[5]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function winGame(){
|
||||||
|
update(locations[6]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function restart(){
|
||||||
|
xp = 0;
|
||||||
|
hp = 100;
|
||||||
|
gold = 50;
|
||||||
|
currentWeapon = 0;
|
||||||
|
inventory = [
|
||||||
|
'Boxing gloves',
|
||||||
|
];
|
||||||
|
textUp();
|
||||||
|
goTown();
|
||||||
|
}
|
||||||
|
|
||||||
|
function egg(){
|
||||||
|
update(locations[7]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickTwo(){
|
||||||
|
pick(2);
|
||||||
|
}
|
||||||
|
function pickEight(){
|
||||||
|
pick(8);
|
||||||
|
}
|
||||||
|
|
||||||
|
function pick(num){
|
||||||
|
let numbers = [];
|
||||||
|
while(numbers.length < 10){
|
||||||
|
numbers.push(Math.floor(Math.random()*11));
|
||||||
|
}
|
||||||
|
|
||||||
|
text.innerText = `You picked ${num}. Here are the random numbers:\n`;
|
||||||
|
|
||||||
|
for(let i=0;i<10;i++){
|
||||||
|
text.innerText += `${numbers[i]}\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(numbers.indexOf(num) !== -1){
|
||||||
|
text.innerText += `That's Right! You've won 20 gold!`;
|
||||||
|
gold+=20;
|
||||||
|
}else{
|
||||||
|
text.innerText += `That's Wrong! You lose 10 health!`;
|
||||||
|
hp-=10;
|
||||||
|
}
|
||||||
|
|
||||||
|
textUp();
|
||||||
|
if(hp<=0) lose();
|
||||||
|
}
|
||||||
|
|
||||||
|
//? Essentials
|
||||||
|
function textUp(){
|
||||||
|
xpText.innerText = xp;
|
||||||
|
hpText.innerText = hp;
|
||||||
|
goldText.innerText = gold;
|
||||||
|
monsterHpText.innerText = monsterHp;
|
||||||
|
}
|
||||||
|
//TODO 1:12:00 https://www.youtube.com/watch?v=SYx885hX0OY
|
||||||
Reference in New Issue
Block a user