.control-btn {

padding: 12px 0;

border-radius: 6px;

transition: all 0.3s ease;

font-weight: bold;

text-align: center;

cursor: pointer;

user-select: none;

.robot {

transition: transform 0.3s ease;

action-log {

scrollbar-width: thin;

scrollbar-color: 3b82f6 1f2937;

action-log::-webkit-scrollbar {

width: 6px;

action-log::-webkit-scrollbar-track {

background: 1f2937;

action-log::-webkit-scrollbar-thumb {

background-color: 3b82f6;

border-radius: 6px;

document.addEventListener('DOMContentLoaded', => {

const gameDisplay = document.querySelector('.game-display');

const robot = document.querySelector('.robot');

const actionLog = document.getElementById('action-log');

const controlBtns = document.querySelectorAll('.control-btn');

const startBtn = document.getElementById('start-btn');

const recordBtn = document.getElementById('record-btn');

const playbackBtn = document.getElementById('playback-btn');

let isRecording = false;

let actionSequence = [];

let isRobotActive = false;

// 控制按钮

controlBtns.forEach(btn => {

btn.addEventListener('click', => {

const action = btn.dataset.action;

handleGameAction(action);

});

});

// 键盘控制

document.addEventListener('keydown', (e) => {

let action = null;

switch(e.key) {

case 'ArrowUp': action = 'up'; break;

case 'ArrowDown': action = 'down'; break;

case 'ArrowLeft': action = 'left'; break;

case 'ArrowRight': action = 'right'; break;

case ' ': action = 'action'; break;

if (action) handleGameAction(action);

});

// 启动机器人

startBtn.addEventListener('click', => {

isRobotActive = !isRobotActive;

startBtn.textContent = isRobotActive ? '停止机器人' : '启动机器人';

logAction(`机器人已${isRobotActive ? '启动' : '停止'}`);

});

// 录制动作

recordBtn.addEventListener('click', => {

isRecording = !isRecording;

recordBtn.textContent = isRecording ? '停止录制' : '录制动作序列';

if (!isRecording && actionSequence.length > 0) {

logAction(`已录制 ${actionSequence.length} 个动作`);

} else if (isRecording) {

actionSequence = [];

logAction('开始录制动作序列');

});

// 回放动作

playbackBtn.addEventListener('click', => {

if (actionSequence.length === 0) {

logAction('没有可回放的动作序列');

return;

logAction(`开始回放 ${actionSequence.length} 个动作`);

playActions(actionSequence);

});

function handleGameAction(action) {

logAction(`执行动作: ${getActionName(action)}`);

if (isRecording) {

actionSequence.push(action);

if (isRobotActive) {

simulateRobotAction(action);

function simulateRobotAction(action) {

const robot = document.querySelector('.robot');

robot.style.transition = 'transform 0.3s ease';

switch(action) {

case 'up':

robot.style.transform = 'translateY(-20px)';

setTimeout( => { robot.style.transform = 'translateY(0)'; }, 300);

break;

case 'down':

robot.style.transform = 'translateY(20px)';

setTimeout( => { robot.style.transform = 'translateY(0)'; }, 300);

break;

case 'left':

robot.style.transform = 'translateX(-20px)';

setTimeout( => { robot.style.transform = 'translateX(0)'; }, 300);

break;

case 'right':

robot.style.transform = 'translateX(20px)';

setTimeout( => { robot.style.transform = 'translateX(0)'; }, 300);

break;

case 'action':

robot.style.transform = 'scale(1.2)';

setTimeout( => { robot.style.transform = 'scale(1)'; }, 300);

break;

function playActions(actions) {

actions.forEach((action, index) => {

setTimeout( => {

simulateRobotAction(action);

logAction(`回放动作: ${getActionName(action)} (${index + 1}/${actions.length})`);

}, index 500);

});

function getActionName(action) {

const names = {

'up': '向上移动',

'down': '向下移动',

'left': '向左移动',

'right': '向右移动',

'action': '执行动作'

};

return names[action] || action;

function logAction(message) {

const now = new Date;

const timeStr = now.toLocaleTimeString;

const logEntry = document.createElement('div');

logEntry.textContent = `[${timeStr}] ${message}`;

actionLog.appendChild(logEntry);

actionLog.scrollTop = actionLog.scrollHeight;

});

本项目为纯前端应用，无需额外依赖