Giới thiệu về game: 🟦⬇️⬆️🟥
Mục tiêu: Người chơi điều khiển một khối màu xanh để tránh các khối đỏ rơi từ trên xuống. Mỗi lần tránh được một chướng ngại vật, điểm số sẽ tăng lên.
Điều khiển: Người chơi sử dụng các phím mũi tên trái và phải để di chuyển khối xanh qua lại.
Kết thúc: Trò chơi kết thúc khi khối xanh va chạm với một khối đỏ, và thông báo điểm số sẽ hiển thị. Cách hoạt động:
Cách hoạt động:
Canvas API: Trò chơi sử dụng HTML5 Canvas để vẽ khối người chơi và các chướng ngại vật.
JavaScript: Điều khiển chuyển động của người chơi và chướng ngại vật, đồng thời kiểm tra va chạm giữa các đối tượng. Khung trò chơi: Trò chơi sẽ lặp lại liên tục, với các chướng ngại vật mới xuất hiện sau mỗi khoảng thời gian xác định.
Ý TƯỞNG Mở rộng:
Bạn có thể mở rộng trò chơi này bằng cách thêm các tính năng như nhiều cấp độ, tốc độ chướng ngại vật tăng dần, hoặc các loại chướng ngại vật khác nhau để làm cho trò chơi thú vị hơn.
HƯỚNG DẪN CODE TẠO GAME ONLINE HTML ĐƠN GIẢN " KHỐI XANH TRÁNH NÉ ".
Code HTML công cụ tạo game đơn giản bằng JavaScript (JavaScript Game Engine)
Dưới đây là mã HTML để tạo một công cụ game đơn giản bằng JavaScript với nút bắt đầu chơi và điều khiển trên thiết bị di động:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple JavaScript Game</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
#gameCanvas {
border: 2px solid #333;
background-color: #eee;
display: none; /* Ẩn canvas cho đến khi bắt đầu chơi */
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
color: #333;
display: none; /* Ẩn điểm số cho đến khi bắt đầu chơi */
}
#startButton {
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
}
#controls {
display: flex;
justify-content: center;
margin-top: 20px;
display: none; /* Ẩn các nút điều khiển cho đến khi bắt đầu chơi */
}
.control-button {
padding: 15px 30px;
margin: 0 10px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
border: none;
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="score">Score: 0</div>
<button id="startButton" onclick="startGame()">Bắt đầu chơi</button>
<div id="controls">
<button class="control-button" id="leftButton">Trái</button>
<button class="control-button" id="rightButton">Phải</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const playerWidth = 50;
const playerHeight = 50;
let playerX = (canvas.width - playerWidth) / 2;
let playerY = canvas.height - playerHeight - 10;
let rightPressed = false;
let leftPressed = false;
let score = 0;
let gameInterval;
let obstacleInterval;
const obstacles = [];
const obstacleWidth = 50;
const obstacleHeight = 50;
const obstacleSpeed = 2;
function drawPlayer() {
ctx.fillStyle = '#00aaff';
ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
}
function drawObstacle(obstacle) {
ctx.fillStyle = '#ff4444';
ctx.fillRect(obstacle.x, obstacle.y, obstacleWidth, obstacleHeight);
}
function movePlayer() {
if (rightPressed && playerX < canvas.width - playerWidth) {
playerX += 7;
} else if (leftPressed && playerX > 0) {
playerX -= 7;
}
}
function generateObstacle() {
const x = Math.random() * (canvas.width - obstacleWidth);
obstacles.push({x: x, y: -obstacleHeight});
}
function updateObstacles() {
for (let i = 0; i < obstacles.length; i++) {
obstacles[i].y += obstacleSpeed;
if (obstacles[i].y > canvas.height) {
obstacles.splice(i, 1);
score += 1;
document.getElementById('score').textContent = 'Score: ' + score;
}
}
}
function detectCollision() {
for (let i = 0; i < obstacles.length; i++) {
if (playerX < obstacles[i].x + obstacleWidth &&
playerX + playerWidth > obstacles[i].x &&
playerY < obstacles[i].y + obstacleHeight &&
playerY + playerHeight > obstacles[i].y) {
clearInterval(gameInterval);
clearInterval(obstacleInterval);
alert('Game Over! Your Score: ' + score);
document.location.reload();
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
for (let i = 0; i < obstacles.length; i++) {
drawObstacle(obstacles[i]);
}
movePlayer();
updateObstacles();
detectCollision();
}
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('gameCanvas').style.display = 'block';
document.getElementById('score').style.display = 'block';
document.getElementById('controls').style.display = 'flex';
document.addEventListener('keydown', function(event) {
if (event.key == 'Right' || event.key == 'ArrowRight') {
rightPressed = true;
} else if (event.key == 'Left' || event.key == 'ArrowLeft') {
leftPressed = true;
}
});
document.addEventListener('keyup', function(event) {
if (event.key == 'Right' || event.key == 'ArrowRight') {
rightPressed = false;
} else if (event.key == 'Left' || event.key == 'ArrowLeft') {
leftPressed = false;
}
});
document.getElementById('leftButton').addEventListener('touchstart', function() {
leftPressed = true;
});
document.getElementById('leftButton').addEventListener('touchend', function() {
leftPressed = false;
});
document.getElementById('rightButton').addEventListener('touchstart', function() {
rightPressed = true;
});
document.getElementById('rightButton').addEventListener('touchend', function() {
rightPressed = false;
});
obstacleInterval = setInterval(generateObstacle, 2000);
gameInterval = setInterval(draw, 10);
}
</script>
</body>
</html>Bạn có thể sử dụng mã này để tạo một trò chơi đơn giản trong trình duyệt của mình với nút bắt đầu và điều khiển cảm ứng trên thiết bị di động.
