SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
Multi-platform
compatibility/portability of
HTML5 apps
USING PHASER, PHONEGAP AND INTEL XDK
Introduction
This Project is envisioned for studying and demonstrating the latest trends in
multi-platform app development using a simple HTML 5 game build using Phaser
game framework and ported to various platforms using PhoneGap and INTEL XDK.
Developing for different platforms is very hard.
HTML5 comes for the rescue.
HTML5
 HTML5 is the latest version of the mark-up language of the Internet.
 Rich multimedia support.
 Support for Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, 2D
animations, and many more.
 HTML5 is becoming a preferred choice for developers.
Phaser
 Phaser is a cross-platform game development framework for desktop and mobiles.
 It is open source.
 Lots of control over object.
 Works in 2D.
PhoneGap
 Allows to build mobile apps using JavaScript, HTML5 and CSS3.
 Makes Hybrid Mobile Apps.
 Includes plugins which allow access to device’s hardware.
 Uses cloud compiler to generate apps for different platforms.
Intel XDK
 Intel XDK HTML5 Cross-platform Development Tool provides a simplified
workflow to enable developers to easily design, debug, build and deploy
HTML5 web and hybrid apps across multiple app stores, and form factor
devices.
 From coding to publishing, everything in one software.
 Also uses cloud compiler to generate apps for different platforms.
Game Development Using Phaser
 Phaser is a fast, free and fun open source game framework for making
desktop and mobile browser HTML5 games. It provides fast 2D Canvas and
WebGL rendering.
Images in the game
 Images in the game are made using Adobe Photoshop CS6
Animations
 Animations were made using Adobe Flash Professional CC
Creating the Game
 Phaser works within the canvas element of HTML5
 It is integrated using JavaScript in the script tag
 The Actual game renders inside a div tag
 The game states are declared in the Index.html
 The actual game states are defined in various .jsp files.
 Phaser allows for various settings and configurations of the physics elements
of games like Movement, control, collisions and allows the user to either
manually define them or let Phaser take control.
The code
The game
Cross-Platform Porting
 The game is ported to different platforms in two ways:
 Using PhoneGap:
 Upload the complete project in .zip format on build.phonegap.com
 Provide the required info about the version to use to build the app.
 PhoneGap will automatically run through the code and insert necessary codes and
information so that the application can run natively on the devices.
 The cloud compiler will compile the app and generate the applications for all the
supported platforms like Android, iOS, Windows Phone, Symbian etc.
 Using Intel XDK:
 Install the Intel XDK tool and import your project.
 Go to build and select target platform and upload your project for compilation on
the build server.
 The build server will scan through the code adding necessary details to make the
app run native on the devices.
 The code will then be compiled by the cloud compiler which will generate the
application for the preferred device.
 After build is finished you will get your application.
Conclusion
 HTML5 is a goldmine waiting to be discovered.
 It has the ability to “build once and deploy to many”.
 Developing in HTML5 is easier than developing in native.
 There is faster implementation and deployment.
 There are limitations in performance and stability.
 But it is cost-effective and requires less maintenance than native.
 Cross-Platform building tools makes porting easier than ever.
 Should be a preferred choice for new developers in mobile application
development.
THANK YOU

Contenu connexe

Tendances

Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenAndiNurkholis1
 
ML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdfML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdfAkankshaPathak42
 
PHP And Silverlight - DevDays session
PHP And Silverlight - DevDays sessionPHP And Silverlight - DevDays session
PHP And Silverlight - DevDays sessionMaarten Balliauw
 
LUMIA APP LAB #15: USING THE NOKIA IMAGING SDK
LUMIA APP LAB #15: USING THE NOKIA IMAGING SDKLUMIA APP LAB #15: USING THE NOKIA IMAGING SDK
LUMIA APP LAB #15: USING THE NOKIA IMAGING SDKMicrosoft Mobile Developer
 
[Android] Introduction to Android Programming
[Android] Introduction to Android Programming[Android] Introduction to Android Programming
[Android] Introduction to Android ProgrammingNikmesoft Ltd
 
