File size: 3,173 Bytes
b7c3012 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!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>
let scene, camera, renderer;
let blocks = [];
let currentBlock = null;
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);
// Add event listeners for input
document.addEventListener('mousedown', onMouseDown, false);
document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('keydown', onKeyDown, false);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function createBlock() {
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;
}
function placeBlock() {
if (currentBlock) {
currentBlock.position.y = 5;
currentBlock = null;
}
}
function onMouseDown(event) {
event.preventDefault();
createBlock();
}
function onTouchStart(event) {
event.preventDefault();
createBlock();
}
function onKeyDown(event) {
if (event.keyCode === 32) {
event.preventDefault();
placeBlock();
}
}
</script>
</body>
</html>
|