JOHN 2 THE GAME • DEMO | Monster 2016
by QuantumBolt10209 lines10.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JOHN 2 THE GAME • DEMO | Monster 2016</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; }
body { background: #000; color: #fff; font-family: Arial, sans-serif; }
#header {
position: absolute; top: 0; left: 0; right: 0;
padding: 15px; background: rgba(0,0,0,0.85);
text-align: center; z-index: 10;
border-bottom: 2px solid #0099FF;
}
h1 { color: #0099FF; font-size: 26px; text-shadow: 0 0 10px #0099FF; margin-bottom: 4px; }
p { color: #66CCFF; font-size: 15px; }
#note { color: #FFFF66; font-weight: bold; }
#controls {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 12px; background: rgba(0,0,0,0.85);
text-align: center; font-size: 14px; z-index: 10;
line-height: 1.4;
}
canvas { display: block; background: #000; width: 100vw; height: 100vh; }
.glow { filter: drop-shadow(0 0 8px #0099FF); }
.glow-red { filter: drop-shadow(0 0 8px #FF0000); }
</style>
</head>
<body>
<div id="header">
<h1 class="glow">JOHN 2 THE GAME • DEMO</h1>
<p>Created by: <span style="color:white;">Monster 2016</span> | <span id="note">SINGLE PLAYER ONLY</span></p>
</div>
<canvas id="gameCanvas" width="1920" height="1080"></canvas>
<div id="controls">
🎮 ARROW KEYS = Move | ⬇️ while moving = DIG | ENTER = TRAVEL<br>
📡 Antennas glow BLUE near secrets | 🔋 Watch battery level
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let currentScene = 'field';
let gameState = { battery: 100, nearItem: false, atPortal: false, shipArrived: false };
// 🐭 TINY BLUE MICE
let mice = [];
for(let i=0; i<15; i++){
mice.push({
x: Math.random()*1920, y: Math.random()*1080,
size: 5 + Math.random()*4, speed: 0.4 + Math.random()*1.1,
dir: Math.random()*Math.PI*2
});
}
function drawMice(){
mice.forEach(m => {
m.x += Math.cos(m.dir)*m.speed;
m.y += Math.sin(m.dir)*m.speed;
if(m.x<0||m.x>1920||m.y<0||m.y>1080) m.dir += Math.PI;
ctx.fillStyle = '#0099FF';
ctx.beginPath(); ctx.arc(m.x, m.y, m.size, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(m.x - m.size*0.7, m.y - m.size*0.7, m.size*0.5, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(m.x + m.size*0.7, m.y - m.size*0.7, m.size*0.5, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(m.x, m.y, m.size*0.3, 0, Math.PI*2); ctx.fill();
});
}
// 🤖 ROBOT JOHN — SINGLE PLAYER
const john = {
x: 800, y: 500, w: 80, h: 110,
draw: function() {
const bodyGrad = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.h);
bodyGrad.addColorStop(0, '#0099FF');
bodyGrad.addColorStop(0.5, '#66CCFF');
bodyGrad.addColorStop(1, '#003366');
ctx.fillStyle = bodyGrad;
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.fillRect(this.x+6, this.y+6, this.w-12, this.h-12);
const headGrad = ctx.createLinearGradient(this.x, this.y-45, this.x, this.y+15);
headGrad.addColorStop(0, '#001A33');
headGrad.addColorStop(1, '#003366');
ctx.fillStyle = headGrad;
ctx.fillRect(this.x+10, this.y-45, 60, 60);
ctx.fillStyle = 'rgba(0,153,255,0.4)';
ctx.fillRect(this.x+15, this.y-40, 50, 50);
ctx.fillStyle = '#66CCFF';
ctx.shadowColor = '#0099FF'; ctx.shadowBlur = 15;
ctx.beginPath(); ctx.arc(this.x+25, this.y-15, 7, 0, Math.PI*2); ctx.arc(this.x+55, this.y-15, 7, 0, Math.PI*2); ctx.fill();
ctx.shadowBlur = 0;
ctx.strokeStyle = gameState.nearItem ? '#0099FF' : '#444'; ctx.lineWidth = 4;
ctx.beginPath(); ctx.moveTo(this.x+20,this.y-45); ctx.lineTo(this.x+10,this.y-70);
ctx.moveTo(this.x+60,this.y-45); ctx.lineTo(this.x+70,this.y-70); ctx.stroke();
if(gameState.nearItem){
ctx.shadowColor='#0099FF'; ctx.shadowBlur=20;
ctx.fillStyle='#0099FF';
ctx.beginPath(); ctx.arc(this.x+10,this.y-70,5,0,Math.PI*2); ctx.arc(this.x+70,this.y-70,5,0,Math.PI*2); ctx.fill();
ctx.shadowBlur=0;
}
if(gameState.battery < 25){
ctx.fillStyle = 'red'; ctx.font = 'bold 22px Arial';
ctx.textAlign = 'center'; ctx.fillText('⚠️ LOW BATTERY ⚠️', 960, 100);
}
}
};
// SCENE 1: FIELD
function drawField(){
const sky = ctx.createLinearGradient(0,0,0,600);
sky.addColorStop(0, '#87CEEB'); sky.addColorStop(1, '#E0F7FF');
ctx.fillStyle = sky; ctx.fillRect(0,0,1920,600);
const grass = ctx.createLinearGradient(0,600,0,1080);
grass.addColorStop(0, '#71B05F'); grass.addColorStop(1, '#5A8A4C');
ctx.fillStyle = grass; ctx.fillRect(0,600,1920,480);
ctx.fillStyle='#90EE90'; for(let i=0;i<60;i++) ctx.fillRect(Math.random()*1920,600+Math.random()*480,6,22);
ctx.fillStyle='#8B4513'; ctx.fillRect(0,750,1920,200);
if(!gameState.shipArrived && john.y < 450) gameState.shipArrived = true;
if(gameState.shipArrived){
ctx.fillStyle='silver'; ctx.shadowColor='white'; ctx.shadowBlur=20;
ctx.beginPath(); ctx.ellipse(960,220,160,65,0,0,Math.PI*2); ctx.fill(); ctx.shadowBlur=0;
ctx.fillStyle='#333'; ctx.fillRect(915,150,90,70);
ctx.fillStyle='orange'; ctx.shadowColor='yellow'; ctx.shadowBlur=30;
ctx.beginPath(); ctx.moveTo(890,250); ctx.lineTo(960,320); ctx.lineTo(1030,250); ctx.fill(); ctx.shadowBlur=0;
ctx.fillStyle='white'; ctx.font='bold 32px Arial'; ctx.textAlign='center';
ctx.fillText('🚀 SPACESHIP LANDED — PRESS ENTER 🚀',960,360);
}
john.draw();
drawMice();
}
// SCENE 2: CYBERJUNK
function drawCyberJunk(){
ctx.fillStyle='#0A0A0A'; ctx.fillRect(0,0,1920,1080);
ctx.fillStyle='#222'; for(let i=0;i<40;i++) ctx.fillRect(Math.random()*1920,350+Math.random()*700,120+Math.random()*250,90+Math.random()*150);
ctx.fillStyle='#00FF99'; for(let i=0;i<25;i++) ctx.fillRect(Math.random()*1920,Math.random()*1080,22,22);
ctx.fillStyle='#FF00CC'; for(let i=0;i<20;i++) {ctx.beginPath();ctx.arc(Math.random()*1920,Math.random()*1080,12,0,Math.PI*2);ctx.fill();}
ctx.fillStyle='rgba(0,100,200,0.45)'; ctx.fillRect(0,820,1920,260);
if(john.y > 750){
gameState.atPortal = true;
const portalGrad = ctx.createRadialGradient(960,200,10,960,200,90);
portalGrad.addColorStop(0,'rgba(255,0,255,0.8)'); portalGrad.addColorStop(1,'rgba(0,150,255,0.1)');
ctx.fillStyle=portalGrad; ctx.beginPath(); ctx.arc(960,200,90,0,Math.PI*2); ctx.fill();
ctx.strokeStyle='white'; ctx.lineWidth=6; ctx.stroke();
ctx.fillStyle='white'; ctx.font='bold 30px Arial'; ctx.textAlign='center';
ctx.fillText('✨ SPACE PORTAL — PRESS ENTER ✨',960,205);
}
john.draw();
drawMice();
}
// SCENE 3: SPACE + WORLDS
function drawSpaceAndWorlds(){
ctx.fillStyle='#000011'; ctx.fillRect(0,0,1920,1080);
ctx.fillStyle='white'; for(let i=0;i<250;i++) {ctx.beginPath();ctx.arc(Math.random()*1920,Math.random()*1080,Math.random()*2.5,0,Math.PI*2);ctx.fill();}
drawWorld(220,200,'❄️ ICE WORLD','#aaddff','#cceeff');
drawWorld(620,400,'🌋 LAVA WORLD','#ff5500','#ff9900');
drawWorld(1020,250,'🌊 OCEAN WORLD','#0099ff','#33ccff');
drawWorld(1420,500,'🏙️ CYBER CITY','#ff00ff','#ff66ff');
drawWorld(320,720,'🌳 FOREST WORLD','#33cc33','#66ff66');
drawWorld(1320,750,'🏜️ DESERT WORLD','#ffcc66','#ffdd99');
drawWorld(700,150,'🔥 VOLCANO WORLD','#cc2200','#ff4400');
drawWorld(1200,600,'⚡ ENERGY WORLD','#ffff00','#ffff66');
john.draw();
drawMice();
}
function drawWorld(x,y,name,c1,c2){
const grad = ctx.createRadialGradient(x,y,15,x,y,80);
grad.addColorStop(0,c1); grad.addColorStop(1,c2);
ctx.fillStyle=grad; ctx.globalAlpha=0.6; ctx.beginPath(); ctx.arc(x,y,80,0,Math.PI*2); ctx.fill(); ctx.globalAlpha=1;
ctx.strokeStyle=c1; ctx.lineWidth=5; ctx.stroke();
ctx.fillStyle='white'; ctx.font='22px Arial'; ctx.textAlign='center'; ctx.fillText(name,x,y+100);
}
// CONTROLS
document.addEventListener('keydown', e => {
if(e.keyCode === 37) john.x -= 18;
if(e.keyCode === 39) john.x += 18;
if(e.keyCode === 38) john.y -= 18;
if(e.keyCode === 40){
john.y += 18;
ctx.fillStyle='rgba(255,255,255,0.3)';
ctx.fillRect(john.x, john.y+john.h, john.w, 60);
}
if(e.keyCode === 13){
if(currentScene==='field' && gameState.shipArrived) currentScene='cyberjunk';
else if(currentScene==='cyberjunk' && gameState.atPortal) currentScene='space';
}
john.x = Math.max(0, Math.min(1840, john.x));
john.y = Math.max(0, Math.min(970, john.y));
});
// GAME LOOP — NO BLACK SCREEN
function gameLoop(){
gameState.battery = Math.max(0, gameState.battery - 0.02);
gameState.nearItem = Math.random() > 0.8;
ctx.clearRect(0,0,1920,1080);
if(currentScene === 'field') drawField();
else if(currentScene === 'cyberjunk') drawCyberJunk();
else if(currentScene === 'space') drawSpaceAndWorlds();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>Game Source: JOHN 2 THE GAME • DEMO | Monster 2016
Creator: QuantumBolt10
Libraries: none
Complexity: complex (209 lines, 10.9 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: john-2-the-game-demo-monster-2016-quantumbolt10" to link back to the original. Then publish at arcadelab.ai/publish.