JavaScript Frameworks For Mobile App Development | Redbytes
JavaScript Frameworks For Mobile App Development | RedbytesJavaScript Frameworks For Mobile App Development | Redbytes
JavaScript Frameworks For Mobile App Development | RedbytesRedbytes Software
 
Google flutter app development
Google flutter app developmentGoogle flutter app development
Google flutter app developmentMarie Weaver
 
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Mobile Programming - 8 Progress Bar, Draggable Music Knob, TimerMobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Mobile Programming - 8 Progress Bar, Draggable Music Knob, TimerAndiNurkholis1
 
Introduction to Android Programming by Dr.M.Pyingkodi-kongu engineering c...
Introduction to  Android   Programming by  Dr.M.Pyingkodi-kongu engineering c...Introduction to  Android   Programming by  Dr.M.Pyingkodi-kongu engineering c...
Introduction to Android Programming by Dr.M.Pyingkodi-kongu engineering c...pyingkodi maran
 
Capturing Your Audience with Kinect
Capturing Your Audience with KinectCapturing Your Audience with Kinect
Capturing Your Audience with KinectShahed Chowdhuri
 
Android App Development 20150604
Android App Development 20150604Android App Development 20150604
Android App Development 20150604Hideo Kadowaki
 
Cross platform app development with flutter
Cross platform app development with flutterCross platform app development with flutter
Cross platform app development with flutterHwan Jo
 
Key reasons to consider angular for progressive web app development min
Key reasons to consider angular for progressive web app development minKey reasons to consider angular for progressive web app development min
Key reasons to consider angular for progressive web app development minSolution Analysts
 
Android App Development 20150402
Android App Development 20150402Android App Development 20150402
Android App Development 20150402Hideo Kadowaki
 
Building Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaBuilding Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaNoam Kfir
 
Windows 8 App and Game Development Landscape
Windows 8 App and Game Development LandscapeWindows 8 App and Game Development Landscape
Windows 8 App and Game Development LandscapeJim O'Neil
 

Tendances (20)

Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
 
Mobile app development
Mobile app developmentMobile app development
Mobile app development
 
ML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdfML Kit , Cloud FF GDSC MESCOE.pdf
ML Kit , Cloud FF GDSC MESCOE.pdf
 
PHP And Silverlight - DevDays session
PHP And Silverlight - DevDays sessionPHP And Silverlight - DevDays session
PHP And Silverlight - DevDays session
 
LUMIA APP LAB #15: USING THE NOKIA IMAGING SDK
LUMIA APP LAB #15: USING THE NOKIA IMAGING SDKLUMIA APP LAB #15: USING THE NOKIA IMAGING SDK
LUMIA APP LAB #15: USING THE NOKIA IMAGING SDK
 
[Android] Introduction to Android Programming
[Android] Introduction to Android Programming[Android] Introduction to Android Programming
[Android] Introduction to Android Programming
 
JavaScript Frameworks For Mobile App Development | Redbytes
JavaScript Frameworks For Mobile App Development | RedbytesJavaScript Frameworks For Mobile App Development | Redbytes
JavaScript Frameworks For Mobile App Development | Redbytes
 
Google flutter app development
Google flutter app developmentGoogle flutter app development
Google flutter app development
 
Flutter rev cx
Flutter rev cxFlutter rev cx
Flutter rev cx
 
Intro to Android Programming
Intro to Android ProgrammingIntro to Android Programming
Intro to Android Programming
 
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Mobile Programming - 8 Progress Bar, Draggable Music Knob, TimerMobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
 
Flutter
FlutterFlutter
Flutter
 
Introduction to Android Programming by Dr.M.Pyingkodi-kongu engineering c...
Introduction to  Android   Programming by  Dr.M.Pyingkodi-kongu engineering c...Introduction to  Android   Programming by  Dr.M.Pyingkodi-kongu engineering c...
Introduction to Android Programming by Dr.M.Pyingkodi-kongu engineering c...
 
