JavaScript dilinde bir dinozor oyunu yapmak için aşağıdaki gibi HTML, CSS ve JavaScript kodlarını kullanabilirsiniz:
HTML Kodları:
<!DOCTYPE html>
<html>
<head>
<style>
#game-container {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
#dino {
width: 50px;
height: 80px;
position: absolute;
bottom: 0;
left: 50px;
}
.obstacle {
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
background-color: red;
}
</style>
</head>
<body>
<div id="game-container"></div>
<script src="game.js"></script>
</body>
</html>
JavaScript Kodları:
const gameContainer = document.getElementById("game-container");
const dino = document.createElement("div");
dino.id = "dino";
gameContainer.appendChild(dino);
let obstacles = [];
function createObstacle() {
let obstacle = document.createElement("div");
obstacle.classList.add("obstacle");
obstacle.style.left = gameContainer.offsetWidth + "px";
gameContainer.appendChild(obstacle);
obstacles.push(obstacle);
}
setInterval(() => {
createObstacle();
for (let obstacle of obstacles) {
let x = obstacle.offsetLeft - 10;
obstacle.style.left = x + "px";
if (x + obstacle.offsetWidth < 0) {
gameContainer.removeChild(obstacle);
obstacles.splice(obstacles.indexOf(obstacle), 1);
}
}
}, 100);
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
let y = dino.offsetTop - 80;
dino.style.top = y + "px";
}
});
Bu kodlar, dinozor oyununun temel yapısını oluşturur. Oyunda dinozor, ekranda hareket ettirilir ve ekranda belirecek engellere çarpmamalıdır. Oyunu geliştirmek için ekstra fonksiyonaliteler eklenebilir.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Java programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.