Spaces:
Running
Running
File size: 3,398 Bytes
aad8791 a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 9f757ed a833a31 46bf520 a833a31 9f757ed a833a31 46bf520 a833a31 9f757ed a833a31 |
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 103 104 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tilemap Example</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// create the scene
var scene = new THREE.Scene();
// create the camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// create the renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// create the tilemap
var tilemap = [
[0, 0, 0, 0, 0],
[0, 1, 1, 1, 0],
[0, 1, 1, 1, 0],
[0, 1, 1, 1, 0],
[0, 0, 0, 0, 0],
];
var tileSize = 1;
var tileGeometry = new THREE.PlaneGeometry(tileSize, tileSize);
var tileMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
var tiles = [];
for (var i = 0; i < tilemap.length; i++) {
for (var j = 0; j < tilemap[i].length; j++) {
if (tilemap[i][j] === 1) {
var tile = new THREE.Mesh(tileGeometry, tileMaterial);
tile.position.x = (j - tilemap[i].length / 2) * tileSize;
tile.position.y = (-i + tilemap.length / 2) * tileSize;
scene.add(tile);
tiles.push(tile);
}
}
}
// create the arrow buttons
var arrowUp = document.createElement('button');
arrowUp.innerText = '↑';
arrowUp.style.position = 'absolute';
arrowUp.style.left = '50%';
arrowUp.style.top = '10px';
arrowUp.addEventListener('click', function() {
camera.position.y += 1;
});
document.body.appendChild(arrowUp);
var arrowDown = document.createElement('button');
arrowDown.innerText = '↓';
arrowDown.style.position = 'absolute';
arrowDown.style.left = '50%';
arrowDown.style.bottom = '10px';
arrowDown.addEventListener('click', function() {
camera.position.y -= 1;
});
document.body.appendChild(arrowDown);
var arrowLeft = document.createElement('button');
arrowLeft.innerText = '←';
arrowLeft.style.position = 'absolute';
arrowLeft.style.left = '10px';
arrowLeft.style.top = '50%';
arrowLeft.addEventListener('click', function() {
camera.position.x -= 1;
});
document.body.appendChild(arrowLeft);
var arrowRight = document.createElement('button');
arrowRight.innerText = '→';
arrowRight.style.position = 'absolute';
arrowRight.style.right = '10px';
arrowRight.style.top = '50%';
arrowRight.addEventListener('click(function() {
camera.position.x += 1;
});
document.body.appendChild(arrowRight);
// animate the scene
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html> |