1 results found
Escreva um jogo 3D de carro em um único código HTML para Android com joystick.
Criar um jogo 3D de carro completo com joystick virtual em um *único* arquivo HTML para Android, utilizando apenas HTML, CSS e JavaScript, é uma tarefa complexa que envolve múltiplas bibliotecas.
Para ser conciso e útil, vou fornecer um *exemplo mínimo funcional* que usa:
* **Three.js** para renderização 3D.
* **Cannon-es** para física básica.
* JavaScript puro para o joystick virtual e lógica do jogo.
Este código estará em um único arquivo HTML e funcionará em navegadores Android com suporte a touch.
---
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Jogo de Carro 3D Simples</title>
<style>
body { margin: 0; overflow: hidden; background-color: #333; }
canvas { display: block; }
#joystick-base {
position: absolute;
bottom: 20px;
left: 20px;
width: 150px;
height: 150px;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1000;
}
#joystick-handle {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
transform: translate(0, 0);
pointer-events: none; /* Não captura eventos, permitindo que a base os receba */
}
#accelerate-brake-buttons {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.action-button {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
color: white;
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center;
user-select: none; /* Previne seleção de texto */
}
.action-button:active {
background: rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="joystick-base">
<div id="joystick-handle"></div>
</div>
<div id="accelerate-brake-buttons">
<div id="accelerate" class="action-button">↑</div>
<div id="brake" class="action-button">↓</div>
</div>
<!-- Bibliotecas 3D e Física via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cannon-es.min.js"></script>
<script>
// --- Configuração da Cena Three.js ---
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87CEEB); // Céu azul
// Luzes
const ambientLight = new THREE.AmbientLight(0x404040, 2); // Luz ambiente suave
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
scene.add(directionalLight);
// --- Configuração do Mundo Físico Cannon-es ---
const world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.82, 0) // Gravidade no eixo Y
});
// --- Chão (Three.js + Cannon-es) ---
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x228B22 }); // Grama
const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
groundMesh.rotation.x = -Math.PI / 2; // Rotaciona para ser horizontal
scene.add(groundMesh);
const groundBody = new CANNON.Body({
mass: 0, // Massa 0 faz com que seja estático
shape: new CANNON.Plane(),
material: new CANNON.Material("groundMaterial")
});
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); // Rotaciona para ser horizontal
world.addBody(groundBody);
// --- Carro (Three.js + Cannon-es) ---
const carWidth = 1.8;
const carHeight = 1;
const carDepth = 4;
const carGeometry = new THREE.BoxGeometry(carWidth, carHeight, carDepth);
const carMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); // Carro vermelho
const carMesh = new THREE.Mesh(carGeometry, carMaterial);
scene.add(carMesh);
const carShape = new CANNON.Box(new CANNON.Vec3(carWidth / 2, carHeight / 2, carDepth / 2));
const carBody = new CANNON.Body({
mass: 150, // Massa do carro
position: new CANNON.Vec3(0, 1.5, 0),
shape: carShape,
angularDamping: 0.8, // Amortecimento angular para suavizar rotação
linearDamping: 0.9, // Amortecimento linear para suavizar movimento
material: new CANNON.Material("carMaterial")
});
world.addBody(carBody);
// --- Câmera seguindo o carro ---
camera.position.set(0, 5, 10);
camera.lookAt(carMesh.position);
// --- Controles de Joystick e Botões ---
const joystickBase = document.getElementById('joystick-base');
const joystickHandle = document.getElementById('joystick-handle');
const accelerateButton = document.getElementById('accelerate');
const brakeButton = document.getElementById('brake');
let joystickActive = false;
let joystickCenter = { x: 0, y: 0 };
let joystickCurrentPos = { x: 0, y: 0 };
let acceleratePressed = false;
let brakePressed = false;
const maxJoystickDistance = joystickBase.offsetWidth / 2; // Raio da base
const maxSteerAngle = Math.PI / 8; // Ângulo máximo de viragem
const maxCarSpeed = 20; // Velocidade máxima do carro
const accelerationForce = 300; // Força de aceleração
const brakeForce = 150; // Força de frenagem
function getTouchPosition(event) {
const rect = joystickBase.getBoundingClientRect();
return {
x: event.clientX - rect.left - rect.width / 2,
y: event.clientY - rect.top - rect.height / 2
};
}
joystickBase.addEventListener('touchstart', (e) => {
e.preventDefault(); // Evita scroll da página
joystickActive = true;
const touch = e.touches[0];
joystickCenter = {
x: joystickBase.offsetLeft + joystickBase.offsetWidth / 2,
y: joystickBase.offsetTop + joystickBase.offsetHeight / 2
};
joystickCurrentPos = {
x: touch.clientX - joystickCenter.x,
y: touch.clientY - joystickCenter.y
};
updateJoystickHandle();
});
joystickBase.addEventListener('touchmove', (e) => {
if (!joystickActive) return;
e.preventDefault();
const touch = e.touches[0];
let x = touch.clientX - joystickCenter.x;
let y = touch.clientY - joystickCenter.y;
const distance = Math.sqrt(x * x + y * y);
if (distance > maxJoystickDistance) {
x = (x / distance) * maxJoystickDistance;
y = (y / distance) * maxJoystickDistance;
}
joystickCurrentPos = { x, y };
updateJoystickHandle();
});
joystickBase.addEventListener('touchend', () => {
joystickActive = false;
joystickCurrentPos = { x: 0, y: 0 };
updateJoystickHandle();
});
function updateJoystickHandle() {
joystickHandle.style.transform = `translate(${joystickCurrentPos.x}px, ${joystickCurrentPos.y}px)`;
}
accelerateButton.addEventListener('touchstart', (e) => {
e.preventDefault();
acceleratePressed = true;
});
accelerateButton.addEventListener('touchend', () => {
acceleratePressed = false;
});
brakeButton.addEventListener('touchstart', (e) => {
e.preventDefault();
brakePressed = true;
});
brakeButton.addEventListener('touchend', () => {
brakePressed = false;
});
// --- Loop Principal do Jogo ---
const clock = new THREE.Clock();
let oldElapsedTime = 0;
function animate() {
requestAnimationFrame(animate);
const elapsedTime = clock.getElapsedTime();
const deltaTime = elapsedTime - oldElapsedTime;
oldElapsedTime = elapsedTime;
// Atualiza o mundo físico
world.step(1 / 60, deltaTime, 3);
// Sincroniza Three.js com Cannon-es
carMesh.position.copy(carBody.position);
carMesh.quaternion.copy(carBody.quaternion);
// --- Lógica de Movimento do Carro com Joystick e Botões ---
const carForward = new CANNON.Vec3(0, 0, 1);
carBody.quaternion.vmult(carForward, carForward); // Transforma vetor local em global
const carRight = new CANNON.Vec3(1, 0, 0);
carBody.quaternion.vmult(carRight, carRight);
let engineForce = 0;
let steerAngle = 0;
if (acceleratePressed) {
engineForce += accelerationForce;
}
if (brakePressed) {
engineForce -= brakeForce;
}
// Joystick no eixo X para direção (virar)
steerAngle = -joystickCurrentPos.x / maxJoystickDistance * maxSteerAngle;
// Aplica força de motor
carBody.applyForce(carForward.scale(engineForce));
// Aplica torque para virar o carro
carBody.angularVelocity.y = steerAngle * 5; // Multiplicador para tornar a virada mais responsiva
// Limita a velocidade do carro
const currentSpeed = carBody.velocity.length();
if (currentSpeed > maxCarSpeed) {
carBody.velocity.normalize();
carBody.velocity.scale(maxCarSpeed, carBody.velocity);
}
// Arrasto lateral (simulação de pneu) - muito simplificado
const sidewaysVelocity = carBody.velocity.dot(carRight);
const frictionForce = carRight.scale(-sidewaysVelocity * 0.5); // Ajuste o 0.5 para mais/menos "arrasto"
carBody.applyForce(frictionForce);
// --- Câmera seguindo o carro ---
const offset = new THREE.Vector3(0, 5, 10); // Offset da câmera (atrás e acima)
offset.applyQuaternion(carMesh.quaternion); // Rotaciona o offset com o carro
camera.position.copy(carMesh.position).add(offset);
camera.lookAt(carMesh.position);
renderer.render(scene, camera);
}
animate();
// --- Redimensionamento da Janela ---
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
```
---
### Como usar e o que ele faz:
1. **Copie e Salve:** Salve o código acima em um arquivo chamado `index.html`.
2. **Transfira para Android:**
* Você pode transferir este arquivo para o seu telefone Android.
* Abra-o com um navegador web (Chrome, Firefox, etc.).
* Para uma experiência mais "de aplicativo", você pode considerar empacotá-lo em um WebView usando ferramentas como Capacitor ou Cordova, mas isso já sairia do escopo de "único código HTML".
3. **Interação:**
* **Joystick Virtual (Canto Inferior Esquerdo):** Arraste o círculo menor dentro do maior para virar o carro para a esquerda ou direita.
* **Botões de Ação (Canto Inferior Direito):**
* **↑ (Acelerar):** Pressione e segure para fazer o carro andar para frente.
* **↓ (Frear):** Pressione e segure para frear/dar ré.
### Explicação Concisa dos Componentes:
* **HTML:**
* Define a estrutura da página, incluindo o `canvas` para o jogo e os elementos `div` para o joystick e botões.
* `meta name="viewport"` é **crucial** para que o layout se adapte bem a dispositivos móveis e para desativar o zoom.
* Links para as bibliotecas `Three.js` e `Cannon-es` via CDN (Content Delivery Network).
* **CSS:**
* Estiliza o `canvas` para preencher a tela.
* Posiciona e estiliza o joystick (`joystick-base` e `joystick-handle`) e os botões (`accelerate-brake-buttons`, `.action-button`) de forma responsiva na tela.
* **JavaScript:**
* **Three.js Setup:** Inicializa a cena 3D, câmera, renderizador, luzes e cria a representação visual do chão e do carro.
* **Cannon-es Setup:** Inicializa o mundo da física, define a gravidade e cria os corpos físicos para o chão e o carro, que interagem entre si.
* **Sincronização:** No `animate` loop, a posição e rotação do `carMesh` (Three.js) são constantemente atualizadas para corresponder ao `carBody` (Cannon-es), fazendo com que a representação visual siga a física.
* **Joystick e Botões:**
* Gerencia eventos `touchstart`, `touchmove`, `touchend` para o joystick e os botões.
* Calcula a posição do joystick e traduz isso em `steerAngle` (ângulo de viragem).
* `acceleratePressed` e `brakePressed` controlam a aceleração/frenagem.
* **Lógica do Carro:**
* Aplica `force` (força) para a aceleração/frenagem na direção atual do carro.
* Aplica `angularVelocity` (velocidade angular) para virar o carro.
* Inclui uma simplificação de "arrasto lateral" para simular um pouco de fricção dos pneus.
* Limita a velocidade máxima.
* **Câmera:** A câmera é posicionada atrás e acima do carro e segue sua movimentação e rotação.
* **Game Loop (`animate`):** Função recursiva que atualiza a física, a lógica do jogo e renderiza a cena 3D a cada quadro.
* **Resize:** Garante que o jogo se adapte a mudanças de orientação ou tamanho da tela.
Este exemplo fornece uma base sólida para um jogo de carro 3D interativo em um único arquivo HTML para dispositivos Android.
Related Questions
Quick Insights
Try Pro!
Get priority access to the latest AI models and unlimited searches.