From 53af7849520e78833366795799ac24b392530e42 Mon Sep 17 00:00:00 2001 From: Trianta <56975502+Trimutex@users.noreply.github.com> Date: Tue, 27 Aug 2024 23:32:54 -0500 Subject: [PATCH] core: move files to src and convert snake to ts --- {css => src}/home.css | 5 +- {css => src}/pong.css | 0 {js => src}/pong.js | 0 js/snake.js => src/snake.ts | 120 ++++++++++++++++++++++++++---------- 4 files changed, 92 insertions(+), 33 deletions(-) rename {css => src}/home.css (96%) rename {css => src}/pong.css (100%) rename {js => src}/pong.js (100%) rename js/snake.js => src/snake.ts (63%) diff --git a/css/home.css b/src/home.css similarity index 96% rename from css/home.css rename to src/home.css index 751f8bb..90107a7 100644 --- a/css/home.css +++ b/src/home.css @@ -125,8 +125,11 @@ a.button { border-top-left-radius: 18px; border-top-right-radius: 18px; animation: card 3s linear infinite; - max-width: 800px; + width: 800px; + height: 800px; margin: 0px auto; + margin-top: 25px; + margin-bottom: 25px; } .cardTop { diff --git a/css/pong.css b/src/pong.css similarity index 100% rename from css/pong.css rename to src/pong.css diff --git a/js/pong.js b/src/pong.js similarity index 100% rename from js/pong.js rename to src/pong.js diff --git a/js/snake.js b/src/snake.ts similarity index 63% rename from js/snake.js rename to src/snake.ts index 94815e2..ff79f02 100644 --- a/js/snake.js +++ b/src/snake.ts @@ -6,30 +6,58 @@ */ // Bit functions for ease -function isBitSet(num, bit){ - return ((num >> bit) % 2 != 0) +function isBitSet(value: number, bit: number): boolean { + return ((value >> bit) % 2 != 0) } -function bitSet(num, bit){ - return num | 1 << bit; +function bitSet(value: number, bit: number): number { + return value | 1 << bit; } -function bitClear(num, bit){ - return num & ~(1 << bit); +function bitClear(value: number, bit: number): number { + return value & ~(1 << bit); } -class OrderedPair { - constructor(x, y) { +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'); - this.context = this.canvas.getContext('2d'); + 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; @@ -44,10 +72,14 @@ class SnakeCore { this.body = []; this.gameover = false; this.foodAte = true; - this.body.push(new OrderedPair(12, 8)); + 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; @@ -63,7 +95,7 @@ class SnakeCore { return; this.foodAte = false; while (true) { - let tmp = new OrderedPair(Math.floor(Math.random() * this.width), Math.floor(Math.random() * this.height)); + 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); @@ -73,21 +105,24 @@ class SnakeCore { } class Bot { + pathUntrimmed: Point[]; + path: Point[]; + constructor() { this.pathUntrimmed = []; this.path = []; } bfs() { - var search = [snake.body.at(0)]; + var search: Point[] = [snake.head]; while (search.length !== 0) { - let current = search.pop(); + let current: Point = search.shift() as Point; if (isBitSet(snake.board[current.y][current.x], 2)) continue; this.pathUntrimmed.push(current); - let locals = []; + let locals: Point[] = new Array[4]; for (var i = 0; i < 4; i++) - locals[i] = new OrderedPair(current.x, current.y); + locals[i] = new Point(current.x, current.y); locals[0].y += 1; locals[1].x += 1; locals[2].y -= 1; @@ -114,20 +149,20 @@ class Bot { // TODO: Fix trim function trim() { let reachedSnake = false; - this.path.push(this.pathUntrimmed.pop()); // Push food location + this.path.push(this.pathUntrimmed.pop() as Point); // Push food location while (this.pathUntrimmed.length !== 0) { if (!reachedSnake) { - let location = this.pathUntrimmed.shift(); + let location = this.pathUntrimmed[this.pathUntrimmed.length - 1]; if (isBitSet(snake.board[location.y][location.x], 0)) reachedSnake = true; - var delta = new OrderedPair; - let connection = this.path.at(0); + 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); - } else - this.pathUntrimmed.shift(); + } + this.pathUntrimmed.pop(); } } @@ -146,12 +181,34 @@ class Bot { 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) - return; - this.bfs(); - //this.trim(); - this.unvisit(); + 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) @@ -167,8 +224,8 @@ class Bot { } } -const snake = new SnakeCore(); // Singleton for snake game -const bot = new Bot(); // Singleton for bot playing +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); @@ -180,8 +237,7 @@ function snakeloop() { // Move snake // TODO: Fix teleporting snake - let next = bot.pathUntrimmed.shift(); - + 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)) @@ -190,7 +246,7 @@ function snakeloop() { 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 = snake.body.shift(); + 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);