<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Dunk Clone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Overall style aur mobile responsiveness */
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background-color: #000;
touch-action: manipulation;
}
/* Score display */
#scoreboard {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 24px;
z-index: 10;
}
/* Restart Button with outline, hover and click animations */
#restartBtn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
padding: 10px 20px;
font-size: 18px;
background: transparent;
border: 2px solid #fff;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
#restartBtn:hover {
background: #fff;
color: #000;
}
#restartBtn:active {
transform: translateX(-50%) scale(0.95);
}
</style>
</head>
<body>
<div id="scoreboard">Score: 0</div>
<button id="restartBtn">Restart</button>
<!-- Three.js library for 3D rendering -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- Cannon.js library for physics simulation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
<script>
// Global variables for Three.js and Cannon.js objects
let scene, camera, renderer;
let world, timeStep = 1 / 60;
let playerBody, playerMesh;
let groundBody, groundMesh;
let trampolineBody, trampolineMesh;
let hoopBody, hoopMesh, basketMesh;
let score = 0;
// Initialize Three.js scene, camera, renderer aur lights
function initThree() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(5, 10, 7.5);
scene.add(dirLight);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Initialize Cannon.js physics world
function initCannon() {
world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;
}
// Create ground plane
function createGround() {
const groundSize = 20;
const groundGeometry = new THREE.PlaneGeometry(groundSize, groundSize);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x555555 });
groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
groundMesh.rotation.x = -Math.PI / 2;
scene.add(groundMesh);
const groundShape = new CANNON.Plane();
groundBody = new CANNON.Body({ mass: 0 });
groundBody.addShape(groundShape);
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
world.addBody(groundBody);
}
// Create trampoline surface (bounce platform)
function createTrampoline() {
const trampolineWidth = 4, trampolineDepth = 2;
const trampolineGeometry = new THREE.BoxGeometry(trampolineWidth, 0.2, trampolineDepth);
const trampolineMaterial = new THREE.MeshStandardMaterial({ color: 0x00aa00 });
trampolineMesh = new THREE.Mesh(trampolineGeometry, trampolineMaterial);
trampolineMesh.position.set(0, 0.1, -3);
scene.add(trampolineMesh);
const trampolineShape = new CANNON.Box(new CANNON.Vec3(trampolineWidth / 2, 0.1, trampolineDepth / 2));
trampolineBody = new CANNON.Body({ mass: 0 });
trampolineBody.addShape(trampolineShape);
trampolineBody.position.set(0, 0.1, -3);
world.addBody(trampolineBody);
}
// Create player (simple sphere representing the character)
function createPlayer() {
const radius = 0.5;
const playerGeometry = new THREE.SphereGeometry(radius, 32, 32);
const playerMaterial = new THREE.MeshStandardMaterial({ color: 0xffaa00 });
playerMesh = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(playerMesh);
const playerShape = new CANNON.Sphere(radius);
playerBody = new CANNON.Body({ mass: 1, material: new CANNON.Material() });
playerBody.addShape(playerShape);
playerBody.position.set(0, 1, -3);
world.addBody(playerBody);
}
// Create hoop and basket (with customized colors)
function createHoop() {
// Hoop represented as a torus – color customized (cyan)
const hoopRadius = 0.5;
const tubeRadius = 0.05;
const hoopGeometry = new THREE.TorusGeometry(hoopRadius, tubeRadius, 16, 100);
const hoopMaterial = new THREE.MeshStandardMaterial({ color: 0x00ffff });
hoopMesh = new THREE.Mesh(hoopGeometry, hoopMaterial);
hoopMesh.rotation.x = Math.PI / 2;
hoopMesh.position.set(0, 3, 5);
scene.add(hoopMesh);
// Basket / backboard represented as a plane – color customized (magenta)
const basketGeometry = new THREE.PlaneGeometry(1, 0.6);
const basketMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff });
basketMesh = new THREE.Mesh(basketGeometry, basketMaterial);
basketMesh.position.set(0, 3, 4.5);
scene.add(basketMesh);
// Physics sensor (invisible) to detect score when player passes through hoop area
const hoopShape = new CANNON.Box(new CANNON.Vec3(hoopRadius, hoopRadius, 0.1));
hoopBody = new CANNON.Body({ mass: 0 });
hoopBody.addShape(hoopShape);
hoopBody.position.set(0, 3, 5);
world.addBody(hoopBody);
}
// Simple score detection: agar player hoop sensor ke pass se guzar jaye aur downward velocity ho to score count karein.
function checkScore() {
if (
playerBody.position.y < 3.2 && playerBody.position.y > 2.8 &&
Math.abs(playerBody.position.x) < 0.5 &&
playerBody.position.z > 4.5 && playerBody.position.z < 5.5 &&
playerBody.velocity.y < 0
) {
score++;
document.getElementById('scoreboard').innerText = "Score: " + score;
// Slow motion/dunk effect: upward velocity adjustment (yeh ek simplified effect hai)
playerBody.velocity.set(0, 10, 0);
}
}
// Jump/fliip effect on tap – trampoline ke paas hone par upward impulse aur angular momentum
function jump() {
// Agar player trampoline ke paas hai
if (playerBody.position.distanceTo(trampolineBody.position) < 1.5) {
playerBody.velocity.set(0, 10, 0);
playerBody.angularVelocity.set(0, 5, 0);
}
}
// Restart game: score reset aur player ki position ko wapas set karo
function restartGame() {
score = 0;
document.getElementById('scoreboard').innerText = "Score: " + score;
playerBody.position.set(0, 1, -3);
playerBody.velocity.set(0, 0, 0);
playerBody.angularVelocity.set(0, 0, 0);
}
// Main animation loop: physics update ke sath scene ko render karna
function animate() {
requestAnimationFrame(animate);
world.step(timeStep);
// Sync Three.js meshes with Cannon.js bodies
playerMesh.position.copy(playerBody.position);
playerMesh.quaternion.copy(playerBody.quaternion);
trampolineMesh.position.copy(trampolineBody.position);
trampolineMesh.quaternion.copy(trampolineBody.quaternion);
groundMesh.position.copy(groundBody.position);
groundMesh.quaternion.copy(groundBody.quaternion);
hoopMesh.position.copy(hoopBody.position);
hoopMesh.quaternion.copy(hoopBody.quaternion);
checkScore();
renderer.render(scene, camera);
}
// Event listener for single-tap (click) control for jump/flip
window.addEventListener('click', jump);
// Restart button event listener
document.getElementById('restartBtn').addEventListener('click', restartGame);
// Initialization calls
initThree();
initCannon();
createGround();
createTrampoline();
createPlayer();
createHoop();
animate();
</script>
</body>
</html>
Ads Blocker Detected!!!
We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.
