Dynamic Collection Game Code
Uploaded by
vedant.coolkDynamic Collection Game Code
Uploaded by
vedant.coolk<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Collection Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
font-family: 'Press Start 2P', cursive; /* Retro font */
}
canvas {
display: block;
margin: 0 auto;
}
#startScreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-size: 40px;
opacity: 1;
transition: opacity 1s;
}
#countdown {
display: none;
font-size: 60px;
}
</style>
<link href="[Link]
family=Press+Start+2P&display=swap" rel="stylesheet"> <!-- Retro font -->
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="startScreen">
<div id="introText">Game Starts!</div>
<div id="countdown"></div>
</div>
<script>
const canvas = [Link]('gameCanvas');
const ctx = [Link]('2d');
[Link] = [Link];
[Link] = [Link];
const playerSize = 50;
const playerColor = 'blue';
let playerX = [Link] / 2 - playerSize / 2;
let playerY = [Link] / 2 - playerSize / 2;
let numItems = 1;
const itemSize = 30;
let items = [];
let itemColors = ['red', 'green', 'yellow', 'purple', 'orange'];
let score = 0;
let isDragging = false;
let touchStartX = 0;
let touchStartY = 0;
// Difficulty settings
let itemDisappearInterval = 3000; // Starting interval in milliseconds
const minItemDisappearInterval = 1000; // Minimum interval
const intervalDecreasePerScore = 500; // Interval decrease per score point
function initializeItems() {
items = [];
for (let i = 0; i < numItems; i++) {
[Link]({
x: [Link]() * ([Link] - itemSize),
y: [Link]() * ([Link] - itemSize),
color: itemColors[[Link]([Link]() *
[Link])]
});
}
}
function drawBackground() {
const gradient = [Link](0, 0, [Link],
[Link]);
// Define colors
[Link](0, '#000000'); // Black
[Link](0.2, '#FFFF00'); // Neon Yellow
[Link](0.4, '#FFA07A'); // Light Orange
[Link](0.6, '#FF4500'); // Dark Orange
[Link](0.8, '#87CEEB'); // Light Blue
[Link](1, '#00FF00'); // Neon Green
[Link] = gradient;
[Link](0, 0, [Link], [Link]);
}
function drawPlayer() {
[Link] = playerColor;
[Link](playerX, playerY, playerSize, playerSize);
}
function drawItems() {
[Link](item => {
[Link] = [Link];
[Link](item.x, item.y, itemSize, itemSize);
});
}
function drawScoreboard() {
[Link] = 'white'; // Change the text color to white
[Link] = '24px Arial';
[Link](`Score: ${score}`, 10, 30);
}
function update() {
const now = [Link]();
// Draw background, player, items, and scoreboard
drawBackground();
drawPlayer();
drawItems();
drawScoreboard();
// Check for collisions
[Link]((item, index) => {
if (playerX < item.x + itemSize &&
playerX + playerSize > item.x &&
playerY < item.y + itemSize &&
playerY + playerSize > item.y) {
// Collision detected
score++;
[Link](index, 1); // Remove the collected item
if ([Link] === 0) {
// If all items are collected, add new items and increase
difficulty
numItems = [Link](numItems + 1, 3); // Max 3 items
initializeItems();
itemDisappearInterval = [Link](minItemDisappearInterval,
itemDisappearInterval - intervalDecreasePerScore);
}
}
});
// Handle item disappearance
if (now - lastItemUpdateTime > itemDisappearInterval) {
initializeItems();
lastItemUpdateTime = now;
}
requestAnimationFrame(update);
}
function startDrag(event) {
isDragging = true;
const touch = [Link] ? [Link][0] : event;
touchStartX = [Link] - playerX;
touchStartY = [Link] - playerY;
[Link]();
}
function drag(event) {
if (isDragging) {
const touch = [Link] ? [Link][0] : event;
playerX = [Link] - touchStartX;
playerY = [Link] - touchStartY;
// Ensure the player stays within canvas boundaries
playerX = [Link](0, [Link]([Link] - playerSize,
playerX));
playerY = [Link](0, [Link]([Link] - playerSize,
playerY));
[Link]();
}
}
function endDrag() {
isDragging = false;
}
function showStartScreen() {
const startScreen = [Link]('startScreen');
const introText = [Link]('introText');
const countdown = [Link]('countdown');
// Animate the intro text
let scale = 1;
let interval = setInterval(() => {
if (scale >= 10) {
clearInterval(interval);
startCountdown();
return;
}
scale += 0.1;
[Link] = `scale(${scale})`;
}, 50);
function startCountdown() {
[Link] = 'none';
[Link] = 'block';
let count = 3;
[Link] = count;
const countdownInterval = setInterval(() => {
count--;
if (count <= 0) {
clearInterval(countdownInterval);
[Link] = './[Link]'; // Redirect after
countdown
} else {
[Link] = count;
}
}, 1000);
}
}
[Link]('touchstart', startDrag);
[Link]('touchmove', drag);
[Link]('touchend', endDrag);
// For desktop support
[Link]('mousedown', startDrag);
[Link]('mousemove', drag);
[Link]('mouseup', endDrag);
// Initialize items and start the game loop
initializeItems();
let lastItemUpdateTime = [Link]();
// Show the start screen animation before starting the game
showStartScreen();
</script>
</body>
</html>