Adds Sonic-like movement to Drawaria with Tails Flight, Metal Sonic, Super Sonic, Giant, Flame Shield, and Bubble Shield modes, and a draggable menu
// ==UserScript==
// @name Drawaria Sonic Mod
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Adds Sonic-like movement to Drawaria with Tails Flight, Metal Sonic, Super Sonic, Giant, Flame Shield, and Bubble Shield modes, and a draggable menu
// @author You
// @match https://drawaria.online/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Game Constants (Sonic Physics!)
const GRAVITY = 0.5; // Simulates gravity (adjust as needed)
const MAX_SPEED = 20; // Units/second (Much faster for Sonic)
const MIN_SPEED = 5; // Units/second
const JUMP_HEIGHT = 18; // Units (Higher jump)
const FLY_DURATION = 420 * 60; // Frames (7 minutes at 60 FPS)
// Sonic Themed Assets
const WING_IMAGE_URL = 'https://i.gifer.com/origin/4d/4d11e51b147986c753ddce080516ebf0_w200.gif'; // Blue aura effect for flight
const FLY_SOUND_URL = 'https://www.myinstants.com/media/sounds/sonic-jump-sound.mp3';
const METAL_SOUND_URL = 'https://www.myinstants.com/media/sounds/metal-sonic.mp3';
const SUPER_SOUND_URL = 'https://www.myinstants.com/media/sounds/super-sonic-transform.mp3';
const BIG_SOUND_URL = 'https://www.myinstants.com/media/sounds/sonic-ring-sound.mp3';
const FIRE_SOUND_URL = 'https://www.myinstants.com/media/sounds/sonic-flame-shield.mp3';
const ICE_SOUND_URL = 'https://www.myinstants.com/media/sounds/sonic-bubble-shield.mp3';
// Avatar Properties
let avatarX = 50;
let avatarY = 50;
let avatarVX = 0; // Horizontal velocity
let avatarVY = 0; // Vertical velocity
let isJumping = false;
let isFlying = false;
let isMetal = false;
let isSuper = false;
let isBig = false;
let isFire = false;
let isIce = false;
let flyFrames = 0;
let flyModeActivated = false;
let metalModeActivated = false;
let superModeActivated = false;
let bigModeActivated = false;
let fireModeActivated = false;
let iceModeActivated = false;
let lastFireTime = 0;
let superHue = 0;
// Keyboard State
const keys = {};
// Audio Elements
const flySound = new Audio(FLY_SOUND_URL);
flySound.loop = true;
const metalSound = new Audio(METAL_SOUND_URL);
metalSound.loop = true;
const superSound = new Audio(SUPER_SOUND_URL);
superSound.loop = true;
const bigSound = new Audio(BIG_SOUND_URL);
bigSound.loop = true;
const fireSound = new Audio(FIRE_SOUND_URL);
fireSound.loop = true;
const iceSound = new Audio(ICE_SOUND_URL);
iceSound.loop = true;
// Wing Element (Aura for Sonic)
const wingElement = document.createElement('img');
wingElement.src = WING_IMAGE_URL;
wingElement.style.position = 'absolute';
wingElement.style.display = 'none';
wingElement.style.width = '120px'; // Aura size
wingElement.style.height = '120px';
wingElement.style.transform = 'translate(-50%, -50%)'; // Center the aura
wingElement.style.opacity = '0.7';
document.body.appendChild(wingElement);
// Create Menu
const menu = document.createElement('div');
menu.style.position = 'absolute';
menu.style.top = '50px';
menu.style.left = '50px';
menu.style.width = '300px';
menu.style.background = 'radial-gradient(circle, #ffffff, #66b3ff, #0044cc)'; // Sonic Blue Theme
menu.style.borderRadius = '10px';
menu.style.boxShadow = '0 0 15px rgba(0, 0, 255, 0.5)';
menu.style.zIndex = 1000;
menu.style.overflow = 'hidden';
document.body.appendChild(menu);
// Menu Toggle Symbol
const menuToggleSymbol = document.createElement('div');
menuToggleSymbol.style.textAlign = 'center';
menuToggleSymbol.style.cursor = 'pointer';
menuToggleSymbol.style.fontSize = '20px';
menuToggleSymbol.style.marginBottom = '10px';
menuToggleSymbol.style.color = '#fff';
menuToggleSymbol.textContent = '▼';
menu.appendChild(menuToggleSymbol);
// Menu Header
const menuHeader = document.createElement('div');
menuHeader.style.background = 'linear-gradient(to right, #0044cc, #66b3ff)';
menuHeader.style.color = 'white';
menuHeader.style.padding = '10px';
menuHeader.style.textAlign = 'center';
menuHeader.style.cursor = 'move';
menuHeader.style.fontWeight = 'bold';
menuHeader.textContent = 'Drawaria Sonic Mod';
menu.appendChild(menuHeader);
// Menu Options Container
const menuOptions = document.createElement('div');
menuOptions.style.display = 'none'; // Initially hidden
menu.appendChild(menuOptions);
// Fly Mode Button (Tails Flight)
const flyButton = document.createElement('button');
flyButton.textContent = 'Activate Tails Flight Mode';
flyButton.style.display = 'block';
flyButton.style.margin = '10px';
flyButton.style.padding = '10px';
flyButton.style.background = 'linear-gradient(to bottom, #ffcc00, white)';
flyButton.style.color = 'black';
flyButton.style.border = 'none';
flyButton.style.borderRadius = '5px';
flyButton.style.cursor = 'pointer';
flyButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
flyButton.style.transition = 'background 0.3s, transform 0.3s';
flyButton.style.fontFamily = 'Arial, sans-serif';
flyButton.style.fontSize = '15px';
flyButton.style.fontWeight = 'bold';
menuOptions.appendChild(flyButton);
// Metal Mode Button
const metalButton = document.createElement('button');
metalButton.textContent = 'Activate Metal Sonic Mode';
metalButton.style.display = 'block';
metalButton.style.margin = '10px';
metalButton.style.padding = '10px';
metalButton.style.background = 'linear-gradient(to bottom, #cccccc, white)';
metalButton.style.color = 'black';
metalButton.style.border = 'none';
metalButton.style.borderRadius = '5px';
metalButton.style.cursor = 'pointer';
metalButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
metalButton.style.transition = 'background 0.3s, transform 0.3s';
metalButton.style.fontFamily = 'Arial, sans-serif';
metalButton.style.fontSize = '15px';
metalButton.style.fontWeight = 'bold';
menuOptions.appendChild(metalButton);
// Super Mode Button (was Star Mode)
const superButton = document.createElement('button');
superButton.textContent = 'Activate Super Sonic Mode';
superButton.style.display = 'block';
superButton.style.margin = '10px';
superButton.style.padding = '10px';
superButton.style.background = 'linear-gradient(to bottom, #FFD700, white)';
superButton.style.color = 'black';
superButton.style.border = 'none';
superButton.style.borderRadius = '5px';
superButton.style.cursor = 'pointer';
superButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
superButton.style.transition = 'background 0.3s, transform 0.3s';
superButton.style.fontFamily = 'Arial, sans-serif';
superButton.style.fontSize = '15px';
superButton.style.fontWeight = 'bold';
menuOptions.appendChild(superButton);
// Big Mode Button
const bigButton = document.createElement('button');
bigButton.textContent = 'Activate Giant Sonic Mode';
bigButton.style.display = 'block';
bigButton.style.margin = '10px';
bigButton.style.padding = '10px';
bigButton.style.background = 'linear-gradient(to bottom, #9933cc, white)';
bigButton.style.color = 'black';
bigButton.style.border = 'none';
bigButton.style.borderRadius = '5px';
bigButton.style.cursor = 'pointer';
bigButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
bigButton.style.transition = 'background 0.3s, transform 0.3s';
bigButton.style.fontFamily = 'Arial, sans-serif';
bigButton.style.fontSize = '15px';
bigButton.style.fontWeight = 'bold';
menuOptions.appendChild(bigButton);
// Fire Mode Button (Flame Shield)
const fireButton = document.createElement('button');
fireButton.textContent = 'Activate Flame Shield Mode';
fireButton.style.display = 'block';
fireButton.style.margin = '10px';
fireButton.style.padding = '10px';
fireButton.style.background = 'linear-gradient(to bottom, #FF4500, white)';
fireButton.style.color = 'black';
fireButton.style.border = 'none';
fireButton.style.borderRadius = '5px';
fireButton.style.cursor = 'pointer';
fireButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
fireButton.style.transition = 'background 0.3s, transform 0.3s';
fireButton.style.fontFamily = 'Arial, sans-serif';
fireButton.style.fontSize = '15px';
fireButton.style.fontWeight = 'bold';
menuOptions.appendChild(fireButton);
// Ice Mode Button (Bubble Shield)
const iceButton = document.createElement('button');
iceButton.textContent = 'Activate Bubble Shield Mode';
iceButton.style.display = 'block';
iceButton.style.margin = '10px';
iceButton.style.padding = '10px';
iceButton.style.background = 'linear-gradient(to bottom, #ADD8E6, white)';
iceButton.style.color = 'black';
iceButton.style.border = 'none';
iceButton.style.borderRadius = '5px';
iceButton.style.cursor = 'pointer';
iceButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
iceButton.style.transition = 'background 0.3s, transform 0.3s';
iceButton.style.fontFamily = 'Arial, sans-serif';
iceButton.style.fontSize = '15px';
iceButton.style.fontWeight = 'bold';
menuOptions.appendChild(iceButton);
// Stop Modes Button
const stopModesButton = document.createElement('button');
stopModesButton.textContent = 'Stop Modes';
stopModesButton.style.display = 'block';
stopModesButton.style.margin = '10px';
stopModesButton.style.padding = '10px';
stopModesButton.style.background = 'linear-gradient(to bottom, #f44336, white)';
stopModesButton.style.color = 'black';
stopModesButton.style.border = 'none';
stopModesButton.style.borderRadius = '5px';
stopModesButton.style.cursor = 'pointer';
stopModesButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
stopModesButton.style.transition = 'background 0.3s, transform 0.3s';
stopModesButton.style.fontFamily = 'Arial, sans-serif';
stopModesButton.style.fontSize = '15px';
stopModesButton.style.fontWeight = 'bold';
menuOptions.appendChild(stopModesButton);
// Function to handle movement
function updateAvatar() {
// 1. Apply Gravity
avatarVY += GRAVITY;
// 2. Handle horizontal movement (keyboard input) - Sonic Physics
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 1.0, isSuper ? MAX_SPEED * 2.5 : isMetal ? MAX_SPEED * 1.5 : MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 1.0, -(isSuper ? MAX_SPEED * 2.5 : isMetal ? MAX_SPEED * 1.5 : MAX_SPEED));
} else {
avatarVX *= 0.85; // Sonic momentum slide/friction
}
// 3. Handle jumping
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -(isMetal ? JUMP_HEIGHT * 0.8 : isBig ? JUMP_HEIGHT * 0.6 : JUMP_HEIGHT);
isJumping = true;
}
// 4. Handle Flight
if (isFlying) {
if (flyFrames > 0) {
flyFrames--;
if (keys['ArrowUp']) {
avatarVY = -JUMP_HEIGHT * 0.8; // Hold jump in fly mode
}
} else {
stopFlyMode();
}
}
// 5. Handle Fire and Ice (Shield Attacks)
if (keys[' '] && (isFire || isIce)) {
const currentTime = Date.now();
if (currentTime - lastFireTime >= 2000) {
lastFireTime = currentTime;
launchProjectile(isIce);
}
}
// 6. Update Avatar Position
avatarX += avatarVX;
avatarY += avatarVY;
// 7. Collision Detection (simplified)
if (avatarY > 768 - (isBig ? 100 : 50)) { // Assuming ground level is at 768 - 50
avatarY = 768 - (isBig ? 100 : 50);
avatarVY = 0;
isJumping = false;
}
// 8. Boundary Check
avatarX = Math.max(-900, Math.min(avatarX, 1024 + 100)); // Keep within bounds
avatarY = Math.max(-350, Math.min(avatarY, 768 + 50));
// 9. Update visual representation (Draw the avatar)
drawAvatar(avatarX, avatarY);
// Request next frame
requestAnimationFrame(updateAvatar);
}
// Function to handle keyboard input
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
// Function to draw the avatar
function drawAvatar(x, y) {
const avatar = document.querySelector('#selfavatarimage');
if (avatar) {
avatar.style.transform = `translate(${x}px, ${y}px)`;
avatar.style.border = 'none'; // Make border transparent
avatar.style.boxShadow = 'none'; // Make box-shadow transparent
if (isFlying) {
wingElement.style.display = 'block';
// Position aura behind the avatar
const avatarRect = avatar.getBoundingClientRect();
wingElement.style.left = `${avatarRect.left + window.scrollX + (avatarRect.width - wingElement.offsetWidth) / 2}px`;
wingElement.style.top = `${avatarRect.top + window.scrollY + (avatarRect.height - wingElement.offsetHeight) / 2}px`;
} else {
wingElement.style.display = 'none';
}
if (isMetal) {
avatar.style.filter = 'grayscale(100%) brightness(80%) contrast(150%)';
} else if (isSuper) {
superHue = (superHue + 5) % 360;
avatar.style.filter = `hue-rotate(${superHue}deg) brightness(180%) saturate(200%)`;
} else if (isBig) {
avatar.style.transform = `translate(${x}px, ${y}px) scale(2)`;
} else if (isFire) {
avatar.style.filter = 'brightness(120%) sepia(100%) saturate(700%) hue-rotate(-20deg)';
} else if (isIce) {
avatar.style.filter = 'brightness(150%) sepia(100%) saturate(500%) hue-rotate(180deg)';
} else {
avatar.style.filter = 'none';
avatar.style.transform = `translate(${x}px, ${y}px)`;
}
}
}
// Function to launch a shield projectile
function launchProjectile(isIce) {
const avatar = document.querySelector('#selfavatarimage');
if (avatar) {
const projectile = document.createElement('img');
projectile.src = isIce ? 'https://i.gifer.com/origin/d6/d6abed6047c79b8073fda9af7ba85358_w200.gif' : 'https://media.tenor.com/_dUxi3qy-KIAAAAj/fire-fireball.gif';
projectile.style.position = 'absolute';
projectile.style.width = '50px';
projectile.style.height = '50px';
projectile.style.left = `${avatar.offsetLeft + avatar.offsetWidth / 2}px`;
projectile.style.top = `${avatar.offsetTop + avatar.offsetHeight / 2}px`;
document.body.appendChild(projectile);
let projX = avatar.offsetLeft + avatar.offsetWidth / 2;
let projY = avatar.offsetTop + avatar.offsetHeight / 2;
let projVX = 10; // Faster projectile for Sonic
let projVY = 0;
const gravity = 0.5;
function moveProjectile() {
projX += projVX;
projY += projVY;
projVY += gravity;
// Bounce off the ground
if (projY > 768 - 25) {
projY = 768 - 25;
projVY = -projVY * 0.8; // Reduce velocity on bounce
}
// Remove projectile if it goes off screen
if (projX < -50 || projX > 1024 + 50 || projY > 768 + 50) {
if (document.body.contains(projectile)) {
document.body.removeChild(projectile);
}
} else {
projectile.style.left = `${projX}px`;
projectile.style.top = `${projY}px`;
requestAnimationFrame(moveProjectile);
}
}
moveProjectile();
}
}
// Function to activate fly mode
function activateFlyMode() {
stopOtherModes();
isFlying = true;
flyFrames = FLY_DURATION;
flyModeActivated = true;
flySound.play();
}
// Function to stop fly mode
function stopFlyMode() {
isFlying = false;
wingElement.style.display = 'none';
flySound.pause();
flySound.currentTime = 0;
flyModeActivated = false;
}
// Function to activate metal mode
function activateMetalMode() {
stopOtherModes();
isMetal = true;
metalModeActivated = true;
metalSound.play();
}
// Function to stop metal mode
function stopMetalMode() {
isMetal = false;
metalSound.pause();
metalSound.currentTime = 0;
metalModeActivated = false;
}
// Function to activate super mode (was star mode)
function activateSuperMode() {
stopOtherModes();
isSuper = true;
superModeActivated = true;
superSound.play();
}
// Function to stop super mode
function stopSuperMode() {
isSuper = false;
superSound.pause();
superSound.currentTime = 0;
superModeActivated = false;
}
// Function to activate big mode
function activateBigMode() {
stopOtherModes();
isBig = true;
bigModeActivated = true;
bigSound.play();
}
// Function to stop big mode
function stopBigMode() {
isBig = false;
bigSound.pause();
bigSound.currentTime = 0;
bigModeActivated = false;
}
// Function to activate fire mode
function activateFireMode() {
stopOtherModes();
isFire = true;
fireModeActivated = true;
fireSound.play();
}
// Function to stop fire mode
function stopFireMode() {
isFire = false;
fireSound.pause();
fireSound.currentTime = 0;
fireModeActivated = false;
}
// Function to activate ice mode
function activateIceMode() {
stopOtherModes();
isIce = true;
iceModeActivated = true;
iceSound.play();
}
// Function to stop ice mode
function stopIceMode() {
isIce = false;
iceSound.pause();
iceSound.currentTime = 0;
iceModeActivated = false;
}
// Function to stop all modes
function stopAllModes() {
stopFlyMode();
stopMetalMode();
stopSuperMode();
stopBigMode();
stopFireMode();
stopIceMode();
}
// Function to stop other modes
function stopOtherModes() {
stopFlyMode();
stopMetalMode();
stopSuperMode();
stopBigMode();
stopFireMode();
stopIceMode();
}
// Function to toggle menu options visibility
function toggleMenuOptions() {
if (menuOptions.style.display === 'none') {
menuOptions.style.display = 'block';
menuToggleSymbol.textContent = '▲';
menu.style.height = '515px'; // Expand menu height
} else {
menuOptions.style.display = 'none';
menuToggleSymbol.textContent = '▼';
menu.style.height = 'auto'; // Collapse menu height
}
}
// Make the menu draggable
let isDragging = false;
let offsetX, offsetY;
menuHeader.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - menu.offsetLeft;
offsetY = e.clientY - menu.offsetTop;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
menu.style.left = `${e.clientX - offsetX}px`;
menu.style.top = `${e.clientY - offsetY}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Event listeners for keyboard input
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Event listener for buttons
flyButton.addEventListener('click', activateFlyMode);
metalButton.addEventListener('click', activateMetalMode);
superButton.addEventListener('click', activateSuperMode);
bigButton.addEventListener('click', activateBigMode);
fireButton.addEventListener('click', activateFireMode);
iceButton.addEventListener('click', activateIceMode);
stopModesButton.addEventListener('click', stopAllModes);
menuToggleSymbol.addEventListener('click', toggleMenuOptions);
// Start the game loop
updateAvatar();
})();