Dynamics CRM: HTML Games

In Microsoft Dynamics 365 we can create multiple Add-ons with help of capability of HTML, Javascript and CSS.

Now these HTML 5 is becoming more popular and powerful and most of the browser start supporting HTML 5. HTML 5 give us some more interesting elements. Today I will discuss about “Canvas” element of HTML5.

HTML Canvas: -

                                Canvas is an element of HTML5 which in use to draw graphics in our html web resource.

We can also create runtime “Canvas” element in our HTML with help of Javascript.   We can think canvas as MS Paint board and with help of Javascript we can draw line, circle, square text, images. We can are also add motion in our elements of canvas.

We will look two examples to understand use of canvas.

• Clock
• Moving Square Game.

In the end I will also share solution that you can import in your CRM online trails and Play the game.

Clock: -

                To create Clock, we will use arc method to draw clock outline as circle. We will use fillText method to draw numbers. And lineTo method to design hour, minute and second hands.

We will also use setInterval Javascript function, so our clock should show as real clock.

Moving Square Game: -

                                                In this example we will create a Game for Dynamics CRM. This game needs a moving Square box, some Obstacles, a score counter and event handler for buttons and handlers for keystrokes.

We need to move our square box so it should not touch obstacles. If obstacles touch the screen than game over and need to restart the game.

We can store our scores in CRM and can give some points to winners.

Special thanks to W3school.com to help learning.

Now start your imagination and build some look add-ons for Dynamics CRM.

Download Solution.

Please follow to be update for my blogs.