core: move files to src and convert snake to ts

2024-08-27 23:32:54 -05:00
parent eb6c023578
commit 53af784952
4 changed files with 92 additions and 33 deletions
@@ -0,0 +1,145 @@
+body {
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    color: #cad3f5;
+    line-height: 1.5;
+    max-width: 1920px;
+    margin-inline: auto;
+    background: #24273a;
+    margin: 0px auto;
+}
+
+#navigation {
+    background: #181926;
+    display: flex;
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
+}
+
+.navItem {
+    margin: 6px;
+    margin-top: 0px;
+    padding: 8px;
+    line-height: 21px;
+    display: inline-block;
+}
+
+#top {
+    margin-bottom: 6px;
+    border-radius: 16px;
+    border-top-left-radius: 0px;
+    margin: 4px auto;
+    margin-top: 0px;
+    height: 55px;
+}
+
+#main {
+    /*background: #1e2030;*/
+}
+
+.cardStats {
+    font-size: 18px;
+}
+
+h1 {
+    width: 130px;
+    text-align: center;
+    display: inline-block;
+    font-size: 1.8rem;
+    margin: 0px;
+    padding: 8px;
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+}
+
+h2 {
+    color: #6c6f85;
+    font-size: 1.8rem;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+h3 {
+    color: #dc8a78;
+    font-size: 1.3rem;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+h4 {
+    color: #8c8fa1;
+    font-size: 1.1rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+p {
+    margin: 0px;
+}
+
+a {
+    text-decoration: none;
+    padding: 8px;
+    color: #8aadf4;
+}
+
+a:hover, a:active {
+    border-radius: 9px;
+    text-decoration: underline;
+    text-shadow: 1px 1px 1px #333;
+    animation: hover 3s linear infinite;
+}
+
+a.button {
+    margin: 14px 10%;
+    padding: 4px 12px;
+    border: 1px outset #494d64;
+    border-radius: 9px;
+    color: #8aadf4;
+    display: inline-block;
+    background-color: #363a4f;
+    text-decoration: none;
+    width: 80px;
+    text-align: center;
+}
+
+@keyframes hover {
+    0% { box-shadow: 0 0 8px 4px #24273a; }
+    15% { box-shadow: 0 0 8px 4px #494d64; }
+    50% { box-shadow: 0 0 8px 4px #b7bdf8; }
+    85% { box-shadow: 0 0 8px 4px #494d64; }
+    100% { box-shadow: 0 0 8px 4px #24273a; }
+}
+
+@keyframes card {
+    0% { box-shadow: 0 0 8px 4px #24273a; }
+    50% { box-shadow: 0 0 8px 4px #df8e1d; }
+    100% { box-shadow: 0 0 8px 4px #24273a; }
+}
+
+.card {
+    background: #363a4f;
+    text-align: center;
+    border-radius: 6px;
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+    animation: card 3s linear infinite;
+    width: 800px;
+    height: 800px;
+    margin: 0px auto;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+.cardTop {
+    background: #1e2030;
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+}
+
+#pong {
+    margin: 6px;
+    border-radius: 9px;
+    background: #494d64;
+}
@@ -0,0 +1,23 @@
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    background: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button {
+    background: blue;
+    color: white;
+    padding: 15px 20px;
+    font-size: 32px;
+    font-family: Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    cursor: pointer;
+    position: relative;
+}
+
@@ -0,0 +1,226 @@
+const canvas = document.getElementById('pong');
+const context = canvas.getContext('2d');
+const grid = 15;
+const paddleHeight = grid * 5; // 80
+const maxPaddleY = canvas.height - grid - paddleHeight;
+
+var paddleSpeed = 6;
+var ballSpeed = 5;
+
+var leftScore = 0;
+var rightScore = 0;
+
+const leftPaddle = {
+  // start in the middle of the game on the left side
+  x: grid * 2,
+  y: canvas.height / 2 - paddleHeight / 2,
+  width: grid,
+  height: paddleHeight,
+
+  // paddle velocity
+  dy: 0
+};
+const rightPaddle = {
+  // start in the middle of the game on the right side
+  x: canvas.width - grid * 3,
+  y: canvas.height / 2 - paddleHeight / 2,
+  width: grid,
+  height: paddleHeight,
+
+  // paddle velocity
+  dy: 0
+};
+const ball = {
+  // start in the middle of the game
+  x: canvas.width / 2,
+  y: canvas.height / 2,
+  width: grid,
+  height: grid,
+
+  // keep track of when need to reset the ball position
+  resetting: false,
+
+  // ball velocity (start going to the top-right corner)
+  dx: ballSpeed,
+  dy: -ballSpeed
+};
+
+// check for collision between two objects using axis-aligned bounding box (AABB)
+// @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
+function collides(obj1, obj2) {
+  return obj1.x < obj2.x + obj2.width &&
+         obj1.x + obj1.width > obj2.x &&
+         obj1.y < obj2.y + obj2.height &&
+         obj1.y + obj1.height > obj2.y;
+}
+
+function gameOver() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    let restartGame = document.getElementById("restart");
+    let gameOverText = document.getElementById("gameover");
+    restartGame.hidden = false;
+    gameOverText.hidden = false;
+}
+
+function restartGame() {
+    leftScore = 0;
+    rightScore = 0;
+    let restartGame = document.getElementById("restart");
+    restartGame.hidden = true;
+    requestAnimationFrame(loop);
+}
+
+function BotMovesPaddle(paddle) {
+  ballRegion = Math.floor(ball.y / 15);
+  paddleRegion = Math.floor(paddle.y / 15);
+  if (ballRegion < paddleRegion) paddle.dy = -paddleSpeed; 
+  if (ballRegion > paddleRegion) paddle.dy = paddleSpeed; 
+  if (ballRegion === paddleRegion) paddle.dy = 0; 
+}
+
+// game loop
+function loop() {
+        //if (leftScore < 7 && rightScore < 7) {
+            requestAnimationFrame(loop);
+        //} else if (leftScore >= 7 || rightScore >= 7) {
+        //    gameOver();
+        //}
+        context.clearRect(0,0,canvas.width,canvas.height);
+
+        if (ball.dx < 0) {
+            BotMovesPaddle(leftPaddle);
+            document.getElementById("leftPaddle").innerHTML = leftPaddle.y;
+        }
+        if (ball.dx > 0) {
+            BotMovesPaddle(rightPaddle);
+            document.getElementById("rightPaddle").innerHTML = rightPaddle.y;
+        }
+
+        // move paddles by their velocity
+        leftPaddle.y += leftPaddle.dy;
+        rightPaddle.y += rightPaddle.dy;
+
+        // prevent paddles from going through walls
+        if (leftPaddle.y < grid) {
+            leftPaddle.y = grid;
+        }
+        else if (leftPaddle.y > maxPaddleY) {
+            leftPaddle.y = maxPaddleY;
+        }
+
+        if (rightPaddle.y < grid) {
+            rightPaddle.y = grid;
+        }
+        else if (rightPaddle.y > maxPaddleY) {
+            rightPaddle.y = maxPaddleY;
+        }
+
+        // draw paddles
+        context.fillStyle = 'white';
+        context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
+        context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);
+
+        // move ball by its velocity
+        ball.x += ball.dx;
+        ball.y += ball.dy;
+
+        // prevent ball from going through walls by changing its velocity
+        if (ball.y < grid) {
+            ball.y = grid;
+            ball.dy *= -1;
+        }
+        else if (ball.y + grid > canvas.height - grid) {
+            ball.y = canvas.height - grid * 2;
+            ball.dy *= -1;
+        }
+
+        // reset ball if it goes past paddle (but only if we haven't already done so)
+        if ( (ball.x < 0 || ball.x > canvas.width) && !ball.resetting) {
+            ball.resetting = true;
+
+            if (ball.x < 0) {
+                rightScore++;
+            }
+            if (ball.x > canvas.width) {
+                leftScore++;
+            }
+
+            // give some time for the player to recover before launching the ball again
+            setTimeout(() => {
+                ball.resetting = false;
+                ball.x = canvas.width / 2;
+                ball.y = canvas.height / 2;
+            }, 400);
+        }
+
+        // check to see if ball collides with paddle. if they do change x velocity
+        if (collides(ball, leftPaddle)) {
+            ball.dx *= -1;
+            leftPaddle.dy = 0;
+
+            // move ball next to the paddle otherwise the collision will happen again
+            // in the next frame
+            ball.x = leftPaddle.x + leftPaddle.width;
+        }
+        else if (collides(ball, rightPaddle)) {
+            ball.dx *= -1;
+            rightPaddle.dy = 0;
+
+            // move ball next to the paddle otherwise the collision will happen again
+            // in the next frame
+            ball.x = rightPaddle.x - ball.width;
+        }
+
+        // draw score
+        context.font = "30px Arial";
+        context.fillText(leftScore, 200, 50);
+        context.fillText(rightScore, 560, 50);
+
+        // draw ball
+        context.fillRect(ball.x, ball.y, ball.width, ball.height);
+
+        // draw walls
+        context.fillStyle = "#f4dbd6";
+        context.fillRect(0, 0, canvas.width, grid);
+        context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);
+
+        // draw dotted line down the middle
+        for (let i = grid; i < canvas.height - grid; i += grid * 2) {
+            context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid);
+        }
+}
+
+// listen to keyboard events to move the paddles
+document.addEventListener('keydown', function(e) {
+    // up arrow key
+    if (e.which === 38) {
+        rightPaddle.dy = -paddleSpeed;
+    }
+    // down arrow key
+    else if (e.which === 40) {
+        rightPaddle.dy = paddleSpeed;
+    }
+
+    // w key
+    if (e.which === 87) {
+        leftPaddle.dy = -paddleSpeed;
+    }
+    // a key
+    else if (e.which === 83) {
+        leftPaddle.dy = paddleSpeed;
+    }
+});
+
+// listen to keyboard events to stop the paddle if key is released
+document.addEventListener('keyup', function(e) {
+    if (e.which === 38 || e.which === 40) {
+        rightPaddle.dy = 0;
+    }
+    if (e.which === 83 || e.which === 87) {
+        leftPaddle.dy = 0;
+    }
+});
+
+// start the game
+requestAnimationFrame(loop);
+
@@ -0,0 +1,276 @@
+/*
+    bits:
+    0 = snake
+    1 = food
+    2 = checked (for searching algorithms)
+*/
+
+// Bit functions for ease
+function isBitSet(value: number, bit: number): boolean {
+    return ((value >> bit) % 2 != 0)
+}
+
+function bitSet(value: number, bit: number): number {
+    return value | 1 << bit;
+}
+
+function bitClear(value: number, bit: number): number {
+    return value & ~(1 << bit);
+}
+
+class Point {
+    x: number;
+    y: number;
+
+    constructor(x = 0, y = 0) {
+        this.x = x;
+        this.y = y;
+    }
+
+    add(other: Point) {
+        var result = new Point;
+        result.x = this.x + other.x;
+        result.y = this.y + other.y;
+        return result;
+    }
+
+    subtract(other: Point) {
+        var result = new Point;
+        result.x = this.x - other.x;
+        result.y = this.y - other.y;
+        return result;
+    }
+}
+
+class SnakeCore {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    grid: number;
+    speed: number;
+    width: number;
+    height: number;
+    board: number[][];
+    body: Point[];
+    gameover: boolean;
+    foodAte: boolean;
+
+    constructor() {
+        // TODO: Add CSS stuff for page
+        this.canvas = document.getElementById('snake') as HTMLCanvasElement;
+        this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
+        this.grid = 25; // size of grid squares
+        this.speed = 10; // speed in ms
+        this.width = 25;
+        this.height = 15;
+        this.board = [];
+        for (let i = 0; i < this.height; i++) {
+            this.board.push(new Array(this.width));
+            for (let j = 0; j < this.width; j++) {
+                this.board[i][j] = 0;
+            }
+        }
+        this.body = [];
+        this.gameover = false;
+        this.foodAte = true;
+        this.body.push(new Point(12, 8));
+        this.board[8][12] = 1;
+    }
+
+    get head(): Point {
+        return this.body[this.body.length - 1];
+    }
+
+    reset() {
+        snake.gameover = false;
+        snake.foodAte = true;
+        for (let i = 0; i < this.height; i++) {
+            for (let j = 0; j < this.width; j++) {
+                this.board[i][j] = 0;
+            }
+        }
+    }
+
+    foodRegen() {
+        if (!this.foodAte)
+            return;
+        this.foodAte = false;
+        while (true) {
+            let tmp = new Point(Math.floor(Math.random() * this.width), Math.floor(Math.random() * this.height));
+            if (isBitSet(this.board[tmp.y][tmp.x], 0))
+                continue;
+            this.board[tmp.y][tmp.x] = bitSet(this.board[tmp.y][tmp.x], 1);
+            return;
+        }
+    }
+}
+
+class Bot {
+    pathUntrimmed: Point[];
+    path: Point[];
+
+    constructor() {
+        this.pathUntrimmed = [];
+        this.path = [];
+    }
+
+    bfs() {
+        var search: Point[] = [snake.head];
+        while (search.length !== 0) {
+            let current: Point = search.shift() as Point;
+            if (isBitSet(snake.board[current.y][current.x], 2))
+                continue;
+            this.pathUntrimmed.push(current);
+            let locals: Point[] = new Array[4];
+            for (var i = 0; i < 4; i++)
+                locals[i] = new Point(current.x, current.y);
+            locals[0].y += 1;
+            locals[1].x += 1;
+            locals[2].y -= 1;
+            locals[3].x -= 1;
+            for (const local of locals) {
+                if (local.x < 0 || local.x > snake.width - 1 || local.y < 0 || local.y > snake.height - 1) {
+                    continue;
+                }
+                let value = snake.board[local.y][local.x];
+                if (isBitSet(value, 1)) {
+                    this.pathUntrimmed.push(local);
+                    return;
+                }
+                if (isBitSet(value, 2))
+                    continue;
+                if (isBitSet(value, 0))
+                    continue;
+                search.push(local);
+            }
+            snake.board[current.y][current.x] = bitSet(snake.board[current.y][current.x], 2);
+        }
+    }
+    
+    // TODO: Fix trim function
+    trim() {
+        let reachedSnake = false;
+        this.path.push(this.pathUntrimmed.pop() as Point); // Push food location
+        while (this.pathUntrimmed.length !== 0) {
+            if (!reachedSnake) {
+                let location = this.pathUntrimmed[this.pathUntrimmed.length - 1];
+                if (isBitSet(snake.board[location.y][location.x], 0))
+                    reachedSnake = true;
+                var delta = new Point;
+                let connection = this.path[this.path.length - 1];
+                delta.x = location.x - connection.x;
+                delta.y = location.y - connection.y;
+                if ((Math.abs(delta.x) + Math.abs(delta.y)) === 1)
+                    this.path.push(location);
+            }
+            this.pathUntrimmed.pop();
+        }
+    }
+
+    unvisit() {
+        for (let i = 0; i < snake.height; i++) {
+            for (let j = 0; j < snake.width; j++) {
+                snake.board[i][j] = bitClear(snake.board[i][j], 2);
+            }
+        }
+    }
+
+    /*
+        values:
+        0 = left
+        1 = up
+        2 = right
+        4 = down
+    */
+    nextMove() {
+        var next: Point = this.path.pop() as Point;
+        var head: Point = snake.head;
+        var delta = new Point(0, 0);
+        delta = next.subtract(head);
+        if (delta.x > 1) {
+            delta.x = 1;
+            console.log("[ERR] delta.x > 1, clamping");
+        } else if (delta.x < -1) {
+            delta.x = -1;
+            console.log("[ERR] delta.x < 1, clamping");
+        }
+        if (delta.y > 1) {
+            delta.y = 1;
+            console.log("[ERR] delta.y > 1, clamping");
+        } else if (delta.y < -1) {
+            delta.y = -1;
+            console.log("[ERR] delta.y < 1, clamping");
+        }
+        return delta;
+    }
+
+    autoplay() {
+        if (this.path.length === 0)
+            this.bfs();
+            this.trim();
+            this.unvisit();
+        return this.nextMove();
+        /*
+        let delta = this.headPos - this.path.pop();
+        if (delta.x > 0)
+            return 0;
+        if (delta.y > 0)
+            return 1;
+        if (delta.x < 0)
+            return 2;
+        if (delta.y < 0)
+            return 4;
+        return 0; // Safety guard if above doesn't return
+        */
+    }
+}
+
+const snake: SnakeCore = new SnakeCore(); // Singleton for snake game
+const bot: Bot = new Bot(); // Singleton for bot playing
+
+function snakeloop() {
+    snake.context.clearRect(0, 0, snake.canvas.width, snake.canvas.height);
+    // Reset of needed
+    if (snake.gameover)
+        snake.reset();
+    // Input
+    bot.autoplay();
+    
+    // Move snake
+    // TODO: Fix teleporting snake
+    let next = bot.nextMove().add(snake.head);
+    if (next.x < 0 || next.x > snake.width || next.y < 0 || next.y > snake.height)
+        snake.gameover = true;
+    if (isBitSet(snake.board[next.y][next.x], 0) && (snake.body.length > 1))
+        snake.gameover = true; // Game should end (Snake touching snake)
+
+    snake.board[next.y][next.x] = bitSet(snake.board[next.y][next.x], 0);
+    snake.body.push(next);
+    if (!isBitSet(snake.board[next.y][next.x], 1)) {
+        let old: Point = snake.body.shift() as Point;
+        snake.board[old.y][old.x] = bitClear(snake.board[old.y][old.x], 0);
+    } else {
+        snake.board[next.y][next.x] = bitClear(snake.board[next.y][next.x], 1);
+        snake.foodAte = true;
+        while (bot.path.length > 0)
+            bot.path.pop();
+    }
+
+    // Regenerate food if needed
+    snake.foodRegen();
+
+    // Draw game
+    for (let i = 0; i < snake.height; i++) {
+        for (let j = 0; j < snake.width; j++) {
+            if (isBitSet(snake.board[i][j], 0))
+                snake.context.fillStyle = "green";
+            else if (isBitSet(snake.board[i][j], 1))
+                snake.context.fillStyle = "red";
+            else
+                snake.context.fillStyle = "black";
+            snake.context.fillRect(j * snake.grid, i * snake.grid, snake.grid, snake.grid);
+        }
+    }
+}
+
+// start the game
+setInterval(snakeloop, snake.speed);