From 2f1c0bce8c02003e4ccbb016c8bcbf9870170d37 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Tue, 23 Sep 2025 07:15:07 +0000 Subject: [PATCH] create moveable players --- agent-plan.md | 12 ++ agent.md | 19 +++ assets/css/custom.css | 108 +++++++++++++++++ assets/js/game.js | 99 +++++++++++++++ assets/js/main.js | 11 ++ game.php | 23 ++++ index.php | 274 +++++++++++++++++++++++------------------- 7 files changed, 420 insertions(+), 126 deletions(-) create mode 100644 agent-plan.md create mode 100644 agent.md create mode 100644 assets/css/custom.css create mode 100644 assets/js/game.js create mode 100644 assets/js/main.js create mode 100644 game.php diff --git a/agent-plan.md b/agent-plan.md new file mode 100644 index 0000000..f09e871 --- /dev/null +++ b/agent-plan.md @@ -0,0 +1,12 @@ +# Pocket 5 Soccer Implementation Plan +## Phase 1: MVP Development +- **Task 1**: Setup Laravel backend and establish database connections. +- **Task 2**: Develop basic React components for game UI. +- **Task 3**: Integrate a 3D game engine, ensuring minimal re-rendering issues. +- **Task 4**: Implement single-player mode with AI opponents. +- **Task 5**: Setup landing page and registration/login system. +## Phase 2: Enhanced Multiplayer +- **Task 6**: Expand multiplayer capabilities to support 1v1 matches. +- **Task 7**: Implement flexible team assignment with a mix of AI and human players. +## Phase 3: Advanced Features +- **Task 8**: diff --git a/agent.md b/agent.md new file mode 100644 index 0000000..d5d544c --- /dev/null +++ b/agent.md @@ -0,0 +1,19 @@ +# Pocket 5 Soccer Project Specification +## Overview +Pocket 5 Soccer is a 5v5 multiplayer soccer game, designed for quick gaming sessions on mobile and desktop platforms. The game supports both single-player and multiplayer modes, with AI-controlled players filling in any non-human positions. +## User Roles +- **Player**: The sole user role, enjoying playing against AI or other human players. +## User Stories +- **Single Player Mode**: Players can play against AI-controlled teams. +- **Multiplayer Mode**: Players can compete against each other, with the game eventually supporting up to 8 human players in a match. +## Public Interface +- **Landing Page**: Displays a demo and includes a registration/login page leading to the main game. +## Technical Stack +### Frontend +- **React**: For UI components. +- **3D Game Engine**: Used directly without React to avoid re-rendering issues, using libraries like Three.js or Babylon.js. +### Backend +- **Laravel**: Chosen for its robustness and efficient backend capabilities. +## No Third-Party Integrations or Automations +## Design Aesthetics +- Fun, casual web game style for an engaging user experience. diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..56bc6ec --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,108 @@ + +body { + font-family: 'Roboto', sans-serif; + background-color: #F8F9FA; + color: #212529; +} + +h1, h2, h3, h4, h5, h6, .navbar-brand { + font-family: 'Poppins', sans-serif; + font-weight: 700; +} + +.navbar { + transition: background-color 0.3s ease-in-out; +} + +.hero { + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/seed/soccerhero/1600/900') no-repeat center center; + background-size: cover; + color: white; + padding: 10rem 0; + text-align: center; +} + +.hero h1 { + font-size: 4rem; + font-weight: 700; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); +} + +.hero p { + font-size: 1.5rem; + margin-bottom: 2rem; +} + +.btn-primary { + background-color: #2ECC71; + border-color: #2ECC71; + font-weight: 700; + padding: 0.75rem 1.5rem; + transition: background-color 0.2s, border-color 0.2s; +} + +.btn-primary:hover { + background-color: #27ae60; + border-color: #27ae60; +} + +.btn-secondary { + background-color: #3498DB; + border-color: #3498DB; + font-weight: 700; + padding: 0.75rem 1.5rem; + transition: background-color 0.2s, border-color 0.2s; +} + +.btn-secondary:hover { + background-color: #2980b9; + border-color: #2980b9; +} + +section { + padding: 5rem 0; +} + +.section-title { + text-align: center; + margin-bottom: 3rem; + font-size: 2.5rem; +} + +.card { + border: none; + border-radius: 0.5rem; + box-shadow: 0 4px 15px rgba(0,0,0,0.08); + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0,0,0,0.12); +} + +.card-title { + color: #2ECC71; +} + +.list-group-item { + border: none; + padding-left: 0; +} + +.control-item { + background-color: #e9ecef; + padding: 1rem; + border-radius: 0.5rem; + margin-bottom: 1rem; +} + +.control-item strong { + color: #3498DB; +} + +footer { + background-color: #212529; + color: white; + padding: 2rem 0; +} diff --git a/assets/js/game.js b/assets/js/game.js new file mode 100644 index 0000000..db35516 --- /dev/null +++ b/assets/js/game.js @@ -0,0 +1,99 @@ +import * as THREE from 'three'; + +// Basic Scene Setup +const scene = new THREE.Scene(); +scene.background = new THREE.Color(0x87CEEB); // Sky blue background + +const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); +camera.position.set(45, 25, 0); + +const renderer = new THREE.WebGLRenderer({ antialias: true }); +renderer.setSize(window.innerWidth, window.innerHeight); +renderer.shadowMap.enabled = true; +document.body.appendChild(renderer.domElement); + +// Lighting +const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); +scene.add(ambientLight); + +const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); +directionalLight.position.set(20, 30, 20); +directionalLight.castShadow = true; +directionalLight.shadow.camera.top = 20; +directionalLight.shadow.camera.bottom = -20; +directionalLight.shadow.camera.left = -20; +directionalLight.shadow.camera.right = 20; +scene.add(directionalLight); + +// Field +const fieldGeometry = new THREE.PlaneGeometry(60, 100); +const fieldMaterial = new THREE.MeshStandardMaterial({ color: 0x008000 }); // Green grass +const field = new THREE.Mesh(fieldGeometry, fieldMaterial); +field.rotation.x = -Math.PI / 2; +field.receiveShadow = true; +scene.add(field); + +// Player +const playerGeometry = new THREE.CapsuleGeometry(1, 2, 4, 8); +const playerMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 }); // Red player +const player = new THREE.Mesh(playerGeometry, playerMaterial); +player.position.y = 1.5; // Stand on the field +player.castShadow = true; +scene.add(player); + +// Simple Bot Players (Static) +const botMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }); // Blue bots +for (let i = 0; i < 4; i++) { + const bot = new THREE.Mesh(playerGeometry, botMaterial); + bot.position.set( + (Math.random() - 0.5) * 50, + 1.5, + (Math.random() - 0.5) * 80 + ); + bot.castShadow = true; + scene.add(bot); +} + + +// Player Controls +const keyboardState = {}; +window.addEventListener('keydown', (e) => { keyboardState[e.code] = true; }); +window.addEventListener('keyup', (e) => { keyboardState[e.code] = false; }); + +const playerSpeed = 0.2; + +function updatePlayerPosition() { + if (keyboardState['ArrowUp']) { + player.position.z -= playerSpeed; + } + if (keyboardState['ArrowDown']) { + player.position.z += playerSpeed; + } + if (keyboardState['ArrowLeft']) { + player.position.x -= playerSpeed; + } + if (keyboardState['ArrowRight']) { + player.position.x += playerSpeed; + } +} + +// Animation Loop +function animate() { + requestAnimationFrame(animate); + updatePlayerPosition(); + + // Camera follows player from the sideline + camera.position.z = player.position.z; + camera.lookAt(player.position); + + renderer.render(scene, camera); +} + +// Handle Window Resize +window.addEventListener('resize', () => { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); +}); + +animate(); diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..472e1f1 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,11 @@ + +// Smooth scrolling for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); diff --git a/game.php b/game.php new file mode 100644 index 0000000..80b6015 --- /dev/null +++ b/game.php @@ -0,0 +1,23 @@ + + + + + + Pocket 5 Soccer + + + + + + + diff --git a/index.php b/index.php index 6f7ffab..b0c21d9 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,153 @@ - - + - - - New Style - - - - + + + Pocket 5 Soccer - Fast-Paced 5v5 Action + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Fast-Paced 5v5 Action

