|
|
<!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() { |
|
|
|
|
|
scene = new THREE.Scene(); |
|
|
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
camera.position.set(0, 50, 100); |
|
|
camera.lookAt(0, 0, 0); |
|
|
|
|
|
|
|
|
renderer = new THREE.WebGLRenderer({ antialias: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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> |
|
|
|
