JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

JavaScript

// Desktop Destroyer Game
// Uses a transparent canvas overlay to simulate destruction

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.style.position = "fixed";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.style.width = "100vw";
canvas.style.height = "100vh";
canvas.style.pointerEvents = "none";
document.body.style.overflow = "hidden";

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const tools = [
  {
    "name": "Hammer",
    "type": "hammer",
    "sound": "sounds/hammer.mp3"
  },
  {
    "name": "Flamethrower",
    "type": "flamethrower",
    "sound": "sounds/flamethrower.mp3"
  },
  {
    "name": "Termites",
    "type": "termites",
    "sound": "sounds/termites.mp3"
  }
];

let currentTool = tools[0]; // Default to first tool

// Create tool selection buttons
const toolContainer = document.createElement("div");
toolContainer.style.position = "fixed";
toolContainer.style.bottom = "20px";
toolContainer.style.left = "50%";
toolContainer.style.transform = "translateX(-50%)";
toolContainer.style.display = "flex";
toolContainer.style.gap = "10px";
toolContainer.style.background = "rgba(0, 0, 0, 0.5)";
toolContainer.style.padding = "10px";
toolContainer.style.borderRadius = "10px";
document.body.appendChild(toolContainer);

tools.forEach((tool, index) => {
  const button = document.createElement("button");
  button.textContent = tool.name;
  button.style.padding = "10px";
  button.style.border = "none";
  button.style.cursor = "pointer";
  button.style.background = "#fff";
  button.style.borderRadius = "5px";
  button.addEventListener("click", () => {
    currentTool = tools[index];
  });
  toolContainer.appendChild(button);
});

// Handle mouse events
document.addEventListener("mousemove", (e) => {
  if (e.buttons === 1 && currentTool) {
    useTool(e.clientX, e.clientY);
  }
});

document.addEventListener("click", (e) => {
  if (currentTool) {
   ...