Puzzle Game Online Running on a Bidirectional Communication Framework

Total Page:16

File Type:pdf, Size:1020Kb

Puzzle Game Online Running on a Bidirectional Communication Framework Master in Computer Engineering: Web Technology and Digital Business Puzzle game online running on a bidirectional communication framework based on Node.js and Socket.io Master's Final Project by Johanna Mesa Ramos University of Las Palmas de Gran Canaria June 2016 Supervisor Cayetano Guerra Artal Computer Science and Artificial Intelligence "Everybody wanna be a bodybuilder, but don't nobody wanna lift no heavy ass weight." - Ronnie Coleman ACKNOWLEDGEMENTS It was back in 2013 when I found myself writing the acknowledgements of my then end of career project. Today I am doing it again, but now for my master's degree. I have to thank the University of Las Palmas de Gran Canaria (ULPGC) for this, not only for their installment of the master's program, but also for bestowing upon me the scholarship that has allowed me to undertake such a fantastic opportunity. From the bottom of my heart, thank you. There is also a thank you in store for my supervisor, Cayetano Guerra Artal. I do appreciate all the guidance you have provided along these past few months, helping me shape the idea I had into an actual master's final project. I cannot go without showing my gratitude towards the university's administration staff. They have always lent a helping hand since I started out my career path back in 2009, they are an absolutely amazing team, thank you so much. Last but not least, I want to thank my family and my other half. They are the ones who keep me sane and who encourage me to finish strongly whatever project I happen to have undertaken. I love you mami, I love you dad, I love you witcher. [This page is intentionally left blank.] TABLE OF CONTENTS TABLE OF ILLUSTRATIONS ............................................................................................................. 7 TABLE OF UML DIAGRAMS ............................................................................................................ 7 TABLE OF RESULTS ........................................................................................................................ 8 SUMMARY ..................................................................................................................................... 9 RESUMEN ...................................................................................................................................... 9 CHAPTER 1 - INTRODUCTION ...................................................................................................... 10 1.1 DOCUMENT STRUCTURE ............................................................................................. 10 1.2 STATE OF THE ART ....................................................................................................... 11 FRAMEWORK ....................................................................................................................... 11 GAME ................................................................................................................................... 13 1.3 GOALS .......................................................................................................................... 14 FRAMEWORK ....................................................................................................................... 14 GAME ................................................................................................................................... 14 1.4 SPECIFIC SKILLS COVERED ........................................................................................... 15 TI01 ...................................................................................................................................... 15 TI02 ...................................................................................................................................... 15 TI04 ...................................................................................................................................... 16 1.5 CONTRIBUTIONS .......................................................................................................... 16 TECHNICAL ENVIRONMENT ................................................................................................. 16 PERSONAL ............................................................................................................................ 16 1.6 RESULTS ....................................................................................................................... 17 CHAPTER 2 - DEVELOPMENT ....................................................................................................... 18 2.1 METHODOLOGY .......................................................................................................... 18 INCREMENTAL MODEL ........................................................................................................ 18 UNIFIED MODELING LANGUAGE ......................................................................................... 18 REQUIREMENTS THROUGH USE CASES ............................................................................... 18 2.2 FRAMEWORK ............................................................................................................... 19 REQUIREMENTS ................................................................................................................... 19 DESIGN ................................................................................................................................ 23 DOCUMENTATION ............................................................................................................... 34 2.3 GAME ........................................................................................................................... 37 REQUIREMENTS ................................................................................................................... 37 DESIGN ................................................................................................................................ 40 Game Level Design .............................................................................................................. 50 CHAPTER 3 - RESULTS .................................................................................................................. 52 3.1 Framework .................................................................................................................. 52 3.2 Game ........................................................................................................................... 54 CHAPTER 4 - BUSINESS PLAN ...................................................................................................... 57 4.1 Elevator Pitch .............................................................................................................. 57 4.2 Business Model Canvas ..................................................................................................... 57 BMC ..................................................................................................................................... 58 Bicomm's BMC .................................................................................................................... 59 CHAPTER 5 - CONCLUSION AND PROJECT'S FUTURE .................................................................. 63 5.1 Conclusion ......................................................................................................................... 63 5.2 Project's future .................................................................................................................. 64 BIBLIOGRAPHY ............................................................................................................................. 66 SOURCES OF IMAGES USED ......................................................................................................... 68 TABLE OF ILLUSTRATIONS Illustration 1. Client-Server polling. ______________________________________________ 11 Illustration 2. Client-Server long polling. __________________________________________ 12 Illustration 3. Armor Games. ___________________________________________________ 13 Illustration 4. Kongregate. _____________________________________________________ 13 Illustration 5. Addicting Games. _________________________________________________ 13 Illustration 6. Top part of Sign up page mock up. ___________________________________ 20 Illustration 7. Bottom part of Sign up page mock up. ________________________________ 20 Illustration 8. Sign in mock up. __________________________________________________ 22 Illustration 9. Dashboard mock up. ______________________________________________ 23 Illustration 10. JWT anatomy. __________________________________________________ 30 Illustration 11. JWT signature component. ________________________________________ 30 Illustration 12. HTTP monitoring. ________________________________________________ 31 Illustration 13. JWT decoded. ___________________________________________________ 31 Illustration 14. Hijacking JWT inside cookie. _______________________________________ 32 Illustration 15. Full-duplex scheme. ______________________________________________ 34 Illustration 16. Normal flow Choose Controls mockup. _______________________________ 38 Illustration 17. Alternate flow Choose Controls mockup. _____________________________ 38 Illustration 18. Post condition mockup of alternate flow Choose Controls. _______________ 38 Illustration 19. Controls mock up. _______________________________________________
Recommended publications
  • Uml.Sty, a Package for Writing UML Diagrams in LATEX
    uml.sty, a package for writing UML diagrams in LATEX Ellef Fange Gjelstad March 17, 2010 Contents 1 Syntax for all the commands 5 1.1 Lengths ........................................ 5 1.2 Angles......................................... 5 1.3 Nodenames...................................... 6 1.4 Referencepoints ................................. 6 1.5 Colors ......................................... 6 1.6 Linestyles...................................... 6 2 uml.sty options 6 2.1 debug ......................................... 6 2.2 index.......................................... 6 3 Object-oriented approach 7 3.1 Colors ......................................... 10 3.2 Positions....................................... 10 4 Drawable 12 4.1 Namedoptions .................................... 12 4.1.1 import..................................... 12 5 Element 12 5.1 Namedoptions .................................... 12 5.1.1 Reference ................................... 12 5.1.2 Stereotype................................... 12 5.1.3 Subof ..................................... 13 5.1.4 ImportedFrom ................................ 13 5.1.5 Comment ................................... 13 6 Box 13 6.1 Namedoptionsconcerninglocation . ....... 13 6.2 Boxesintext ..................................... 14 6.3 Named options concerning visual appearance . ......... 14 6.3.1 grayness.................................... 14 6.3.2 border..................................... 14 1 6.3.3 borderLine .................................. 14 6.3.4 innerBorder.................................
    [Show full text]
  • Marketing Cloud Published: August 12, 2021
    Marketing Cloud Published: August 12, 2021 The following are notices required by licensors related to distributed components (mobile applications, desktop applications, or other offline components) applicable to the services branded as ExactTarget or Salesforce Marketing Cloud, but excluding those services currently branded as “Radian6,” “Buddy Media,” “Social.com,” “Social Studio,”“iGoDigital,” “Predictive Intelligence,” “Predictive Email,” “Predictive Web,” “Web & Mobile Analytics,” “Web Personalization,” or successor branding, (the “ET Services”), which are provided by salesforce.com, inc. or its affiliate ExactTarget, Inc. (“salesforce.com”): @formatjs/intl-pluralrules Copyright (c) 2019 FormatJS Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    [Show full text]
  • Rational Unified Process - an Overview Uppsala, 2009-02-10
    Rational Unified Process - an overview Uppsala, 2009-02-10 Mikael Broomé Consultant M.Sc. LTH 10 years in Software Development 4 different RUP implementations Project Manager Mentor for Project Managers Applying more and more of agile mindset and techniques E-Mail: [email protected] 2 1 Agenda Why a process for developing software? What is RUP? What is the “RUP-way” of developing software? How is RUP packaged? Advantages by using RUP? Challenges when using RUP? Relation to other processes? 3 A good project delivers the right solution: satisified Users satisfied Sponsor delivers in time delivers on budget 4 2 Challenges Common challenges in software development projects: Capture the “right” requirements. Requirement changes. Different parts of the system do not fit together. Small changes causes big problems. Low quality and poor performance. Major problems identified late in projects. Lack of communication. Difficult to estimate time and cost. Management of environment, platforms and tools. 5 It’s all about (lack of) communication 6 3 Agenda Why a process for developing software? What is RUP? What is the “RUP-way” of developing software? How is RUP packaged? Advantages by using RUP? Challenges when using RUP? Relation to other processes? 7 What is RUP and UML? RUP is a process for development of software that describes what should be performed (activities) who should do it (roles) what the result should be (artifacts). UML is a notation with defined symbols that is worked out by OMG (Object Management Group) is used to make drawings (for example in software development). 8 4 Agenda Why a process for developing software? What is RUP? What is the “RUP-way” of developing software? How is RUP packaged? Advantages by using RUP? Challenges when using RUP? Relation to other processes? 9 JW2 RUP’s Six Best practices 1.
    [Show full text]
  • Network Visualization with R Katherine Ognyanova, POLNET 2015 Workshop, Portland OR
    Network visualization with R Katherine Ognyanova, www.kateto.net POLNET 2015 Workshop, Portland OR Contents Introduction: Network Visualization2 Data format, size, and preparation4 DATASET 1: edgelist ......................................4 DATASET 2: matrix .......................................5 Network visualization: first steps with igraph 5 A brief detour I: Colors in R plots8 A brief detour II: Fonts in R plots 11 Back to our main plot line: plotting networks 12 Plotting parameters ........................................ 12 Network Layouts ......................................... 17 Highlighting aspects of the network ............................... 24 Highlighting specific nodes or links ............................... 27 Interactive plotting with tkplot ................................. 29 Other ways to represent a network ............................... 30 Plotting two-mode networks with igraph ............................ 31 Quick example using the network package 35 Interactive and animated network visualizations 37 Interactive D3 Networks in R .................................. 37 Simple Plot Animations in R .................................. 38 Interactive networks with ndtv-d3 ................................ 39 Interactive plots of static networks............................ 39 Network evolution animations............................... 40 1 Introduction: Network Visualization The main concern in designing a network visualization is the purpose it has to serve. What are the structural properties that we want to highlight?
    [Show full text]
  • Sysml Distilled: a Brief Guide to the Systems Modeling Language
    ptg11539604 Praise for SysML Distilled “In keeping with the outstanding tradition of Addison-Wesley’s techni- cal publications, Lenny Delligatti’s SysML Distilled does not disappoint. Lenny has done a masterful job of capturing the spirit of OMG SysML as a practical, standards-based modeling language to help systems engi- neers address growing system complexity. This book is loaded with matter-of-fact insights, starting with basic MBSE concepts to distin- guishing the subtle differences between use cases and scenarios to illu- mination on namespaces and SysML packages, and even speaks to some of the more esoteric SysML semantics such as token flows.” — Jeff Estefan, Principal Engineer, NASA’s Jet Propulsion Laboratory “The power of a modeling language, such as SysML, is that it facilitates communication not only within systems engineering but across disci- plines and across the development life cycle. Many languages have the ptg11539604 potential to increase communication, but without an effective guide, they can fall short of that objective. In SysML Distilled, Lenny Delligatti combines just the right amount of technology with a common-sense approach to utilizing SysML toward achieving that communication. Having worked in systems and software engineering across many do- mains for the last 30 years, and having taught computer languages, UML, and SysML to many organizations and within the college setting, I find Lenny’s book an invaluable resource. He presents the concepts clearly and provides useful and pragmatic examples to get you off the ground quickly and enables you to be an effective modeler.” — Thomas W. Fargnoli, Lead Member of the Engineering Staff, Lockheed Martin “This book provides an excellent introduction to SysML.
    [Show full text]
  • UML 2 Activity and Action Models
    JOURNAL OF OBJECT TECHNOLOGY Online at www.jot.fm. Published by ETH Zurich, Chair of Software Engineering ©JOT, 2003 Vol. 2, No. 4, July-August 2003 UML 2 Activity and Action Models Conrad Bock, National Institute of Standards and Technology This is the first in a series introducing the activity model in the Unified Modeling Language, version 2 (UML 2), and how it integrates with the action model [1]. The series is a companion to the standard, providing additional background, rationale, examples, and introducing concepts in a logical order. This article covers motivation and architecture for the new models, basic aspects of UML 2 activities and actions, and introduces the general notion of behavior in UML 2. 1 BACKGROUND A focus of recent developments in UML has been on procedures and processes. UML 1.5 introduced a model for parameterized procedures defined by control and data flow to complement the existing state and interaction models [2]. For the first time UML supports first-class procedures that can be used as methods on objects or independently of objects, as occurs when modeling, for example, function libraries with popular programming languages. It also facilitates application of UML by modelers who do not use object-orientation (OO) routinely, such as system engineers and enterprise modelers, and provides them a path to incrementally adopt OO as needed [3]. The flexibility to combine OO with functional approaches considerably widens and integrates the potential applications of UML. UML 1.1 UML 1.3 UML 1.5 UML 2.0 1997 1999 2001 2003 Figure 1: UML Timeline UML 1.5 also inherited from earlier versions a form of state machine that was notationally modified to appear as a flow diagram, called the activity diagram.
    [Show full text]
  • Learning Javascript Design Patterns
    Learning JavaScript Design Patterns Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Learning JavaScript Design Patterns by Addy Osmani Copyright © 2012 Addy Osmani. All rights reserved. Revision History for the : 2012-05-01 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details. ISBN: 978-1-449-33181-8 1335906805 Table of Contents Preface ..................................................................... ix 1. Introduction ........................................................... 1 2. What is a Pattern? ...................................................... 3 We already use patterns everyday 4 3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7 4. The Structure Of A Design Pattern ......................................... 9 5. Writing Design Patterns ................................................. 11 6. Anti-Patterns ......................................................... 13 7. Categories Of Design Pattern ............................................ 15 Creational Design Patterns 15 Structural Design Patterns 16 Behavioral Design Patterns 16 8. Design Pattern Categorization ........................................... 17 A brief note on classes 17 9. JavaScript Design Patterns .............................................. 21 The Creational Pattern 22 The Constructor Pattern 23 Basic Constructors 23 Constructors With Prototypes 24 The Singleton Pattern 24 The Module Pattern 27 iii Modules 27 Object Literals 27 The Module Pattern
    [Show full text]
  • Introduction OMG Systems Modeling Language (OMG Sysml™) and OOSEM Tutorial by Abe Meilich, Ph.D
    Introduction OMG Systems Modeling Language (OMG SysML™) and OOSEM Tutorial By Abe Meilich, Ph.D. [email protected] Acknowledged National Defense Industrial Association Original Authors: 9th Annual Systems Engineering Conference Sanford Friedenthal San Diego, CA Alan Moore October 23, 2006 Rick Steiner Copyright © 2006 by Object Management Group. Published and used by INCOSE and affiliated societies with permission. Caveat • These materials have been modified slightly from the original Tutorial given at INCOSE 2006 – Softcopy of Full Tutorial available at : http://www.omgsysml.org/SysML-Tutorial-Baseline-to-INCOSE- 060524-low_res.pdf • This material is based on version 1.0 of the SysML specification (ad-06-03-01) – Adopted by OMG in May ’06 – Going through finalization process • OMG SysML Website – http://www.omgsysml.org/ 11 July 2006 Copyright © 2006 by Object Management Group. 2 Objectives & Intended Audience At the end of this tutorial, you should understand the: • Benefits of model driven approaches to systems engineering • Types of SysML diagrams and their basic constructs • Cross-cutting principles for relating elements across diagrams • Relationship between SysML and other Standards • Introduction to principles of a OO System Engineering Method This course is not intended to make you a systems modeler! You must use the language. Intended Audience: • Practicing Systems Engineers interested in system modeling – Already familiar with system modeling & tools, or – Want to learn about systems modeling • Software Engineers who want to express systems concepts • Familiarity with UML is not required, but it will help 11 July 2006 Copyright © 2006 by Object Management Group. 3 Topics • Motivation & Background • Diagram Overview • SysML Modeling as Part of SE Process • OOSEM – Enhanced Security System Example • SysML in a Standards Framework • Transitioning to SysML • Summary 11 July 2006 Copyright © 2006 by Object Management Group.
    [Show full text]
  • Open Source Licenses Visionize Lab Suite the Software of Visionize Lab Suite Contains Open Source Licenses Included in This Document
    Open Source Licenses VisioNize Lab Suite The software of VisioNize Lab Suite contains open source licenses included in this document. Package name License Website/Repository Publisher/Author @angular-devkit/[email protected] MIT https://github.com/angular/angular-cli Angular Authors @angular-devkit/[email protected] MIT https://github.com/angular/angular-cli Angular Authors @angular-devkit/build-optimiz- MIT https://github.com/angular/angular-cli Angular Authors [email protected] @angular-devkit/build-web- MIT https://github.com/angular/angular-cli Angular Authors [email protected] @angular-devkit/[email protected] MIT https://github.com/angular/angular-cli Angular Authors @angular-devkit/[email protected] MIT https://github.com/angular/angular-cli Angular Authors @angular/[email protected] MIT https://github.com/angular/angular angular @angular/[email protected] MIT https://github.com/angular/angular-cli Angular Authors @angular/[email protected] MIT https://github.com/angular/angular angular @angular/[email protected] MIT https://github.com/angular/angular @angular/[email protected] MIT https://github.com/angular/angular angular @angular/[email protected] MIT https://github.com/angular/angular angular @angular/[email protected] MIT https://github.com/angular/angular angular @angular/[email protected] MIT https://github.com/angular/angular angular @angular/platform-browser-dynam- MIT https://github.com/angular/angular angular [email protected] @angular/[email protected] MIT https://github.com/angular/angular angular @angular/[email protected] MIT https://github.com/angular/angular angular
    [Show full text]
  • Introduction to Systems Modeling Languages
    Fundamentals of Systems Engineering Prof. Olivier L. de Weck, Mark Chodas, Narek Shougarian Session 3 System Modeling Languages 1 Reminder: A1 is due today ! 2 3 Overview Why Systems Modeling Languages? Ontology, Semantics and Syntax OPM – Object Process Methodology SySML – Systems Modeling Language Modelica What does it mean for Systems Engineering of today and tomorrow (MBSE)? 4 Exercise: Describe the “Mr. Sticky” System Work with a partner (5 min) Use your webex notepad/white board I will call on you randomly We will compare across student teams © source unknown. All rights reserved. This content is excluded from our Creative Commons license. For more information, see http://ocw.mit.edu/help/faq-fair-use/. 5 Why Systems Modeling Languages? Means for describing artifacts are traditionally as follows: Natural Language (English, French etc….) Graphical (Sketches and Drawings) These then typically get aggregated in “documents” Examples: Requirements Document, Drawing Package Technical Data Package (TDP) should contain all info needed to build and operate system Advantages of allowing an arbitrary description: Familiarity to creator of description Not-confining, promotes creativity Disadvantages of allowing an arbitrary description: Room for ambiguous interpretations and errors Difficult to update if there are changes Handoffs between SE lifecycle phases are discontinuous Uneven level of abstraction Large volume of information that exceeds human cognitive bandwidth Etc…. 6 System Modeling Languages Past efforts
    [Show full text]
  • Backbone Tutorials
    Backbone Tutorials Beginner, Intermediate and Advanced ©2012 Thomas Davis This version was published on 2012-10-16 This is a Leanpub book, for sale at: http://leanpub.com/backbonetutorials Leanpub helps authors to self-publish in-progress ebooks. We call this idea Lean Publishing. To learn more about Lean Publishing, go to: http://leanpub.com/manifesto To learn more about Leanpub, go to: http://leanpub.com Tweet This Book! Please help Thomas Davis by spreading the word about this book on Twitter! The suggested hashtag for this book is #backbonetutorials. Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter: https://twitter.com/search/#backbonetutorials Contents Why do you need Backbone.js? i Why single page applications are the future ............................ i So how does Backbone.js help? ................................... i Other frameworks .......................................... i Contributors .......................................... i What is a view? ii The “el” property ........................................... ii Loading a template .......................................... iii Listening for events .......................................... iii Tips and Tricks ............................................ iv Relevant Links ......................................... v Contributors .......................................... v What is a model? vi Setting attributes ........................................... vi Getting attributes ..........................................
    [Show full text]
  • Course Title
    "Charting the Course ... ... to Your Success!" JavaScript Advanced Course Summary Description This course will review the basics of JavaScript and provide instruction on advanced topics such as advanced features of JavaScript functions, Object-Oriented programming in JavaScript (Inheritance, encapsulation) with prototypes, using closures, understanding JavaScript promises and advanced best practices. Objectives At the end of this course, students will be able to: Review Learn function expressions/function declarations/immediately executable functions Use JavaScript objects to implement Inheritance and encapsulation Understand JavaScript closures Learn JavaScript promises Discuss how to best use the advanced topics in this course in your JavaScript projects. Topics Basics Review Object-Oriented Programming Function Expressions Error Handling And Debugging Advanced Techniques Audience This course is intended for JavaScript programmers Prerequisites JavaScript introduction Duration Two days Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically "Charting the Course ... ... to Your Success!" JavaScript Advanced Course Outline I. Basics Review IV. Error Handling And Debugging A. Browser Error Reporting II. Object-Oriented Programming B. Internet Explorer A. Understanding Objects C. Firefox B. Types of Properties D. Chrome C. Defining Multiple Properties E. Error Handling D. Reading Property Attributes F. The try-catch Statement E. Object Creation G. Throwing Errors F. The Factory Pattern H. The error Event G. The Constructor Pattern I.
    [Show full text]