LAZER GATE

3 files changed, 171 insertions, 0 deletions

diff --git a/js/ship-game/game.js b/js/ship-game/game.js
new file mode 100644
index 0000000..e50814c
--- /dev/null
+++ b/js/ship-game/game.js
@@ -0,0 +1,147 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.style.display = "block";
+canvas.width = window.innerWidth - 100;
+canvas.height = window.innerHeight - 200;
+
+let audio = new Audio('./zap.wav');
+audio.preload = 'auto';
+
+let audioLoaded = false;
+
+audio.addEventListener('canplaythrough', function() {
+    audioLoaded = true;
+});
+
+audio.addEventListener('error', function() {
+    console.error('Error loading audio file');
+});
+
+const createTargets = () => {
+    let targets = [];
+
+    for(let i = 0; i < 10; i++) {
+        let radius = Math.random() * 50 + 20;
+        let x = Math.random() * (canvas.width - 2 * radius - 120) + radius + 60;
+        let y = Math.random() * (canvas.height - 2 * radius - 120) + radius + 60;
+        let vx = (Math.random() - 0.5) * 10;
+        let vy = (Math.random() - 0.5) * 10;
+
+        targets.push({x, y, vx, vy, radius});
+    }
+
+    return targets;
+}
+
+let score = 0;
+const drawScore = () => {
+    ctx.font = '20px Arial';
+    ctx.fillStyle = 'white';
+    ctx.fillText('Score: ' + score, 10, 30);
+};
+
+
+let showHelp = true;
+const drawHelp = () => {
+    if(showHelp) {
+        ctx.font = '20px Arial';
+        ctx.fillStyle = 'white';
+        ctx.fillText('Click to shoot. Press R to respawn targets. Press H to toggle help text.', 10, 50);
+    }
+}
+
+const drawLine = (line) => {
+    if (line && Date.now() - line.time < 500) {
+        ctx.beginPath();
+        ctx.moveTo(line.startX, line.startY);
+        ctx.lineTo(line.endX, line.endY);
+        ctx.strokeStyle = 'red';
+        ctx.lineWidth = 4;
+        ctx.stroke();
+    }
+};
+
+const drawTargets = (targets) => {
+    for (let target of targets) {
+        target.x += target.vx;
+        target.y += target.vy;
+
+        if (target.x - target.radius < 0 || target.x + target.radius > canvas.width) {
+            target.vx = -target.vx;
+        }
+        if (target.y - target.radius < 0 || target.y + target.radius > canvas.height) {
+            target.vy = -target.vy;
+        }
+
+        ctx.beginPath();
+        ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2);
+        ctx.fillStyle = '#aaa';
+        ctx.fill();
+    }
+};
+
+const gameLoop = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    drawScore();
+    drawHelp();
+    drawLine(line);
+    drawTargets(targets);
+
+    requestAnimationFrame(gameLoop);
+};
+
+let line = null;
+
+canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    if (audioLoaded) {
+        audio.play().catch((error) => {
+            console.error('Error playing audio:', error);
+        });
+    }
+
+    line = {
+        startX: 0,
+        startY: canvas.height,
+        endX: x,
+        endY: y,
+        time: Date.now()
+    };
+
+    targets = targets.filter((target) => {
+        const dx = target.x - x;
+        const dy = target.y - y;
+        if (dx * dx + dy * dy <= target.radius * target.radius) {
+            score++;
+            return false;
+        }
+        return true;
+    });
+});
+
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
+
+window.addEventListener('keydown', (e) => {
+    if (e.key === 'r' || e.key === 'R') {
+        targets = createTargets();
+    }
+});
+
+window.addEventListener('keydown', (e) => {
+    if (e.key === 'h' || e.key === 'H') {
+        showHelp = !showHelp;
+    } else if (e.key === 'r' || e.key === 'R') {
+        targets = createTargets();
+    }
+});
+
+let targets = createTargets();
+
+gameLoop();
\ No newline at end of file
diff --git a/js/ship-game/index.html b/js/ship-game/index.html
new file mode 100644
index 0000000..8c46ae7
--- /dev/null
+++ b/js/ship-game/index.html
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <title>LAZER GATE 1</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            background-color: beige;
+        }
+        canvas {
+            background-color: rgb(5, 10, 94);
+            border: 1px solid black;
+        }
+        body, canvas {
+            padding: 1em;
+            margin: 1em;
+            border: 1em;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <script src="game.js"></script>
+</html>
\ No newline at end of file
diff --git a/js/ship-game/zap.wav b/js/ship-game/zap.wav
new file mode 100644
index 0000000..c018877
--- /dev/null
+++ b/js/ship-game/zap.wav
Binary files differ