Capturing Your Audience with Kinect
Capturing Your Audience with KinectCapturing Your Audience with Kinect
Capturing Your Audience with Kinect
 
Android App Development 20150604
Android App Development 20150604Android App Development 20150604
Android App Development 20150604
 
Cross platform app development with flutter
Cross platform app development with flutterCross platform app development with flutter
Cross platform app development with flutter
 
Key reasons to consider angular for progressive web app development min
Key reasons to consider angular for progressive web app development minKey reasons to consider angular for progressive web app development min
Key reasons to consider angular for progressive web app development min
 
Android App Development 20150402
Android App Development 20150402Android App Development 20150402
Android App Development 20150402
 
Building Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaBuilding Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using Cordova
 
Windows 8 App and Game Development Landscape
Windows 8 App and Game Development LandscapeWindows 8 App and Game Development Landscape
Windows 8 App and Game Development Landscape
 

Similaire à Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(Mini project)

Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioMizanur Sarker
 
Mobile Devolpment Slides
Mobile Devolpment SlidesMobile Devolpment Slides
Mobile Devolpment SlidesLuke Angel
 
Windows 10 UWP Development Overview
Windows 10 UWP Development OverviewWindows 10 UWP Development Overview
Windows 10 UWP Development OverviewDevGAMM Conference
 
Windowsphone7
Windowsphone7Windowsphone7
Windowsphone7yuvaraj72
 
The iPhone development on windows
The iPhone development on windowsThe iPhone development on windows
The iPhone development on windowsNAILBITER
 
For Business Success, Choose Cross Platform App Development
For Business Success, Choose Cross Platform App DevelopmentFor Business Success, Choose Cross Platform App Development
For Business Success, Choose Cross Platform App DevelopmentChromeInfo Technologies
 
Mobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDKMobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDKIntel® Software
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentationRaj Dubey
 
2018 top ide's for andriod development
2018 top ide's for andriod development2018 top ide's for andriod development
2018 top ide's for andriod developmentQamar Abbas
 
Crosswalk and the Intel XDK
Crosswalk and the Intel XDKCrosswalk and the Intel XDK
Crosswalk and the Intel XDKIntel® Software
 
Best Interactive guide on Top 10 Mobile App Development Frameworks
Best Interactive guide on Top 10 Mobile App Development FrameworksBest Interactive guide on Top 10 Mobile App Development Frameworks
Best Interactive guide on Top 10 Mobile App Development Frameworksvarshasolanki7
 
Windows store app development V1
Windows store app development V1Windows store app development V1
Windows store app development V1Foyzul Karim
 
Here are the Most Useful Tools for Mobile App Development
Here are the Most Useful Tools for Mobile App DevelopmentHere are the Most Useful Tools for Mobile App Development
Here are the Most Useful Tools for Mobile App DevelopmentIndianAppDevelopers
 

Similaire à Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(Mini project) (20)

Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
Mobile Devolpment Slides
Mobile Devolpment SlidesMobile Devolpment Slides
Mobile Devolpment Slides
 
Mobile Learning Development Tools
Mobile Learning Development ToolsMobile Learning Development Tools
Mobile Learning Development Tools
 
POV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle EnterprisePOV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle Enterprise
 
Windows 10 UWP Development Overview
Windows 10 UWP Development OverviewWindows 10 UWP Development Overview
Windows 10 UWP Development Overview
 
Windowsphone7
Windowsphone7Windowsphone7
Windowsphone7
 
The iPhone development on windows
The iPhone development on windowsThe iPhone development on windows
The iPhone development on windows
 
mobicon_paper
mobicon_papermobicon_paper
mobicon_paper
 
For Business Success, Choose Cross Platform App Development
For Business Success, Choose Cross Platform App DevelopmentFor Business Success, Choose Cross Platform App Development
For Business Success, Choose Cross Platform App Development
 
Mobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDKMobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDK
 
phonegap_101
phonegap_101phonegap_101
phonegap_101
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentation
 
2018 top ide's for andriod development
2018 top ide's for andriod development2018 top ide's for andriod development
2018 top ide's for andriod development
 
