Add football/soccer game features to drawaria.online
// ==UserScript==
// @name Drawaria Football Game
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add football/soccer game features to drawaria.online
// @author YouTubeDrawaria
// @match https://drawaria.online/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// Game state
let balls = [];
let soccerField = null;
let isDragging = false;
let dragStartX = 0;
let dragStartY = 0;
// Ball physics constants
const FRICTION = 0.98;
const KICK_POWER = 15;
const GRAVITY = 0.5;
// Create menu UI
const menu = document.createElement('div');
menu.style.cssText = `
position: fixed;
top: 20px;
left: 20px;
background: linear-gradient(45deg, #2196F3, #4CAF50);
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
z-index: 1000;
cursor: move;
user-select: none;
color: white;
font-family: Arial, sans-serif;
`;
menu.innerHTML = `
<h3 style="margin: 0 0 10px 0;">⚽ Football Game Menu</h3>
<button id="addBall" style="margin: 5px; padding: 8px; background: #FFC107; border: none; border-radius: 5px; cursor: pointer;">Add Ball</button>
<button id="toggleField" style="margin: 5px; padding: 8px; background: #FF5722; border: none; border-radius: 5px; cursor: pointer;">Toggle Field</button>
<button id="clearBalls" style="margin: 5px; padding: 8px; background: #E91E63; border: none; border-radius: 5px; cursor: pointer;">Clear Balls</button>
`;
// Ball class
class Ball {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.radius = 15;
this.active = true;
}
update() {
if (!this.active) return;
this.x += this.vx;
this.y += this.vy;
this.vy += GRAVITY;
this.vx *= FRICTION;
this.vy *= FRICTION;
// Bounce off walls
if (this.y + this.radius > window.innerHeight) {
this.y = window.innerHeight - this.radius;
this.vy *= -0.8;
}
if (this.x + this.radius > window.innerWidth) {
this.x = window.innerWidth - this.radius;
this.vx *= -0.8;
}
if (this.x - this.radius < 0) {
this.x = this.radius;
this.vx *= -0.8;
}
}
draw(ctx) {
if (!this.active) return;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
}
kick(mouseX, mouseY) {
const dx = mouseX - this.x;
const dy = mouseY - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.radius) {
this.vx = (mouseX - this.x) / distance * KICK_POWER;
this.vy = (mouseY - this.y) / distance * KICK_POWER;
}
}
}
// Make menu draggable
menu.addEventListener('mousedown', (e) => {
isDragging = true;
dragStartX = e.clientX - menu.offsetLeft;
dragStartY = e.clientY - menu.offsetTop;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
menu.style.left = (e.clientX - dragStartX) + 'px';
menu.style.top = (e.clientY - dragStartY) + 'px';
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Add event listeners for buttons
document.body.appendChild(menu);
document.getElementById('addBall').addEventListener('click', () => {
balls.push(new Ball(Math.random() * window.innerWidth, Math.random() * window.innerHeight));
});
document.getElementById('toggleField').addEventListener('click', () => {
soccerField = !soccerField;
});
document.getElementById('clearBalls').addEventListener('click', () => {
balls = [];
});
// Create canvas for drawing
const canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '999';
document.body.appendChild(canvas);
// Handle window resize
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Main game loop
function gameLoop() {
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw soccer field
if (soccerField) {
ctx.strokeStyle = 'white';
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, canvas.width - 100, canvas.height - 100);
// Draw goals
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(20, canvas.height/2 - 100, 30, 200);
ctx.fillRect(canvas.width - 50, canvas.height/2 - 100, 30, 200);
}
// Update and draw balls
balls.forEach(ball => {
ball.update();
ball.draw(ctx);
});
requestAnimationFrame(gameLoop);
}
// Start game loop
gameLoop();
// Handle ball kicking
document.addEventListener('click', (e) => {
balls.forEach(ball => {
ball.kick(e.clientX, e.clientY);
});
});
})();