Nane Kratzke

Lecture:

Web Technologies

Published: 14 Mar 2018 (latest update: 13 Jul 2018)
Short: Webtech
Semester: SS 2018
Study: Computer science

This project is about common technologies used to build (client-side parts) of web information systems. The project course is given for students at the Lübeck University of Applied Sciences (in german language). The course covers following aspects:

  • descriptional languages for web content like HTML
  • presentational languages for web content like CSS
  • Document Object Model (DOM)
  • client and server side programming with Dart
  • progressive web app and offline capabilities of web pages
  • gyroscope based controls

Students apply their intensified web programming skills by developing a small one person, DOM-tree based (that means not canvas based) online game like Tetris or Boulder Dash.

The following teams formed up and released the following interesting mobile game implementations. To have a look on the overall hall-of-fame might be interesting as well.

Material

  • Unit 01: HTML + DOM-Tree + CSS
  • Unit 02: Dart I (Dart as full purpose programming language)
  • Unit 03: Dart II (Client- and server-side programming)
  • Unit 04: HTTP and REST
  • Unit 05: Progressive Web Apps and more with Dart (Add-On)

Reference games

  • SnakeDart: The famous snake game (A reference project to develop another game using Dart)
  • Shadow Hunter: Reference mobile 'game' (Demonstrates gyroscope control on mobile devices)
  • Yet another 2048 game: ya2048 (Demonstrates progressive web app features and swipe controls on mobile devices)

Group 1 games

  • Team 1.A: Klick Mich (not released for public)
  • Team 1.B: Battle City
  • Team 1.C: Tetris 360°
  • Team 1.D: Dart Jump (Group: 2nd place)
  • Team 1.E: Mexican Jones (sadly keyboard control on desktop browsers seems buggy)
  • Team 1.F: Brick Out
  • Team 1.G: (surrendered)
  • Team 1.H: Pingu (Group: 1st place, Hall of Fame: 2nd place)

Group 2 games

  • Team 2.A: Australia Simulator (Group: 1st place, Hall of Fame: 1st place)
  • Team 2.B: Dart Rogue
  • Team 2.C: (surrendered)
  • Team 2.D: (surrendered)
  • Team 2.E: Path Puzzle (not released for public)
  • Team 2.F: (surrendered)
  • Team 2.G: Grid Shift (Group: 2nd place, Hall of Fame: 3rd place, sadly keyboard control on some desktop browsers seems buggy)

Group 3 games

  • Team 3.A: RabbitRinth
  • Team 3.B: Color Jump (Group: 2nd place)
  • Team 3.C: Warships (sadly some images not working due to German special character encoding problems like in 'flugzeugträger.png')
  • Team 3.D: (surrendered)
  • Team 3.E: Battle City (Group: 1st place, Final Five)
  • Team 3.F: SmurfsGoneWild (sadly some images (drag icon) not working due to wrong relative paths)
  • Team 3.G: Space Babel (not released for public)
  • Team 3.H: Jumpy Run

Group 4 games

  • Team 4.A: Stone Royal
  • Team 4.B: Star Jet Enterprise (sadly keyboard control on desktop browsers seems buggy)
  • Team 4.C: Bombenhagel
  • Team 4.D: Frank the Fruitman (Group: 1st place (shared), Final Five)
  • Team 4.E: Hunt (not released for public)
  • Team 4.F: Open Flood
  • Team 4.G: Break Out (Group: 1st place (shared), Final Five)
  • Team 4.H: Battle Ship