Sprunki Game

SPRUNKI GAME

Score: {{ score }}

Lives: {{ lives }}

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Vue.js App const { createApp, ref } = Vue; createApp({ setup() { const gameStarted = ref(false); const score = ref(0); const lives = ref(3); const startGame = () => { gameStarted.value = true; initThreeJS(); }; return { gameStarted, score, lives, startGame }; } }).mount('#app'); // Three.js Game function initThreeJS() { // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 15); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Ground const groundGeometry = new THREE.PlaneGeometry(20, 20); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x3a5f0b }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; scene.add(ground); // Player (simple sphere for now) const playerGeometry = new THREE.SphereGeometry(0.5, 32, 32); const playerMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 }); const player = new THREE.Mesh(playerGeometry, playerMaterial); player.position.y = 0.5; scene.add(player); // Collectibles const collectibles = []; const collectibleGeometry = new THREE.SphereGeometry(0.3, 32, 32); const collectibleMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 }); for (let i = 0; i < 10; i++) { const collectible = new THREE.Mesh(collectibleGeometry, collectibleMaterial); collectible.position.x = Math.random() * 18 - 9; collectible.position.z = Math.random() * 18 - 9; collectible.position.y = 0.3; scene.add(collectible); collectibles.push(collectible); } // Obstacles const obstacles = []; const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1); const obstacleMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }); for (let i = 0; i < 5; i++) { const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial); obstacle.position.x = Math.random() * 18 - 9; obstacle.position.z = Math.random() * 18 - 9; obstacle.position.y = 0.5; scene.add(obstacle); obstacles.push(obstacle); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Game state const keys = {}; const speed = 0.1; // Keyboard controls window.addEventListener('keydown', (e) => { keys[e.key] = true; }); window.addEventListener('keyup', (e) => { keys[e.key] = false; }); // Animation loop function animate() { requestAnimationFrame(animate); // Player movement if (keys['ArrowUp'] || keys['w']) player.position.z -= speed; if (keys['ArrowDown'] || keys['s']) player.position.z += speed; if (keys['ArrowLeft'] || keys['a']) player.position.x -= speed; if (keys['ArrowRight'] || keys['d']) player.position.x += speed; // Keep player within bounds player.position.x = Math.max(-9, Math.min(9, player.position.x)); player.position.z = Math.max(-9, Math.min(9, player.position.z)); // Collectible collision collectibles.forEach((collectible, index) => { if (collectible && player.position.distanceTo(collectible.position) < 0.8) { scene.remove(collectible); collectibles.splice(index, 1); // Score update with anime.js effect anime({ targets: document.querySelector('.ui div:first-child'), scale: [1.5, 1], duration: 500, easing: 'easeOutElastic' }); // Update score in Vue const app = document.querySelector('#app').__vue_app__; app._instance.proxy.score++; } }); // Obstacle collision obstacles.forEach(obstacle => { if (player.position.distanceTo(obstacle.position) < 1) { // Handle collision (simple bounce back) const direction = player.position.clone().sub(obstacle.position).normalize(); player.position.add(direction.multiplyScalar(0.2)); // Update lives in Vue const app = document.querySelector('#app').__vue_app__; app._instance.proxy.lives--; } }); controls.update(); renderer.render(scene, camera); } animate(); }