+

Real-time multiplayer soccer designed for quick, intense matches.

+ Play Now + Learn More +
+
+ +
+ +
+
+

Game Rules & Play Style

+
+
+ A top-down view of a soccer game strategy board. +
+
+
+
+

+ +

+
+
+
    +
  • Match Specs: 5v5 teams, 2-minute match duration.
    • +
  • Control Model: Each human controls one player.
    • +
  • Orientation: Vertical screen for mobile.
    • +
  • AI Players: AI fills all positions not controlled by humans.
    • +
+
+
+
+
+

+ +

+
+
+
    +
  • Smart Passing: Auto-targets nearest teammate in a 30-degree arc.
    • +
  • Directional Shooting: Ball trajectory follows player's facing direction.
    • +
  • Active Tackle: High-speed sprint to win the ball. Failure results in a 1-second movement penalty.
    • +
+
+
+
+
+
+
+
+
+ + +
+
+

Dual Platform Controls

+
+
+ Close-up on a person's hands using a mobile phone for gaming. +
+
+
+
+

Mobile

+
Movement: Virtual Joystick
+
Actions: On-screen Buttons
+
+
+

Desktop

+
Movement: Arrow Keys
+
Pass: 'S' Key
+
Shoot: 'D' Key
+
Tackle: Spacebar
+
+
+
+
+
+
+
+ + + + + + + + - + \ No newline at end of file