<!
DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Code Control Game</title>
<style>
@import url('[Link]
family=Fira+Code:wght@300;400;600&family=Orbitron:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Fira Code', monospace;
background: linear-gradient(135deg, #0f0f23, #1a1a3e, #2a2a5e);
color: #00ff00;
overflow: hidden;
height: 100vh;
}
.game-container {
display: flex;
height: 100vh;
}
.game-world {
flex: 2;
position: relative;
background: radial-gradient(circle at center, #1a1a3e, #0a0a1a);
border: 2px solid #00ff00;
margin: 10px;
overflow: hidden;
}
.control-panel {
flex: 1;
background: rgba(0, 0, 0, 0.9);
border: 2px solid #00ffff;
margin: 10px;
padding: 20px;
overflow-y: auto;
}
.player {
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
border-radius: 50%;
border: 3px solid #fff;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.[Link] {
box-shadow: 0 0 30px rgba(255, 107, 107, 0.8);
transform: scale(1.1);
}
.obstacle {
position: absolute;
background: linear-gradient(45deg, #333, #666);
border: 2px solid #999;
border-radius: 5px;
}
.collectible {
position: absolute;
width: 25px;
height: 25px;
background: linear-gradient(45deg, #ffd700, #ffed4e);
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
.code-input {
width: 100%;
height: 150px;
background: #000;
color: #00ff00;
border: 2px solid #00ffff;
border-radius: 8px;
padding: 15px;
font-family: 'Fira Code', monospace;
font-size: 14px;
resize: none;
margin-bottom: 15px;
}
.code-input:focus {
outline: none;
border-color: #ff6b6b;
box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}
.execute-btn {
width: 100%;
padding: 15px;
background: linear-gradient(45deg, #4CAF50, #45a049);
color: white;
border: none;
border-radius: 8px;
font-family: 'Orbitron', monospace;
font-size: 16px;
font-weight: 700;
cursor: pointer;
margin-bottom: 15px;
transition: all 0.3s;
}
.execute-btn:hover {
background: linear-gradient(45deg, #45a049, #4CAF50);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}
.stats {
background: rgba(0, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid #00ffff;
}
.stats h3 {
color: #00ffff;
margin-bottom: 10px;
font-family: 'Orbitron', monospace;
}
.log {
background: rgba(0, 0, 0, 0.5);
border: 1px solid #666;
border-radius: 8px;
padding: 15px;
height: 200px;
overflow-y: auto;
font-size: 12px;
margin-bottom: 15px;
}
.log-entry {
margin-bottom: 5px;
padding: 3px 0;
}
.[Link] { color: #00ff00; }
.[Link] { color: #ff4444; }
.[Link] { color: #00ffff; }
.commands-help {
background: rgba(255, 255, 255, 0.05);
border: 1px solid #666;
border-radius: 8px;
padding: 15px;
font-size: 12px;
}
.commands-help h4 {
color: #ffff00;
margin-bottom: 10px;
font-family: 'Orbitron', monospace;
}
.command-example {
color: #00ff00;
margin: 5px 0;
padding-left: 10px;
}
.grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image:
linear-gradient(rgba(0, 255, 0, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 0, 0.3) 1px, transparent 1px);
background-size: 40px 40px;
}
.title {
text-align: center;
color: #00ffff;
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 24px;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #00ff00;
border-radius: 50%;
pointer-events: none;
animation: particleFloat 2s linear forwards;
}
@keyframes particleFloat {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-100px) scale(0);
opacity: 0;
}
}
.trail {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 107, 107, 0.3);
border-radius: 50%;
pointer-events: none;
animation: fadeOut 0.5s ease-out forwards;
}
@keyframes fadeOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.5); }
}
</style>
</head>
<body>
<div class="game-container">
<div class="game-world" id="gameWorld">
<div class="grid"></div>
<div class="player" id="player">🤖</div>
</div>
<div class="control-panel">
<div class="title">⚡ CODE CONTROL ⚡</div>
<div class="stats">
<h3>📊 Game Stats</h3>
<div>Vị trí: <span id="position">x: 50, y: 50</span></div>
<div>Điểm: <span id="score">0</span></div>
<div>Năng lượng: <span id="energy">100</span></div>
<div>Lệnh thực thi: <span id="commandCount">0</span></div>
</div>
<textarea class="code-input" id="codeInput" placeholder="// Nhập lệnh
điều khiển ở đây
// Ví dụ:
move('right', 100);
rotate(90);
collect();
wait(1000);
// Hoặc viết hàm:
for(let i = 0; i < 3; i++) {
move('up', 50);
collect();
}"></textarea>
<button class="execute-btn" onclick="executeCode()">▶️ EXECUTE
CODE</button>
<button class="execute-btn" onclick="resetGame()" style="background:
linear-gradient(45deg, #ff6b6b, #ff4444);">🔄 RESET GAME</button>
<div class="log" id="gameLog">
<div class="log-entry info">🎮 Game khởi động! Hãy viết code để điều
khiển robot.</div>
<div class="log-entry info">💡 Sử dụng các lệnh bên dưới để di
chuyển và tương tác.</div>
</div>
<div class="commands-help">
<h4>📖 LỆNH ĐIỀU KHIỂN</h4>
<div class="command-example">move('up|down|left|right',
distance)</div>
<div class="command-example">rotate(degrees) // Xoay robot</div>
<div class="command-example">collect() // Thu thập vật phẩm</div>
<div class="command-example">wait(milliseconds) // Tạm dừng</div>
<div class="command-example">scan() // Quét môi trường</div>
<div class="command-example">teleport(x, y) // Dịch chuyển</div>
<div class="command-example">say('message') // Hiển thị tin
nhắn</div>
<h4 style="margin-top: 15px;">🔧 JAVASCRIPT SYNTAX</h4>
<div class="command-example">for, while, if/else loops</div>
<div class="command-example">[Link](), [Link]()...</div>
<div class="command-example">Các hàm JavaScript thông thường</div>
</div>
</div>
</div>
<script>
// Game state
let gameState = {
player: {
x: 50,
y: 50,
rotation: 0,
energy: 100
},
score: 0,
commandCount: 0,
obstacles: [],
collectibles: [],
isExecuting: false,
trail: []
};
const player = [Link]('player');
const gameWorld = [Link]('gameWorld');
const gameLog = [Link]('gameLog');
// Initialize game
function initGame() {
generateObstacles();
generateCollectibles();
updateDisplay();
updatePlayerPosition();
}
function generateObstacles() {
const worldRect = [Link]();
const obstacles = [
{x: 200, y: 150, width: 80, height: 20},
{x: 400, y: 250, width: 20, height: 80},
{x: 150, y: 350, width: 60, height: 60},
{x: 500, y: 100, width: 100, height: 20},
{x: 300, y: 400, width: 40, height: 40}
];
[Link]((obs, index) => {
const obstacle = [Link]('div');
[Link] = 'obstacle';
[Link] = obs.x + 'px';
[Link] = obs.y + 'px';
[Link] = [Link] + 'px';
[Link] = [Link] + 'px';
[Link](obstacle);
[Link](obs);
});
}
function generateCollectibles() {
const positions = [
{x: 100, y: 100}, {x: 300, y: 150}, {x: 450, y: 200},
{x: 200, y: 300}, {x: 400, y: 350}, {x: 100, y: 400},
{x: 500, y: 300}, {x: 350, y: 100}
];
[Link]((pos, index) => {
const collectible = [Link]('div');
[Link] = 'collectible';
[Link] = pos.x + 'px';
[Link] = pos.y + 'px';
[Link] = '💎';
[Link] = index;
[Link](collectible);
[Link]({...pos, collected: false});
});
}
function updatePlayerPosition() {
[Link] = [Link].x + 'px';
[Link] = [Link].y + 'px';
[Link] = `rotate(${[Link]}deg)`;
}
function updateDisplay() {
[Link]('position').textContent = `x: $
{[Link]([Link].x)}, y: ${[Link]([Link].y)}`;
[Link]('score').textContent = [Link];
[Link]('energy').textContent =
[Link];
[Link]('commandCount').textContent =
[Link];
}
function addLog(message, type = 'info') {
const logEntry = [Link]('div');
[Link] = `log-entry ${type}`;
[Link] = new Date().toLocaleTimeString() + ' - ' +
message;
[Link](logEntry);
[Link] = [Link];
}
function createParticles(x, y, count = 5) {
for (let i = 0; i < count; i++) {
const particle = [Link]('div');
[Link] = 'particle';
[Link] = (x + [Link]() * 20 - 10) + 'px';
[Link] = (y + [Link]() * 20 - 10) + 'px';
[Link](particle);
setTimeout(() => [Link](), 2000);
}
}
function createTrail() {
const trail = [Link]('div');
[Link] = 'trail';
[Link] = ([Link].x + 15) + 'px';
[Link] = ([Link].y + 15) + 'px';
[Link](trail);
setTimeout(() => [Link](), 500);
}
function checkCollision(x, y) {
const worldRect = [Link]();
// Boundary check
if (x < 0 || y < 0 || x > [Link] - 40 || y > [Link]
- 40) {
return true;
}
// Obstacle collision
for (let obs of [Link]) {
if (x < obs.x + [Link] && x + 40 > obs.x &&
y < obs.y + [Link] && y + 40 > obs.y) {
return true;
}
}
return false;
}
// Game API functions
const gameAPI = {
move: async function(direction, distance) {
if ([Link] <= 0) {
addLog('⚠️ Không đủ năng lượng để di chuyển!', 'error');
return false;
}
let dx = 0, dy = 0;
switch([Link]()) {
case 'up': dy = -distance; break;
case 'down': dy = distance; break;
case 'left': dx = -distance; break;
case 'right': dx = distance; break;
default:
addLog('❌ Hướng không hợp lệ: ' + direction, 'error');
return false;
}
const newX = [Link].x + dx;
const newY = [Link].y + dy;
if (checkCollision(newX, newY)) {
addLog('⚠️ Không thể di chuyển - có chướng ngại vật!',
'error');
return false;
}
// Animate movement
[Link]('moving');
const steps = [Link](distance) / 5;
const stepX = dx / steps;
const stepY = dy / steps;
for (let i = 0; i < steps; i++) {
await new Promise(resolve => setTimeout(resolve, 50));
[Link].x += stepX;
[Link].y += stepY;
updatePlayerPosition();
createTrail();
}
[Link]('moving');
[Link] = [Link](0, [Link] -
[Link](distance) / 10);
addLog(`✅ Di chuyển ${direction} ${distance}px`, 'success');
updateDisplay();
return true;
},
rotate: async function(degrees) {
[Link] += degrees;
updatePlayerPosition();
await new Promise(resolve => setTimeout(resolve, 300));
addLog(`🔄 Xoay ${degrees} độ`, 'success');
return true;
},
collect: function() {
let collected = false;
[Link]((item, index) => {
if (![Link]) {
const distance = [Link](
[Link]([Link].x - item.x, 2) +
[Link]([Link].y - item.y, 2)
);
if (distance < 50) {
[Link] = true;
[Link] += 10;
collected = true;
const collectibleEl = [Link](`[data-
index="${index}"]`);
if (collectibleEl) {
createParticles(item.x, item.y, 8);
[Link]();
}
}
}
});
if (collected) {
addLog('💎 Thu thập thành công! +10 điểm', 'success');
} else {
addLog('❌ Không có vật phẩm nào gần đây', 'error');
}
updateDisplay();
return collected;
},
wait: async function(ms) {
addLog(` Chờ ${ms}ms...`, 'info');
await new Promise(resolve => setTimeout(resolve, ms));
return true;
},
scan: function() {
const nearbyItems = [];
[Link]((item, index) => {
if (![Link]) {
const distance = [Link](
[Link]([Link].x - item.x, 2) +
[Link]([Link].y - item.y, 2)
);
if (distance < 100) {
[Link]({index, distance:
[Link](distance), x: item.x, y: item.y});
}
}
});
if ([Link] > 0) {
addLog(`🔍 Quét được ${[Link]} vật phẩm gần đây`,
'success');
[Link](item => {
addLog(` 💎 Vật phẩm tại (${item.x}, ${item.y}) - khoảng
cách: ${[Link]}px`, 'info');
});
} else {
addLog('🔍 Không tìm thấy vật phẩm nào gần đây', 'info');
}
return nearbyItems;
},
teleport: function(x, y) {
if ([Link] < 30) {
addLog('⚠️ Không đủ năng lượng để dịch chuyển! (Cần 30
energy)', 'error');
return false;
}
if (checkCollision(x, y)) {
addLog('❌ Không thể dịch chuyển đến vị trí đó!', 'error');
return false;
}
createParticles([Link].x + 20, [Link].y + 20,
10);
[Link].x = x;
[Link].y = y;
[Link] -= 30;
updatePlayerPosition();
createParticles(x + 20, y + 20, 10);
addLog(`⚡ Dịch chuyển đến (${x}, ${y})`, 'success');
updateDisplay();
return true;
},
say: function(message) {
addLog(`💬 Robot: "${message}"`, 'info');
// Create speech bubble
const bubble = [Link]('div');
[Link] = 'absolute';
[Link] = ([Link].x + 50) + 'px';
[Link] = ([Link].y - 30) + 'px';
[Link] = 'rgba(0, 0, 0, 0.8)';
[Link] = '#00ff00';
[Link] = '5px 10px';
[Link] = '15px';
[Link] = '12px';
[Link] = '200';
[Link] = '1px solid #00ff00';
[Link] = message;
[Link](bubble);
setTimeout(() => [Link](), 3000);
return true;
}
};
async function executeCode() {
if ([Link]) {
addLog('⚠️ Code đang thực thi, vui lòng đợi...', 'error');
return;
}
const code = [Link]('codeInput').value;
if (![Link]()) {
addLog('❌ Vui lòng nhập code!', 'error');
return;
}
[Link] = true;
[Link]++;
try {
// Create safe execution context
const wrappedCode = `
(async function() {
const { move, rotate, collect, wait, scan, teleport, say }
= arguments[0];
${code}
})
`;
addLog('🚀 Bắt đầu thực thi code...', 'info');
const codeFunction = eval(wrappedCode);
await codeFunction(gameAPI);
addLog('✅ Code thực thi thành công!', 'success');
} catch (error) {
addLog('❌ Lỗi thực thi: ' + [Link], 'error');
}
[Link] = false;
updateDisplay();
}
function resetGame() {
// Clear world
[Link]('.obstacle, .collectible, .particle, .trail').forEach(el
=> [Link]());
// Reset state
gameState = {
player: { x: 50, y: 50, rotation: 0, energy: 100 },
score: 0,
commandCount: 0,
obstacles: [],
collectibles: [],
isExecuting: false,
trail: []
};
// Clear log
[Link] = '';
// Reinitialize
initGame();
addLog('🔄 Game đã được reset!', 'success');
}
// Energy regeneration
setInterval(() => {
if ([Link] < 100 && ![Link]) {
[Link] = [Link](100, [Link] +
1);
updateDisplay();
}
}, 2000);
// Initialize game when page loads
[Link] = initGame;
</script>
</body>
</html>
