Spaces:

smjain
/

game

Running

App Files Files Community

game / index.html

smjain

Add 2 files

de875ad verified over 1 year ago

Raw

History Blame Contribute Delete

25.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Modi vs Kejriwal Cricket Battle</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Arial', sans-serif;
	background: linear-gradient(to right, #ff9933, #ffffff, #138808);
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	}

	#gameCanvas {
	background-color: #1e8449;
	border: 10px solid #800080;
	border-radius: 15px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
	}

	#scoreboard {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 28px;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
	padding: 15px 30px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 15px;
	border: 3px solid gold;
	font-weight: bold;
	}

	#gameOver {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 60px;
	text-align: center;
	display: none;
	text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
	background: rgba(139, 0, 0, 0.9);
	padding: 40px;
	border-radius: 25px;
	border: 5px solid #ffd700;
	z-index: 100;
	}

	#restartBtn {
	margin-top: 30px;
	padding: 15px 30px;
	font-size: 28px;
	background: linear-gradient(to right, #ff9933, #ffffff, #138808);
	border: 3px solid #000080;
	border-radius: 15px;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
	transition: all 0.3s;
	font-weight: bold;
	}

	#restartBtn:hover {
	transform: scale(1.1);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
	}

	#controls {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 22px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	text-align: center;
	background: rgba(0, 0, 0, 0.7);
	padding: 15px;
	border-radius: 15px;
	border: 3px solid #ff0000;
	}

	#title {
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
	color: #000080;
	font-size: 40px;
	text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.7);
	font-weight: bold;
	white-space: nowrap;
	}

	/* Cheering crowd element */
	.crowd {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20%;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><circle cx="10" cy="10" r="5" fill="%23fff"/><circle cx="30" cy="8" r="4" fill="%23ff9933"/><circle cx="50" cy="12" r="5" fill="%23fff"/><circle cx="70" cy="9" r="4" fill="%23138808"/><circle cx="90" cy="11" r="5" fill="%23fff"/></svg>');
	background-repeat: repeat-x;
	opacity: 0.6;
	z-index: -1;
	}

	.speech-bubble {
	position: absolute;
	background: white;
	border-radius: 20px;
	padding: 10px 15px;
	font-size: 14px;
	color: black;
	text-align: center;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	display: none;
	white-space: nowrap;
	z-index: 10;
	}

	.bubble-bat {
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	}

	.bubble-ball {
	top: 150px;
	left: 50%;
	transform: translateX(-50%);
	}
	</style>
	</head>
	<body>
	<div id="title">Modi Cricket Bat vs Kejriwal Ball</div>
	<div class="crowd"></div>
	<canvas id="gameCanvas"></canvas>
	<div id="scoreboard">🏏 Score: 0 \| 🎳 Balls: 0 \| ⚡ Speed: 1x</div>
	<div id="gameOver">
	<h1>Game Over!</h1>
	<p id="finalScore" style="font-size: 36px; margin: 20px 0;">Your score: 0</p>
	<button id="restartBtn">🚩 Play Again</button>
	</div>
	<div id="controls">🕹️ Use <strong>LEFT ←</strong> and <strong>RIGHT →</strong> arrow keys to move</div>

	<!-- Speech bubbles -->
	<div class="speech-bubble bubble-bat" id="modiSpeech">Mitron!</div>
	<div class="speech-bubble bubble-ball" id="kejriwalSpeech">Kya bekaar bowling hai!</div>

	<script>
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const scoreboard = document.getElementById('scoreboard');
	const gameOverScreen = document.getElementById('gameOver');
	const finalScore = document.getElementById('finalScore');
	const restartBtn = document.getElementById('restartBtn');
	const modiSpeech = document.getElementById('modiSpeech');
	const kejriwalSpeech = document.getElementById('kejriwalSpeech');

	// Set canvas size
	canvas.width = 800;
	canvas.height = 600;

	// Game variables
	let score = 0;
	let ballsFaced = 0;
	let gameActive = false;
	let gameSpeed = 1;
	let lastDirection = 'right';

	// Bat (Modi)
	const bat = {
	x: canvas.width / 2 - 75,
	y: canvas.height - 40,
	width: 150,
	height: 30,
	speed: 15
	};

	// Ball (Kejriwal)
	const ball = {
	x: 0,
	y: 0,
	radius: 20,
	speedX: 0,
	speedY: 0,
	active: false
	};

	// Targets (Kejriwal scams as bricks)
	const scams = [
	"Liquor Scam", "CS Bus Scam", "Water Tanker Scam",
	"PWD Scam", "Excise Scam", "Classroom Scam",
	"Hospitals Scam", "Mohalla Clinics", "DJB Scam",
	"Wifi Scam", "Waste Mgmt Scam", "Electricity Scam"
	];

	const brickRowCount = 3;
	const brickColumnCount = 4;
	const brickWidth = 170;
	const brickHeight = 35;
	const brickPadding = 15;
	const brickOffsetTop = 80;
	const brickOffsetLeft = 60;

	const bricks = [];
	for (let c = 0; c < brickColumnCount; c++) {
	bricks[c] = [];
	for (let r = 0; r < brickRowCount; r++) {
	const scamIndex = (c * brickRowCount + r) % scams.length;
	bricks[c][r] = {
	x: 0,
	y: 0,
	status: 1,
	scam: scams[scamIndex]
	};
	}
	}

	// Modi animation states (emotes)
	const modiFrames = [
	"🙂", "😊", "🤩", "😎", "😡", "🤬", "😁", "🤑"
	];
	let currentModiFrame = 0;
	let frameCounter = 0;

	// Kejriwal animation states (reactions)
	const kejriwalFrames = [
	"😐", "😕", "😲", "😨", "😵", "😤", "😷", "🥵"
	];
	let currentKejriwalFrame = 0;

	// Sound effects
	const sounds = {
	hit: ["Mann ki baat", "Mitron!", "Achhe din!", "Sabka saath sabka vikas!"],
	miss: ["Main bhagwan ka diya hua PM hun!", "Inhe kuchh nahi aata!", "Besharmi ki hadd hai!"]
	};

	// Initialize the game
	function init() {
	score = 0;
	ballsFaced = 0;
	gameActive = true;
	gameSpeed = 1;

	// Reset bat position
	bat.x = canvas.width / 2 - bat.width / 2;

	// Reset bricks
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	bricks[c][r].status = 1;
	}
	}

	// Start with a new ball
	resetBall();

	// Hide game over screen and speech bubbles
	gameOverScreen.style.display = 'none';
	modiSpeech.style.display = 'none';
	kejriwalSpeech.style.display = 'none';

	// Start the game loop
	requestAnimationFrame(gameLoop);
	}

	// Reset ball position
	function resetBall() {
	ball.x = canvas.width / 2;
	ball.y = 50;
	ball.speedX = (Math.random() * 6 - 3) * gameSpeed;
	ball.speedY = 3 * gameSpeed;
	ball.active = true;
	ballsFaced++;
	currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
	updateScoreboard();
	}

	// Show speech bubble
	function showSpeech(bubble, text) {
	bubble.textContent = text;
	bubble.style.display = 'block';
	setTimeout(() => {
	bubble.style.display = 'none';
	}, 1000);
	}

	// Draw the bat (Modi)
	function drawBat() {
	// Bat body with tricolor
	ctx.fillStyle = '#FF9933'; // Saffron
	ctx.fillRect(bat.x, bat.y, bat.width/3, bat.height);
	ctx.fillStyle = '#FFFFFF'; // White
	ctx.fillRect(bat.x + bat.width/3, bat.y, bat.width/3, bat.height);
	ctx.fillStyle = '#138808'; // Green
	ctx.fillRect(bat.x + 2*bat.width/3, bat.y, bat.width/3, bat.height);

	// Border
	ctx.strokeStyle = '#000080';
	ctx.lineWidth = 3;
	ctx.strokeRect(bat.x, bat.y, bat.width, bat.height);

	// Modi face on bat
	const faceRadius = 25;
	const faceX = lastDirection === 'right' ? bat.x + bat.width - 10 : bat.x + 10;

	// Modi face circle
	ctx.fillStyle = '#ffcc00';
	ctx.beginPath();
	ctx.arc(faceX, bat.y - faceRadius/2, faceRadius, 0, Math.PI * 2);
	ctx.fill();
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 2;
	ctx.stroke();

	// Modi eyes
	ctx.fillStyle = '#000';
	ctx.beginPath();
	ctx.arc(faceX - 10, bat.y - faceRadius/2 - 5, 3, 0, Math.PI * 2);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(faceX + 10, bat.y - faceRadius/2 - 5, 3, 0, Math.PI * 2);
	ctx.fill();

	// Modi mouth (with current frame)
	ctx.font = '20px Arial';
	ctx.fillText(modiFrames[currentModiFrame], faceX - 10, bat.y - faceRadius/2 + 15);

	// Animate Modi every 10 frames
	frameCounter++;
	if (frameCounter % 10 === 0) {
	currentModiFrame = (currentModiFrame + 1) % modiFrames.length;
	}

	// Modi's name tag
	ctx.font = 'bold 16px Arial';
	ctx.fillStyle = '#000080';
	ctx.fillText("Narendra Modi", bat.x + bat.width/2 - 50, bat.y - 5);
	}

	// Draw the ball (Kejriwal)
	function drawBall() {
	// Ball body
	ctx.fillStyle = '#009688';
	ctx.beginPath();
	ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
	ctx.fill();
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 2;
	ctx.stroke();

	// Kejriwal face
	ctx.font = '20px Arial';
	ctx.fillText(kejriwalFrames[currentKejriwalFrame], ball.x - 10, ball.y + 5);

	// Kejriwal name tag
	ctx.font = 'bold 14px Arial';
	ctx.fillStyle = '#000';
	ctx.fillText("Kejriwal", ball.x - 25, ball.y - 15);

	// Change expression when ball hits something
	if (ball.y + ball.radius > canvas.height - 100) {
	currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
	}
	}

	// Draw scam bricks
	function drawBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	if (bricks[c][r].status === 1) {
	const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
	const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
	bricks[c][r].x = brickX;
	bricks[c][r].y = brickY;

	// Colors for the scam bricks
	let brickColor;
	switch (r) {
	case 0: brickColor = '#800000'; break; // Red for serious scams
	case 1: brickColor = '#4169E1'; break; // Blue for financial scams
	case 2: brickColor = '#8B4513'; break; // Brown for other scams
	default: brickColor = '#000000';
	}

	ctx.fillStyle = brickColor;
	ctx.fillRect(brickX, brickY, brickWidth, brickHeight);

	// Brick shadow effect
	ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
	ctx.fillRect(brickX + 5, brickY + 5, brickWidth, brickHeight);

	ctx.strokeStyle = '#000';
	ctx.lineWidth = 1;
	ctx.strokeRect(brickX, brickY, brickWidth, brickHeight);

	// Scam labels
	ctx.font = 'bold 12px Arial';
	ctx.fillStyle = '#fff';
	const scam = bricks[c][r].scam;
	const maxLength = 15;
	if (scam.length > maxLength) {
	// Split long scam names into two lines
	const words = scam.split(' ');
	let line1 = '', line2 = '';
	for (const word of words) {
	if ((line1 + word).length <= maxLength) {
	line1 += word + ' ';
	} else {
	line2 += word + ' ';
	}
	}
	ctx.fillText(line1.trim(), brickX + 5, brickY + 15);
	ctx.fillText(line2.trim(), brickX + 5, brickY + 30);
	} else {
	ctx.fillText(scam, brickX + 5, brickY + 20);
	}
	}
	}
	}
	}

	// Update scoreboard
	function updateScoreboard() {
	scoreboard.textContent = `🏏 Score: ${score} \| 🎳 Balls: ${ballsFaced} \| ⚡ Speed: ${gameSpeed.toFixed(1)}x`;
	}

	// Check collisions
	function collisionDetection() {
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	const brick = bricks[c][r];
	if (brick.status === 1) {
	if (
	ball.x + ball.radius > brick.x &&
	ball.x - ball.radius < brick.x + brickWidth &&
	ball.y + ball.radius > brick.y &&
	ball.y - ball.radius < brick.y + brickHeight
	) {
	ball.speedY = -ball.speedY;
	brick.status = 0;
	score += (brickRowCount - r + 1) * 50;

	// Show Modi's speech
	const randomHitPhrase = sounds.hit[Math.floor(Math.random() * sounds.hit.length)];
	showSpeech(modiSpeech, randomHitPhrase);

	// Position speech bubble
	modiSpeech.style.left = `${bat.x + bat.width/2}px`;
	modiSpeech.style.bottom = `${canvas.height - bat.y + 30}px`;

	currentKejriwalFrame = Math.min(kejriwalFrames.length - 1, currentKejriwalFrame + 1);
	updateScoreboard();

	// Check if all bricks are cleared
	let allBricksCleared = true;
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	if (bricks[c][r].status === 1) {
	allBricksCleared = false;
	break;
	}
	}
	if (!allBricksCleared) break;
	}

	if (allBricksCleared) {
	gameSpeed += 0.5;
	// Cheering crowd effect
	currentModiFrame = 2; // 🤩
	setTimeout(() => currentModiFrame = 0, 500);
	resetBricks();
	showSpeech(modiSpeech, "Mera Bharat Mahan!");
	}
	}
	}
	}
	}
	}

	// Reset all bricks
	function resetBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	bricks[c][r].status = 1;
	}
	}
	}

	// Game loop
	function gameLoop() {
	if (!gameActive) return;

	// Clear canvas with transparent overlay for trail effect
	ctx.fillStyle = 'rgba(30, 132, 73, 0.2)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// Draw game elements
	drawBricks();
	drawBat();
	drawBall();

	// Ball movement
	if (ball.active) {
	ball.x += ball.speedX;
	ball.y += ball.speedY;

	// Wall collision
	if (ball.x + ball.radius > canvas.width \|\| ball.x - ball.radius < 0) {
	ball.speedX = -ball.speedX;
	currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
	}

	if (ball.y - ball.radius < 0) {
	ball.speedY = -ball.speedY;
	currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
	}

	// Bat collision
	if (
	ball.y + ball.radius > bat.y &&
	ball.x > bat.x &&
	ball.x < bat.x + bat.width
	) {
	// Change Modi's expression to happy
	currentModiFrame = 6; // 😁
	setTimeout(() => currentModiFrame = 0, 200);

	// Show Modi's speech
	showSpeech(modiSpeech, "Mitron!");
	modiSpeech.style.left = `${bat.x + bat.width/2}px`;
	modiSpeech.style.bottom = `${canvas.height - bat.y + 30}px`;

	// Calculate hit angle based on where ball hits the bat
	const hitPoint = (ball.x - (bat.x + bat.width/2)) / (bat.width/2);
	ball.speedX = hitPoint * 7 * gameSpeed;
	ball.speedY = -Math.abs(ball.speedY);

	// Increase score for hitting
	score += 10;
	updateScoreboard();
	}

	// Ball out of bounds (bottom)
	if (ball.y - ball.radius > canvas.height) {
	ball.active = false;

	// Change Modi's expression to angry
	currentModiFrame = 4; // 😡

	// Show Kejriwal's taunt
	const randomMissPhrase = sounds.miss[Math.floor(Math.random() * sounds.miss.length)];
	showSpeech(kejriwalSpeech, randomMissPhrase);
	kejriwalSpeech.style.left = `${ball.x}px`;
	kejriwalSpeech.style.top = `${ball.y - 50}px`;

	// Check if game over (3 missed balls)
	if (ballsFaced >= 3) {
	gameOver();
	} else {
	setTimeout(() => {
	currentModiFrame = 0;
	resetBall();
	}, 1000);
	}
	}

	// Collision detection
	collisionDetection();
	}

	requestAnimationFrame(gameLoop);
	}

	// Game over function
	function gameOver() {
	gameActive = false;
	finalScore.textContent = `Your score: ${score}`;

	// Display appropriate message based on score
	let message = "Try Again!";
	if (score > 1500) message = "Supreme Leader! 🏆";
	else if (score > 1000) message = "56-inch Performance! 👏";
	else if (score > 500) message = "Good Effort Mitron! 👍";

	document.querySelector("#gameOver p").textContent = `Your score: ${score} - ${message}`;
	gameOverScreen.style.display = 'block';
	}

	// Keyboard controls
	const keys = {
	ArrowLeft: false,
	ArrowRight: false
	};

	document.addEventListener('keydown', (e) => {
	if (e.key in keys) {
	keys[e.key] = true;
	lastDirection = e.key === 'ArrowLeft' ? 'left' : 'right';
	e.preventDefault();
	}

	// Space bar to start/restart game
	if (e.key === ' ' && !gameActive) {
	init();
	}

	// Enter key to start/restart game
	if (e.key === 'Enter' && !gameActive) {
	init();
	}
	});

	document.addEventListener('keyup', (e) => {
	if (e.key in keys) {
	keys[e.key] = false;
	e.preventDefault();
	}
	});

	// Handle bat movement
	function handleBatMovement() {
	if (keys.ArrowLeft && bat.x > 0) {
	bat.x -= bat.speed;
	}
	if (keys.ArrowRight && bat.x < canvas.width - bat.width) {
	bat.x += bat.speed;
	}
	}

	// Input handler for restart button
	restartBtn.addEventListener('click', init);

	// Bat movement interval
	setInterval(handleBatMovement, 16);

	// Start game on any key press
	document.addEventListener('keydown', function firstKeyPress() {
	init();
	document.removeEventListener('keydown', firstKeyPress);
	});

	// Display start instructions
	gameOverScreen.style.display = 'block';
	finalScore.textContent = "Press any key to start";
	document.querySelector("#gameOver h1").textContent = "Modi vs Kejriwal";
	document.querySelector("#gameOver p").textContent = "Use LEFT and RIGHT arrow keys to defend India!";
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
	</html>