Giter Club home page Giter Club logo

prg08-week3-oefening1's Introduction

PRG08-Week3-oefening1

Startcode

  • De car class bevat methods en statements voor drie soorten gedrag: driving(), jumping(), crashing()
  • De car heeft een property state en een switch block waarmee je van gedrag kan wisselen.

Opdracht

  • Verwijder de state property en alle code die het gedrag beschrijft of checked.
  • Verplaats de gedrag code naar drie strategy classes.
  • De car krijgt in de constructor als eerste het 'driving' gedrag : this.mybehavior = new Driving()
  • Plaats een keyboard listener in de 'driving' class. Na een keypress verandert het gedrag in 'jumping'.
  • Plaats een keyboard listener in de 'Driving' class. Na een keypress geef je het 'Jumping' gedrag aan de auto. Let op dat je de keyboard listener ook verwijdert.
  • In de 'jumping' class is geen keyboard listener. De update loop kijkt of de auto geland is, en geeft daarna het "Crashing" gedrag aan de auto.

Optioneel

  • Maak de game class een singleton met een gameOver method
  • Maak een array met blocks in game.ts. Er blijven telkens blocks van rechts het beeld in komen.
  • Na het springen verandert de behavior weer in driving.
  • Als de auto een block raakt crash je. Gebruik de collision detection functie.
  • Toon een score. Je score blijft optellen zo lang je niet crashed.

Strategy Pattern Voorbeeld

class Person {
    private myBehavior:Behavior;
    constructor(){
        this.myBehavior = new Jump(this);
        this.myBehavior.execute();
    }
}

class Jump implements Behavior {
    public person : Person;
    constructor(p:Person){
        this.person = p;
    }
    public execute(){
        console.log("I am jumping!!!");
    }
}

interface Behavior {
    person:Person;
    execute() : void;
}

Event Listeners toevoegen en verwijderen

Als je een listener aan window toevoegt, dan blijft die listener altijd bestaan, zelfs als je game object wordt verwijderd. Het is beter om listeners te verwijderen als je ze niet meer nodig hebt.

class Test {
    private callback:EventListener;

    constructor(){
        // we slaan de functie op in een variabele
        this.callback = (e:KeyboardEvent) => this.keyWasPressed(e);

        // listener toevoegen
        window.addEventListener("keydown", this.callback);
    }

    private keyWasPressed(e:KeyboardEvent):void {
        // omdat de functie in een variabele zit kan je removeEventListener doen
        window.removeEventListener("keydown", this.callback);
    }
}

prg08-week3-oefening1's People

Contributors

kokodoko avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.