Crea un juego de Snake totalmente funcional y optimizado para el canvas de Drawaria.online, con escenario de jardín y un panel arrastrable.
// ==UserScript==
// @name Drawaria Snake Game
// @namespace http://tampermonkey.net/
// @version 1.2
// @description Crea un juego de Snake totalmente funcional y optimizado para el canvas de Drawaria.online, con escenario de jardín y un panel arrastrable.
// @author YouTubeDrawaria
// @match https://drawaria.online/*
// @grant none
// @license MIT
// @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// ==/UserScript==
(function() {
'use strict';
/* ---------- COMPONENTES COMPARTIDOS DEL SISTEMA ---------- */
let drawariaSocket = null;
let drawariaCanvas = null;
let drawariaCtx = null;
// Cola de comandos optimizada con agrupamiento inteligente
const commandQueue = [];
let batchProcessor = null;
const BATCH_SIZE = 8;
const BATCH_INTERVAL = 60;
// Intercepta WebSocket para capturar el socket del juego
const originalWebSocketSend = WebSocket.prototype.send;
WebSocket.prototype.send = function(...args) {
if (!drawariaSocket && this.url && this.url.includes('drawaria')) {
drawariaSocket = this;
console.log('🔗 Drawaria WebSocket capturado para el juego de Snake.');
startBatchProcessor();
}
return originalWebSocketSend.apply(this, args);
};
function startBatchProcessor() {
if (batchProcessor) return;
batchProcessor = setInterval(() => {
if (!drawariaSocket || drawariaSocket.readyState !== WebSocket.OPEN || commandQueue.length === 0) {
return;
}
const batch = commandQueue.splice(0, BATCH_SIZE);
batch.forEach(cmd => {
try {
drawariaSocket.send(cmd);
} catch (e) {
console.warn('⚠️ Fallo al enviar el comando:', e);
}
});
}, BATCH_INTERVAL);
}
/**
* Función unificada para encolar comandos de dibujo.
* Utiliza una línea muy corta con grosor negativo para dibujar formas rellenas.
* @param {number} x1 - Coordenada X inicial
* @param {number} y1 - Coordenada Y inicial
* @param {number} x2 - Coordenada X final
* @param {number} y2 - Coordenada Y final
* @param {string} color - Color del objeto (ej. '#FFFFFF')
* @param {number} thickness - Grosor efectivo (negativo para relleno)
*/
function enqueueDrawCommand(x1, y1, x2, y2, color, thickness) {
if (!drawariaCanvas || !drawariaSocket) return;
const normX1 = (x1 / drawariaCanvas.width).toFixed(4);
const normY1 = (y1 / drawariaCanvas.height).toFixed(4);
const normX2 = (x2 / drawariaCanvas.width).toFixed(4);
const normY2 = (y2 / drawariaCanvas.height).toFixed(4);
const cmd = `42["drawcmd",0,[${normX1},${normY1},${normX2},${normY2},false,${-Math.abs(thickness)},"${color}",0,0,{}]]`;
commandQueue.push(cmd);
// Renderizado local para retroalimentación visual inmediata
if (drawariaCtx) {
drawariaCtx.strokeStyle = color;
drawariaCtx.lineWidth = thickness;
drawariaCtx.lineCap = 'round';
drawariaCtx.lineJoin = 'round';
drawariaCtx.beginPath();
drawariaCtx.moveTo(x1, y1);
drawariaCtx.lineTo(x2, y2);
drawariaCtx.stroke();
}
}
/* ---------- LÓGICA DEL JUEGO DE SNAKE ---------- */
class SnakeGame {
constructor() {
this.isActive = false;
this.cellSize = 20; // Tamaño de cada segmento de la serpiente
this.snake = [];
this.food = {};
this.direction = 'right';
this.nextDirection = 'right';
this.score = 0;
this.gameInterval = null;
this.speed = 150; // Velocidad inicial en ms
this.isGameOver = false;
this.init();
}
init() {
const checkGameReady = () => {
const gameCanvas = document.getElementById('canvas');
if (gameCanvas) {
drawariaCanvas = gameCanvas;
drawariaCtx = gameCanvas.getContext('2d');
this.createGamePanel();
console.log('✅ Juego de Snake inicializado.');
} else {
setTimeout(checkGameReady, 100);
}
};
checkGameReady();
}
createGamePanel() {
const existingPanel = document.getElementById('snake-game-panel');
if (existingPanel) existingPanel.remove();
const panel = document.createElement('div');
panel.id = 'snake-game-panel';
panel.style.cssText = `
position: fixed !important;
top: 250px !important;
right: 20px !important;
width: 250px !important;
z-index: 2147483647 !important;
background: linear-gradient(135deg, #2a2a3a, #1a1a2e) !important;
border: 2px solid #5d5dff !important;
border-radius: 12px !important;
color: white !important;
font-family: 'Segoe UI', Arial, sans-serif !important;
box-shadow: 0 0 20px rgba(93, 93, 255, 0.3) !important;
padding: 15px !important;
text-align: center !important;
`;
panel.innerHTML = `
<h3 style="margin-top: 0; color: #5d5dff;">🐍 Snake Game</h3>
<div style="margin-bottom: 10px;">
Score: <span id="snake-score">0</span>
</div>
<button id="toggle-game" style="
width: 100%;
padding: 10px;
background: #5d5dff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
">▶️ Start Game</button>
<div id="game-message" style="
margin-top: 10px;
color: #ff4d4d;
font-weight: bold;
display: none;
"></div>
<div style="
margin-top: 15px;
font-size: 10px;
color: rgba(255,255,255,0.6);
">
Use Arrow Keys to move.<br>
Avoid walls and yourself!
</div>
`;
document.body.appendChild(panel);
this.setupEventListeners();
this.makePanelDraggable(panel);
this.addDrawGardenButton(panel);
}
setupEventListeners() {
document.getElementById('toggle-game').addEventListener('click', () => this.toggleGame());
document.addEventListener('keydown', (e) => this.handleKeyInput(e));
}
toggleGame() {
if (!this.isActive) {
this.startGame();
document.getElementById('toggle-game').textContent = '⏸️ Pause Game';
document.getElementById('toggle-game').style.background = '#ffc107';
document.getElementById('game-message').style.display = 'none';
} else {
this.pauseGame();
document.getElementById('toggle-game').textContent = '▶️ Resume Game';
document.getElementById('toggle-game').style.background = '#5d5dff';
}
}
startGame() {
if (this.isActive) return;
this.isActive = true;
this.isGameOver = false;
this.score = 0;
this.direction = 'right';
this.nextDirection = 'right';
this.updateScoreDisplay();
this.resetSnake();
this.createFood();
this.gameLoop();
}
pauseGame() {
this.isActive = false;
if (this.gameInterval) {
clearInterval(this.gameInterval);
this.gameInterval = null;
}
}
endGame() {
this.isGameOver = true;
this.pauseGame();
document.getElementById('toggle-game').textContent = '🔄 Restart Game';
document.getElementById('toggle-game').style.background = '#cc0000';
const messageEl = document.getElementById('game-message');
messageEl.textContent = `GAME OVER! Score: ${this.score}`;
messageEl.style.display = 'block';
console.log('💀 GAME OVER! Final Score:', this.score);
}
resetSnake() {
this.snake = [
{ x: 100, y: 100 },
{ x: 80, y: 100 },
{ x: 60, y: 100 }
];
}
createFood() {
const maxX = Math.floor(drawariaCanvas.width / this.cellSize) * this.cellSize;
const maxY = Math.floor(drawariaCanvas.height / this.cellSize) * this.cellSize;
this.food = {
x: Math.floor(Math.random() * (maxX / this.cellSize)) * this.cellSize,
y: Math.floor(Math.random() * (maxY / this.cellSize)) * this.cellSize
};
}
gameLoop() {
if (!this.isActive || this.isGameOver) return;
this.clearCanvas();
this.updateGame();
this.drawGame();
this.gameInterval = setTimeout(() => this.gameLoop(), this.speed);
}
updateGame() {
const head = { x: this.snake[0].x, y: this.snake[0].y };
this.direction = this.nextDirection;
if (this.direction === 'up') head.y -= this.cellSize;
if (this.direction === 'down') head.y += this.cellSize;
if (this.direction === 'left') head.x -= this.cellSize;
if (this.direction === 'right') head.x += this.cellSize;
this.snake.unshift(head);
if (this.checkCollision(head)) {
this.endGame();
return;
}
if (head.x === this.food.x && head.y === this.food.y) {
this.score++;
this.updateScoreDisplay();
this.createFood();
this.speed = Math.max(50, this.speed * 0.95);
} else {
this.snake.pop();
}
}
drawGame() {
this.drawCell(this.food.x, this.food.y, '#FF4500'); // Naranja rojizo para la comida
this.snake.forEach((segment, index) => {
const color = index === 0 ? '#8BC34A' : '#8BC34A'; // Cabeza verde, cuerpo verde más claro
this.drawCell(segment.x, segment.y, color);
});
}
drawCell(x, y, color) {
enqueueDrawCommand(x, y, x + this.cellSize, y + this.cellSize, color, this.cellSize);
}
clearCanvas() {
const oldTail = this.snake[this.snake.length - 1];
this.drawCell(oldTail.x, oldTail.y, '#4CAF50');
this.drawCell(this.food.x, this.food.y, '#4CAF50');
}
checkCollision(head) {
if (head.x < 0 || head.x >= drawariaCanvas.width || head.y < 0 || head.y >= drawariaCanvas.height) {
return true;
}
for (let i = 1; i < this.snake.length; i++) {
if (head.x === this.snake[i].x && head.y === this.snake[i].y) {
return true;
}
}
return false;
}
handleKeyInput(e) {
const key = e.key;
if (key === 'ArrowUp' && this.direction !== 'down') this.nextDirection = 'up';
if (key === 'ArrowDown' && this.direction !== 'up') this.nextDirection = 'down';
if (key === 'ArrowLeft' && this.direction !== 'right') this.nextDirection = 'left';
if (key === 'ArrowRight' && this.direction !== 'left') this.nextDirection = 'right';
}
updateScoreDisplay() {
const scoreDisplay = document.getElementById('snake-score');
if (scoreDisplay) scoreDisplay.textContent = this.score;
}
makePanelDraggable(panel) {
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
const dragStart = (e) => {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
isDragging = true;
panel.style.cursor = 'grabbing';
};
const dragEnd = () => {
initialX = currentX;
initialY = currentY;
isDragging = false;
panel.style.cursor = 'grab';
};
const drag = (e) => {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
panel.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
}
};
const header = panel.querySelector('h3');
if (header) {
header.style.cursor = 'grab';
header.addEventListener("mousedown", dragStart);
document.addEventListener("mouseup", dragEnd);
document.addEventListener("mousemove", drag);
}
}
addDrawGardenButton(panel) {
const newButton = document.createElement('button');
newButton.id = 'draw-garden-btn';
newButton.textContent = '🖼️ Draw Garden';
newButton.style.cssText = `
width: 100%;
padding: 10px;
background: #27ae60;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
transition: background 0.3s ease;
`;
newButton.onmouseover = function() {
this.style.background = '#219353';
};
newButton.onmouseout = function() {
this.style.background = '#27ae60';
};
const toggleButton = document.getElementById('toggle-game');
panel.insertBefore(newButton, toggleButton.nextSibling);
newButton.addEventListener('click', drawGardenScenario);
}
}
// --------------------------------------------------------------------------------------------------
// --- LÓGICA DEL ESCENARIO DE JARDÍN ---
// --------------------------------------------------------------------------------------------------
function drawGardenScenario() {
if (!drawariaCanvas || !drawariaSocket) {
console.log('Canvas or WebSocket not available.');
return;
}
// Borra todo el canvas con blanco
enqueueDrawCommand(0, 0, drawariaCanvas.width, drawariaCanvas.height, '#FFFFFF', Math.max(drawariaCanvas.width, drawariaCanvas.height));
setTimeout(() => {
const grassColor = '#4CAF50';
const flowerColors = ['#FFC107', '#E91E63', '#9C27B0', '#03A9F4'];
const cellSize = 10;
// Dibuja el fondo verde
enqueueDrawCommand(0, 0, drawariaCanvas.width, drawariaCanvas.height, grassColor, Math.max(9999, 9999));
// Dibuja pequeños detalles para simular hierbas y flores
for (let i = 0; i < 100; i++) {
const x = Math.random() * drawariaCanvas.width;
const y = Math.random() * drawariaCanvas.height;
const color = flowerColors[Math.floor(Math.random() * flowerColors.length)];
// Dibuja un pequeño círculo (simula una flor)
enqueueDrawCommand(x, y, x + 1, y + 1, color, 8);
// Dibuja una mini-hierba (línea vertical)
enqueueDrawCommand(x, y, x, y + 5, '#4CAF50', 3);
}
console.log('✅ Escenario de jardín dibujado con éxito.');
}, 200);
}
// --------------------------------------------------------------------------------------------------
// --- FIN DE CÓDIGO AÑADIDO ---
// --------------------------------------------------------------------------------------------------
// Inicialización del juego
const initSnakeGame = () => {
const snakeGame = new SnakeGame();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initSnakeGame);
} else {
setTimeout(initSnakeGame, 500);
}
})();