Add snake game #1 (#3)

* added Snake Game Component

* added models
removed my img

* update packages, snake game updated

* snake game updated to working
added svg to footer

* renamed fames to games

src/app/app.component.css

@@ -1,46 +1,54 @@
-.center{
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    max-width: 40%;
-    filter: none;
-    -webkit-filter:none;
+.center {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  max-width: 40%;
+  filter: none;
+  -webkit-filter: none;
 }
 
 .bg-image {
-    /* The image used */
-    background-image: url("../assets/Zahid_nidhan.JPG");
-
-    /* Add the blur effect */
-    filter: blur(8px);
-    -webkit-filter: blur(8px);
-
-    /* Full height */
-    height: 100%;
-
-    /* Center and scale the image nicely */
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-  .bg-text {
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
-    color: white;
-    font-weight: bold;
-    border: 3px solid #f1f1f1;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-    width: 80%;
-    padding: 20px;
-    text-align: center;
-  }
-  .connect{
-    color: white;
-    font-weight: bold;
-    border: 3px solid #000;
-    background-color: blue;
-    position: absolute;
-  }
+  /* The image used */
+  /* background-image: url("../assets/Zahid_nidhan.JPG"); */
+
+  /* Add the blur effect */
+  filter: blur(8px);
+  -webkit-filter: blur(8px);
+
+  /* Full height */
+  height: 100%;
+
+  /* Center and scale the image nicely */
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.bg-text {
+  background-color: rgb(0, 0, 0);
+  /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4);
+  /* Black w/opacity/see-through */
+  color: white;
+  font-weight: bold;
+  border: 3px solid #f1f1f1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: 80%;
+  padding: 20px;
+  text-align: center;
+}
+
+.connect {
+  color: white;
+  font-weight: bold;
+  border: 3px solid #000;
+  background-color: blue;
+  position: absolute;
+}
+
+#body{
+  overflow: auto;
+}

src/app/app.component.html

@@ -1,3 +1,5 @@
 <app-navbar></app-navbar>
-<router-outlet></router-outlet>
+<div id="body" class="container">
+    <router-outlet></router-outlet>
+</div>
 <app-footer></app-footer>

src/app/games/games-routing.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { GamesComponent } from './games.component';
+import { SnakeGameComponent } from './snake-game/snake-game.component';
 
-const routes: Routes = [{ path: '', component: GamesComponent }];
+const routes: Routes = [{ path: '', component: GamesComponent },
+{path: 'snake', component: SnakeGameComponent}];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/games/games.component.html

@@ -1 +1,12 @@
-<p>games works!</p>
+<div id="games" class="container grid-container space-up text-center">
+    <div *ngFor="let game of games" class="grid-item">
+        <div class="card" style="width:400px">
+            <img class="card-img-top" src={{game.image}} alt="Game image">
+            <div class="card-body">
+              <h4 class="card-title">{{game.title}}</h4>
+              <p class="card-text">{{game.description}}</p>
+              <a routerLink={{game.link}} class="btn btn-primary">Play</a>
+            </div>
+          </div>
+    </div>
+</div>

src/app/games/games.component.ts

@@ -1,13 +1,24 @@
 import { Component, OnInit } from '@angular/core';
-
+import { IGame } from './models/igame';
 @Component({
   selector: 'app-games',
   templateUrl: './games.component.html',
   styleUrls: ['./games.component.css']
 })
 export class GamesComponent implements OnInit {
+  games: IGame[];
 
-  constructor() { }
+  constructor() { 
+    this.games = [];
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"https://wallpapers.com/images/high/green-snake-game-character-bqvxt2p5oibadgqn.webp", link:"snake"});
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"", link:"snake"});
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"", link:"snake"});
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"", link:"snake"});
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"", link:"snake"});
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"", link:"snake"});
+    this.games.push({title:"Snake", description:"Bla bla bla snake game", image:"", link:"snake"});
+    console.log(this.games);
+  }
 
   ngOnInit(): void {
   }

src/app/games/games.module.ts

@@ -3,13 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { GamesRoutingModule } from './games-routing.module';
 import { GamesComponent } from './games.component';
