Celtra challenge – HTML game

View Github Repository Open presentation in a new window

markogresak

See all presentation from markogresak

Celtra challenge – HTML game

0 0

celtra-presentation

On Github markogresak / celtra-presentation

Celtra challenge

HTML game

Marko Grešak

gresak.io / github.com/markogresak / @MGresak

Play at gresak.io/celtra

About the game

Multiplayer combat game

Randomly generated platform

How to play:

  • Move left: A or← or touch left half of screen
  • Move left: D or→ or touch right half of screen
  • Attack: Space or touch

Login screen

Game screen

Mobile view

Technologies

  • HTML5 markup
  • CSS3 styling
  • Dart

Dart?

Alternative to JavaScript

"All in one" toolset

Powerful SDK and tools

Works in Dart VM (Dartium)

or as JavaScript with dart2js

Standalone VM

Deploying Dart project

Dart has tools for serving projects

Serve web/: pub serve

Run a single Dart file: dart server.dart

Why this way?

Decentralized server = simpler scalability

How does it work: Client

Starts game with entered username

Connects to server via dart:html.WebSocket

Generates and renders platform

Sends update to server when player moves

How does it work: Server

Binds address and listens for requests

Connected to clients via dart:io.WebSocket

Handles player messages

Broadcasts message to players

Feedback, questions

Thank you for your attention

Slides: gresak.io/celtra/presentation