Crosswalk and the Intel XDK
Crosswalk and the Intel XDKCrosswalk and the Intel XDK
Crosswalk and the Intel XDK
 
Best Interactive guide on Top 10 Mobile App Development Frameworks
Best Interactive guide on Top 10 Mobile App Development FrameworksBest Interactive guide on Top 10 Mobile App Development Frameworks
Best Interactive guide on Top 10 Mobile App Development Frameworks
 
Windows store app development V1
Windows store app development V1Windows store app development V1
Windows store app development V1
 
Here are the Most Useful Tools for Mobile App Development
Here are the Most Useful Tools for Mobile App DevelopmentHere are the Most Useful Tools for Mobile App Development
Here are the Most Useful Tools for Mobile App Development
 
Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
 
Hybrid mobile app
Hybrid mobile appHybrid mobile app
Hybrid mobile app
 

Dernier

How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 

Dernier (20)

How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 

Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(Mini project)

  • 2. Introduction This Project is envisioned for studying and demonstrating the latest trends in multi-platform app development using a simple HTML 5 game build using Phaser game framework and ported to various platforms using PhoneGap and INTEL XDK. Developing for different platforms is very hard. HTML5 comes for the rescue.
  • 3. HTML5  HTML5 is the latest version of the mark-up language of the Internet.  Rich multimedia support.  Support for Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, 2D animations, and many more.  HTML5 is becoming a preferred choice for developers.
  • 4. Phaser  Phaser is a cross-platform game development framework for desktop and mobiles.  It is open source.  Lots of control over object.  Works in 2D.
  • 5. PhoneGap  Allows to build mobile apps using JavaScript, HTML5 and CSS3.  Makes Hybrid Mobile Apps.  Includes plugins which allow access to device’s hardware.  Uses cloud compiler to generate apps for different platforms.
  • 6. Intel XDK  Intel XDK HTML5 Cross-platform Development Tool provides a simplified workflow to enable developers to easily design, debug, build and deploy HTML5 web and hybrid apps across multiple app stores, and form factor devices.  From coding to publishing, everything in one software.  Also uses cloud compiler to generate apps for different platforms.
  • 7. Game Development Using Phaser  Phaser is a fast, free and fun open source game framework for making desktop and mobile browser HTML5 games. It provides fast 2D Canvas and WebGL rendering.
  • 8. Images in the game  Images in the game are made using Adobe Photoshop CS6
  • 9. Animations  Animations were made using Adobe Flash Professional CC
  • 10. Creating the Game  Phaser works within the canvas element of HTML5  It is integrated using JavaScript in the script tag  The Actual game renders inside a div tag  The game states are declared in the Index.html  The actual game states are defined in various .jsp files.  Phaser allows for various settings and configurations of the physics elements of games like Movement, control, collisions and allows the user to either manually define them or let Phaser take control.
  • 13. Cross-Platform Porting  The game is ported to different platforms in two ways:  Using PhoneGap:  Upload the complete project in .zip format on build.phonegap.com  Provide the required info about the version to use to build the app.  PhoneGap will automatically run through the code and insert necessary codes and information so that the application can run natively on the devices.  The cloud compiler will compile the app and generate the applications for all the supported platforms like Android, iOS, Windows Phone, Symbian etc.
  • 14.  Using Intel XDK:  Install the Intel XDK tool and import your project.  Go to build and select target platform and upload your project for compilation on the build server.  The build server will scan through the code adding necessary details to make the app run native on the devices.  The code will then be compiled by the cloud compiler which will generate the application for the preferred device.  After build is finished you will get your application.
  • 15. Conclusion  HTML5 is a goldmine waiting to be discovered.  It has the ability to “build once and deploy to many”.  Developing in HTML5 is easier than developing in native.  There is faster implementation and deployment.  There are limitations in performance and stability.  But it is cost-effective and requires less maintenance than native.  Cross-Platform building tools makes porting easier than ever.  Should be a preferred choice for new developers in mobile application development.