🤖 Cannot save fiddle #2381
Description
Error code
ERRW:0.8:TTH0.8:CD0.55
Were you logged in?
Yes
Your username (if logged in)
No response
Your HTML
let angle = 0;
let velocity = 0;
let gameOver = false;
let empinando = false; // Assuming this is set by keydown/keyup
// Configuration for easier tuning
const CONFIG = {
acceleration: 0.8,
gravity: 0.6,
maxAngle: 85,
minAngle: 0,
friction: 0.95 // Adds a "smoother feel"
};
function gameLoop() {
if (gameOver) return;
// 1. Physics Logic
if (empinando) {
velocity += CONFIG.acceleration;
} else {
velocity -= CONFIG.gravity;
}
// Apply friction to dampen constant oscillation
velocity *= CONFIG.friction;
// Update angle
angle += velocity;
// 2. Constraints
if (angle <= CONFIG.minAngle) {
angle = CONFIG.minAngle;
velocity = 0;
}
// 3. Game Over Condition
if (angle > CONFIG.maxAngle) {
gameOver = true;
// Use a slight delay before reset so player sees they failed
setTimeout(() => {
alert("Caiu de costas! Game Over.");
resetGame();
}, 100);
return;
}
// 4. Rendering (Ensure 'moto' element exists)
const moto = document.getElementById('moto');
if (moto) {
// Use translate3d for better performance (hardware acceleration)
moto.style.transform = `rotate(-${angle}deg)`;
}
requestAnimationFrame(gameLoop);
}
function resetGame() {
angle = 0;
velocity = 0;
gameOver = false;
requestAnimationFrame(gameLoop);
}
// Start the game
gameLoop();Your JavaScript
let angle = 0;
let velocity = 0; // Adds a smoother feel
let gameOver = false;
function gameLoop() {
if (gameOver) return;
if (empinando) {
velocity += 0.5; // Accelerate the lift
} else {
velocity -= 0.8; // Gravity pulls it down
}
angle += velocity;
// Limits & Conditions
if (angle <= 0) {
angle = 0;
velocity = 0;
}
if (angle > 90) {
alert("Caiu de costas! Game Over.");
gameOver = true;
location.reload(); // Restart
}
moto.style.transform = `rotate(-${angle}deg)`;
requestAnimationFrame(gameLoop);
}Your CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Moto Wheelie Game</title>
<style>
body{
background:#87CEEB;
text-align:center;
font-family:Arial;
}
#game{
background:#444;
width:400px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
}
#moto{
width:60px;
height:30px;
background:red;
position:absolute;
bottom:40px;
left:50px;
transform-origin:bottom center;
}
#chao{
width:100%;
height:40px;
background:black;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<h2>Mini Moto Wheelie</h2>
<p>Segure ESPAÇO para empinar a moto!</p>
<div id="game">
<div id="moto"></div>
<div id="chao"></div>
</div>
<script>
let moto = document.getElementById("moto");
let angle = 0;
let empinando = false;
document.addEventListener("keydown", function(e){
if(e.code === "Space"){
empinando = true;
}
});
document.addEventListener("keyup", function(e){
if(e.code === "Space"){
empinando = false;
}
});
function gameLoop(){
if(empinando){
angle += 2;
}else{
angle -= 2;
}
if(angle < 0) angle = 0;
if(angle > 45) angle = 45;
moto.style.transform = "rotate(-"+angle+"deg)";
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>