https://www.instagram.com/m_city_mariusz_waras
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prosta gra 3D do WordPressa</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #111;
font-family: Arial, sans-serif;
}
#game {
width: 100vw;
height: 100vh;
display: block;
}
.hud {
position: fixed;
top: 12px;
left: 12px;
z-index: 10;
color: white;
background: rgba(0,0,0,0.45);
padding: 10px 12px;
border-radius: 10px;
line-height: 1.45;
font-size: 14px;
}
</style>
</head>
<body>
<div class="hud">
<div><strong>Sterowanie</strong></div>
<div>↑ ↓ ← → — ruch</div>
<div>A / D — obrót kamery</div>
<div>Shift — szybciej</div>
</div>
<canvas id="game"></canvas>
<script type="module">
import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
const canvas = document.getElementById('game');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x111111, 30, 140);
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
const ambient = new THREE.AmbientLight(0xffffff, 0.65);
scene.add(ambient);
const sun = new THREE.DirectionalLight(0xffffff, 1.0);
sun.position.set(20, 30, 10);
sun.castShadow = true;
sun.shadow.mapSize.width = 2048;
sun.shadow.mapSize.height = 2048;
scene.add(sun);
const groundGeometry = new THREE.PlaneGeometry(160, 160, 100, 100);
const pos = groundGeometry.attributes.position;
function getHeight(x, y) {
return Math.sin(x * 0.13) * 2.5 + Math.cos(y * 0.17) * 2 + Math.sin((x + y) * 0.08) * 1.4;
}
for (let i = 0; i < pos.count; i++) {
const x = pos.getX(i);
const y = pos.getY(i);
pos.setZ(i, getHeight(x, y));
}
groundGeometry.computeVertexNormals();
groundGeometry.rotateX(-Math.PI / 2);
const ground = new THREE.Mesh(
groundGeometry,
new THREE.MeshStandardMaterial({ color: 0x4d6b3c, roughness: 1 })
);
ground.receiveShadow = true;
scene.add(ground);
const grid = new THREE.GridHelper(160, 32, 0x888888, 0x333333);
grid.position.y = 0.05;
scene.add(grid);
const player = {
x: 0,
y: 0,
z: 0,
rotation: 0,
speed: 0.12
};
const playerMesh = new THREE.Mesh(
new THREE.BoxGeometry(1.2, 2.2, 1.2),
new THREE.MeshStandardMaterial({ color: 0xe6e6e6 })
);
playerMesh.castShadow = true;
scene.add(playerMesh);
function terrainHeight(worldX, worldZ) {
return getHeight(worldX, worldZ);
}
const obstacles = [];
const obstacleGeometry = new THREE.BoxGeometry(3, 6, 3);
for (let i = 0; i < 30; i++) {
const x = (Math.random() - 0.5) * 120;
const z = (Math.random() - 0.5) * 120;
const y = terrainHeight(x, z) + 3;
const mesh = new THREE.Mesh(
obstacleGeometry,
new THREE.MeshStandardMaterial({ color: 0x555555 })
);
mesh.position.set(x, y, z);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
obstacles.push(mesh);
}
const goal = new THREE.Mesh(
new THREE.CylinderGeometry(0, 2.2, 5, 4),
new THREE.MeshStandardMaterial({ color: 0xffcc33, emissive: 0x332200 })
);
goal.position.set(45, terrainHeight(45, -35) + 2.5, -35);
scene.add(goal);
const keys = {};
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(e.key)) {
e.preventDefault();
}
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
function collides(nx, nz) {
for (const item of obstacles) {
const dx = nx - item.position.x;
const dz = nz - item.position.z;
if (Math.abs(dx) < 2.2 && Math.abs(dz) < 2.2) {
return true;
}
}
return false;
}
const clock = new THREE.Clock();
let won = false;
function animate() {
requestAnimationFrame(animate);
const dt = Math.min(clock.getDelta() * 60, 2);
const moveSpeed = (keys.Shift ? 0.22 : player.speed) * dt;
const rotateSpeed = 0.035 * dt;
if (keys.a || keys.A) player.rotation += rotateSpeed;
if (keys.d || keys.D) player.rotation -= rotateSpeed;
let moveX = 0;
let moveZ = 0;
if (keys.ArrowUp) {
moveX += Math.sin(player.rotation) * moveSpeed;
moveZ += Math.cos(player.rotation) * moveSpeed;
}
if (keys.ArrowDown) {
moveX -= Math.sin(player.rotation) * moveSpeed;
moveZ -= Math.cos(player.rotation) * moveSpeed;
}
if (keys.ArrowLeft) {
moveX += Math.sin(player.rotation + Math.PI / 2) * moveSpeed;
moveZ += Math.cos(player.rotation + Math.PI / 2) * moveSpeed;
}
if (keys.ArrowRight) {
moveX += Math.sin(player.rotation - Math.PI / 2) * moveSpeed;
moveZ += Math.cos(player.rotation - Math.PI / 2) * moveSpeed;
}
const nextX = player.x + moveX;
const nextZ = player.y + moveZ;
if (!collides(nextX, nextZ)) {
player.x = nextX;
player.y = nextZ;
}
player.z = terrainHeight(player.x, player.y);
playerMesh.position.set(player.x, player.z + 1.1, player.y);
playerMesh.rotation.y = player.rotation;
const camDistance = 8;
const camHeight = 5;
camera.position.x = player.x - Math.sin(player.rotation) * camDistance;
camera.position.z = player.y - Math.cos(player.rotation) * camDistance;
camera.position.y = player.z + camHeight;
camera.lookAt(player.x, player.z + 1.6, player.y);
goal.rotation.y += 0.01 * dt;
const distToGoal = Math.hypot(player.x - goal.position.x, player.y - goal.position.z);
if (!won && distToGoal < 4) {
won = true;
setTimeout(() => {
alert('Dotarłeś do celu. To jest baza pod dalszą rozbudowę gry.');
}, 100);
}
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
