<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ultimate Game Hub</title>
<style>
body {
margin: 0;
font-family: Arial;
background: #111;
color: white;
}
#menu {
background: #1e1e1e;
padding: 10px;
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
}
button {
padding: 8px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.game {
display: none;
text-align: center;
padding: 20px;
}
.active { display: block; }
canvas {
background: black;
margin-top: 10px;
}
.cell {
width: 60px;
height: 60px;
background: #333;
font-size: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 4px;
}
</style>
</head>
<body>
<div id="menu">
<button onclick="show('home')">🏠 Home</button>
<button onclick="show('retro')">🏈 Retro</button>
<button onclick="show('snake')">🐍 Snake</button>
<button onclick="show('breakout')">🧱 Breakout</button>
<button onclick="show('dash')">🟦 Dash</button>
<button onclick="show('mart')">🐒 Mart</button>
<button onclick="show('memory')">🧠 Memory</button>
</div>
<div id="home" class="game active">
<h1>🎮 Ultimate Game Website</h1>
<p>Select a game above</p>
</div>
<!-- RETRO BOWL STYLE -->
<div id="retro" class="game">
<h2>🏈 Retro Manager</h2>
<p>Season: <span id="season">1</span></p>
<p>Wins: <span id="wins">0</span></p>
<button onclick="playGame()">Play Game</button>
</div>
<!-- SNAKE -->
<div id="snake" class="game">
<h2>🐍 Snake</h2>
<canvas id="snakeCanvas" width="300" height="300"></canvas>
</div>
<!-- BREAKOUT -->
<div id="breakout" class="game">
<h2>🧱 Breakout</h2>
<canvas id="breakoutCanvas" width="300" height="200"></canvas>
</div>
<!-- GEOMETRY DASH -->
<div id="dash" class="game">
<h2>🟦 Geometry Dash</h2>
<canvas id="dashCanvas" width="300" height="150"></canvas>
<p>Press SPACE to jump</p>
</div>
<!-- MONKEY MART -->
<div id="mart" class="game">
<h2>🐒 Monkey Mart</h2>
<p>Money: $<span id="money">0</span></p>
<button onclick="sell()">Sell Bananas</button>
<button onclick="hire()">Hire Worker ($10)</button>
</div>
<!-- MEMORY -->
<div id="memory" class="game">
<h2>🧠 Memory Game</h2>
<div id="grid"></div>
</div>
<script>
function show(id) {
document.querySelectorAll('.game').forEach(g=>g.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
/* RETRO */
let season=1,wins=0;
function playGame(){
if(Math.random()>0.5) wins++;
season++;
seasonEl.textContent=season;
winsEl.textContent=wins;
}
const seasonEl=document.getElementById("season");
const winsEl=document.getElementById("wins");
/* SNAKE */
const sctx=snakeCanvas.getContext("2d");
let snake=[[10,10]],food=[5,5],dir=[1,0];
document.addEventListener("keydown",e=>{
if(e.key==="ArrowUp")dir=[0,-1];
if(e.key==="ArrowDown")dir=[0,1];
if(e.key==="ArrowLeft")dir=[-1,0];
if(e.key==="ArrowRight")dir=[1,0];
});
setInterval(()=>{
let head=[snake[0][0]+dir[0],snake[0][1]+dir[1]];
snake.unshift(head);
if(head[0]==food[0]&&head[1]==food[1])
food=[Math.random()*15|0,Math.random()*15|0];
else snake.pop();
sctx.fillStyle="black";sctx.fillRect(0,0,300,300);
sctx.fillStyle="lime";
snake.forEach(p=>sctx.fillRect(p[0]*20,p[1]*20,18,18));
sctx.fillStyle="red";
sctx.fillRect(food[0]*20,food[1]*20,18,18);
},150);
/* BREAKOUT */
const bctx=breakoutCanvas.getContext("2d");
let bx=150,by=100,bvx=2,bvy=2,paddle=120;
document.addEventListener("mousemove",e=>paddle=e.clientX-150);
setInterval(()=>{
bx+=bvx;by+=bvy;
if(bx<0||bx>300)bvx*=-1;
if(by<0)bvy*=-1;
if(by>180&&bx>paddle&&bx<paddle+60)bvy*=-1;
bctx.fillStyle="black";bctx.fillRect(0,0,300,200);
bctx.fillStyle="white";bctx.fillRect(bx,by,10,10);
bctx.fillRect(paddle,190,60,5);
},16);
/* DASH */
const dctx=dashCanvas.getContext("2d");
let py=120,vy=0,obs=300;
document.addEventListener("keydown",e=>{if(e.code==="Space")vy=-8});
setInterval(()=>{
vy+=0.5;py+=vy;
if(py>120){py=120;vy=0}
obs-=4;if(obs<0)obs=300;
dctx.fillStyle="black";dctx.fillRect(0,0,300,150);
dctx.fillStyle="cyan";dctx.fillRect(50,py,20,20);
dctx.fillStyle="red";dctx.fillRect(obs,130,20,20);
},20);
/* MONKEY MART */
let money=0,workers=0;
function sell(){money+=1+workers;moneyEl.textContent=money}
function hire(){if(money>=10){money-=10;workers++}}
const moneyEl=document.getElementById("money");
setInterval(()=>{money+=workers;moneyEl.textContent=money},1000);
/* MEMORY */
const emojis=["🍎","🍌","🍇","🍓","🍎","🍌","🍇","🍓"];
let first=null;
emojis.sort(()=>Math.random()-0.5);
emojis.forEach(e=>{
let d=document.createElement("div");
d.className="cell";
d.onclick=()=>{
if(d.textContent||first===d)return;
d.textContent=e;
if(!first) first=d;
else{
if(first.textContent!==e){
setTimeout(()=>{first.textContent="";d.textContent="";},500);
}
first=null;
}
};
grid.appendChild(d);
});
</script>
</body>
</html>
function saveGame() {
const saveData = {
retro: { season, wins },
mart: { money, workers }
};
localStorage.setItem("gameHubSave", JSON.stringify(saveData));
}
function loadGame() {
const data = JSON.parse(localStorage.getItem("gameHubSave"));
if (!data) return;
// Retro Bowl
season = data.retro.season;
wins = data.retro.wins;
seasonEl.textContent = season;
winsEl.textContent = wins;
// Monkey Mart
money = data.mart.money;
workers = data.mart.workers;
moneyEl.textContent = money;
}
setInterval(saveGame, 5000);
loadGame();
function playGame(){
if(Math.random()>0.5) wins++;
season++;
seasonEl.textContent = season;
winsEl.textContent = wins;
saveGame();
}
function sell(){
money += 1 + workers;
moneyEl.textContent = money;
saveGame();
}
function hire(){
if(money >= 10){
money -= 10;
workers++;
moneyEl.textContent = money;
saveGame();
}
}
/* 🐒 Monkey Mart Expanded */
let money = 0;
let workers = 0;
// Store items
const store = {
banana: { count: 0, price: 1, income: 1 },
milk: { count: 0, price: 5, income: 5 },
bread: { count: 0, price: 20, income: 20 }
};
// DOM elements
const moneyEl = document.getElementById("money");
// SELL BUTTONS FOR ITEMS
function buyItem(item) {
const it = store[item];
if (money >= it.price) {
money -= it.price;
it.count++;
it.price = Math.floor(it.price * 1.3); // price scales
updateMart();
saveGame();
}
}
// HIRE WORKER
function hireWorker() {
if (money >= 10) {
money -= 10;
workers++;
updateMart();
saveGame();
}
}
// AUTOMATIC INCOME
setInterval(() => {
let income = workers; // workers produce $1/sec
for (let item in store) {
income += store[item].count * store[item].income / 5; // scale slower
}
money += income;
updateMart();
}, 1000);
// UPDATE DISPLAY
function updateMart() {
moneyEl.textContent = Math.floor(money);
// optional: update buttons dynamically if you want prices visible
for (let item in store) {
const btn = document.getElementById("buy_" + item);
if(btn) btn.textContent = `${item} ($${store[item].price}) [${store[item].count}]`;
}
}
// ADD BUTTONS TO HTML
const martDiv = document.getElementById("mart");
martDiv.innerHTML = `
<h2>🐒 Monkey Mart</h2>
<p>Money: $<span id="money">0</span></p>
<div id="items"></div>
<button onclick="hireWorker()">Hire Worker ($10)</button>
`;
// Create buttons for each item
const itemsDiv = document.getElementById("items");
for (let item in store) {
const btn = document.createElement("button");
btn.id = "buy_" + item;
btn.onclick = () => buyItem(item);
itemsDiv.appendChild(btn);
}
updateMart();