Add game (it's stupid but it's there)

2025-05-27 10:40:39 -06:00
parent 824a1d6eab
commit cfd8a54259
6 changed files with 133 additions and 1 deletions
@@ -0,0 +1,16 @@
+@page
+@model JoshHeaps.Net.Pages.GameModel
+@{
+    ViewData["Title"] = "Game";
+    Layout = "_Layout";
+}
+
+<canvas id="gameCanvas"></canvas>
+
+@section Styles {
+    <link href="/css/game/game.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" />
+}
+
+@section Scripts {
+    <script src="~/js/Game/game.js"></script>
+}
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace JoshHeaps.Net.Pages
+{
+    public class GameModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}
@@ -1,6 +1,6 @@
@{
    Layout = null;
-    ViewData["cssVersion"] = "1.0.2"; // <--- change this once to bust cache
+    ViewData["cssVersion"] = "1.0.3"; // <--- change this once to bust cache
 }

 <!DOCTYPE html>
@@ -0,0 +1,18 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+#gameCanvas {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    display: block;
+    background-image: url('/images/Game Images/background.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
@@ -0,0 +1,86 @@
+
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    window.addEventListener('resize', () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    });
+
+    // Game state
+    const windows = [
+        { x: 100, y: 100, width: 200, height: 150, isDragging: false, offsetX: 0, offsetY: 0 },
+        { x: 400, y: 300, width: 200, height: 150, isDragging: false, offsetX: 0, offsetY: 0 }
+    ];
+
+    const particles = [];
+
+    // Event handling
+    canvas.addEventListener('mousedown', (e) => {
+        const mouse = { x: e.clientX, y: e.clientY };
+        windows.forEach(win => {
+            if (
+                mouse.x >= win.x && mouse.x <= win.x + win.width &&
+                mouse.y >= win.y && mouse.y <= win.y + win.height
+            ) {
+                win.isDragging = true;
+                win.offsetX = mouse.x - win.x;
+                win.offsetY = mouse.y - win.y;
+            }
+        });
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+        windows.forEach(win => {
+            if (win.isDragging) {
+                win.x = e.clientX - win.offsetX;
+                win.y = e.clientY - win.offsetY;
+            }
+        });
+    });
+
+    canvas.addEventListener('mouseup', () => {
+        windows.forEach(win => win.isDragging = false);
+    });
+
+    
+    // Game loop
+    function gameLoop() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        ctx.fillStyle = 'rgba(0, 0, 0, 1)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        windows.forEach(win => {
+            ctx.save();
+            ctx.globalCompositeOperation = 'destination-out';
+            ctx.beginPath();
+            ctx.roundRect(win.x, win.y, win.width, win.height, 10);
+            ctx.fill();
+            ctx.restore();
+
+            // Optional: draw a visible outline
+            ctx.strokeStyle = '#ccc';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        });
+
+        // Draw windows
+        windows.forEach(win => {
+            ctx.fillStyle = "rgba(255,255,255,0)";
+            ctx.strokeStyle = "#ccc";
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.circle(win.x, win.y, win.width, 10);
+            ctx.fill();
+            ctx.stroke();
+        });
+
+        requestAnimationFrame(gameLoop);
+    }
+
+    gameLoop();
+});