Spaces:

awacke1
/

HTML5-Tower-Building-3D-Game

Running

App Files Files Community

HTML5-Tower-Building-3D-Game / index.html

awacke1

Update index.html

dc57967 over 2 years ago

raw

history blame

6.64 kB

	<!DOCTYPE html>
	<html>
	<head>
	<title>Tower Building Game</title>
	<meta charset="utf-8">
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}
	canvas {
	display: block;
	}
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/cannon/build/cannon.min.js"></script>
	<script>
	let scene, camera, renderer;
	let world, stack;
	let blocks = [];
	let currentBlock = null;
	let score = 0;

	init();
	animate();

	function init() {
	// Create a Three.js scene
	scene = new THREE.Scene();

	// Create a camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 50, 100);
	camera.lookAt(0, 0, 0);

	// Create a renderer
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// Add lights to the scene
	let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
	scene.add(ambientLight);

	let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
	directionalLight.position.set(0, 100, 100);
	scene.add(directionalLight);

	// Add ground plane to the scene
	let planeGeometry = new THREE.PlaneGeometry(100, 100);
	let planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
	let plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.rotation.x = -Math.PI / 2;
	scene.add(plane);

	// Create a physics world
	world = new CANNON.World();
	world.gravity.set(0, -9.82, 0);
	world.broadphase = new CANNON.NaiveBroadphase();
	world.solver.iterations = 10;

	// Create a ground plane in the physics world
	let groundShape = new CANNON.Plane();
	let groundBody = new CANNON.Body({ mass: 0 });
	groundBody.addShape(groundShape);
	groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
	world.addBody(groundBody);

	// Add event listeners for input
	document.addEventListener('keydown', onKeyDown, false);
	}

	function animate() {
	requestAnimationFrame(animate);

	// Step the physics world
	world.step(1 / 60);

	// Update the position of the blocks in the Three.js scene
	for (let i = 0; i < blocks.length; i++) {
	let block = blocks[i];
	let body = block.userData.physicsBody;
	block.position.copy(body.position);
	block.quaternion.copy(body.quaternion);
	}

	// Render the scene
	renderer.render(scene, camera);
	}

	function createBlock() {
	// Create a block object in the Three.js scene
	let blockGeometry = new THREE.BoxGeometry(10, 10, 10);
	let blockMaterial = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('block_texture.jpg') });
	let block = new THREE.Mesh(blockGeometry, blockMaterial);
	block.position.set(0, 5, 0);
	scene.add(block);
	blocks.push(block);
	currentBlock = block;

	// Create a physics body for the block
	let blockShape = new CANNON.Box(new CANNON.Vec3(5, 5, 5));
	let blockBody = new CANNON.Body({ mass: 1 });
	blockBody.addShape(blockShape);
	blockBody.position.set(0, 15, 0);
	world.addBody(blockBody);
	block.userData.physicsBody = blockBody;
	}

	function placeBlock() {
	if (currentBlock) {
	let position = currentBlock.position.clone();
	let body = currentBlock.userData.physicsBody;
	body.position.copy(position);
	body.velocity.set(0, 0, 0);
	body.angularVelocity.set(0, 0, 0);
	stack.push(currentBlock);
	currentBlock = null;
	}
	}

	function steerBlock(direction) {
	if (currentBlock) {
	let position = currentBlock.position.clone();
	position.x += direction * 10;
	currentBlock.position.copy(position);
	}
	}

	function onKeyDown(event) {
	if (event.keyCode === 65) { // A key
	steerBlock(-1);
	} else if (event.keyCode === 68) { // D key
	steerBlock(1);
	} else if (event.keyCode === 32) { // Spacebar
	placeBlock();
	let stability = checkStability();
	if (stability) {
	score += Math.pow(2, stack.length);
	document.getElementById('score').innerHTML = 'Score: ' + score;
	} else {
	alert('Game Over!');
	}
	}
	}

	function checkStability() {
	let positions = [];
	for (let i = 0; i < stack.length; i++) {
	let block = stack[i];
	let position = block.userData.physicsBody.position;
	positions.push(position.clone());
	}
	for (let i = 0; i < stack.length - 1; i++) {
	let block1 = stack[i];
	let position1 = positions[i];
	for (let j = i + 1; j < stack.length; j++) {
	let block2 = stack[j];
	let position2 = positions[j];
	let distance = position1.distanceTo(position2);
	if (distance < 10) {
	return false;
	}
	}
	}
	return true;
	}

	function resetGame() {
	// Remove all blocks from the scene and the physics world
	while (blocks.length > 0) {
	let block = blocks.pop();
	scene.remove(block);
	world.remove(block.userData.physicsBody);
	}

	// Reset the stack and the score
	stack = [];
	score = 0;
	document.getElementById('score').innerHTML = 'Score: ' + score;

	// Create a new block
	createBlock();
	}

	resetGame();
	</script>
	<div id="score" style="position: absolute; top: 10px; left: 10px; font-size: 24px; font-weight: bold; color: white;"></div>
	<button onclick="resetGame()" style="position: absolute; top: 10px; right: 10px; font-size: 24px;">Restart</button>

	</body>
	</html>