Trianta/trianta.dev
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

snake: add some misc tweaks to game and page #8

Merged
Trianta merged 2 commits from snake into main 2024-11-09 01:42:25 -06:00
Conversation 0 Commits 2 Files Changed 2 +13 -2
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -30,7 +30,8 @@
<h2 class="cardTop">Snake</h2> <h2 class="cardTop">Snake</h2>
<canvas width="625" height="375" id="snake"></canvas> <canvas width="625" height="375" id="snake"></canvas>
<script src="public/snake.js"></script> <script src="public/snake.js"></script>
<p class="cardStats">Bottom Text<span></span></p> <p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
<p class="cardStats">Food Location: <span id="snakeFood"></span></p>
<a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a> <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
</div> </div>
</div> </div>

12
src/snake.ts
View File

@ -55,6 +55,7 @@ class SnakeCore {
height: number; height: number;
board: number[][]; board: number[][];
body: Point[]; body: Point[];
food: Point;
gameover: boolean; gameover: boolean;
foodAte: boolean; foodAte: boolean;
@ -63,13 +64,14 @@ class SnakeCore {
this.canvas = document.getElementById('snake') as HTMLCanvasElement; this.canvas = document.getElementById('snake') as HTMLCanvasElement;
this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D; this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
this.grid = 25; // size of grid squares this.grid = 25; // size of grid squares
this.timeout = 100; // speed in ms this.timeout = 20; // speed in ms
this.width = 25; this.width = 25;
this.height = 15; this.height = 15;
this.board = []; this.board = [];
for (let i = 0; i < this.height; i++) for (let i = 0; i < this.height; i++)
this.board.push(new Array(this.width)); this.board.push(new Array(this.width));
this.body = []; this.body = [];
this.food = new Point();
this.gameover = false; this.gameover = false;
this.foodAte = true; this.foodAte = true;
this.body.push(new Point(12, 8)); this.body.push(new Point(12, 8));
@ -112,6 +114,7 @@ class SnakeCore {
if (isBitSet(this.board[tmp.y][tmp.x], BoardState.SNAKE)) if (isBitSet(this.board[tmp.y][tmp.x], BoardState.SNAKE))
continue; continue;
this.board[tmp.y][tmp.x] = bitSet(this.board[tmp.y][tmp.x], BoardState.FOOD); this.board[tmp.y][tmp.x] = bitSet(this.board[tmp.y][tmp.x], BoardState.FOOD);
this.food.copy(tmp);
return; return;
} }
} }
@ -161,6 +164,12 @@ class SnakeCore {
} }
} }
} }
// Update text on page to match game
updatePageText() {
document.getElementById("snakeHead").innerHTML = "x: " + this.body[this.body.length - 1].x + " y: " + this.body[this.body.length - 1].y;
document.getElementById("snakeFood").innerHTML = "x: " + this.food.x + " y: " + this.food.y ;
}
} }
class Bot { class Bot {
@ -280,6 +289,7 @@ function snakeloop() {
g_snake.foodRegen(); g_snake.foodRegen();
g_snake.draw(); g_snake.draw();
g_snake.updatePageText();
} }
// start the game // start the game