-import { GameComponent } from './game/game.component';
 
 
 @NgModule({
   declarations: [
-    GamesComponent,
-    GameComponent
+    GamesComponent
   ],
   imports: [
     CommonModule,

src/app/games/models/cell.ts

@@ -0,0 +1,26 @@
+interface ICell {
+    x: number;
+    y: number;
+    color: string;
+}
+
+export class Cell {
+    x: number = 0;
+    y: number = 0;
+    color: string = "yellow";
+    constructor(obj?: ICell) {
+        if (obj) {
+            this.color = obj.color;
+            this.x = obj.x;
+            this.y = obj.y;
+        }
+    }
+
+    setNextRandomCell(W:number, H:number){
+        this.x = Math.round(Math.random()*(W-10)/20);
+        this.y = Math.round(Math.random()*(H-10)/20);
+
+        var colors = ["red","green","aqua","coral","orchid"];
+        this.color = colors[Math.round(Math.random() * colors.length)];
+    }
+}

src/app/games/models/igame.ts

@@ -0,0 +1,6 @@
+export interface IGame{
+    title:string;
+    description:string;
+    image:string;
+    link:string;
+}

src/app/games/models/snake.ts

@@ -0,0 +1,90 @@
+import { Cell } from "./cell";
+import { IStats } from "./stats";
+
+export class Snake {
+    init_length: number = 5;
+    cells: Cell[] = [];
+    direction: string = "down";
+
+    createSnake(canvasWidth: number): void {
+        for (var i = this.init_length - 1; i >= 0; i--) {
+            this.cells.push(new Cell({ x: canvasWidth / 20, y: i, color: "yellow" }));
+        }
+    }
+
+    drawSnake(pen: any): void {
+        for (var i = 0; i < this.cells.length; i++) {
+            pen.fillStyle = this.cells[i].color;
+            pen.strokeStyle = "black";
+            pen.lineWidth = 5;
+            pen.strokeRect(this.cells[i].x * 10, this.cells[i].y * 10, 10, 10);
+            pen.fillRect(this.cells[i].x * 10, this.cells[i].y * 10, 10, 10);
+        }
+    }
+
+    updateSnake(obj: IStats): IStats {
+        var headX = this.cells[0].x;
+        var headY = this.cells[0].y;
+
+        //if food strikes with snake
+        for (var i = 1; i < this.cells.length; i++) {
+            if (this.cells[i].x == headX && this.cells[i].y == headY) {
+                obj.gameOver = true;
+            }
+        }
+
+        if (headX == obj.food.x && headY == obj.food.y) {
+            obj.score++;
+            this.cells[0].color = obj.food.color;
+            obj.food.setNextRandomCell(obj.canvasWidth, obj.canvasHeight);
+            if (obj.score > obj.highScore) {
+                obj.highScore = obj.score;
+            }
+        }
+        else {
+            //if food not taken;
+            this.cells.pop();
+        }
+
+        var nextX: number = 0;
+        var nextY: number = 0;
+        switch (this.direction) {
+            case "right": {
+                nextX = headX + 1;
+                nextY = headY;
+                break;
+            }
+
+            case "left": {
+                nextX = headX - 1;
+                nextY = headY;
+                break;
+            }
+
+            case "down": {
+                nextX = headX;
+                nextY = headY + 1;
+                break;
+            }
+
+            case "up": {
+                nextX = headX;
+                nextY = headY - 1;
+                break;
+            }
+
+        }
+
+        //insert the new cell at head
+        this.cells.unshift(new Cell({ x: nextX, y: nextY, color: "yellow" }));
+
+        //last coordinates condition
+        var last_x = Math.round(obj.canvasWidth / 10);
+        var last_y = Math.round(obj.canvasHeight / 10);
+
+        if (this.cells[0].y < 0 || this.cells[0].x > last_x || this.cells[0].x < 0 || this.cells[0].y > last_y) {
+            obj.gameOver = true;
+        }
+        return obj;
+    }
+}

src/app/games/models/stats.ts

@@ -0,0 +1,10 @@
+import { Cell } from "./cell";
+
+export interface IStats {
+    gameOver: boolean;
+    canvasWidth: number;
+    canvasHeight: number;
+    food: Cell;
+    score: number;
+    highScore: number;
+}

src/app/games/snake-game/snake-game.component.css

@@ -0,0 +1,7 @@
+canvas{
+    background-color: black;
+}
+
+#snake-game{
+    position: fixed;
+}

src/app/games/snake-game/snake-game.component.html

@@ -0,0 +1,3 @@
+<div id="snake-game" class="container text-center space-up">
+    <canvas width="400" height="400" id="canvas" ></canvas>
+</div>

src/app/games/game/game.component.spec.ts → src/app/games/snake-game/snake-game.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { GameComponent } from './game.component';
+import { SnakeGameComponent } from './snake-game.component';
 
-describe('GameComponent', () => {
-  let component: GameComponent;
-  let fixture: ComponentFixture<GameComponent>;
+describe('SnakeGameComponent', () => {
+  let component: SnakeGameComponent;
+  let fixture: ComponentFixture<SnakeGameComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ GameComponent ]
+      declarations: [ SnakeGameComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(GameComponent);
+    fixture = TestBed.createComponent(SnakeGameComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });