Simple Falling Object Game | AI Challenge
Best AI for Simple Falling Object Game
Single-shot · temp 0.7 · real votes · identical prompts·How we test →
Loading...
vs
Ask them anything yourself
Single-shot · temp 0.7 · real votes · identical prompts·How we test →
vsAsk them anything yourself
Build a basic interactive browser game.
Create the HTML, CSS, and JavaScript for a very simple, playable browser mini-game. Game concept: A 'Catch the Falling Object' game where the player controls a basket/paddle at the bottom (using mouse movement or arrow keys) to catch simple shapes falling from the top. Keep the design minimal and clean. Include a basic score counter.
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
Here's a simple "Catch the Falling Object" game with clean, minimal design:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch the Falling Objects</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#game-container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #e8f4f8;
}
#player {
position: absolute;
width: 100px;
height: 20px;
background-color: #3498db;
border-radius: 5px;
bottom: 20px;
}
.falling-object {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #e74c3c;
}
#score-display {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
color: #2c3e50;
}
#start-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 24px;
}
#start-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#start-button:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<div id="game-container">
<div id="player"></div>
<div id="score-display">Score: 0</div>
<div id="start-screen">
<h1>Catch the Falling Objects</h1>
<p>Use your mouse or arrow keys to move the paddle</p>
<button id="start-button">Start Game</button>
</div>
</div>
<script>
const gameContainer = document.getElementById('game-container');
const player = document.getElementById('player');
const scoreDisplay = document.getElementById('score-display');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
let score = 0;
let gameRunning = false;
let playerX = window.innerWidth / 2 - 50;
let fallingObjects = [];
let lastSpawnTime = 0;
let animationId;
// Initialize player position
player.style.left = playerX + 'px';
// Event listeners
startButton.addEventListener('click', startGame);
document.addEventListener('mousemove', movePlayerWithMouse);
document.addEventListener('keydown', movePlayerWithKeys);
function startGame() {
score = 0;
gameRunning = true;
startScreen.style.display = 'none';
scoreDisplay.textContent = 'Score: 0';
// Clear any existing objects
fallingObjects.forEach(obj => {
if (obj.element && obj.element.parentNode) {
gameContainer.removeChild(obj.element);
}
});
fallingObjects = [];
gameLoop();
}
function gameLoop() {
if (!gameRunning) return;
updatePlayerPosition();
spawnFallingObjects();
updateFallingObjects();
animationId = requestAnimationFrame(gameLoop);
}
function updatePlayerPosition() {
player.style.left = playerX + 'px';
}
function movePlayerWithMouse(e) {
if (!gameRunning) return;
playerX = e.clientX - player.clientWidth / 2;
// Keep player within bounds
playerX = Math.max(0, Math.min(window.innerWidth - player.clientWidth, playerX));
}
function movePlayerWithKeys(e) {
if (!gameRunning) return;
const moveAmount = 20;
if (e.key === 'ArrowLeft') {
playerX = Math.max(0, playerX - moveAmount);
} else if (e.key === 'ArrowRight') {
playerX = Math.min(window.innerWidth - player.clientWidth, playerX + moveAmount);
}
}
function spawnFallingObjects() {
const currentTime = Date.now();
const spawnInterval = 1000; // 1 second
if (currentTime - lastSpawnTime > spawnInterval) {
const object = document.createElement('div');
object.className = 'falling-object';
// Random position at the top
const x = Math.random() * (window.innerWidth - 30);
const y = 0;
object.style.left = x + 'px';
object.style.top = y + 'px';
gameContainer.appendChild(object);
fallingObjects.push({
element: object,
x: x,
y: y,
speed: 2 + Math.random()
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
*adjusts virtual collar* A box that catches falling squares. How delightfully old-fashioned. Shall we start with the div that screams "I'm a basket" in CSS?
