jheaps/JoshHeaps.Net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jheaps
2025-05-27 10:40:39 -06:00
parent 824a1d6eab
commit cfd8a54259
6 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
JoshHeaps.Net/Pages/Game.cshtml
+16
View File
@@ -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>
}
JoshHeaps.Net/Pages/Game.cshtml.cs
+12
View File
@@ -0,0 +1,12 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace JoshHeaps.Net.Pages
{
public class GameModel : PageModel
{
public void OnGet()
{
}
}
}
JoshHeaps.Net/Pages/_Layout.cshtml
+1 -1
View File
@@ -1,6 +1,6 @@
@{ @{
Layout = null; 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> <!DOCTYPE html>
JoshHeaps.Net/wwwroot/css/game/game.css
+18
View File
@@ -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;
}
JoshHeaps.Net/wwwroot/images/Game Images/background.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

JoshHeaps.Net/wwwroot/js/Game/game.js
+86
View File
@@ -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();
});