<?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/" xmlns:blogger="http://schemas.google.com/blogger/2008" xmlns:georss="http://www.georss.org/georss" xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr="http://purl.org/syndication/thread/1.0" version="2.0"><channel><atom:id>tag:blogger.com,1999:blog-5291069114336681119</atom:id><lastBuildDate>Sun, 15 Sep 2024 05:47:31 +0000</lastBuildDate><category>Game</category><category>Game Dev</category><category>Battle</category><category>Field</category><category>HTML5</category><category>Javascript</category><category>Tank</category><category>chat</category><category>discussion</category><category>Random chat</category><category>blog</category><category>SimpleConnexion.com</category><category>chatting</category><category>education</category><category>selective chat</category><category>social networkig</category><category>ASP.Net</category><category>Added Value Chat</category><category>Excel COM API</category><category>Excel COM API performance</category><category>File vs Database</category><category>Flak88</category><category>Google Chrome Threading Model</category><category>Google Wave productivity</category><category>HttpApplicationState</category><category>IIS</category><category>Ipad review</category><category>Level design</category><category>MessageLoop</category><category>MessagePump</category><category>Random chat review</category><category>Random chat statistics</category><category>Retargeting Explained</category><category>Tasks</category><category>Thread</category><category>Unity3D</category><category>VC++</category><category>XML</category><category>added value</category><category>answers</category><category>article</category><category>big projects</category><category>bill gates</category><category>blogging</category><category>books</category><category>breeding ideas</category><category>browsing privacy</category><category>chat room</category><category>chat website</category><category>colleagues</category><category>combining existing ideas</category><category>competition rank</category><category>confidence</category><category>consumers need</category><category>contacts</category><category>courses</category><category>data stream</category><category>database</category><category>emails problem</category><category>financial data</category><category>focus</category><category>forum</category><category>free market study</category><category>generate Excel file</category><category>information chat</category><category>interview</category><category>ipad fun</category><category>ipad gadget</category><category>ipad productiity</category><category>ipad work</category><category>keeping information</category><category>learning</category><category>learning technique</category><category>level</category><category>market study</category><category>mini profile</category><category>new ideas</category><category>no registration</category><category>online learning</category><category>open source project</category><category>original contet</category><category>people place subject</category><category>performance</category><category>prioritize</category><category>productivity</category><category>quality content</category><category>questions</category><category>questions answers</category><category>sal khan</category><category>sharing knowledge</category><category>show includes</category><category>solving problem</category><category>startup</category><category>summarize books</category><category>system file</category><category>third party cookie</category><category>tweets</category><category>twitter</category><category>uptime</category><category>user mini profile</category><category>video</category><category>worker processes</category><category>world class developer</category><category>writing technique</category><category>writings</category><category>yotube</category><category>youtube</category><title>Ziad Salloum Blog</title><description>Sharing Experience</description><link>http://ziadsalloum.blogspot.com/</link><managingEditor>noreply@blogger.com (Anonymous)</managingEditor><generator>Blogger</generator><openSearch:totalResults>42</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-3516447018426847411</guid><pubDate>Tue, 21 Oct 2014 22:28:00 +0000</pubDate><atom:updated>2014-10-22T00:29:24.631+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">level</category><category domain="http://www.blogger.com/atom/ns#">Level design</category><category domain="http://www.blogger.com/atom/ns#">Unity3D</category><category domain="http://www.blogger.com/atom/ns#">XML</category><title>Creating Configurable Game Levels In Unity</title><description>This post is about creating game levels that are configurable using XML files in Unity3D.&lt;br /&gt;
However the concept can be easily applied anywhere.&lt;br /&gt;
&lt;br /&gt;
When creating a game that contains levels, the last thing a developer would like to do is to code every single level. Instead what he wishes to do is to create independent game objects which he can put together in different combinations and levels using easily configurable XML files.&lt;br /&gt;
&lt;br /&gt;
When developing &lt;a href=&quot;https://play.google.com/store/apps/details?id=com.zys.paddles&quot; target=&quot;_blank&quot;&gt;LittleBirdy Android game&lt;/a&gt;&amp;nbsp;I had to generate tens of levels because the game evolves from one level to another with different difficulties, different obstacles or surprises.&lt;br /&gt;
&lt;br /&gt;
To make the task easier on myself, I conceptually designed a generic structure for all levels.&lt;br /&gt;
So each level will have a name and a description, a success message to be displayed when the player wins and failure message when he loses.&lt;br /&gt;
Furthermore the level must contain the scoring rule such as the target points to earn, the time limit, the targets to hit and the order in which they must be hit.&lt;br /&gt;
&lt;br /&gt;
Then comes the board, which is the rectangular area where the gaming takes place which is different from the other displays such as the current score, the menu etc...&lt;br /&gt;
Inside the board we find the targets to be hit, their location, their condition of appearance, the points earned.&lt;br /&gt;
Then comes the obstacle settings inside the board. Each obstacle has a location and a dimension as well as a certain behavior: fixed, moving, rotating, growing/shrinking.&lt;br /&gt;
Outside the board element, you can find the BirdSettings that defines the number, location and velocity of the birds that will be in the level.&lt;br /&gt;
The BranchesSettings is used to tell how many Left and Right branches available in this level.&lt;br /&gt;
Finally the GiftSettings are the gift objects that appear from time to time to give the player extra bonus or eliminate certain threat.&lt;br /&gt;
&lt;br /&gt;
The XML structure appears like the following:&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Level&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|------ Scoring&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |-------Target&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |-------Timer&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |-------Rules&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |-------RuleOrder&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|------ Board&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |------- Targets&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;|----- Target (type, count, appearance times ...)&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |------- Obstacles&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;|----- Obstacle (type, count, dimensions, postion ...)&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |--- ObstacleBehavior (rotation, translation)&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|------ BirdSettings&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |------- Birds&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;|----- Bird(name, type, x, y, velocityX, velocityY)&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|------ BranchSettings&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |------- Branches&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;|----- Branch(name, side, count, image ...)&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|&lt;br /&gt;
&amp;nbsp;|------ GiftSettings&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; |------- Gifts&lt;br /&gt;
&amp;nbsp;| &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;|----- Gift(type, count, startTime, endTime, duration ...)&lt;br /&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
For each node in the above structure corresponds a C# class with the same name.&lt;br /&gt;
Using&amp;nbsp;System.Xml.Serialization of .Net it is very easy to serialize/deserialize object hierarchy into XML files.&lt;br /&gt;
The method&amp;nbsp;&lt;span style=&quot;background-color: #f0f0f0; font-family: arial; font-size: 12px; line-height: 20px;&quot;&gt;DeserializeReader&amp;nbsp;&lt;/span&gt; shows how easy to read an XML file and create a C# object hierarchy from it.&lt;br /&gt;
&lt;br /&gt;
&lt;pre style=&quot;background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsdubaGh2oA1Fqa_uFT8q3KmtAGmBc4CV7Z6vA9AYP08maOBkRyU0y54PS2TSFo6vt6qgY6aK6oYwMLxpYIcySxMc21j6cCDshpCU1FSRrBiX347lO5CFX6swrwhqRSlVvNq_Ri49uGDe/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;&quot;&gt;&lt;code style=&quot;color: black; word-wrap: normal;&quot;&gt;         private Level DeserializeReader(TextReader reader){  
                XmlSerializer ser = new XmlSerializer(typeof(Level));  
                Level level = (Level)ser.Deserialize(reader);  
                return level;  
           }  
&lt;/code&gt;&lt;/pre&gt;
&lt;br /&gt;
&lt;br /&gt;
Once the Level C# object hierarchy is ready, we can proceed to create Unity GameObject from these objects and assign to their components the corresponding data reas from XML file.&lt;br /&gt;
&lt;br /&gt;
&lt;pre style=&quot;background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsdubaGh2oA1Fqa_uFT8q3KmtAGmBc4CV7Z6vA9AYP08maOBkRyU0y54PS2TSFo6vt6qgY6aK6oYwMLxpYIcySxMc21j6cCDshpCU1FSRrBiX347lO5CFX6swrwhqRSlVvNq_Ri49uGDe/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;&quot;&gt;&lt;code style=&quot;color: black; word-wrap: normal;&quot;&gt; void Build(Level lvl, List&amp;lt;GameObject&amp;gt; gameObjects){  
      if(lvl.Board != null){  
           GameObject board = GameObject.FindGameObjectWithTag(&quot;Board&quot;);  
           // create Targets  
           if(lvl.Board.Targets != null){  
                foreach(Target t in lvl.Board.Targets){  
                     try{  
                          GameObject go = GameObjectFactory.CreateTarget(t);  
                     }catch(Exception ex){  
                          Debug.LogException(ex);  
                     }  
                }  
           }  
           // create obstacles  
           if(lvl.Board.Obstacles != null){  
                foreach(Obstacle o in lvl.Board.Obstacles){  
                     try{  
                          GameObject go = GameObjectFactory.CreateObstacle(o);  
                     }catch(Exception ex){  
                          Debug.LogException(ex);  
                     }  
                }  
           }  

&lt;pre style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px dashed rgb(204, 204, 204); font-family: arial; height: auto; overflow: auto; padding: 0px; width: 646.46875px;&quot;&gt;&lt;code style=&quot;word-wrap: normal;&quot;&gt;           // build the Gift Settings  
           if(lvl.GiftSettings != null &amp;amp;&amp;amp; lvl.GiftSettings.Gifts != null 
                                       &amp;amp;&amp;amp; lvl.GiftSettings.Gifts.Length &amp;gt; 0){  
                BuildGiftSettings(lvl, lvl.GiftSettings);  
           }  &lt;/code&gt;&lt;/pre&gt;
// Set the bird  
           if(lvl.BirdSettings != null &amp;amp;&amp;amp; lvl.BirdSettings.Birds != null 
                                       &amp;amp;&amp;amp; lvl.BirdSettings.Birds.Length &amp;gt; 0){  
                Bird birdInfo = lvl.BirdSettings.Birds[0];  
                CBird.Instance.BirdSettings = birdInfo;  
           }  
                    
      }  
 }  

&lt;/code&gt;&lt;/pre&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
The GameObjectFactory contains method to create Unity GameObject objects and assigns to them the corresponding XML data.&lt;br /&gt;
For example CreateTarget checks whether it knows hos to create the given Target object, TargertPeanut in the code below, and instantiates the GameObject using Unity APIs then gets the Unity Component (CPeanut) attached to the GameObject and gives it the Target &#39;t&#39; in order to initialize the GameObject variables such as location, speed, movement etc...&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;pre style=&quot;background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsdubaGh2oA1Fqa_uFT8q3KmtAGmBc4CV7Z6vA9AYP08maOBkRyU0y54PS2TSFo6vt6qgY6aK6oYwMLxpYIcySxMc21j6cCDshpCU1FSRrBiX347lO5CFX6swrwhqRSlVvNq_Ri49uGDe/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;&quot;&gt;&lt;code style=&quot;color: black; word-wrap: normal;&quot;&gt;      GameObject CreateTarget(Target t){  
           if( t is TargetPeanut){  
                go = GameObject.Instantiate(Resources.Load(&quot;prefab/peanut&quot;)) as GameObject;  
                CPeanut gPeanut = go.GetComponent&lt;cpeanut&gt;();  
                gPeanut.PeanutInfo = (TargetPeanut)t;  
           }  
...
      }  
&lt;/cpeanut&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;br /&gt;
&lt;br /&gt;
Using this approach hundreds of game levels could be created by simply duplicating XML files and apply some changes to each one.&lt;br /&gt;
In a team of two or more people, a developer can program each object or character of the game in an independent manner, while a level designer would easily write XML files to create combinations of scenarios and game play. With some extra efforts they can build level editor so level design will become a drag&amp;amp;drop gesture.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;</description><link>http://ziadsalloum.blogspot.com/2014/10/creating-configurable-game-levels-in.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-2916991945653970165</guid><pubDate>Fri, 10 Jan 2014 22:33:00 +0000</pubDate><atom:updated>2014-01-10T23:35:19.464+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Battle</category><category domain="http://www.blogger.com/atom/ns#">Field</category><category domain="http://www.blogger.com/atom/ns#">Flak88</category><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">HTML5</category><category domain="http://www.blogger.com/atom/ns#">Javascript</category><category domain="http://www.blogger.com/atom/ns#">Tank</category><title>Tank Battle Field, HTML5 Game #6: First enemy unit</title><description>Despite that the &lt;a href=&quot;http://en.wikipedia.org/wiki/8.8_cm_Flak_18/36/37/41&quot; target=&quot;_blank&quot;&gt;Flak 88&lt;/a&gt; was a fearsome German anti-tank gun, it is not its historical reputation that made it through to be the first enemy unit in Tank Battle Field game.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdbmR77EtLdENTOkBTdq3IS1dgHV5hFCKGRSm7V2gqbAIJwqy-QQ_X9wh9Du4maUq7iPm1CuH8s6Thn5dV1jfbE3ilgIuwVNpQwQUOxrUNgeCkGz088bK8ycFhCnuv0PiIx3sx0-YHACk/s1600/flak88.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdbmR77EtLdENTOkBTdq3IS1dgHV5hFCKGRSm7V2gqbAIJwqy-QQ_X9wh9Du4maUq7iPm1CuH8s6Thn5dV1jfbE3ilgIuwVNpQwQUOxrUNgeCkGz088bK8ycFhCnuv0PiIx3sx0-YHACk/s1600/flak88.jpg&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
As a matter of fact two reasons make it appealing:&lt;br /&gt;
- Easiness of animation&lt;br /&gt;
- Cheap artificial intelligence (AI) requirement&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;The animation&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
Flak88 animation is rather simple. The canon itself is composed of the base and the gun. The base is symmetric and fixed, while the gun can rotate 360°&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0h6TI3COCAiDSBWdTBHYkW_IvBeAUtT8z8qFu0EJ7WqXLlGFmYwkGgZPYXHQrPshkXL0LgLAkSAzZ9D2b0qmmQvdVol14nd7X_8WqwRjmrB97ZEmUO8s8aFRZVDZLCXHvUH4EWgC7tw/s1600/flak88_base.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0h6TI3COCAiDSBWdTBHYkW_IvBeAUtT8z8qFu0EJ7WqXLlGFmYwkGgZPYXHQrPshkXL0LgLAkSAzZ9D2b0qmmQvdVol14nd7X_8WqwRjmrB97ZEmUO8s8aFRZVDZLCXHvUH4EWgC7tw/s1600/flak88_base.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBr3DFEEieKnYrkvf_e45c0F_QHr9zUBvjqRPRI1Vl23cfOObyIleNPJgrkbnWfdNvwbzwUNBSoQY_-yFKAjiv9oAIdYdDr824gfng8sHA5xsmdXs795ycHKyRCbQ7yXbc2nPED8wHuo/s1600/flak88_gun.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em; text-align: center;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBr3DFEEieKnYrkvf_e45c0F_QHr9zUBvjqRPRI1Vl23cfOObyIleNPJgrkbnWfdNvwbzwUNBSoQY_-yFKAjiv9oAIdYdDr824gfng8sHA5xsmdXs795ycHKyRCbQ7yXbc2nPED8wHuo/s1600/flak88_gun.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
It is easy to see a similarity with the tank chassis and its turret.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Notice that the gun orientation is horizontal and to the right (towards the increasing x-axis). This is important in case we don&#39;t have to worry about the initial angle. Otherwise we should subtract the initial angle each time the gun rotates.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Here&#39;s an example:&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Suppose the sprite of the gun is upwards like in this picture.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPqU9TeZn62X50RsmcmEh4cNTS4IOlo8uqy9_35Tw9Cu7Md_3GXWMLLsQBX0TQE1YW_8o6i6F9u6WtdyXY_1ralx96kC6sepqCdnMOIiSbGGYqy4SL1X_ovbzGFw_iycM6Nvk9e8MTvMw/s1600/flak88_gun2.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPqU9TeZn62X50RsmcmEh4cNTS4IOlo8uqy9_35Tw9Cu7Md_3GXWMLLsQBX0TQE1YW_8o6i6F9u6WtdyXY_1ralx96kC6sepqCdnMOIiSbGGYqy4SL1X_ovbzGFw_iycM6Nvk9e8MTvMw/s1600/flak88_gun2.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
Since the angular system is like the trigonometric one, this gun makes 90° with the x-axis. We are speaking visually wise. However the code does not know that! What it knows is that everything starts at 0°. So if you tell the gun to rotate 90°, the graphic engine will rotate the above sprite by 90° which makes it look like this.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKCMhTLDj9PpTwPBk7vQd46498jIwsu3SrZ82G4z6ypnlkCdhB8d6uFRK7qe96izoc-1p0niLTMhFvncKoMAwBthePThLRd1dDtH8yi-JU-kOSBPpQyFdyMmTtH-d2HQ3mQk_7yyFnClM/s1600/flak88_gun3.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKCMhTLDj9PpTwPBk7vQd46498jIwsu3SrZ82G4z6ypnlkCdhB8d6uFRK7qe96izoc-1p0niLTMhFvncKoMAwBthePThLRd1dDtH8yi-JU-kOSBPpQyFdyMmTtH-d2HQ3mQk_7yyFnClM/s1600/flak88_gun3.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Sadly enough, this is not our intention because visually speaking it is equivalent to 180°. To solve this we subtract 90° from the rotation angle to obtain the desired visual effect.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
In order to avoid all this fuss, we draw (from the start) the gun horizontally and oriented to the right.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
It is important to differentiate what your eyes see and what data is supplied to the code.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;b&gt;&lt;u&gt;The artificial intelligence (AI)&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Probably Flak88 has the easiest AI to implement in any war game!&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Even in real life, the Flak88 mission is to track a tank until it has a good shot, then fires.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Same thing happens in the game. Flak88 calculates the angle that separates its gun from the center of the tank. Then starts closing this gap by rotating the gun until the gap reaches 2° or less. At this moment it fires.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVe-7wqI5IDjyrOqphf8NarGTJNb1ZyXBwnMM9FA5X1f4wJksWLYjDRMdKiRI1ZB4HRfNP88Zt_3j6maUrzeRGfe0kfstho8QJ4PQ4kvvpAZBrUHxiiFRHSMGhAlQwYoEOxeYM1VbNYEI/s1600/flak88_track.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVe-7wqI5IDjyrOqphf8NarGTJNb1ZyXBwnMM9FA5X1f4wJksWLYjDRMdKiRI1ZB4HRfNP88Zt_3j6maUrzeRGfe0kfstho8QJ4PQ4kvvpAZBrUHxiiFRHSMGhAlQwYoEOxeYM1VbNYEI/s1600/flak88_track.png&quot; height=&quot;242&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
There are times when the center of the tank is hidden behind a building. In such cases the Flak88 searches of any of the tank border points to which it has a clear line of fire, if it finds ones it closes in on it and fires.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Time now for some maths calculations:&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
The angle between the Flak88 and the tank is given by the calculating the arc-tangent of the slope of the line passing by the tank and the Flak88. The arc-tangent returns an angle within the range [-180, 180]. But on the other hand the angle of the gun is expressed in the range [- 360, 360].&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
So to be able to compute the difference between the two angles, we convert the gun angle to the range &amp;nbsp;[-180, 180]. This is done like the following:&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
if gunAngle &amp;gt; 180 &amp;nbsp;then gunAngle2 = gunAngle &amp;nbsp;- 360 (ex: if gunAngle = &amp;nbsp; 270° =&amp;gt; gunAngle2 = -90°)&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
if gunAngle &amp;lt; -180 then gunAngle2 = gunAngle&amp;nbsp;+ 360 (ex: if gunAngle = -270° =&amp;gt; gunAngle2 = &amp;nbsp; 90°)&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Now we calculate the deltaAngle which is the difference between the angle of the tank and the Flak88 and the Flak88 gun.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
if&amp;nbsp;tankFlakAngle&amp;nbsp;and &amp;nbsp;gunAngle2 have the&lt;b&gt; same signs&lt;/b&gt; (both positive or negative) then&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
deltaAngle = tankFlakAngle - gunAngle2&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
However if&amp;nbsp;tankFlakAngle&amp;nbsp;and &amp;nbsp;gunAngle2 have &lt;b&gt;opposing signs&lt;/b&gt; (one is positive and the other is negative) then we have to be careful how to compute deltaAngle .&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Suppose tankFlakAngle &amp;nbsp;is 178° and gunAngle2 is -178°&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYv0g20OrIyFSDVEJ3kz9_MI3j8fHlKMO8wjCxhqVJEI5LcodPBpdId9RNyiXKT2P36IGNdVzKDzEOKdI7-I2IMWAfCfkktAlC6KO0RhGbOejBNECHSGZP5JcxlYWXGQv4ulgY8HjhzsY/s1600/trigo.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYv0g20OrIyFSDVEJ3kz9_MI3j8fHlKMO8wjCxhqVJEI5LcodPBpdId9RNyiXKT2P36IGNdVzKDzEOKdI7-I2IMWAfCfkktAlC6KO0RhGbOejBNECHSGZP5JcxlYWXGQv4ulgY8HjhzsY/s1600/trigo.png&quot; height=&quot;278&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Computing deltaAngle as tankFlakAngle - gunAngle2 will result in an angle of 356° which is not logical since as you can see on the picture above the real difference is 4°.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
We can reach this result by doing the following:&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
if gunAngle2 &amp;lt; 0 &amp;nbsp;then the gun is moving clockwise so deltaAngle must be negative:&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
deltaAngle = - ( (180 - tankFlakAngle )&amp;nbsp;+ (180&amp;nbsp;+&amp;nbsp;gunAngle2&amp;nbsp;) )&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
if gunAngle2 &amp;gt; 0 then the gun is moving anti clockwise so the delta must be positive&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
deltaAngle = &amp;nbsp;( (tankFlakAngle + 180&amp;nbsp;)&amp;nbsp;+ (180 -&amp;nbsp;gunAngle2&amp;nbsp;) )&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Knowing the deltaAngle, now we can tell the gun to move to close the gap formed by this deltaAngle.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;b style=&quot;background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;&quot;&gt;&lt;u&gt;The demo&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;span style=&quot;background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;span style=&quot;background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;&quot;&gt;That&#39;s it for today, as always you can check the latest demo by going to&amp;nbsp;&lt;/span&gt;&lt;a href=&quot;http://tankbattlefield.eu.pn/&quot; style=&quot;background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px; text-decoration: none;&quot;&gt;&lt;span style=&quot;color: blue;&quot;&gt;http://tankbattlefield.eu.pn&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
</description><link>http://ziadsalloum.blogspot.com/2014/01/tank-battle-field-html5-game-6-first.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdbmR77EtLdENTOkBTdq3IS1dgHV5hFCKGRSm7V2gqbAIJwqy-QQ_X9wh9Du4maUq7iPm1CuH8s6Thn5dV1jfbE3ilgIuwVNpQwQUOxrUNgeCkGz088bK8ycFhCnuv0PiIx3sx0-YHACk/s72-c/flak88.jpg" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-8874778536231637569</guid><pubDate>Sun, 05 Jan 2014 00:21:00 +0000</pubDate><atom:updated>2014-01-09T01:11:00.075+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Battle</category><category domain="http://www.blogger.com/atom/ns#">Field</category><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">HTML5</category><category domain="http://www.blogger.com/atom/ns#">Javascript</category><category domain="http://www.blogger.com/atom/ns#">Tank</category><title>Tank Battle Field, HTML5 Game #5: Collision detection</title><description>Collision detection is an important feature in every game. Because of it you know where you can go, if you hit the enemy, etc... There are plenty of theories regarding this subject (you can check this &lt;a href=&quot;http://www.gamasutra.com/view/feature/131598/advanced_collision_detection_.php&quot; target=&quot;_blank&quot;&gt;blog &lt;/a&gt;for a good introduction) but they are beyond the scope of this article. What interests us in this post is how the collision detection is applied in the Tank Battle Field game.&lt;br /&gt;
&lt;br /&gt;
In Tank Battle Field game, collision detection mostly applies in two cases:&lt;br /&gt;
- The primary tank (player tank) runs into a building, enemy or any other object on the ground&lt;br /&gt;
- Shells hitting the&amp;nbsp;primary&amp;nbsp;tank, the enemy units, building or other objects.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;Main tank collision detection&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
As of this version of the game, the only moving vehicle on the field is the&amp;nbsp;primary&amp;nbsp;tank. Since it can move forward and backward, turns left and right, it is essential to be sure that any of these movements do not hit a solid object that denies the tank from changing position.&lt;br /&gt;
(it won&#39;t be realistic enough, nor interesting, to see the tank driving through buildings for instance).&lt;br /&gt;
&lt;br /&gt;
So to be able to verify whether the tank hit something or not, we keep an eye on eight predefined points of the tank, and we check whether in the new position of the tank any of these points hit a solid object.&lt;br /&gt;
These points (called border points) are defined relatively to the center of the tank. For example the upper left corner has the coordinates x = - TankWidth/2 and y = TankLength/2 and so on for the other points.&lt;br /&gt;
Each time the tank moves or turns (rotates) the border points are computed in absolute coordinates taking into consideration the new position (including the rotation angle) that the tank it trying to move to.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSHei9dsjvNoz6KdZKjF0Pfcrp0VexrJ6PxGIQlARbKf3bPR507apVw1jD76_yllxbedYTGAQ9eFSEk-kNh2SWSRhXmJBvi9JIvAiIrvslU6SjNolSy6JBCf0rBJJOfPhgh2urssX7j0/s1600/tankborders.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSHei9dsjvNoz6KdZKjF0Pfcrp0VexrJ6PxGIQlARbKf3bPR507apVw1jD76_yllxbedYTGAQ9eFSEk-kNh2SWSRhXmJBvi9JIvAiIrvslU6SjNolSy6JBCf0rBJJOfPhgh2urssX7j0/s1600/tankborders.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
Lets take an example. Consider that Xc, Yc are the coordinates of the center of the tank and Xul, Yul those of the upper left corner relatively to the tank center. When the tank moves the coordinates of the upper left corner in the absolute system will be:&lt;br /&gt;
&lt;i&gt;AbsXul = Xc + (Xul&amp;nbsp;* cosθ - Yul * sinθ)&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;AbsYul =&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Yc&amp;nbsp;- (Xul * sinθ + Yul * cosθ)&lt;/i&gt;&lt;br /&gt;
where θ is the rotation angle of the tank&lt;br /&gt;
&lt;br /&gt;
The above formula is a combination of a translation and a rotation transformations. (You can read more about transformations in the following wikipedia article &lt;a href=&quot;http://en.wikipedia.org/wiki/Transformation_matrix&quot; target=&quot;_blank&quot;&gt;&quot;transformation matrix&quot;&lt;/a&gt;&amp;nbsp;)&lt;br /&gt;
&lt;br /&gt;
The above has determined the border points of the tank. What remains is to check whether any of these points collided into a building. In other words, if any of these points came into intersection with building (or any other solid object) borders then we consider that a collision took place.&lt;br /&gt;
&lt;br /&gt;
This suggests that we know the borders of these solid objects. In case of sprites, we know that they are always contained in a rectangle. However the rectangle might not accurately model the content of the sprite which might be of any shape. So the containing rectangle is not useful for a large number of cases which does not make it appealing. You can easily verify in the image below that the containing rectangle can quickly make the game unplayable.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigMPF91NLvJU-LPycRs6kxBA8V8Y-xSgtkKEFeRuYDY60DKNXojTfR-ij1OTYZ05kSNaG4gu8kQrYtdcNvenXCnLUttjUgwBFXbewmxYCHDo5OvVVfufyRbw7965PvRmErFkIGQmm99WU/s1600/castle_04.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigMPF91NLvJU-LPycRs6kxBA8V8Y-xSgtkKEFeRuYDY60DKNXojTfR-ij1OTYZ05kSNaG4gu8kQrYtdcNvenXCnLUttjUgwBFXbewmxYCHDo5OvVVfufyRbw7965PvRmErFkIGQmm99WU/s1600/castle_04.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
In the image above, the tank can&#39;t move inside the containing rectangle which make the game unrealistic.&lt;br /&gt;
To solve this problem, we use polygons to model non-rectangular shapes such as this castle.&lt;br /&gt;
However this comes at a price of CPU power in order to try finding if any border point of the tank has crossed the polygon.&lt;br /&gt;
You may like to refer to this wikipedia article to know more about detection of a &lt;a href=&quot;http://en.wikipedia.org/wiki/Point_in_polygon&quot; target=&quot;_blank&quot;&gt;point inside a polygon&lt;/a&gt;.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiFje8IJxph4v9K47Vl780ZH0pAKboOE3ygRQT3RS4yL27dvmNa9RdR4HmJgYLfeC5tKlxYbgpE9857DxYDeae1H9ScQPrclsLHPN0Loo0ZaHZZOnYqJFMCHKUYn8Ito3T5HK1vJPcRE/s1600/castle_04_1.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiFje8IJxph4v9K47Vl780ZH0pAKboOE3ygRQT3RS4yL27dvmNa9RdR4HmJgYLfeC5tKlxYbgpE9857DxYDeae1H9ScQPrclsLHPN0Loo0ZaHZZOnYqJFMCHKUYn8Ito3T5HK1vJPcRE/s1600/castle_04_1.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
The good news, is that not every thing requires a polygon, but there are cases where several rectangles might do the job. Telling that a point is inside a rectangle is by far faster than telling if it is inside a polygon. So, it is perfectly reasonable to model some objects using a series of rectangle as depicted in the image below.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNF66a-TElsUc2uEO6fakj0GKcze1r6dbdc87it0Bj7pSIOj_iVPs6TZNRcSEUNg7WiNQNfrb2B-TJxlVJYY8Syus_wgDSCy7_l_JXBzfXjhYG1Pc94ioqf9AU1KZDU8lF6AAH_qB-Vk/s1600/details3.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNF66a-TElsUc2uEO6fakj0GKcze1r6dbdc87it0Bj7pSIOj_iVPs6TZNRcSEUNg7WiNQNfrb2B-TJxlVJYY8Syus_wgDSCy7_l_JXBzfXjhYG1Pc94ioqf9AU1KZDU8lF6AAH_qB-Vk/s1600/details3.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
In the above image, we modeled the house with two rectangles leaving the outdoors free for the tank to drive through.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;Shells hit point&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
What makes tank games appealing is the ability to fire shells on targets. Determining how and where a shell hit a target is also a collision detection problem.&lt;br /&gt;
Mathematically this problem can be reduced to finding the intersection point between two lines.&lt;br /&gt;
The scenario where the tank fires on the castle,&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZIe-yc8wX410N4UdXU7ydTWgTY7M938UkIiyllSB-NbTbAM0qRy5HDKDYSNAcstkUBxFhzunk0qx1qcIes6vywZpXqugRrDRmkNNpi1XvWCUkdLNGhRJA1E5VE1jPnkSy8Z6IZqpWOc/s1600/intersection2.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZIe-yc8wX410N4UdXU7ydTWgTY7M938UkIiyllSB-NbTbAM0qRy5HDKDYSNAcstkUBxFhzunk0qx1qcIes6vywZpXqugRrDRmkNNpi1XvWCUkdLNGhRJA1E5VE1jPnkSy8Z6IZqpWOc/s320/intersection2.png&quot; height=&quot;320&quot; width=&quot;290&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
can be reduced to the following intersection of two lines.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYShu3sUNTyll0W05ml2YFdtJOaMBoud62Dn4ColtcFprC1Qq4Pud_cW29KuKEE-8VZf6Gzfb3mE5eZdDfamcnP0mw11xBWandqJcMpq8SjUyWxfDVGHdVZU7ZUWdKkEHeI7qFfqTUdZo/s1600/intersection.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYShu3sUNTyll0W05ml2YFdtJOaMBoud62Dn4ColtcFprC1Qq4Pud_cW29KuKEE-8VZf6Gzfb3mE5eZdDfamcnP0mw11xBWandqJcMpq8SjUyWxfDVGHdVZU7ZUWdKkEHeI7qFfqTUdZo/s320/intersection.png&quot; height=&quot;231&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
Here we consider that there are two lines defined as&lt;br /&gt;
&lt;i&gt;Line A: y = a*x&amp;nbsp;+ b&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;Line B: y = c*x&amp;nbsp;+ d&lt;/i&gt;&lt;br /&gt;
Finding the hit point comes to find the intersection point of Line A with Line B. We define this intersection point by xi, yi. The solution becomes&lt;br /&gt;
&lt;i&gt;xi = (b - d) / (c - a)&lt;/i&gt;&lt;br /&gt;
It follows that &lt;i&gt;yi = a*xi&amp;nbsp;+ b&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
Certainly enough if the slopes represented by &lt;b&gt;&lt;i&gt;a &lt;/i&gt;&lt;/b&gt;and &lt;b&gt;&lt;i&gt;c&lt;/i&gt;&lt;/b&gt; are equal, this means the two lines are parallel and won&#39;t be intersecting thus the &lt;b&gt;&lt;i&gt;xi&lt;/i&gt;&lt;/b&gt; won&#39;t be determined since the denominator will be zero.&lt;br /&gt;
&lt;br /&gt;
Mathematically this is valid solution. However this is not necessarily true in the game, because in maths the lines are infinite, so in case they are not parallel they will eventually intersect at some point. But in the game the shell has a limited range and the target&#39;s borders are also constrained in length. To be valid the intersection point must necessarily be with the valid range of each line.&lt;br /&gt;
Back to our previous example, if we say that the Line A stretches between point A1 and point A2 and Line B goes from point B1 to point B2. So in order for the intersection point given by (xi, yi) to be valid, the following relations should be true.&lt;br /&gt;
&lt;i&gt;xi &amp;gt;= A1.x &amp;amp;&amp;amp; xi &amp;lt;= A2.x assuming that A1.x &amp;lt;= A2.x&lt;/i&gt;&lt;br /&gt;
and&lt;br /&gt;
&lt;i&gt;xi &amp;gt;= B1.x &amp;amp;&amp;amp; xi &amp;lt;= B2.x assuming that B1.x &amp;lt;= B2.x&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
if the above relations are not true we might be in situation like in the image below, where the intersections happens outside the valid ranges.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XIuEzsNvDTRLg6iXjrc29ZjddzzqrivV3ZCpaKLVdBqdbYQtl3Z1OXW_bmvgPBtENnxLUG-ryEHiY29T_NmJ_tS-Risz_sPBOPuY1HwsItDS5ThNaK8WVhauD8QWt5AJzmHNswTT9ls/s1600/intersection3.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XIuEzsNvDTRLg6iXjrc29ZjddzzqrivV3ZCpaKLVdBqdbYQtl3Z1OXW_bmvgPBtENnxLUG-ryEHiY29T_NmJ_tS-Risz_sPBOPuY1HwsItDS5ThNaK8WVhauD8QWt5AJzmHNswTT9ls/s320/intersection3.png&quot; height=&quot;231&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;u&gt;Special case&lt;/u&gt;&lt;br /&gt;
&lt;br /&gt;
We might think that we are done with the hit point. But still this not true yet!&lt;br /&gt;
Actually the equations handling the shell trajectory is based on time and velocity.&lt;br /&gt;
They have the following form:&lt;br /&gt;
&lt;i&gt;x = Vx * t&amp;nbsp;+ x0&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;y = Vy * t&amp;nbsp;+ y0&lt;/i&gt;&lt;br /&gt;
where Vx and Vy are the components of the shell velocity along the x-axis and the y-axis while the x0, y0 is the point of origin (in other terms the tank).&lt;br /&gt;
&lt;br /&gt;
The coordinates of the shell location are updated on each loop turn. This represents a problem since the update occurs every laps of time. So the graphical representation of the shell is discrete and not continuous.&lt;br /&gt;
The image below shows in grey the theoretical (continuous) trajectory of the shell, and in red dots the reel &amp;nbsp;location of the shell over the time.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUccjKHQIyvyMHChSkHcGACbacHWglicikoA7W1teY5qHxdfD87Ek5qMSHpOzqwkxJlefr4cGhaMfscXjpI_8WL0UhyphenhyphenihrrD9NuhaRbLem0dDx_64ggAIKfDabRAzo7zKHTanOSPGIo5Q/s1600/intersection4.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUccjKHQIyvyMHChSkHcGACbacHWglicikoA7W1teY5qHxdfD87Ek5qMSHpOzqwkxJlefr4cGhaMfscXjpI_8WL0UhyphenhyphenihrrD9NuhaRbLem0dDx_64ggAIKfDabRAzo7zKHTanOSPGIo5Q/s320/intersection4.png&quot; height=&quot;320&quot; width=&quot;290&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
As you can see there is no way to verify that the shell hit the house by following the red dots alone. Actually the red dot never happen to appear inside the house borders.&lt;br /&gt;
To solve this issue, after each update of the shell position we check for intersection between the line formed by the starting point of the shell (position of the tank when it fired) and the latest shell position and the borders of the house.&lt;br /&gt;
It appears that for the first two shell positions there is no intersection. But on the third time we notice two intersections represented by the red crosses (&lt;b&gt;&lt;span style=&quot;color: red;&quot;&gt;X&lt;/span&gt;&lt;/b&gt;).&lt;br /&gt;
Naturally we chose the intersection that is closer to the tank as the hit point or the point of impact then we trigger the explosion sequence. Eventually we ignore the second intersection point and we don&#39;t show the third shell position on the screen.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;Performance issue&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
So far the game does not contain too many objects nor requires too many computations that might affect performance. However, to do the things &quot;right&quot;, we do take performance topic into consideration.&lt;br /&gt;
When detecting collision, we have to check the tank or shell position against every other solid object on the map. So in order to avoid using costly line intersections or polygons checks we first start by simply finding out what containing &amp;nbsp;rectangles (surrounding objects) intersect with the rectangle formed by the tank position as first corner and the shell position as diagonally opposed corner (see image below). This way using cheap technique we can gather all solid objects that potentially lie in the way of the shell. Then we start testing using the more costly line intersection method on this reduced set of objects.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6T_3r_AxMJkOtkc-RF7lid0nrjjg5STJNl0R8gjQchuc2ARoS3jsabxhgmmsT_DMY-GRCglXpLVoMkjlsp3XQYeKEHSxEpne9hbVC762uOWUWVUTM58LmlAm0bTU2DWDFYLdHcArIs4/s1600/intersection5.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6T_3r_AxMJkOtkc-RF7lid0nrjjg5STJNl0R8gjQchuc2ARoS3jsabxhgmmsT_DMY-GRCglXpLVoMkjlsp3XQYeKEHSxEpne9hbVC762uOWUWVUTM58LmlAm0bTU2DWDFYLdHcArIs4/s320/intersection5.png&quot; height=&quot;320&quot; width=&quot;290&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
On the other hand, when seeking to find if the tank is about to collide with other solid objects, we start by checking for candidate objects by verifying if the tank crossed their containing rectangle, then we run a more accurate test using the point-in-polygon technique to find out if the tank really collided with one of them.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmC00f-hCcEvy-5NoUq777HnFH7O2cRenZgfC3LoMc5BgaFqBsY3RJesx37WrOr_EIXAyZki5QByAHemdZrfxBYui3lzK79EHvP7V6WtTS9PdvQQrOTHbCsd1PR4Fxk1adMMZSSA9Z50/s1600/castle_04_2.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmC00f-hCcEvy-5NoUq777HnFH7O2cRenZgfC3LoMc5BgaFqBsY3RJesx37WrOr_EIXAyZki5QByAHemdZrfxBYui3lzK79EHvP7V6WtTS9PdvQQrOTHbCsd1PR4Fxk1adMMZSSA9Z50/s1600/castle_04_2.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;The demo&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
That&#39;s it for today, as always you can check the latest demo by going to &lt;a href=&quot;http://tankbattlefield.eu.pn/&quot;&gt;http://tankbattlefield.eu.pn&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: white;&quot;&gt;D3GGQP7C7BF3 &lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;</description><link>http://ziadsalloum.blogspot.com/2014/01/tank-battle-field-html5-game-5.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSHei9dsjvNoz6KdZKjF0Pfcrp0VexrJ6PxGIQlARbKf3bPR507apVw1jD76_yllxbedYTGAQ9eFSEk-kNh2SWSRhXmJBvi9JIvAiIrvslU6SjNolSy6JBCf0rBJJOfPhgh2urssX7j0/s72-c/tankborders.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-4250936963776132705</guid><pubDate>Fri, 27 Dec 2013 21:12:00 +0000</pubDate><atom:updated>2014-01-06T21:20:41.514+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Battle</category><category domain="http://www.blogger.com/atom/ns#">Field</category><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">HTML5</category><category domain="http://www.blogger.com/atom/ns#">Javascript</category><category domain="http://www.blogger.com/atom/ns#">Tank</category><title>Tank Battle Field HTML5 Game #4: The Object Model</title><description>Today&#39;s post is about the structure of Tank Battle Field game. Its object model.&lt;br /&gt;
Object model defines how objects are related to each other and determines the interactions with each other.&lt;br /&gt;
&lt;br /&gt;
Tank Battle Field object model has two aspects. The containment model and the hierarchical one.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;The containment model&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
As you can see in the picture below the objects are contained in a logical manner.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoDmFMAs8GPaAkqjmK6S1eHek_vQvXdEmq8BPeuTfpJ0IviDl5f1UCPOkqiFj5H-fu8uZ6kR_kz1uQIthehBYgNzVmNMDnJH3BmXGZym84CxEAQ6rkwvgg8EuRXyTfzYao_YJURxi9FXA/s1600/containmodel.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoDmFMAs8GPaAkqjmK6S1eHek_vQvXdEmq8BPeuTfpJ0IviDl5f1UCPOkqiFj5H-fu8uZ6kR_kz1uQIthehBYgNzVmNMDnJH3BmXGZym84CxEAQ6rkwvgg8EuRXyTfzYao_YJURxi9FXA/s320/containmodel.png&quot; height=&quot;306&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
At the top there is the &quot;Game&quot; object which constitutes a global container which includes all other objects that are intrinsic to the game. It also constitutes a single entry point.&lt;br /&gt;
The &quot;Game&quot; object contains the following important objects:&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;ol&gt;
&lt;li&gt;&amp;nbsp;&quot;Model&quot; object: defines the game logic and abstracts away logic from graphical representation. In turn it cotains&lt;/li&gt;
&lt;ol&gt;
&lt;li&gt;&quot;Field&quot; object, that represents the terrain or the theater in which the game takes place. The aim of this &quot;Field&quot; is to set the dimensions, background and relief.&lt;/li&gt;
&lt;li&gt;&quot;PrimaryTank&quot; is the main tank of the game. The one controlled by the player.&lt;/li&gt;
&lt;li&gt;&quot;Buildings&quot; is a object containing a collection of buildings. It has also the role to render them and make necessary calculations related to their positioning on the screen.&lt;/li&gt;
&lt;li&gt;&quot;Enemies&quot; is the collection that contains the enemy units. This collection plays a role in coordinating AI enemy units movements.&lt;/li&gt;
&lt;/ol&gt;
&lt;li&gt;&quot;Graphics&quot; object contains all what is necessary for rendering the game on the screen. Among others it contains:&lt;/li&gt;
&lt;ol&gt;
&lt;li&gt;&quot;context&quot; object which is a direct reference to the graphical device context provided by HTML5.&lt;/li&gt;
&lt;li&gt;&quot;layers&quot; array that contains the layers which will be displayed on the screen using the z-index order. &amp;nbsp;&lt;/li&gt;
&lt;li&gt;&quot;layer_ground&quot; object has the lowest z-index order and thus it is displayed the first. It contains the background, and the field details as well as borders.&lt;/li&gt;
&lt;li&gt;&quot;layer_objects&quot; object is the layer that contains static objects such as buildings. It is displayed second, over the &quot;layer_ground&quot;.&lt;/li&gt;
&lt;li&gt;&quot;layer_units&quot; object is responsible of rendering ground military units including friend and foes.&lt;/li&gt;
&lt;li&gt;&quot;layer_projectiles&quot; object will contain transient objects such as shells, missiles, rockets as well as explosions. These objects are added to this layer at creation time then are removed when they expire.&lt;/li&gt;
&lt;li&gt;&quot;layer_high&quot; object will contain all flying machines like airplanes.&lt;/li&gt;
&lt;li&gt;&quot;layer_widgets&quot; object has the highest z-index order and is drawn last. It is responsible of displaying widgets on the screen such as a mini-map, primary tank status, notification messages or chats etc..&lt;/li&gt;
&lt;/ol&gt;
&lt;li&gt;&quot;Settings&quot; object is where the game is configured, in terms of control keys, navigation mode etc. For the moment it contains &quot;Navigation&quot; and &quot;Keys&quot; objects for setting the navigation mode and the control keys.&lt;/li&gt;
&lt;li&gt;&quot;Res&quot; objects contains resources needed by the game. Such as images, sounds etc...&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;The hierarchical model&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
Although that Javascript is not Object Oriented language, the Tank Battle Field game uses commonly known tricks to simulate class hierarchy and inheritance. The inheritance logic is hand crafted and does not use any library in order to keep it simple and minimal.&lt;/div&gt;
&lt;div&gt;
The concept of class does not exist in Javascript, everything is object but since hierarchy of classes is simulated in this section, the terms &quot;class&quot; and &quot;object&quot; refer to the same entity.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIn9cQrgunTrsxnGtX48bc0chcLekn1jBPb0KBa03H4qt33apMLPiVs85G2HGm1p3dkGv9UuRBDENIes8me_jCeIAJpQEe1cij4-el283upZCgkeQpJ1FdOsFlVrkt4bYxpk71jRv-pU/s1600/classmodel.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIn9cQrgunTrsxnGtX48bc0chcLekn1jBPb0KBa03H4qt33apMLPiVs85G2HGm1p3dkGv9UuRBDENIes8me_jCeIAJpQEe1cij4-el283upZCgkeQpJ1FdOsFlVrkt4bYxpk71jRv-pU/s320/classmodel.png&quot; height=&quot;218&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
All objects in the game inherit from one super class which is ModelObjectClass. This gives the ability to get and set data and have an ID.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Objects that have dimensions, locations and rotation settings are of type&amp;nbsp;ModelLocatableObjectClass. Note that the setX()/getX(), setY() /getY() coordinates functions represent the center of the object while the getTop(), getLeft() represent the top left corner of the object. It is also important to note that dimensions terms are not exactly the same as one might expect. Actually the width is the horizontal distance following the x-axis, the length is the vertical distance following the y-axis (which normally used to be called height), and height is the elevation from the ground following the z-axis. It is true that this is a 2D game, however the height (z-axis) will play a role.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Moving objects inherit from ModelMoveableObjectClass and have linear and angular speed, as well as acceleration.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
VehicleClass contains commands to move forward, backward and to turn left and rights. It has also an import set of functions that determines how the vehicle will behave and how it is going to be rendered on the screen.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
TankClass inherits from the VehicleClass and contains a turret object.&lt;/div&gt;
&lt;div&gt;
Other objects such as BuildingClass and Shell make use of this hierarchy of classes.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;Initialization and data&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
Objects in the class hierarchy are instantiated using the &lt;b&gt;new &lt;/b&gt;keyword, however the initialization does not take place inside the constructor, but by explicitly calling &lt;b&gt;init()&lt;/b&gt; method and passing to it an arbitrary data object that each class might be expecting.&lt;/div&gt;
&lt;div&gt;
The reason for this approach is purely technical. Actually when instantiating an object using new keyword, the whole hierarchy of objects is instantiated and linked together via the __proto__ property.&lt;/div&gt;
&lt;div&gt;
So after the instantiation and the linking are done then it is possible to initialize using the init() method.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
The data object given as parameter in the call to init() method, is used as &lt;a href=&quot;http://en.wikipedia.org/wiki/Memento_pattern&quot; target=&quot;_blank&quot;&gt;momento design pattern&lt;/a&gt;, in the sens that it is used to save the state of the object so it can be saved or transferred via network in a multiplayer game.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;Game loop: updates and rendering&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
As it is known by now, the game loop is a never ending cycle of tasks that is executed sequentially.&lt;br /&gt;
The loop reads the input of the user, calls updateModel() function on every object in the graphic layers. This method updates the internal state of the object, such as location, direction, health, etc...then the loop calls&amp;nbsp;renderGraphics() on each object to draw itself on the screen, and finally&amp;nbsp;updateModelAfterRendering() is called to update the state after the rendering phase. One example of the usefulness of the&amp;nbsp;updateModelAfterRendering() method, is to reset the &quot;fire&quot; flag of the tank which was set by the updateModel() method and drawn by the renderGraphics() method.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;Demo&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
That&#39;s it for now, as usual you can check the demo by going to&amp;nbsp;&lt;a href=&quot;http://tankbattlefield.eu.pn/&quot;&gt;http://tankbattlefield.eu.pn&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;&lt;br /&gt;&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;&lt;br /&gt;&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
</description><link>http://ziadsalloum.blogspot.com/2013/12/tank-battle-field-html5-game-4-object.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoDmFMAs8GPaAkqjmK6S1eHek_vQvXdEmq8BPeuTfpJ0IviDl5f1UCPOkqiFj5H-fu8uZ6kR_kz1uQIthehBYgNzVmNMDnJH3BmXGZym84CxEAQ6rkwvgg8EuRXyTfzYao_YJURxi9FXA/s72-c/containmodel.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-3333242544705848092</guid><pubDate>Mon, 23 Dec 2013 23:38:00 +0000</pubDate><atom:updated>2014-01-06T21:20:58.567+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Battle</category><category domain="http://www.blogger.com/atom/ns#">Field</category><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">HTML5</category><category domain="http://www.blogger.com/atom/ns#">Javascript</category><category domain="http://www.blogger.com/atom/ns#">Tank</category><title>HTML5 Game #3: Tank Battle Field, new approach</title><description>Welcome to this new episode of HTML5 Tank Battle Field game. In this article a drastic restructuring of the game has been put in place.&lt;br /&gt;
&lt;br /&gt;
In order to make the game more fit to new features and scenarios, some major concepts have been implemented:&lt;br /&gt;
&lt;br /&gt;
1- World concept. The world concept is a simulation of how the tank battle occur in the real world. This is called the Model in the code.&lt;br /&gt;
The importance of the Model is that it abstracts away the real stuff from the graphic technicalities. So in theory, once the Model is ready, porting the game to different devices and/or different screen resolutions is a matter of adapting the graphics only.&lt;br /&gt;
It also ensures that the game play can vary by only touching the graphics without the need of rewriting the whole game.&lt;br /&gt;
A third important reason why the Model is crucial, is that the game could be transformed into multi-player one. So it will present a same world (Model) for all the players without caring about their graphic settings.&lt;br /&gt;
&lt;br /&gt;
2- The Graphics, is what appears on the screen in front of the user. The graphic elements drawn on the screen will reflect what happens in the Model. However that does not mean that the mapping is one-to-one. Some transformations are required in order to render those elements appropriately.&lt;br /&gt;
Ideally the graphics coding structure will evolve separately from the Model, and the two can be linked by the &quot;bridge design pattern&quot;. This will add great amount of flexibility.&lt;br /&gt;
&lt;br /&gt;
3- Navigation view mode: As said in the &lt;a href=&quot;http://ziadsalloum.blogspot.fr/2013/12/game-first-person-vehicle-in-2d.html&quot; target=&quot;_blank&quot;&gt;first&lt;/a&gt; and&amp;nbsp;&lt;a href=&quot;http://ziadsalloum.blogspot.fr/2013/12/html5-game-2-tank-battle.html&quot;&gt;second&lt;/a&gt;&amp;nbsp;article, the game is about &quot;first person vehicle&quot; (as an analogy to the &quot;first person shooter&quot;). So despite the fact that this is a plain top view 2D game, the graphics are rendered to give the impression that the user is inside the tank. Which means that the tank is always fixed at the center of the screen and the objects move around it as it (the tank) moves.&lt;br /&gt;
&lt;br /&gt;
However to keep things open for future navigation modes, this mode is used as part of the settings. In future releases, the user might be able to switch between navigation modes.&lt;br /&gt;
&lt;br /&gt;
4- The game loop of course. It was not present in the previous article for simplicity purpose. However since the game is evolving, the game loop existence is extremely important. It has the role to keep the game together: It reads user input, updates the Model and renders the graphics and sounds.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;The Model&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
As said the Model represents a simulation of the real world of the game which abstracts it from the graphics technical issues and constitutes a unique reference of what is happening in side the game for all players in a multi-player game.&lt;br /&gt;
&lt;br /&gt;
As for this version of the game, the coordinates system of the Model is similar to the screen one, i.e. the origin (0,0) is at the top left of the screen, and the positive x-axis goes to the right, while the positive y-axis goes down.&lt;br /&gt;
The dimensions of the battle field, known as Field in the code, is 5000m x 5000m.&lt;br /&gt;
The angular system, is similar to the classic trigonometric one. So positive x-axis goes to the right, positive y-axis goes up and a positive angle is the one that goes from right to left.&lt;br /&gt;
&lt;br /&gt;
There is no particular reason I have chosen this configuration, you can choose the one you want as long as you make the appropriate adaptation in your code.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;The Graphics&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
The Graphics is to represent the objects of the Model on screen, by taking into consideration the screen resolution, the navigation settings, etc.&lt;br /&gt;
It is composed among other things of five layers:&lt;br /&gt;
&lt;i&gt;The ground layer&lt;/i&gt;: To draw the background&lt;br /&gt;
&lt;i&gt;The objects layer&lt;/i&gt;: Usually used to draw static objects such as buildings&lt;br /&gt;
&lt;i&gt;The units layer&lt;/i&gt;: to draw the vehicles and big mobile objects&lt;br /&gt;
&lt;i&gt;The projectiles layer&lt;/i&gt;: to draw the shells, rockets, missiles fired by the units&lt;br /&gt;
&lt;i&gt;The flying layer&lt;/i&gt;: this is to draw any future flying object such as planes etc..&lt;br /&gt;
&lt;i&gt;The widgets layer&lt;/i&gt;: this layer is for displaying extra features in the game such as mini-map, text messages etc..&lt;br /&gt;
As you can notice the existence of the layers determines the depth or z-index of the graphic elemnts. The rendering starts with the ground layer up to the widgets layer.&lt;br /&gt;
&lt;br /&gt;
It is important to note that every object of the Model must be in one of these layers in order to appear on the screen.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;The Navigation Mode&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
As already stated, the navigation mode in this version is about first person vehicle, or FixedCenter as referred to in the code. So the tank is fixed at the center of the screen, only its turret can turn. When trying to turn the chassis, the objects around the tank turns in the opposite direction to give the user the feeling that tank has turned.&lt;br /&gt;
&lt;br /&gt;
So if the tank turns &amp;nbsp;towards a building on its left, what the user sees on the screen is that the building is turning to the right to come in front of the tank. When the tank moves forward, or backwards, the building approaches or moves away.&lt;br /&gt;
&lt;br /&gt;
It is important to note that all of this is only graphical, in the Model only the tank moves foward and backwards or turns left or right. But when representing those movements on the screen, the impression is given that the tank is fixed and the buildings are moving.&lt;br /&gt;
&lt;br /&gt;
Technically, when the tank moves towards a building the distance between the tank and the building is measured and on the screen the building is drawn closer to the center.&lt;br /&gt;
&lt;br /&gt;
When the tank turns, the building appears to be turning in the opposite direction, in order to come in front of the tank. However there is a little catch in here. Because our tank is always positioned upwards, in practice &amp;nbsp;it is making 90° with the x-axis (according to our angular system). So when the tank moves left to position 120°, the building should rotate by 30° (120° - 90°) to the right (around the center of course).&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vogqVADTelVM1DNQ0VqYCZ3E22wYkrp3vcfbKsad-mC78hRrZoOn9IKqckyn5TuMVG8k78M6V3Y0y_KfSCo0WI0aqMo4h7TPFs6BFSjTVm1ckvhZyeNTWdO8q3HkKIaF38qjz9z2cBQ/s1600/Tank_turning_left_1.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vogqVADTelVM1DNQ0VqYCZ3E22wYkrp3vcfbKsad-mC78hRrZoOn9IKqckyn5TuMVG8k78M6V3Y0y_KfSCo0WI0aqMo4h7TPFs6BFSjTVm1ckvhZyeNTWdO8q3HkKIaF38qjz9z2cBQ/s1600/Tank_turning_left_1.jpg&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhInrzuHrOWJ7emLl2VavAlEqdHad3uhZ8oKihmA-OR2LAZaguUrXnFCk5jJBRH51jOoRRhQ1ePFV4SBYemSQkcGTwh63yd4YHf1b1Wz5AYBR5us6C-d6BOcWq4OSmxjH_Ll-UX1MJXObQ/s1600/Tank_turning_left_2.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhInrzuHrOWJ7emLl2VavAlEqdHad3uhZ8oKihmA-OR2LAZaguUrXnFCk5jJBRH51jOoRRhQ1ePFV4SBYemSQkcGTwh63yd4YHf1b1Wz5AYBR5us6C-d6BOcWq4OSmxjH_Ll-UX1MJXObQ/s1600/Tank_turning_left_2.jpg&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNY5nEBX0ks0EmqE2wMuwBaZo9rh1q2geSxCmVQ3coE4IW2hQvvCuI31hJIPdTPJY9mlTsFg_g1prp5yrjzjwThKx50weMbDzjqGf9Qc3ot0zKVBWx5zIb8RIamtNl1BO8L_NxYvZnfb0/s1600/Tank_turning_left_3.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNY5nEBX0ks0EmqE2wMuwBaZo9rh1q2geSxCmVQ3coE4IW2hQvvCuI31hJIPdTPJY9mlTsFg_g1prp5yrjzjwThKx50weMbDzjqGf9Qc3ot0zKVBWx5zIb8RIamtNl1BO8L_NxYvZnfb0/s1600/Tank_turning_left_3.jpg&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;Collision detection&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
For simplicity reason in this version the collision of the tank with any building is reduced to detecting whether the center point of the tank crosses the boundary of any building. Thus you will easily see half of the tank mounting the building.&lt;br /&gt;
&lt;br /&gt;
Note that collision is detected in the Model and not graphically. So once the Model detects that the tank collided it cancel all movements towards the collision point, and this way the graphics on the screen keeps drawing the tank at the same position, giving the impression that it has stopped moving.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;Demo&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
For the demo please go to the following&amp;nbsp;&lt;a href=&quot;http://tankbattlefield.eu.pn/tank6/index.html&quot;&gt;http://tankbattlefield.eu.pn/tank6/index.html&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;</description><link>http://ziadsalloum.blogspot.com/2013/12/html5-game-3-tank-battle-field-new.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vogqVADTelVM1DNQ0VqYCZ3E22wYkrp3vcfbKsad-mC78hRrZoOn9IKqckyn5TuMVG8k78M6V3Y0y_KfSCo0WI0aqMo4h7TPFs6BFSjTVm1ckvhZyeNTWdO8q3HkKIaF38qjz9z2cBQ/s72-c/Tank_turning_left_1.jpg" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-1347626429664510407</guid><pubDate>Fri, 13 Dec 2013 23:55:00 +0000</pubDate><atom:updated>2014-01-06T21:21:15.235+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Battle</category><category domain="http://www.blogger.com/atom/ns#">Field</category><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">HTML5</category><category domain="http://www.blogger.com/atom/ns#">Javascript</category><category domain="http://www.blogger.com/atom/ns#">Tank</category><title>HTML5 Game #2 : The Tank Battle</title><description>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
In my &lt;a href=&quot;http://ziadsalloum.blogspot.fr/2013/12/game-first-person-vehicle-in-2d.html&quot; target=&quot;_blank&quot;&gt;previous article&lt;/a&gt; I have shown how to use a vehicle as &quot;1st person navigator&quot; in 2D.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
After a second thought I found that there are more things to tell regarding HTML5game dev. So I decided to continue the series hoping that at the end of which I can come up with a minimum playable game. It would be a good practice for me and others.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
During this series if you have remarks, or suggestions feel free to drop a line in the comments.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
First I will redefine the game story.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
Starting this article the game will be about a tank, navigating and and shooting &amp;nbsp;on a map. The enemies are not very specific for the time being, they can be computer animated ones or other user(s) in a multiplayer game. Future articles will help determining them, since it is all about what can be achieved in a reasonable amount of time and efforts.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
So in this article I will do the following:&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
1- add a tank with a moving turret&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
2- control the tank via keyboard instead of push buttons for better playability.&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
3- add some quick objects to the map&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
4- some technical stuff&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
As a matter of fact this article is more about polishing than anything else. It doesn&#39;t require any head scratching.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
However before I start, I would like to point that the code has suffered a bit and needs some refactoring. I hope to be able to do this in the next articles.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
&lt;b&gt;&lt;u&gt;1. The tank&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
In order to simulate a tank I have used a &amp;nbsp;sprite PNG format with a transparent background. See image&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
The chassis and the turret are separate since the turret should be able to turn 360°.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;
Placing the chassis and the turret on the screen is straight forward. First you have to load the image then you have to draw each part alone.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMXo01aInuNTntTX_YjKB7ZH_CxXQyxsdWOibxQAaClmAzXc0Sg5wQyRN-mKchwbaoL0qJOOR1Oqq_0OmokYs-xdFcdpuSzmYF_QDmbQONc6U0YxllgmZEe94oi6xBp5ILJINeul3WlA/s1600/t2_1.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMXo01aInuNTntTX_YjKB7ZH_CxXQyxsdWOibxQAaClmAzXc0Sg5wQyRN-mKchwbaoL0qJOOR1Oqq_0OmokYs-xdFcdpuSzmYF_QDmbQONc6U0YxllgmZEe94oi6xBp5ILJINeul3WlA/s1600/t2_1.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
It is worth noting that the tank is positioned upwards which is opposed to the relative axis system initial direction. This means that the turret along with its gun as the trajectory of the shell evolve in the negative values of the y-axis.&lt;br /&gt;
&lt;br /&gt;
As I said earlier the chassis is fixed, but the turret can rotate. The good news is that since we are in a 2D and Top view, all objects are symmetric thus we don&#39;t need to draw every shape that the turret takes as it rotates. So delegating the job to the graphic engine is sufficient.&lt;br /&gt;
&lt;br /&gt;
Tank forward, reverse, rotation speed as well as the rotation speed of the turret are controlled by the following variables in the code.&lt;br /&gt;
&lt;i&gt;var ctDefaultForward = 5;&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctDefaultBackward = 3;&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctDefautltTurning = 2;&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctDefautltTurretTurning = 2;&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
Firing is also constrained by the loading time. Meaning that after every shot there is a certain amount of time to wait until the next shell is loaded. This time is controlled by the variable.&lt;br /&gt;
&lt;i&gt;var ctDefaultLoadTime = 20;&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
Explosion of the shell is a sequence of sprites that display one after the other.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMA3TUUe13hfIhDBB3kZzlkKWLhjq-5iomkDBlMXAB_eW0VL1zgi2T0eQTzrL0Gjcf2UT11XXGVTCDHD4pmx07Exf5QaF22zAb9bHQxtpBQCh8eHXQM4LvQbr9KQbJYAde0ZG0nx_eCs/s1600/explo2.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMA3TUUe13hfIhDBB3kZzlkKWLhjq-5iomkDBlMXAB_eW0VL1zgi2T0eQTzrL0Gjcf2UT11XXGVTCDHD4pmx07Exf5QaF22zAb9bHQxtpBQCh8eHXQM4LvQbr9KQbJYAde0ZG0nx_eCs/s1600/explo2.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
Each of these sprites is contained in a &amp;nbsp;64x64 rectangle, so it suffice to know the number of the sequence in order to deduce the sprite position on the sprite sheet.&lt;br /&gt;
The variable &lt;i&gt;explosionSeq&lt;/i&gt;&amp;nbsp;keeps track of the explosion sequence. A value of -1 means there is no explosion.&lt;br /&gt;
&lt;br /&gt;
Upon firing the gun recoils and this is reflected by move back of the turret. The variable &lt;i&gt;recoil &lt;/i&gt;tells if there has been a recoiling and&amp;nbsp;&lt;i&gt;recoilDist &lt;/i&gt;controls the amount.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;2. Tank control&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
Unlike in the previous article, the tank is now controlled via keyboard instead of push buttons. This is will allow a greater maneuverability.&lt;br /&gt;
The logic of the keyboard controls lies in the existence of a keyDown array. This array will take as index the key code and as value &lt;i&gt;true &lt;/i&gt;in case the key is down and &lt;i&gt;false &lt;/i&gt;in case the key is up. This keyDown array is essential when several keys are pressed down.&lt;br /&gt;
The variables that set the key controls are listed in here:&lt;br /&gt;
&lt;i&gt;var ctKeyMoveUp = 69; /*E*/&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctKeyMoveDown = 68; /*D*/&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctKeyTurnLeft = 83; /*S*/&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctKeyTurnRight = 70; /*F*/&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctKeyTurretLeft = 37; /*left arrow*/&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctKeyTurretRight = 39; /*right arrow*/&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;var ctKeyFire = 16; /*shift*/&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
In order to avoid the differences between QWERTY and AZERTY keyboards, I have set the control keys to match both layouts, whereas E = Forward, D = Backwards, S = TurnLeft, F = TurnRight, Left Arrow = Turret Left, Right Arrow = Turret Right, Shift = Fire.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;u&gt;3. Buildings&lt;/u&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;u&gt;&lt;br /&gt;
&lt;/u&gt;&lt;/b&gt; For the time being other objects on the map, particularly buildings are no more than rectangles of different dimensions and colors spread randomly.&lt;br /&gt;
As of this article, there are no collisions detection implemented in the source code.&lt;br /&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;4. Technical stuff&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
The most important technical issues to mentions are:&lt;br /&gt;
1- The game loop that maintain the game running. It is called every 100ms and consists of function readInput() for reading and analyzing the key strokes, the update() function that make some calculations regarding the positioning of objects, the drawAll() function that draws all the objects on the screen and finally the postUpdate() method that perform computations for the after drawing phase (useful in case of shell firing).&lt;br /&gt;
2- Another important issue, the rotating turret. The turret rotates within a relative axis system. This is the easiest way to do it, since the graphics api is able to rotate the turret sprite without deteriorating its quality.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b&gt;&lt;u&gt;5. The demo&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
Here is a live demo of this new version. Give it a try!&lt;br /&gt;
&lt;br /&gt;
&lt;!--   ***********************************  game code  *********************************************************   --&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;canvas height=&quot;480&quot; id=&quot;myCanvas_2&quot; style=&quot;border: 1px solid #d3d3d3;&quot; width=&quot;600&quot;&gt;&lt;br /&gt;
Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span id=&quot;loadingInfo&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span id=&quot;info&quot;&gt;Keys: E = Forward, D = Backward, S = Left, F = Right, Left Arrow = Turret Left, Right Arrow = Right Turret, Shift = Fire&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;script&gt;
(function(){
var _debug = false;
var timeIntervalID = -1;
var canvas=document.getElementById(&quot;myCanvas_2&quot;);
var ctx=canvas.getContext(&quot;2d&quot;);
var info=document.getElementById(&quot;info&quot;);
var loadingInfo=document.getElementById(&quot;loadingInfo&quot;);
var imgSprites = new Image();
imgSprites.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMXo01aInuNTntTX_YjKB7ZH_CxXQyxsdWOibxQAaClmAzXc0Sg5wQyRN-mKchwbaoL0qJOOR1Oqq_0OmokYs-xdFcdpuSzmYF_QDmbQONc6U0YxllgmZEe94oi6xBp5ILJINeul3WlA/s1600/t2_1.png&quot;;
var imgExplo = new Image();
imgExplo.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMA3TUUe13hfIhDBB3kZzlkKWLhjq-5iomkDBlMXAB_eW0VL1zgi2T0eQTzrL0Gjcf2UT11XXGVTCDHD4pmx07Exf5QaF22zAb9bHQxtpBQCh8eHXQM4LvQbr9KQbJYAde0ZG0nx_eCs/s1600/explo2.png&quot;;
var keyDown = [];
var ctDefaultLoadTime = 20;
var ctDefaultForward = 5;
var ctDefaultBackward = 3;
var ctDefautltTurning = 2;
var ctDefautltTurretTurning = 2;
var ctTotalExplosionSeq = 5;

var ctKeyMoveUp = 69; /*E*/
var ctKeyMoveDown = 68; /*D*/
var ctKeyTurnLeft = 83; /*S*/
var ctKeyTurnRight = 70; /*F*/
var ctKeyTurretLeft = 37; /*left arrow*/
var ctKeyTurretRight = 39; /*right arrow*/
var ctKeyFire = 16; /*shift*/
var ctShellMaxRange = 300;

// coordinates of the center of the map
// they are also those of the vehicle since it does not physically move on the map.
var canvasWidth = parseInt(canvas.width);
var canvasHeight = parseInt(canvas.height);
var centerX = canvasWidth/2;
var centerY = canvasHeight/2;

// the rotation angle by which the relative system will rotate
var rotAngle = 0;

// the rotation angle of the turret 
var rotTurret = 0;

// movements
var deltaAngle = 0;
var deltaMove = 0;
var deltaTurret = 0;
var explosionSeq = -1;

// tank dimensions
var tankWidth = 40;
var tankHeight = 86;
var tankHalfWidth = 20;
var tankHalfHeight = 43;
var realTankPoints = [];



// this is the PI/2 which is 90 in radians
var PIover2 = Math.PI/2;

// coordinates of the objects in the relative system
var buildings = createBuildings();

var shellY = 0;
var fire = false;
var recoil = false;
var recoilDist = 2;
var loadingTime = 0;

// draw everything at start with no translation nor rotation
//drawAll(0, 0);
imgSprites.addEventListener(&quot;load&quot;, function(){
 drawAll(0,0, 0);
});

window.addEventListener(&quot;keydown&quot;, function(ev){

 if(ev.keyCode == ctKeyMoveUp || ev.keyCode == ctKeyTurnLeft|| ev.keyCode == ctKeyMoveDown|| ev.keyCode == ctKeyTurnRight || ev.keyCode == ctKeyTurretLeft || ev.keyCode == ctKeyTurretRight
 || ev.keyCode == ctKeyFire){
  keyDown[ev.keyCode] = true;
 }
});

window.addEventListener(&quot;keyup&quot;, function(ev){
 if(ev.keyCode == ctKeyMoveUp || ev.keyCode == ctKeyTurnLeft || ev.keyCode == ctKeyMoveDown || ev.keyCode == ctKeyTurnRight || ev.keyCode == ctKeyTurretLeft || ev.keyCode == ctKeyTurretRight){
  keyDown[ev.keyCode] = false;
 }
});



function readInput(){
 deltaAngle = 0;
 deltaMove = 0;
 deltaTurret = 0;
 
 if(keyDown[ctKeyMoveUp]){
  deltaMove = -ctDefaultForward;
 }
 if(keyDown[ctKeyMoveDown]){
  deltaMove = ctDefaultBackward;
 }
 if(keyDown[ctKeyTurnLeft]){
  deltaAngle = ctDefautltTurning;
 }
 if(keyDown[ctKeyTurnRight]){
  deltaAngle = -ctDefautltTurning;
 }
 if(keyDown[ctKeyTurretLeft]){
  deltaTurret = -ctDefautltTurretTurning;
 }
 if(keyDown[ctKeyTurretRight]){
  deltaTurret = ctDefautltTurretTurning;
 }
 
 if(loadingTime &gt; 0){
  keyDown[ctKeyFire] = false;
 }
 if(keyDown[ctKeyFire]){
  fire = true;
  recoil = true;
  keyDown[ctKeyFire] = false;
  loadingTime = ctDefaultLoadTime;
 }
}
function update(){

 rotAngle = (rotAngle + deltaAngle) % 360;
}

function postUpdate(){

 // loading time
 if(loadingTime &gt; 0){
  loadingTime --;
  loadingTime = Math.max(0, loadingTime);
  loadingInfo.innerHTML= &quot;Reloading: &quot; + loadingTime;
 }else{
  loadingInfo.innerHTML = &quot;Loaded&quot;;
 }
}

// the drawAll function draws all the map and its objects
// parameters:

function drawAll(){
// compute the total rotation angle of the vehicle in degrees and radians
var rad = rotAngle*Math.PI/180;

// compute the forward vector coordinates in the relative system
var rotdy = Math.round(deltaMove * Math.sin(PIover2-rad));
var rotdx = Math.round(deltaMove * Math.cos(PIover2 - rad));

// clear the map
ctx.fillStyle = &#39;#ffffff&#39;;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);

// save the context in order to start the transformation
ctx.save();

// move the coordinates system to the center (this is the relative system)
ctx.translate(centerX, centerY);

// apply the rotation to the relative system
ctx.rotate(rad);


for(var i = 0; i &lt; buildings.length; i++){
 // make the necessary translation in the relative system
 buildings[i].x += -rotdx;
 buildings[i].y += -rotdy;
 
 // draw the objects on the map in the relative system
 ctx.fillStyle = buildings[i].c;
 ctx.fillRect(buildings[i].x, buildings[i].y ,buildings[i].w, buildings[i].h);
 if(buildings[i].hilit){
  ctx.strokeStyle=&quot;#000000&quot;;
  ctx.lineWidth=4;
  ctx.strokeRect(buildings[i].x, buildings[i].y ,buildings[i].w, buildings[i].h);
 }
}

// restore the previous context (return to the fixed system)
ctx.restore();

// draw the vehicle at the center of the map using the fixed system
ctx.drawImage(imgSprites, 1, 0, tankWidth, tankHeight, centerX - tankHalfWidth, centerY - tankHalfHeight, tankWidth, tankHeight);


// draw turrent
rotTurret = (rotTurret + deltaTurret) % 360;
var radDeltaTurret = rotTurret*Math.PI/180;
ctx.save();
ctx.translate(centerX, centerY);

// apply the rotation to the relative system
ctx.rotate(radDeltaTurret);
ctx.drawImage(imgSprites, 75, 0, 27, 99, - 15, - 80 + (recoil ? recoilDist : 0), 28, 99);

//fire
var fired = fire || false;
if(fired || shellY != 0){
 if(shellY == 0){
  shellY = -107;
 }
 recoil = false;
 ctx.beginPath();
 ctx.fillStyle = &#39;#ff0000&#39;;
 ctx.strokeStyle = &#39;#ff0000&#39;;
 ctx.arc(0,shellY,2,0,2*Math.PI);
 ctx.fill();
 ctx.stroke();
 
 shellY += -50;
 
 if(Math.abs(shellY) &gt; ctShellMaxRange){
  fire = false;
  explosionSeq = 0;
  explosionY = shellY;
  shellY = 0;
 }
}

// explosion
if(explosionSeq &gt; -1){
 var eX = (explosionSeq * 64) % 320;
 var eY = 0;//(explosionSeq * 64) % 320;
 ctx.drawImage(imgExplo, eX, eY, 64, 64, - 32, explosionY - 32, 64, 64);
 explosionSeq++;
 if(explosionSeq &gt;= ctTotalExplosionSeq){
  explosionSeq = -1;
 }
}
ctx.restore();
}

timeIntervalID = setInterval(function(){gameLoop();}, 100);
function gameLoop(){
 readInput();
 update();
 drawAll();
 postUpdate();
}

function stopGame(){
 clearInterval(timeIntervalID);
 timeIntervalID = -1;
}

function createBuildings(){
 var temp = [];
 for(var i = 0; i &lt; 200; i++){
  var tx = getRandomInt(-1000, 1000);
  var ty = getRandomInt(-1000, 1000);
  var tw = getRandomInt(50, 100);
  var th = getRandomInt(50, 100);
  temp[i] = {
   x: tx,
   y:ty,
   w:tw,
   h:th,
   c:&#39;#&#39;+Math.floor(Math.random()*16777215).toString(16),
  }
 }
 return temp;
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
})();

&lt;/script&gt;

&lt;!--   ***********************************  end of game code  *************************************************   --&gt;




 Please find below the source code of this version:





&lt;br /&gt;
&lt;div style=&quot;background-color: #cccccc;&quot;&gt;
&amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&quot;myCanvas2&quot; width=&quot;600&quot; height=&quot;480&quot; style=&quot;border:1px solid #d3d3d3;&quot;&amp;gt;&lt;br /&gt;
Your browser does not support the HTML5 canvas tag.&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
&amp;lt;span id=&quot;loadingInfo&quot;&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;br/&amp;gt;&lt;br /&gt;
&amp;lt;span id=&quot;info&quot;&amp;gt;Keys: E = Forward, D = Backward, S = Left, F = Right, Left Arrow = Turret Left, Right Arrow = Right Turret, Up Arrow = Fire&amp;lt;/span&amp;gt;&amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
var timeIntervalID = -1;&lt;br /&gt;
var canvas=document.getElementById(&quot;myCanvas2&quot;);&lt;br /&gt;
var ctx=canvas.getContext(&quot;2d&quot;);&lt;br /&gt;
var info=document.getElementById(&quot;info&quot;);&lt;br /&gt;
var loadingInfo=document.getElementById(&quot;loadingInfo&quot;);&lt;br /&gt;
var imgSprites = new Image();&lt;br /&gt;
imgSprites.src=&quot;file:///C:/projects/tank/t2_1.png&quot;;&lt;br /&gt;
var imgExplo = new Image();&lt;br /&gt;
imgExplo.src=&quot;file:///C:/projects/tank/explo2.png&quot;;&lt;br /&gt;
var keyDown = [];&lt;br /&gt;
var ctDefaultLoadTime = 20;&lt;br /&gt;
var ctDefaultForward = 5;&lt;br /&gt;
var ctDefaultBackward = 3;&lt;br /&gt;
var ctDefautltTurning = 2;&lt;br /&gt;
var ctDefautltTurretTurning = 2;&lt;br /&gt;
var ctTotalExplosionSeq = 5;&lt;br /&gt;
var ctShellMaxRange = 300;&lt;br /&gt;
&lt;br /&gt;
var ctKeyMoveUp = 69; /*E*/&lt;br /&gt;
var ctKeyMoveDown = 68; /*D*/&lt;br /&gt;
var ctKeyTurnLeft = 83; /*S*/&lt;br /&gt;
var ctKeyTurnRight = 70; /*F*/&lt;br /&gt;
var ctKeyTurretLeft = 37; /*left arrow*/&lt;br /&gt;
var ctKeyTurretRight = 39; /*right arrow*/&lt;br /&gt;
var ctKeyFire = 16; /*shift*/&lt;br /&gt;
&lt;br /&gt;
// coordinates of the center of the map&lt;br /&gt;
// they are also those of the vehicle since it does not physically move on the map.&lt;br /&gt;
var canvasWidth = parseInt(canvas.width);&lt;br /&gt;
var canvasHeight = parseInt(canvas.height);&lt;br /&gt;
var centerX = canvasWidth/2;&lt;br /&gt;
var centerY = canvasHeight/2;&lt;br /&gt;
&lt;br /&gt;
// the rotation angle by which the relative system will rotate&lt;br /&gt;
var rotAngle = 0;&lt;br /&gt;
&lt;br /&gt;
// the rotation angle of the turret &lt;br /&gt;
var rotTurret = 0;&lt;br /&gt;
&lt;br /&gt;
// movements&lt;br /&gt;
var deltaAngle = 0;&lt;br /&gt;
var deltaMove = 0;&lt;br /&gt;
var deltaTurret = 0;&lt;br /&gt;
var explosionSeq = -1;&lt;br /&gt;
&lt;br /&gt;
// tank dimensions&lt;br /&gt;
var tankWidth = 40;&lt;br /&gt;
var tankHeight = 86;&lt;br /&gt;
var tankHalfWidth = 20;&lt;br /&gt;
var tankHalfHeight = 43;&lt;br /&gt;
var realTankPoints = [];&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
// this is the PI/2 which is 90 in radians&lt;br /&gt;
var PIover2 = Math.PI/2;&lt;br /&gt;
&lt;br /&gt;
// coordinates of the objects in the relative system&lt;br /&gt;
var buildings = createBuildings();&lt;br /&gt;
&lt;br /&gt;
var shellY = 0;&lt;br /&gt;
var fire = false;&lt;br /&gt;
var recoil = false;&lt;br /&gt;
var recoilDist = 2;&lt;br /&gt;
var loadingTime = 0;&lt;br /&gt;
&lt;br /&gt;
// draw everything at start with no translation nor rotation&lt;br /&gt;
//drawAll(0, 0);&lt;br /&gt;
imgSprites.addEventListener(&quot;load&quot;, function(){&lt;br /&gt;
drawAll(0,0, 0);&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
window.addEventListener(&quot;keydown&quot;, function(ev){&lt;br /&gt;
&lt;br /&gt;
if(ev.keyCode == ctKeyMoveUp || ev.keyCode == ctKeyTurnLeft|| ev.keyCode == ctKeyMoveDown|| ev.keyCode == ctKeyTurnRight || ev.keyCode == ctKeyTurretLeft || ev.keyCode == ctKeyTurretRight&lt;br /&gt;
|| ev.keyCode == ctKeyFire){&lt;br /&gt;
keyDown[ev.keyCode] = true;&lt;br /&gt;
}&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
window.addEventListener(&quot;keyup&quot;, function(ev){&lt;br /&gt;
if(ev.keyCode == ctKeyMoveUp || ev.keyCode == ctKeyTurnLeft || ev.keyCode == ctKeyMoveDown || ev.keyCode == ctKeyTurnRight || ev.keyCode == ctKeyTurretLeft || ev.keyCode == ctKeyTurretRight){&lt;br /&gt;
keyDown[ev.keyCode] = false;&lt;br /&gt;
}&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
function readInput(){&lt;br /&gt;
deltaAngle = 0;&lt;br /&gt;
deltaMove = 0;&lt;br /&gt;
deltaTurret = 0;&lt;br /&gt;
&lt;br /&gt;
if(keyDown[ctKeyMoveUp]){&lt;br /&gt;
deltaMove = -ctDefaultForward;&lt;br /&gt;
}&lt;br /&gt;
if(keyDown[ctKeyMoveDown]){&lt;br /&gt;
deltaMove = ctDefaultBackward;&lt;br /&gt;
}&lt;br /&gt;
if(keyDown[ctKeyTurnLeft]){&lt;br /&gt;
deltaAngle = ctDefautltTurning;&lt;br /&gt;
}&lt;br /&gt;
if(keyDown[ctKeyTurnRight]){&lt;br /&gt;
deltaAngle = -ctDefautltTurning;&lt;br /&gt;
}&lt;br /&gt;
if(keyDown[ctKeyTurretLeft]){&lt;br /&gt;
deltaTurret = -ctDefautltTurretTurning;&lt;br /&gt;
}&lt;br /&gt;
if(keyDown[ctKeyTurretRight]){&lt;br /&gt;
deltaTurret = ctDefautltTurretTurning;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
if(loadingTime &amp;gt; 0){&lt;br /&gt;
keyDown[ctKeyFire] = false;&lt;br /&gt;
}&lt;br /&gt;
if(keyDown[ctKeyFire]){&lt;br /&gt;
fire = true;&lt;br /&gt;
recoil = true;&lt;br /&gt;
keyDown[ctKeyFire] = false;&lt;br /&gt;
loadingTime = ctDefaultLoadTime;&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
function update(){&lt;br /&gt;
&lt;br /&gt;
rotAngle = (rotAngle + deltaAngle) % 360;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function postUpdate(){&lt;br /&gt;
&lt;br /&gt;
// loading time&lt;br /&gt;
if(loadingTime &amp;gt; 0){&lt;br /&gt;
loadingTime --;&lt;br /&gt;
loadingTime = Math.max(0, loadingTime);&lt;br /&gt;
loadingInfo.innerHTML= &quot;Reloading: &quot; + loadingTime;&lt;br /&gt;
}else{&lt;br /&gt;
loadingInfo.innerHTML = &quot;Loaded&quot;;&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// the drawAll function draws all the map and its objects&lt;br /&gt;
// parameters:&lt;br /&gt;
&lt;br /&gt;
function drawAll(){&lt;br /&gt;
// compute the total rotation angle of the vehicle in degrees and radians&lt;br /&gt;
var rad = rotAngle*Math.PI/180;&lt;br /&gt;
&lt;br /&gt;
// compute the forward vector coordinates in the relative system&lt;br /&gt;
var rotdy = Math.round(deltaMove * Math.sin(PIover2-rad));&lt;br /&gt;
var rotdx = Math.round(deltaMove * Math.cos(PIover2 - rad));&lt;br /&gt;
&lt;br /&gt;
// clear the map&lt;br /&gt;
ctx.fillStyle = &#39;#ffffff&#39;;&lt;br /&gt;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);&lt;br /&gt;
&lt;br /&gt;
// save the context in order to start the transformation&lt;br /&gt;
ctx.save();&lt;br /&gt;
&lt;br /&gt;
// move the coordinates system to the center (this is the relative system)&lt;br /&gt;
ctx.translate(centerX, centerY);&lt;br /&gt;
&lt;br /&gt;
// apply the rotation to the relative system&lt;br /&gt;
ctx.rotate(rad);&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
for(var i = 0; i &amp;lt; buildings.length; i++){&lt;br /&gt;
// make the necessary translation in the relative system&lt;br /&gt;
buildings[i].x += -rotdx;&lt;br /&gt;
buildings[i].y += -rotdy;&lt;br /&gt;
&lt;br /&gt;
// draw the objects on the map in the relative system&lt;br /&gt;
ctx.fillStyle = buildings[i].c;&lt;br /&gt;
ctx.fillRect(buildings[i].x, buildings[i].y ,buildings[i].w, buildings[i].h);&lt;br /&gt;
if(buildings[i].hilit){&lt;br /&gt;
ctx.strokeStyle=&quot;#000000&quot;;&lt;br /&gt;
ctx.lineWidth=4;&lt;br /&gt;
ctx.strokeRect(buildings[i].x, buildings[i].y ,buildings[i].w, buildings[i].h);&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// restore the previous context (return to the fixed system)&lt;br /&gt;
ctx.restore();&lt;br /&gt;
&lt;br /&gt;
// draw the vehicle at the center of the map using the fixed system&lt;br /&gt;
ctx.drawImage(imgSprites, 1, 0, tankWidth, tankHeight, centerX - tankHalfWidth, centerY - tankHalfHeight, tankWidth, tankHeight);&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
// draw turrent&lt;br /&gt;
rotTurret = (rotTurret + deltaTurret) % 360;&lt;br /&gt;
var radDeltaTurret = rotTurret*Math.PI/180;&lt;br /&gt;
ctx.save();&lt;br /&gt;
ctx.translate(centerX, centerY);&lt;br /&gt;
&lt;br /&gt;
// apply the rotation to the relative system&lt;br /&gt;
ctx.rotate(radDeltaTurret);&lt;br /&gt;
ctx.drawImage(imgSprites, 75, 0, 27, 99, - 15, - 80 + (recoil ? recoilDist : 0), 28, 99);&lt;br /&gt;
&lt;br /&gt;
//fire&lt;br /&gt;
var fired = fire || false;&lt;br /&gt;
if(fired || shellY != 0){&lt;br /&gt;
if(shellY == 0){&lt;br /&gt;
shellY = -107;&lt;br /&gt;
}&lt;br /&gt;
recoil = false;&lt;br /&gt;
ctx.beginPath();&lt;br /&gt;
ctx.fillStyle = &#39;#ff0000&#39;;&lt;br /&gt;
ctx.strokeStyle = &#39;#ff0000&#39;;&lt;br /&gt;
ctx.arc(0,shellY,2,0,2*Math.PI);&lt;br /&gt;
ctx.fill();&lt;br /&gt;
ctx.stroke();&lt;br /&gt;
&lt;br /&gt;
shellY += -50;&lt;br /&gt;
&lt;br /&gt;
if(Math.abs(shellY) &amp;gt; ctShellMaxRange){&lt;br /&gt;
fire = false;&lt;br /&gt;
explosionSeq = 0;&lt;br /&gt;
explosionY = shellY;&lt;br /&gt;
shellY = 0;&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// explosion&lt;br /&gt;
if(explosionSeq &amp;gt; -1){&lt;br /&gt;
var eX = (explosionSeq * 64) % 320;&lt;br /&gt;
var eY = 0;//(explosionSeq * 64) % 320;&lt;br /&gt;
ctx.drawImage(imgExplo, eX, eY, 64, 64, - 32, explosionY - 32, 64, 64);&lt;br /&gt;
explosionSeq++;&lt;br /&gt;
if(explosionSeq &amp;gt;= ctTotalExplosionSeq){&lt;br /&gt;
explosionSeq = -1;&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
ctx.restore();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
timeIntervalID = setInterval(function(){gameLoop();}, 100);&lt;br /&gt;
function gameLoop(){&lt;br /&gt;
readInput();&lt;br /&gt;
update();&lt;br /&gt;
drawAll();&lt;br /&gt;
postUpdate();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function stopGame(){&lt;br /&gt;
clearInterval(timeIntervalID);&lt;br /&gt;
timeIntervalID = -1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function createBuildings(){&lt;br /&gt;
var temp = [];&lt;br /&gt;
for(var i = 0; i &amp;lt; 20; i++){&lt;br /&gt;
var tx = getRandomInt(-200, 200);&lt;br /&gt;
var ty = getRandomInt(-200, 200);&lt;br /&gt;
var tw = getRandomInt(50, 150);&lt;br /&gt;
var th = getRandomInt(50, 150);&lt;br /&gt;
temp[i] = {&lt;br /&gt;
x: tx,&lt;br /&gt;
y:ty,&lt;br /&gt;
w:tw,&lt;br /&gt;
h:th,&lt;br /&gt;
c:&#39;#&#39;+Math.floor(Math.random()*16777215).toString(16),&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
return temp;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function getRandomInt (min, max) {&lt;br /&gt;
return Math.floor(Math.random() * (max - min + 1)) + min;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;
&lt;/div&gt;
</description><link>http://ziadsalloum.blogspot.com/2013/12/html5-game-2-tank-battle.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMXo01aInuNTntTX_YjKB7ZH_CxXQyxsdWOibxQAaClmAzXc0Sg5wQyRN-mKchwbaoL0qJOOR1Oqq_0OmokYs-xdFcdpuSzmYF_QDmbQONc6U0YxllgmZEe94oi6xBp5ILJINeul3WlA/s72-c/t2_1.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-444030935837428932</guid><pubDate>Fri, 06 Dec 2013 20:25:00 +0000</pubDate><atom:updated>2014-01-06T21:21:36.028+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Battle</category><category domain="http://www.blogger.com/atom/ns#">Field</category><category domain="http://www.blogger.com/atom/ns#">Game</category><category domain="http://www.blogger.com/atom/ns#">Game Dev</category><category domain="http://www.blogger.com/atom/ns#">HTML5</category><category domain="http://www.blogger.com/atom/ns#">Javascript</category><category domain="http://www.blogger.com/atom/ns#">Tank</category><title>HTML5 Game #1: First person vehicle  in 2D</title><description>&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
I am by no mean a game developer, however recently I have been tinkering with HTML5 2D graphics.I encountered a challenging problem when writing a piece of code for simulating a vehicle navigating through out a map.&lt;br /&gt;
&lt;br /&gt;
The main idea is that the vehicle is fixed at the center of the map and the map objects move and rotate around it as the vehicle moves around. &lt;br /&gt;
Actually the concept is quite simple. When a person drives the vehicle he has the impression that objects (trees, houses, etc..) are moving.&lt;br /&gt;
&lt;br /&gt;
Logically speaking the problem is quite easy, however the implementation is rather tricky. The issue stems from the fact that raw 2D engines APIs are not very flexible.PS the concept is the same disregarding the 2D technology you are using (JavaScript, c#, Java...)&lt;br /&gt;
&lt;br /&gt;
So let&#39;s now put some hypothesis before we start.We have a &lt;b&gt;fixed vehicle&lt;/b&gt; positioned at the center of the map having only &lt;b&gt;one single direction&lt;/b&gt; which is upward. The vehicle can move forward, backward, and it can also rotate. But since the vehicle is always fixed in position and direction, it is the objects around it that move and rotate.&lt;br /&gt;
&lt;br /&gt;
To solve this problem we will consider two axis systems.&lt;br /&gt;
1- the first one we call &quot;fixed system&quot;, and is defined by the origin at the upper left corner with x-axis goes to the left, and the y-axis goes down.&lt;br /&gt;
2- the second axis system, which we call &quot;relative system&quot;, has its origin at the center of the map and the axis can rotate in any direction&lt;br /&gt;
&lt;br /&gt;
The fixed system is used to draw the fixed vehicle, while the relative system is used to draw the moving objects around the vehicle.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4W18HeJY5CF2jqUZnl6tblJC7s8lEGJTg1dA3b5mtOvMkvQ6imUx2kfgNab8L12tuyxlFP61d7teZ0mmAynFq4F9e21_tV7ftnCK_QXdDpWWItkyJpDsyXhv-hVBuoaLJEiktyTVILk/s1600/blog_game_01.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4W18HeJY5CF2jqUZnl6tblJC7s8lEGJTg1dA3b5mtOvMkvQ6imUx2kfgNab8L12tuyxlFP61d7teZ0mmAynFq4F9e21_tV7ftnCK_QXdDpWWItkyJpDsyXhv-hVBuoaLJEiktyTVILk/s320/blog_game_01.png&quot; height=&quot;259&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
When the vehicle turns what actually happens is that the relative axis system that turns.&lt;br /&gt;
As you can see in the image below, the vehicle is still fixed but the circle that was on the left side came into the vehicle vision field.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOd9dV_M1roW_0zsFU6htggrmQJz3rnTxVl9yDJizkEXSmxKJlzfD1L53dh0PaONIASDrZoxMPtupJY3pHPUGxesXZw46YGiwMi0itUrAOb5m-mAw1zYvAERXts_dUhRIobvuYJgGb6NA/s1600/blog_game_02.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOd9dV_M1roW_0zsFU6htggrmQJz3rnTxVl9yDJizkEXSmxKJlzfD1L53dh0PaONIASDrZoxMPtupJY3pHPUGxesXZw46YGiwMi0itUrAOb5m-mAw1zYvAERXts_dUhRIobvuYJgGb6NA/s320/blog_game_02.png&quot; height=&quot;224&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
Now when the vehicle move backward or forward the circle gets closer or farther.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgheSGs_4E7Cs1JWLrVvZM4mUC93jRBWO9XbRrFsezuknZQ7ydbKI_wkyhqJ_fclrbBaoNp0Q4k10SlugU6m3xGy1YNNEbOw_vxAKXgZvRqdQpDkGebNGqs_1WJuOSmYZiyKjG3XuVIYcA/s1600/blog_game_03.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgheSGs_4E7Cs1JWLrVvZM4mUC93jRBWO9XbRrFsezuknZQ7ydbKI_wkyhqJ_fclrbBaoNp0Q4k10SlugU6m3xGy1YNNEbOw_vxAKXgZvRqdQpDkGebNGqs_1WJuOSmYZiyKjG3XuVIYcA/s320/blog_game_03.png&quot; height=&quot;224&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
So now what is done practically is that you tell the graphics engine to draw the vehicle at the center of the map (or canvas), then you translate the axis system to the center, rotate them then draw the circle. All of this is done via API calls. No tough calculations are done on your side.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;
Here is the 1st example:&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;!-- **************************************** EXAMPLE 1 ****************************************************** --&gt; &lt;canvas height=&quot;150&quot; id=&quot;myCanvas1&quot; style=&quot;border: 1px solid #d3d3d3;&quot; width=&quot;300&quot;&gt; Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt; &lt;br /&gt;
&lt;input id=&quot;btnForward&quot; onclick=&quot;drawBG(0, -5)&quot; type=&quot;button&quot; value=&quot;forward&quot; /&gt; &lt;input id=&quot;btnBack&quot; onclick=&quot;drawBG(0, 5)&quot; type=&quot;button&quot; value=&quot;backward&quot; /&gt; &lt;br /&gt;
&lt;input id=&quot;btnLeft&quot; onclick=&quot;drawBG(5, 0)&quot; type=&quot;button&quot; value=&quot;left&quot; /&gt; &lt;input id=&quot;btnRight&quot; onclick=&quot;drawBG(-5, 0)&quot; type=&quot;button&quot; value=&quot;right&quot; /&gt;  &lt;br /&gt;
&lt;script&gt;
var c=document.getElementById(&quot;myCanvas1&quot;);
var ctx=c.getContext(&quot;2d&quot;);
var a = 0;
var x0 = 150;
var y0 = 75;
var delta= 0;
var PI2 = Math.PI/2;

var t1x = 100 - x0 ;
var t1y = 5 - y0 ;
var t2x = 135 - x0 ;
var t2y =  60- y0 ;

drawBG(0, 0);

function drawBG(dAngle, d){
a = (a + dAngle) % 360;
var rad = a*Math.PI/180;

delta = d;
ctx.fillStyle = &#39;#ffffff&#39;;
ctx.fillRect(0, 0, 300, 150);
ctx.save();
ctx.translate(x0, y0);
ctx.rotate(rad);



ctx.fillStyle = &#39;#0000ff&#39;;

ctx.fillRect(t1x, t1y ,100,10);
ctx.fillRect(t2x , t2y ,30,30);
t1y += -delta;
t2y += -delta;
ctx.restore();

ctx.save();
ctx.fillStyle = &#39;#ff0000&#39;;
ctx.fillRect(x0 - 5, y0 - 5,10, 10);
ctx.fillRect(x0 - 2, y0 - 10,4, 10);
ctx.restore();


}

&lt;/script&gt; &lt;!-- **************************************** END OF EXAMPLE 1 ****************************************************** --&gt;  In this example you can press the buttons forward and backward to move and the button left and right to rotate. You might be quite happy with that, but there is a glitch!&lt;br /&gt;
Try rotate the vehicle 90degrees then go forward!&lt;br /&gt;
Surprise! You notice that the vehicle seems to go horizontally rather than vertically. For sure you don&#39;t want your vehicle to go on the left or right when you meant to go forward.&lt;br /&gt;
&lt;br /&gt;
So what happened behind the scenes?&lt;br /&gt;
It all lies in the relative axis system that has been rotated. The picture below depicts the concept.&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cIC_Cg2v6Lc2Mjg53mXk5Kbx2YCTDDFB34bb7OIGSgCR6MQSzcR1EwMZRBPc8eqrW6pnfkuWPowy4IcsTAQN87VcJE433lFc551d8znNJrxaa4mtkSdnvcVRV1LR_-JbKuWooYOXP1A/s1600/blog_game_04.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cIC_Cg2v6Lc2Mjg53mXk5Kbx2YCTDDFB34bb7OIGSgCR6MQSzcR1EwMZRBPc8eqrW6pnfkuWPowy4IcsTAQN87VcJE433lFc551d8znNJrxaa4mtkSdnvcVRV1LR_-JbKuWooYOXP1A/s320/blog_game_04.png&quot; height=&quot;224&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
Moving forward as seen in the picture happens in the relative axis system, which has been rotated and as you can see its axis directions have changed. So a simple translation of objects won&#39;t &amp;nbsp;give the correct result because the translation occur in the relative system and not the fixed one.&lt;br /&gt;
In other words, if you rotate the relative axis 90 degrees the x-axis becomes vertical and the y-axis becomes horizontal, &amp;nbsp;so moving along the y-axis (which is the forward direction) does not go vertically but horizontally which gives the impression that the vehicle is going to its side!&lt;br /&gt;
&lt;br /&gt;
To solve this problem we need to understand that moving vertically in the fixed system means that we need to adjust the vertical vector to the relative system. This can be done by taking the rotation that occurred to the system into consideration.&lt;br /&gt;
Moving &lt;i&gt;dy&lt;/i&gt; pixels in the fixed system means that in the relative system we have moved as follows&lt;br /&gt;
&lt;i&gt;rdx = dy * cos(Π/2 - Θ);&lt;/i&gt; along the relative x-axis&lt;br /&gt;
&lt;i&gt;rdy = dy * sin(Π/2 - Θ);&lt;/i&gt; along the relative y-axis&lt;br /&gt;
where&amp;nbsp;Θ is the rotation angle of the relative system.&lt;br /&gt;
Now having the coordinates in the relative system we can translate any object in the that system via a simple operation:&lt;br /&gt;
&lt;i&gt;Xobj&amp;nbsp;+= - rdx;&lt;/i&gt;&lt;br /&gt;
&lt;i&gt;Yobj&amp;nbsp;+= - dy;&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
Lets see how this is concertized in reality&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;!-- ****************************************  EXAMPLE 2 ****************************************************** --&gt; &lt;canvas height=&quot;150&quot; id=&quot;myCanvas2&quot; style=&quot;border: 1px solid #d3d3d3;&quot; width=&quot;300&quot;&gt; Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt; &lt;br /&gt;
&lt;input id=&quot;btnForward2&quot; onclick=&quot;_drawBG(0, -5)&quot; type=&quot;button&quot; value=&quot;forward&quot; /&gt; &lt;input id=&quot;btnBack2&quot; onclick=&quot;_drawBG(0, 5)&quot; type=&quot;button&quot; value=&quot;backward&quot; /&gt; &lt;br /&gt;
&lt;input id=&quot;btnLeft2&quot; onclick=&quot;_drawBG(5, 0)&quot; type=&quot;button&quot; value=&quot;left&quot; /&gt; &lt;input id=&quot;btnRight2&quot; onclick=&quot;_drawBG(-5, 0)&quot; type=&quot;button&quot; value=&quot;right&quot; /&gt;  &lt;br /&gt;
&lt;script&gt;
var _c=document.getElementById(&quot;myCanvas2&quot;);
var _ctx=_c.getContext(&quot;2d&quot;);
var _a = 0;
var _x0 = 150;
var _y0 = 75;
var _delta= 0;
var _PI2 = Math.PI/2;

var _t1x = 100 - _x0 ;
var _t1y = 5 - _y0 ;
var _t2x = 135 - _x0 ;
var _t2y =  60- _y0 ;

_drawBG(0, 0);

function _drawBG(dAngle, d){
_a = (_a + dAngle) % 360;
var rad = _a*Math.PI/180;

_delta = d;
rotdy = Math.round(_delta * Math.sin(_PI2-rad));
rotdx = Math.round(_delta * Math.cos(_PI2 - rad));

_ctx.fillStyle = &#39;#ffffff&#39;;
_ctx.fillRect(0, 0, 300, 150);
_ctx.save();
_ctx.translate(_x0, _y0);
_ctx.rotate(rad);

_ctx.fillStyle = &#39;#0000ff&#39;;

_ctx.fillRect(_t1x, _t1y ,100,10);
_ctx.fillRect(_t2x , _t2y ,30,30);
_t1x += -rotdx;
_t1y += -rotdy;
_t2x += -rotdx;
_t2y += -rotdy;
_ctx.restore();

_ctx.save();
_ctx.fillStyle = &#39;#ff0000&#39;;
_ctx.fillRect(_x0 - 5, _y0 - 5,10, 10);
_ctx.fillRect(_x0 - 2, _y0 - 10,4, 10);
_ctx.restore();


}

&lt;/script&gt; &lt;!-- **************************************** END OF EXAMPLE  ****************************************************** --&gt;              &lt;br /&gt;
&lt;br /&gt;
Hope this was useful to anyone who is facing a similar problem.&lt;br /&gt;
The finish, I have included the code below.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div style=&quot;background-color: #cccccc;&quot;&gt;
&amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&quot;myCanvas2&quot; width=&quot;300&quot; height=&quot;150&quot; style=&quot;border:1px solid #d3d3d3;&quot;&amp;gt;&lt;br /&gt;
Your browser does not support the HTML5 canvas tag.&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
&amp;lt;input type=&quot;button&quot; id=&quot;btnForward2&quot; value=&quot;forward&quot; onclick=&quot;drawAll(0, -5)&quot;/&amp;gt;&lt;br /&gt;
&amp;lt;input type=&quot;button&quot; id=&quot;btnBack2&quot; value=&quot;backward&quot; onclick=&quot;drawAll(0, 5)&quot;/&amp;gt;&lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
&amp;lt;input type=&quot;button&quot; id=&quot;btnLeft2&quot; value=&quot;left&quot; onclick=&quot;drawAll(5, 0)&quot;/&amp;gt;&lt;br /&gt;
&amp;lt;input type=&quot;button&quot; id=&quot;btnRight2&quot; value=&quot;right&quot; onclick=&quot;drawAll(-5, 0)&quot;/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
var canvas=document.getElementById(&quot;myCanvas2&quot;);&lt;br /&gt;
var ctx=canvas.getContext(&quot;2d&quot;);&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// the rotation angle by which the relative system will rotate&lt;/span&gt;&lt;br /&gt;
var rotAngle = 0;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// coordinates of the center of the map&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// they are also those of the vehicle since it does not physically move on the map.&lt;/span&gt;&lt;br /&gt;
var centerX = 150;&lt;br /&gt;
var centerY = 75;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// this is the PI/2 which is 90 in radians&lt;/span&gt;&lt;br /&gt;
var PIover2 = Math.PI/2;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// coordinates of the objects in the relative system&lt;/span&gt;&lt;br /&gt;
var obj1X = 100 - centerX ;&lt;br /&gt;
var obj1Y = 5 - centerY ;&lt;br /&gt;
var obj2X = 135 - centerX ;&lt;br /&gt;
var obj2Y =  60- centerY ;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// draw everything at start with no translation nor rotation&lt;/span&gt;&lt;br /&gt;
drawAll(0, 0);&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// the drawAll function draws all the map and its objects&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// parameters:&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// deltaAngle = is the angle by which the vehicle has turned compared to the previous time&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// deltaForward = is the number of pixels the vehicle has moved forward since the last time&lt;/span&gt;&lt;br /&gt;
function drawAll(deltaAngle,deltaForward){&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// compute the total rotation angle of the vehicle in degrees and radians&lt;/span&gt;&lt;br /&gt;
rotAngle = (rotAngle + deltaAngle) % 360;&lt;br /&gt;
var rad = rotAngle*Math.PI/180;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// compute the forward vector coordinates in the relative system&lt;/span&gt;&lt;br /&gt;
var rotdy = Math.round(deltaForward * Math.sin(PIover2-rad));&lt;br /&gt;
var rotdx = Math.round(deltaForward * Math.cos(PIover2 - rad));&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// clear the map&lt;/span&gt;&lt;br /&gt;
ctx.fillStyle = &#39;#ffffff&#39;;&lt;br /&gt;
ctx.fillRect(0, 0, 300, 150);&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// save the context in order to start the transformation&lt;/span&gt;&lt;br /&gt;
ctx.save();&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// move the coordinates system to the center (this is the relative system)&lt;/span&gt;&lt;br /&gt;
ctx.translate(centerX, centerY);&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// apply the rotation to the relative system&lt;/span&gt;&lt;br /&gt;
ctx.rotate(rad);&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// make the necessary translation in the relative system&lt;/span&gt;&lt;br /&gt;
obj1X += -rotdx;&lt;br /&gt;
obj1Y += -rotdy;&lt;br /&gt;
obj2X += -rotdx;&lt;br /&gt;
obj2Y += -rotdy;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// draw the objects on the map in the relative system&lt;/span&gt;&lt;br /&gt;
ctx.fillStyle = &#39;#0000ff&#39;;&lt;br /&gt;
ctx.fillRect(obj1X, obj1Y ,100,10);&lt;br /&gt;
ctx.fillRect(obj2X , obj2Y ,30,30);&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// restore the previous context (return to the fixed system)&lt;/span&gt;&lt;br /&gt;
ctx.restore();&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #6aa84f;&quot;&gt;// draw the vehicle at the center of the map using the fixed system&lt;/span&gt;&lt;br /&gt;
ctx.fillStyle = &#39;#ff0000&#39;;&lt;br /&gt;
ctx.fillRect(centerX - 5, centerY - 5,10, 10);&lt;br /&gt;
ctx.fillRect(centerX - 2, centerY - 10,4, 10);&lt;br /&gt;
&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;/div&gt;
</description><link>http://ziadsalloum.blogspot.com/2013/12/game-first-person-vehicle-in-2d.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4W18HeJY5CF2jqUZnl6tblJC7s8lEGJTg1dA3b5mtOvMkvQ6imUx2kfgNab8L12tuyxlFP61d7teZ0mmAynFq4F9e21_tV7ftnCK_QXdDpWWItkyJpDsyXhv-hVBuoaLJEiktyTVILk/s72-c/blog_game_01.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-346805737424995900</guid><pubDate>Tue, 23 Nov 2010 00:19:00 +0000</pubDate><atom:updated>2010-12-02T16:10:30.924+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Google Chrome Threading Model</category><category domain="http://www.blogger.com/atom/ns#">MessageLoop</category><category domain="http://www.blogger.com/atom/ns#">MessagePump</category><category domain="http://www.blogger.com/atom/ns#">Tasks</category><category domain="http://www.blogger.com/atom/ns#">Thread</category><title>Demystifying Google Chrome Threading Model</title><description>This post is all about technical stuff that might interest developers who are looking to enhance their thread programming skills.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;May be the best way to learn is to see what others had already made in terms of proven concept. What better can this be more than learning how Google did it in its Chrome browser?&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;Google threading model consists of three components:&lt;br /&gt;- &lt;em&gt;Thread&lt;/em&gt; class that encapsulates the operating system threads. It is a class that abstracts Chrome browser from the operating system details. So whether it Windows, Linux or others Chrome code deals only with the Thread class.&lt;br /&gt;- &lt;em&gt;MessageLoop&lt;/em&gt; class contains queues for receiving and handling tasks. This is the way to communicate with the thread. Each Thread class contains one message loop. MessageLoop is subclassed to handle tasks in a specialized manner.&lt;br /&gt;- &lt;em&gt;MessagePump&lt;/em&gt; class, could be better named as orchestrator, controls the job of the MessageLoop. MessagePump comes with different flavors, depending on the mission it is designed for.&lt;br /&gt;&lt;br /&gt;So a Thread object owns a MessageLoop object which in trun owns a MessagePump object. When this system runs it goes like the following:&lt;br /&gt;After the tread is initialized and started, it calls its Run() method which subsequently calls the run method of the MessageLoop object which in turn calls the run method of the MessagePump.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCD0cm0cGIlCsLhZiz9rN5hO6UR5MByEeSrXQt6HBanJOIHXrNYkSx1Lgp_ZsoCwmbdZuPmG8F5I54eGoajE0RCdZL_yb97ygCt81XPV9j4FvKiiSIW8fNCIQjt_62pDRrynsmQI4wnE/s1600/gglthrdmodel.png&quot;&gt;&lt;img style=&quot;text-align: center; margin: 0px auto 10px; width: 400px; display: block; height: 223px;&quot; id=&quot;BLOGGER_PHOTO_ID_5542534565772817634&quot; alt=&quot;&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCD0cm0cGIlCsLhZiz9rN5hO6UR5MByEeSrXQt6HBanJOIHXrNYkSx1Lgp_ZsoCwmbdZuPmG8F5I54eGoajE0RCdZL_yb97ygCt81XPV9j4FvKiiSIW8fNCIQjt_62pDRrynsmQI4wnE/s400/gglthrdmodel.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;MessagePump &lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;The default behaviour of a MessagePump is an endless loop that passes through the following steps:&lt;br /&gt;- tells the message loop to execute the pending tasks&lt;br /&gt;- checks if a quit order has been issued, if this is the case quits otherwise continue&lt;br /&gt;- tells the message loop to execute delayed tasks&lt;br /&gt;- checks if a quit order has been issued, if this is the case quits otherwise continue&lt;br /&gt;- tells the message loop to execute any idle job&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;MessageLoop&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;The MessageLoop has four queues to manage tasks. The incoming-queue that stocks any new task submitted to the thread, a work-queue that contains the tasks to be executed and a delayed-work-queue that contains tasks that should be executed sometimes in the future.&lt;br /&gt;Finally the fourth queue is deferred-non-nestable-work-queue which has to do with reentrancy and will be discussed later.&lt;br /&gt;All queues work in FIFO mode.&lt;br /&gt;&lt;br /&gt;When a task is submitted to the Thread, it is inserted in the incoming-queue. The MessagePump tells the message loop to execute pending tasks, the MessageLoop checks whether the work-queue contains tasks. If it does not, all the tasks in the incoming-queue are transferred to the work-queue. If the work queue already contains tasks, the execution continues normally.&lt;br /&gt;The MessageLoop pulls a task from the work-queue and verifies if it should be executed at once. If the task is delayed, meaning should be executed in the future, it is inserted into delayed-work-queue, otherwise it is executed right away.&lt;br /&gt;Observers are components that might be interested in knowing what tasks are being executed in the MessageLoop. For this reason they register their intention with the message loop. The message loop notifies all observers before and after the execution of each task.&lt;br /&gt;&lt;br /&gt;The good question to be asked in here is why to have the incoming-queue and the work-queue? Why not only have the incoming-queue alone! Actually it is all about performance. Each time a incoming-queue is accessed for input or output a lock is acquired to avoid data corruption. So in the aim to reduce the number of locks mainly by the MessageLoop, every once of a while (when the work queue becomes empty) a lock is acquired on the incoming-queue and all its content transferred to the work queue. This is way the income-queue is now available to receive more tasks while the message loop is busy executing those on work-queue.&lt;br /&gt;It is worth noting that this strategy works fine when the number of expected incoming tasks is high. On the other hand if the number of incoming tasks is low there will be no performance gain since MessageLoop will waste time on locking and transferring tasks from the incoming-queue to the work-queue.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;Reentrancy&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;Generally speaking a function is reentrant when it can be called again even when the first call did not finish yet. An example of reentrancy is recursive function.&lt;br /&gt;&lt;br /&gt;MessageLoop is reentrant, meaning that when it is executing a task, its Run() method can be called to execute subsequent tasks even when the first one was not over yet. In this case we name the first call the outer MessageLoop and the second call to Run() the inner MessageLoop (Important: we are talking about the same MessageLoop instance. The outer and the inner qualify the first and second call to its Run() method).&lt;br /&gt;&lt;br /&gt;Consider an example where a task opens a modal dialog box. This dialog box must be able to respond to user’s input so the message loop has to keep executing tasks! However since it did not return from the task that created the modal dialog box, it can’t proceed with the other tasks (this is the outer MessageLoop). To make this possible the modal dialog box calls the Run() method of the MessageLoop in the following way (this is the inner MessageLoop):&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;em&gt;&lt;span style=&quot;color: rgb(102, 102, 102);font-size:85%;&quot; &gt;bool old_state = MessageLoop::current()-&gt;NestableTasksAllowed();&lt;br /&gt;MessageLoop::current()-&gt;SetNestableTasksAllowed(true);&lt;br /&gt;MessageLoop::current()-&gt;Run();&lt;br /&gt;// Restore task state.&lt;br /&gt;MessageLoop::current()-&gt;SetNestableTasksAllowed(old_state);&lt;br /&gt;&lt;/span&gt;&lt;/em&gt;&lt;br /&gt;This ensures that the modal dialog box is responsive and the tasks are being handled by the same MessageLoop.&lt;br /&gt;&lt;br /&gt;Tasks that run in an inner MessageLoop are called nestable tasks and have their nestable property set to true.&lt;br /&gt;However if a task is not nestable this means it must be execute after the first task completes. So to make this possible, the inner MessageLoop won&#39;t execute the task but adds it to deferred-non-nestable-work-queue. When all inner message loops finish their job and are released the outer MessageLoop will be executing tasks that were pushed to deferred-non-nestable-work-queue.&lt;br /&gt;&lt;br /&gt;This was a brief simplified overview of how threading in Google Chrome browser works. It constitutes a good start for those who scratch their heads to find a solid and proven concept to implement threading.</description><link>http://ziadsalloum.blogspot.com/2010/11/demystifying-google-chrome-threading.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCD0cm0cGIlCsLhZiz9rN5hO6UR5MByEeSrXQt6HBanJOIHXrNYkSx1Lgp_ZsoCwmbdZuPmG8F5I54eGoajE0RCdZL_yb97ygCt81XPV9j4FvKiiSIW8fNCIQjt_62pDRrynsmQI4wnE/s72-c/gglthrdmodel.png" height="72" width="72"/><thr:total>1</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-4893721275753140416</guid><pubDate>Fri, 19 Nov 2010 23:20:00 +0000</pubDate><atom:updated>2010-11-20T00:22:29.024+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">big projects</category><category domain="http://www.blogger.com/atom/ns#">open source project</category><category domain="http://www.blogger.com/atom/ns#">world class developer</category><title>How to become world class developer</title><description>&lt;div align=&quot;justify&quot;&gt;Every developer dreams of reaching a world class rank. But reaching this rank is not given to everyone unless he/she is working in a big company, and on a big project. Working on small projects limits the horizons of the thoughts and hides much of the big projects complexities and approaches to the solutions.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;While books are necessary to learn, they stop short of giving real experience. Books are good for getting started, learning the methodology, the object model and the APIs. No doubt this is a necessary package however it is necessary but not sufficient. No book is able to explain the details of a project and the pros and cons of every technical decision made in the course of the development.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;The picture looks somehow dim for those who are not lucky enough to work in giant companies and produce softwares that are used by millions of people.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;This is not completely true. There is a way of becoming top notch developer even while working on small projects. The solution exists but it is not free! It costs time and efforts. It is only for people who are passionate about developing.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;The large majority of commercial softwares have their code hidden and restricted to the teams that are working on them. But there are also very important open source projects that are accessible to everyone and are used all around the world. These softwares are written by highly skilled engineers either part of their daytime job or on their free time. In both ways, these projects are “gold mines” for developers who are aiming to acquire new skills.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;So the solution is to find the right open source project, one that is interesting to the person wanting to learn. Then, try to build the project and start learning the code. At first it looks like a daunting task. It might fail few times, but success comes with persistency and perseverance.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;Every open source project has forums and discussion groups, but almost all of them lack complete and clean documentation. So a good approach would be to grasp the overall architecture of the project and all the available documentation that goes around. Then start looking in the code for the following points:&lt;br /&gt;- Coding style: it is important to understand how the lines of codes are written because it helps improve readability.&lt;br /&gt;- Tips and tricks: every module or sub module of the project brings a solution to a problem. Some are straight forward; others are trickier and utilize an indirect approach. It is crucial to learn these tricks in order to use them when facing similar problems.&lt;br /&gt;- Global architecture: while tips and tricks are used on a granular level, the global architecture gives the big picture and discusses&lt;br /&gt;the decisions made to solve key problems. It is worth mentioning that there is no single ideal solution, but a solution that fits certain priorities established by the project authors.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;After understanding the code or at least part of it, it is important to get involved with the community that is working directly or indirectly on this project. For this reason it is imperative to visit the project forums on regular basis and actively contribute to the discussions. This will increase the understanding of the project and the reasons why some decisions are being taken.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;Another major point is to discover bugs and propose solution for them. Many open source projects have policies to allow people to contribute to the project that has a mandatory path that goes through discovering and solving bugs. Once a certain number of bugs and fixes are reached, the person is allowed to become a committer which means contributing to the development of the project. When such a stage is reached, congratulations! You are now a world class developer. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/11/how-to-become-world-class-developer.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-7946766149506399286</guid><pubDate>Sun, 10 Oct 2010 08:44:00 +0000</pubDate><atom:updated>2010-10-10T11:03:24.115+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">show includes</category><category domain="http://www.blogger.com/atom/ns#">VC++</category><title>VC++ Tip: Show Includes</title><description>&lt;div&gt;The following is a useful Visual C++ tip that solves a frequent problem any VC++ developer might face.&lt;br /&gt;There are time in which you get errors from files you have never created, or included into your codes.&lt;br /&gt;This can be very frustrating and hard to debug especially if that file is burried deep into #include tree.&lt;br /&gt;&lt;br /&gt;Consider the following example where you get an error such as&lt;br /&gt;c:\program files\microsoft visual studio 8\vc\include\math.h(486): error C2084: function &#39;long abs(long)&#39; already has a body&lt;br /&gt;&lt;br /&gt;You might be scratching your head to figure out what does this mean knowing that you have never included &quot;math.h&quot; in your code.&lt;br /&gt;One way of proceeding is to go open each nested #include file to determine where this file is include. However you will soon discover&lt;br /&gt;that you have entered a complex labyrinth in which the way out is so difficult to find.&lt;br /&gt;&lt;br /&gt;Another easier approach is tell the compiler to show the list of all included files used in the comilation:&lt;br /&gt;1.Open the project&#39;s Property Pages dialog box.&lt;br /&gt;2.Click the C/C++ folder.&lt;br /&gt;3.Click the Advanced property page.&lt;br /&gt;4.Modify the Show Includes property to &#39;yes&#39;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;br /&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieX9uan_ign2cqGXV3dLkjB-1a4YVfxt90IUJ3oTFTzFcZWCkrldXow2iBZs_rwJA02421hikPjpfIJI-1zEy0ph-bvdZRaAPWsBDmCsr8Wr73n-9-WWd91fmMuzsLNtnPJEiFpvORZ5s/s1600/vcppshowinclude.png&quot;&gt;&lt;img style=&quot;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 279px;&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieX9uan_ign2cqGXV3dLkjB-1a4YVfxt90IUJ3oTFTzFcZWCkrldXow2iBZs_rwJA02421hikPjpfIJI-1zEy0ph-bvdZRaAPWsBDmCsr8Wr73n-9-WWd91fmMuzsLNtnPJEiFpvORZ5s/s400/vcppshowinclude.png&quot; border=&quot;0&quot; alt=&quot;&quot;id=&quot;BLOGGER_PHOTO_ID_5526337356331444514&quot; /&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;br /&gt;&lt;br /&gt;On compilation you get a list like the following:&lt;br /&gt;&lt;span style=&quot;color:#999999;&quot;&gt;&lt;span style=&quot;font-size:85%;&quot;&gt;&lt;span style=&quot;color:#666666;&quot;&gt;:c:\globalProjects\localProjects\srcCtrl\srv\src\myproj\util\net\ServerBase.h&lt;br /&gt;&lt;/span&gt;: c:\globalProjects\localProjects\srcCtrl\srv\src\myprojTools\myprojUtils.h&lt;br /&gt;: c:\globalProjects\localProjects\srcCtrl\srv\src\myproj\util\net\NetworkConnection.h&lt;br /&gt;: :c:\globalProjects\localProjects\srcCtrl\srv\src\myproj\util\Obj.h&lt;br /&gt;: : C:\Dev\Dependencies\thrdParty\extension\thrdParty\stlport\stl\_threads.h&lt;br /&gt;: : :C:\Dev\Dependencies\thrdParty\extension\thrdParty\stlport\stl\_cstddef.h&lt;br /&gt;: : : C:\Program Files\Microsoft Visual Studio 8\VC\include\stddef.h&lt;br /&gt;: : : :C:\Program Files\Microsoft Visual Studio 8\VC\include\crtdefs.h&lt;br /&gt;: : : : C:\Program Files\Microsoft Visual Studio 8\VC\include\sal.h&lt;br /&gt;: : : : C:\Program Files\Microsoft Visual Studio 8\VC\include\crtassem.h&lt;br /&gt;: : : : C:\Program Files\Microsoft Visual Studio 8\VC\include\vadefs.h&lt;br /&gt;: : :C:\globalProjects\thrdParty\extension\stlport\stl/_cstdlib.h&lt;br /&gt;: : : C:\Program Files\Microsoft Visual Studio 8\VC\include\stdlib.h&lt;br /&gt;: : : :C:\Program Files\Microsoft Visual Studio 8\VC\include\crtdefs.h&lt;br /&gt;: : : :C:\Program Files\Microsoft Visual Studio 8\VC\include\limits.h&lt;br /&gt;: : : : C:\Program Files\Microsoft Visual Studio 8\VC\include\crtdefs.h&lt;br /&gt;: : : C:\globalProjects\thrdParty\extension\stlport\stl\_cmath.h&lt;br /&gt;: : : :C:\Program Files\Microsoft Visual Studio 8\VC\include\math.h&lt;br /&gt;: : : : C:\Program Files\Microsoft Visual Studio 8\VC\include\crtdefs.h&lt;br /&gt;&lt;strong&gt;&lt;span style=&quot;color:#ff0000;&quot;&gt;&gt;c:\program files\microsoft visual studio 8\vc\include\math.h(486) : error C2084: function &#39;long abs(long)&#39; already has a body&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color:#ff0000;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;In here you will find the whole tree of #include before the error. Notice how deep math.h is include far below ServerBase.h. &lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;br /&gt;It is extremely difficult to detect its presence without the use of this option. &lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/10/vc-show-includes.html</link><author>noreply@blogger.com (Anonymous)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieX9uan_ign2cqGXV3dLkjB-1a4YVfxt90IUJ3oTFTzFcZWCkrldXow2iBZs_rwJA02421hikPjpfIJI-1zEy0ph-bvdZRaAPWsBDmCsr8Wr73n-9-WWd91fmMuzsLNtnPJEiFpvORZ5s/s72-c/vcppshowinclude.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-2338106364741453443</guid><pubDate>Sun, 03 Oct 2010 18:06:00 +0000</pubDate><atom:updated>2010-10-03T20:09:13.040+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">blog</category><category domain="http://www.blogger.com/atom/ns#">chatting</category><category domain="http://www.blogger.com/atom/ns#">forum</category><category domain="http://www.blogger.com/atom/ns#">quality content</category><category domain="http://www.blogger.com/atom/ns#">questions answers</category><category domain="http://www.blogger.com/atom/ns#">video</category><title>Quality Content Comparative Analysis</title><description>&lt;div align=&quot;justify&quot;&gt;There are plenty of ways to create content on the internet. Blogs, articles, videos, forums, and Q&amp;amp;A etc...&lt;br /&gt;There is also on unexploited potential way that can be used to create quality content which is chatting.&lt;br /&gt;Certainly there are pros and cons for each way. Below is a comparative analysis for each method:&lt;br /&gt;&lt;br /&gt;Articles and blogs are maybe the most well known methods their advantage is that they are or might be complete and detailed with complete exposure of the domain or point of view. On the other side they are the less interactive. Despite that most of them have commenting features; it is rare to see true interaction between authors and readers.&lt;br /&gt;&lt;br /&gt;Video content are now notorious with Youtube especially that there are plenty of people who are trying to provide quality videos. Consuming this type of content is by far easier than reading especially when presented in an appropriate manner. The problem of video content is mostly in availability of the topics. It is still far behind written text. Interactivity is not better than blogs, it consists only of viewers comments.&lt;br /&gt;&lt;br /&gt;Forums and Q&amp;amp;A on other hand have better interactivity but less complete content. They are usually centered on a post or a question that people discuss and exchange opinion. The content is not really a detailed info rather than an exposure of a problem that the community is asked to contribute to the solution. Although the interactivity is higher however it is not in real-time. So the interest party must have enough patience before succeeding getting the community to be engaged in the solution.&lt;br /&gt;&lt;br /&gt;Chatting has always been the fun thing and to meet other people generally from the opposite sex. However this does not have to be this way. People are usually interested in topics, this clearly seen in the comments on blogs or videos as described earlier. So chatting can be part of the quality content creation if it is presented accordingly. Any event, news or article can trigger a discussion between supporters and opponents. Services like &lt;a href=&quot;http://www.simpleconnexion.com/&quot;&gt;www.SimpleConnexion.com&lt;/a&gt; give people the option to find others who are interested in a particular subject and exchange with them opinion in real time fashion and at the end publish the content of this discussion so that other people benefit from this opinion exchange.&lt;br /&gt;The advantage of this method is that it is real-time; people get replies in a matter of seconds. It is challenging because a person can easily ask his peer to clarify his answer or opinion which means it creates a better understanding. The content of the discussion can be published as just explained.&lt;br /&gt;The difficulty is to really find someone to chat on a specified topic at a particular time. This difficulty will be overcome as more and more people adopt this type of chatting.&lt;br /&gt;&lt;br /&gt;In conclusion diversity of methods leads to richness and creativity as well as provides suitable ways for different people according to their preferences and needs. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/10/quality-content-comparative-analysis.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-9016276833282389901</guid><pubDate>Sun, 26 Sep 2010 16:18:00 +0000</pubDate><atom:updated>2010-09-26T18:21:17.739+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Added Value Chat</category><category domain="http://www.blogger.com/atom/ns#">information chat</category><category domain="http://www.blogger.com/atom/ns#">sharing knowledge</category><title>Added Value Chat</title><description>&lt;div align=&quot;justify&quot;&gt;There is chat for fun and there is chat for the sake of sharing knowledge and information. So far sharing knowledge was restricted to the realm of forums and blogs. Information chat on the other hand exists within enterprises via instant messaging systems (IM).&lt;br /&gt;&lt;br /&gt;In companies colleagues and project members refer to shared documents for references and how-to information. But generally efficient knowledge transfer occurs, most of the time, after talking to other people. The key to such efficiency is the informal way the subject is tackled and the straight approach consisting of a direct question and a direct answer. This is not available with formal documentation because it contains lots of literature to explain the context and the scope of the document before delving into real material. Certainly these are most needed when starting a project. Project members need to know all the factors involved in the project.&lt;br /&gt;&lt;br /&gt;However as the project goes on, questions start to rise from here and there. Sparse questions are met with sparse answers with lots of email exchange or direct discussion. Due to the workload and deadlines the documentations are rarely or never updated to reflect the topics discussed. This results in losing crucial information used on day to day basis.&lt;br /&gt;&lt;br /&gt;One of the possible solutions to this problem is to encourage discussion between team members via chatting system and save those discussions and make them available to others so they can benefit from the information they contain.&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://www.Simpleconnexion.com&quot;&gt;www.Simpleconnexion.com&lt;/a&gt; is a service that pushes forward this concept. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/09/added-value-chat.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-4884333679651700478</guid><pubDate>Fri, 24 Sep 2010 06:40:00 +0000</pubDate><atom:updated>2010-09-24T08:42:25.801+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">added value</category><category domain="http://www.blogger.com/atom/ns#">chat</category><category domain="http://www.blogger.com/atom/ns#">colleagues</category><category domain="http://www.blogger.com/atom/ns#">contacts</category><category domain="http://www.blogger.com/atom/ns#">discussion</category><category domain="http://www.blogger.com/atom/ns#">interview</category><title>Interview Your Contacts</title><description>&lt;div align=&quot;justify&quot;&gt;Whether for professional purposes or for fun any discussion between two people could be viewed as an informal interview in which opinion and/or information is exchanged. Interviews are not only a formal discussion between a journalist and a celebrity; it can also be a chat between two friends, or two colleagues. What matters is the information contained in such interviews and how valuable it is for the public.&lt;br /&gt;&lt;br /&gt;Obviously interviewing has many forms, it can be on TV, in a newspaper or magazine, and it can also be online! With the unprecedented success of the internet and the adoption of the web, there is no reason that interviews can’t be done online.&lt;br /&gt;&lt;br /&gt;Actually, informal interviews have been practiced since the early days of internet through the chatting services. The only difference from the formal ones, other than the style of course, is the persistency of the interview. While the latter are published and made available to virtually anyone to read, the former was mostly confined to the private domain.&lt;br /&gt;&lt;br /&gt;There‘s no doubt that chatting is a form of interview. Even if it does not involve a well-known celebrity or an experienced journalist, nevertheless it still can contain valuable information that could benefit others.&lt;br /&gt;&lt;br /&gt;Consider an example where one is asking his colleague about technical matter related to a certain project. Sometimes this exchange is done via email but there are other times when it is done over a chatting service like MSN. The best thing to do at the end is to publish this discussion that can be also thought as an interview. Even though there are no nationally or internationally known figures involved, however the contributors are valuable to their colleagues and other project members, and their issue they discussed is certainly important to them.&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://www.simpleconnexion.com/&quot;&gt;&lt;strong&gt;www.SimpleConnexion.com&lt;/strong&gt;&lt;/a&gt; concept goes into this direction and tries to promote the concept of publishing added value discussions. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/09/interview-your-contacts.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-2321366735741133410</guid><pubDate>Wed, 22 Sep 2010 22:12:00 +0000</pubDate><atom:updated>2010-09-23T00:27:18.916+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">blog</category><category domain="http://www.blogger.com/atom/ns#">blogging</category><category domain="http://www.blogger.com/atom/ns#">chat</category><category domain="http://www.blogger.com/atom/ns#">chatting</category><category domain="http://www.blogger.com/atom/ns#">SimpleConnexion.com</category><title>Chatting or Blogging</title><description>This might seem odd to compare two distinct activities. One might think like comparing apples to oranges! Although at first this appears to be the case, but when looking closer, some similarities emerge to the surface.&lt;br /&gt;&lt;br /&gt;Blogs (web logs) are usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Most blogs are interactive, allowing visitors to leave comments and even message each other via widgets on the blogs and it is this interactivity that distinguishes them from other static websites.&lt;br /&gt;&lt;br /&gt;On the other hand online chat can refer to any kind of communication over the Internet, but is primarily meant to refer to direct one-on-one chat or text-based group chat , using tools such as instant messengers, Internet Relay Chat, talkers and possibly multiple user dungeons (MUD)s. The expression online chat comes from the word chat which means &quot;informal conversation&quot;.&lt;br /&gt;&lt;br /&gt;So the differences between blogs and chat are persistency and formality. Blogs are persistent meaning they exist on a webpage and they can be accessed any time. They are also formal (at least a good part of them) and they address a whole audience and not a particular person. On the contrary, chat is transient, ephemeral; it does not live beyond the life of a discussion and of course the majority of the chat is informal.&lt;br /&gt;&lt;br /&gt;Although differences seem to weigh considerably, similarities on the other hand exist. Blogging and chatting can both carry information that is valuable to others. Meaning, a person seeking a piece of information or looking to solve a problem, can find it either on a blog or in a chat room. The only concern related to the chat is that the info might have passed or not yet arrived so the timing is critical.&lt;br /&gt;&lt;br /&gt;However, this can be solved by simply saving a discussion and convert it into an informal blog. This method offers good benefits to the reader because he will be seeing an interaction between two people and this means some specific questions and clarifications might be also evoked in the course of the discussion. To the person who is giving this information he is freed of the task of writing formal blog.&lt;br /&gt;&lt;br /&gt;In this context &lt;a href=&quot;http://www.SimpleConnexion.com&quot;&gt;www.SimpleConnexion.com&lt;/a&gt; is looking to promote this concept.</description><link>http://ziadsalloum.blogspot.com/2010/09/chatting-or-blogging.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-4614412509342283145</guid><pubDate>Mon, 30 Aug 2010 19:10:00 +0000</pubDate><atom:updated>2010-08-30T21:13:59.007+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">bill gates</category><category domain="http://www.blogger.com/atom/ns#">education</category><category domain="http://www.blogger.com/atom/ns#">online learning</category><category domain="http://www.blogger.com/atom/ns#">sal khan</category><category domain="http://www.blogger.com/atom/ns#">yotube</category><title>Educational Youtube (part 2)</title><description>Shortly after I have written the blog about Educational Youtube, and what effective role it can play in the future education. I have been introduced to an amazing website that offers free educational courses using videos hosted by Youtube. Did I mention for free? Well it is for FREE.&lt;br /&gt;&lt;br /&gt;This site is done by only one man; he made some 1600 videos separated into three main categories: Math, Science and Others.  He made his videos in such manner that they are short and easy to understand; in another word you get the essential of each course in just 10minutes which is very efficient and straight forward. You don’t have to sit in a class room and listen to a lengthy and boring lecture. All what you have to do is pick a subject from the long list and pay attention to the explanation for few minutes and that’s it. Later on you can return to stay another ten minutes and continue the course.&lt;br /&gt;&lt;br /&gt;But that’s not all! The story does not end here. Sal Khan, the creator of this video library www.KhanAcademy.com got a really unexpected and unusual fan: Bill Gates. According to Fortune when Bill Gates knew about Khan he said “this guy is amazing”.&lt;br /&gt;&lt;br /&gt;He actually is; he might become a leader in innovative education with his stock of videos. He is surely able to reach a large base of potential students and change the way they are learning.&lt;br /&gt;Of course this is also made possible because of the infrastructure laid down by Youtube service.&lt;br /&gt;&lt;br /&gt;However, what is missing in this system as a whole is the interaction between student and teacher which is also a building block to the comprehension. But we are only seeing the beginning of the evolution, the tip of the iceberg. The technology will soon catch up and try to fill the gap.&lt;br /&gt;&lt;br /&gt;Check the following link fo more details about the story of Sal Khan &lt;a href=&quot;http://money.cnn.com/2010/08/23/technology/sal_khan_academy.fortune/index.htm&quot;&gt;http://money.cnn.com/2010/08/23/technology/sal_khan_academy.fortune/index.htm&lt;/a&gt;</description><link>http://ziadsalloum.blogspot.com/2010/08/educational-youtube-part-2.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-6908808483857108061</guid><pubDate>Sun, 29 Aug 2010 20:11:00 +0000</pubDate><atom:updated>2010-08-29T22:12:36.531+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">books</category><category domain="http://www.blogger.com/atom/ns#">courses</category><category domain="http://www.blogger.com/atom/ns#">education</category><category domain="http://www.blogger.com/atom/ns#">learning</category><category domain="http://www.blogger.com/atom/ns#">youtube</category><title>Educational Youtube</title><description>&lt;div align=&quot;justify&quot;&gt;The conventional way to learn new materials is either enroll into a course or read a book. However these are no more the only options that we have nowadays.&lt;br /&gt;&lt;br /&gt;Actually the previous two methods have certainly their advantages such as getting some sort of certification after the completion of the course and this gives you credibility that you really know what you claim to know. As for reading a book it is still a handy and convenient way since you can take it with you while travelling in the train, plane or even on the beach. Note that even with these features books are being challenged by technology with the advent of IPad.&lt;br /&gt;&lt;br /&gt;However, there are disadvantages related to those methods. Course involves displacement to a certain location on a certain date at a certain hour. For working people this is not always easy to do and even when done they might not be in shape to fully assimilate the explanation especially after having a bad day. On the other hand, books also require some energy to read and assimilate. In addition, if the content needs to be practiced there will be switching from reading to practicing and vice-versa.&lt;br /&gt;&lt;br /&gt;Luckily, this seems to be changed by Youtube! Until recently I used Youtube to watch some funny movies. But the other day I had the idea to search for a technology related subject and I was surprised to see tens of videos to that topic.&lt;br /&gt;When running few of them I realized how efficient this method is. The explanations are directly backed by a demonstration, so the viewer won’t lose focus switching from book to computer. When, in doubt or you miss something you can repeat the clip as much as you need. You can pause to have some rest and resume later. In short you have all the advantages that you don’t have when you take a real life course. Plus it is totally FREE.&lt;br /&gt;&lt;br /&gt;This reminds me of the open-source model, where people spend considerable amount of time and efforts to build software only to give it away for free. Same thing seems to happen in here; people are doing a series of learning videos and put them on YouTube for free. Surely they expect to get something in return by becoming well known in the domain they are talking about, but nevertheless the public is profiting from this model to get free learning and educational stuff.&lt;br /&gt;&lt;br /&gt;Could we see in the future students logging to their Youtube class?! Nobody knows for sure, but one thing is certain; technology is reaching every aspect of the human life. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/08/educational-youtube.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-6838639957998182924</guid><pubDate>Sun, 29 Aug 2010 15:32:00 +0000</pubDate><atom:updated>2010-08-29T17:35:03.909+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">chat</category><category domain="http://www.blogger.com/atom/ns#">discussion</category><category domain="http://www.blogger.com/atom/ns#">tweets</category><category domain="http://www.blogger.com/atom/ns#">twitter</category><title>Twitter Source of Discussion</title><description>&lt;div align=&quot;justify&quot;&gt;Beyond any doubt Twitter is the number one service in microblogging. With its 50million tweets a day it sits on top of “traffic chain” (term borrowed from “food chain”) and constitutes an enormous source of information.&lt;br /&gt;&lt;br /&gt;Actually Twitter stream is a mixture of information and opinions, where a measure of the information popularity is possible thanks to the retweeting. However there is a gap in this system! Tweets are not long living. In fact their life expectation does not exceed few seconds. So catching a tweet among 50millions is like searching for a needle in a hay stack.&lt;br /&gt;&lt;br /&gt;Because tweets carry information and information might be useful to different other people, they might use it in different ways according to their needs and objectives.&lt;br /&gt;&lt;br /&gt;One of these objectives is to discuss information contained in the tweets and exchange opinions about them. One method to that is to reply to the original tweet with a comment. The drawback of this method is the lack of interactivity. The source of the tweet might not be available for replying or might be simply uninterested. On the other hand some other people might be happy to discuss it, but the problem is how to find them?&lt;br /&gt;Besides of information a tweet carry an opinion. People interested in some news or information are logically tempted to tweet them. In other words what they do is bind their own preferences within the tweets. These people are more likely ready to talk about their tweets and discuss them.&lt;br /&gt;&lt;br /&gt;Many products and services are trying to benefit from these two features. One of them is &lt;a href=&quot;http://www.simpleconnexion.com&quot;&gt;www.SimpleConnexion.com&lt;/a&gt; that tries to create discussions between people around a certain tweet. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/08/twitter-source-of-discussion.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-1005981492562040408</guid><pubDate>Thu, 26 Aug 2010 19:30:00 +0000</pubDate><atom:updated>2010-08-26T21:31:02.505+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">answers</category><category domain="http://www.blogger.com/atom/ns#">chat</category><category domain="http://www.blogger.com/atom/ns#">discussion</category><category domain="http://www.blogger.com/atom/ns#">questions</category><category domain="http://www.blogger.com/atom/ns#">social networkig</category><title>Q&amp;A websites review</title><description>&lt;div align=&quot;justify&quot;&gt;Social networking ideas are hatching everywhere. Basically there are endless ways to bring people together, the aim is to let people meet, discuss and interact.&lt;br /&gt;&lt;br /&gt;The new trend nowadays is the Questions &amp;amp; Answers websites. People with questions go there ask them and people who have answers, whether right or wrong, reply.&lt;br /&gt;&lt;br /&gt;Forums have been doing that for ages, but with a major difference. Forums are most of the time specialized, so you find IT forums, medical forums, parental forums etc… If you have a question first you need to find the right forum for yourself. Then you have to subscribe, create a thread and post your question. This might seem tedious for those who need a fast answer.&lt;br /&gt;&lt;br /&gt;Questions &amp;amp; Answers websites have another approach to the problem. You go find any of these websites, you still have to subscribe or login using your Facebook account for those who support Facebook Connect. Then you ask your question. The website will take charge of finding people who might answer it. It alleviates the task of finding the right place and the right people.&lt;br /&gt;&lt;br /&gt;Forums are still very efficient when you have a very specific question. For example if you are a developer and looking to solve a problem, it is by far better if you search for it in a specialized forum, because all its members are IT professionals.&lt;br /&gt;&lt;br /&gt;Conversely if you have general question related to an event, celebrity or broad business Q&amp;amp;A sites will be useful for you, because they gather people from different domains and backgrounds.&lt;br /&gt;&lt;br /&gt;Another major benefit of the Q&amp;amp;A is socializing. Because people might have general questions there is a better chance to create a discussion. While specific question means that you are mostly interested in a good answer that solves your problem without having the time to chitchat.&lt;br /&gt;There are many Q&amp;amp;A websites out there but the most known are Quora.com and Vark.com.&lt;br /&gt;&lt;br /&gt;However the drawback that lacks behind is the absence of direct one to one discussion with interesting people. This is where &lt;a href=&quot;http://www.simpleconnexion.com/&quot;&gt;http://www.simpleconnexion.com/&lt;/a&gt; is trying to solve. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/08/q-websites-review.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-9170501777288492117</guid><pubDate>Sat, 17 Jul 2010 00:22:00 +0000</pubDate><atom:updated>2011-07-25T16:19:31.125+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">competition rank</category><category domain="http://www.blogger.com/atom/ns#">consumers need</category><category domain="http://www.blogger.com/atom/ns#">financial data</category><category domain="http://www.blogger.com/atom/ns#">free market study</category><category domain="http://www.blogger.com/atom/ns#">market study</category><category domain="http://www.blogger.com/atom/ns#">startup</category><title>Make Your Own Market Study For Free</title><description>&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;If you are one of these people who are seeking to create a new startup, you might have some ideas that you believe in and want take a new adventure. But before you start you need to tap the ground and discover the readiness of the market. Every project must have a market study to assess its viability. If you have big bucks in your pockets you can delegate this task to a company to do it for you and hand you the result while you are playing golf. However if you are startup creator, the last thing you need to do is to spend money uselessly. Every penny counts for entrepreneurs and their startups.&lt;br /&gt;&lt;br /&gt;Market study is used to determine the consumer interest in your product and to weigh the competition. Based on these results you consider your decision whether to enter the domain or not.&lt;br /&gt;Although there are professional companies that are specialized in making market studies, you can do it by your own using simple tools for free. These tools are:&lt;br /&gt;- &lt;a href=&quot;http://www.google.com/trends&quot;&gt;Google Trend&lt;/a&gt;&lt;br /&gt;- &lt;a href=&quot;http://www.google.com/&quot;&gt;Google Search&lt;/a&gt;&lt;br /&gt;- &lt;a href=&quot;http://www.alexa.com/&quot;&gt;Alexa.com&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;At start you might be interested in getting data about consumers needs. People usually use Google to search for what they are looking for. Luckily Google gives you a way to find out what they are looking for. By going to Google.com/trends you will discover the keywords that people used in their search. Put the keywords related to your new business and check the results. Try several combinations in order to get the best results. For example if you want to give online photography courses you might search for the following “online photography courses” or “photography courses online” (order of the keywords matters). If you are interested in one region of the world you can specify it too. In case the index given by Google Trend is not sufficiently high, you might not have a real market or you might be using the wrong keywords to describe your business or you need to find other ways to get data.&lt;br /&gt;&lt;br /&gt;Once you are satisfied of the keyword results and you think there might be enough demand, what you need to do next is to determine the competition. Use Google search to find sites in your domain using the same keywords you used in Google Trend. Start by checking the commercial links displayed by Google because these companies are being aggressive at the market and you surely need to know what they are offering. Then take most of the results that appear on the first two pages of Google; check them one by one and see how they differ from your ideas and what features they are offering to the users.&lt;br /&gt;&lt;br /&gt;After you have determined the quality of these sites you need to know how popular they are and if you will be able to compete against them. To know that go to Alexa.com and search for each of these websites and check their ranks and the traffic rank history. The current rank tells you how strong in popularity they are. If their rank is below 10 000 that means they are very strong and you might expect a fierce competition. The traffic rank history will give you an idea of how much time they took to reach their current position. This gives you an overview of how hard or easy is the road ahead.&lt;br /&gt;&lt;br /&gt;In some cases you can get additional info about their financial situation such as sales and revenues either directly from their website or by searching for this info on some sites such as Tracked.com, although it is not always guaranteed that you will find useful data.&lt;br /&gt;&lt;br /&gt;Now you have all the information in your hand. Based on these figures you can take a moment to study and evaluate your chances of success and the stiffness of the competition. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/07/make-your-own-market-study-for-free.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-497923083807209878</guid><pubDate>Thu, 15 Jul 2010 23:10:00 +0000</pubDate><atom:updated>2010-07-16T01:12:09.359+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">confidence</category><category domain="http://www.blogger.com/atom/ns#">focus</category><category domain="http://www.blogger.com/atom/ns#">prioritize</category><category domain="http://www.blogger.com/atom/ns#">productivity</category><category domain="http://www.blogger.com/atom/ns#">uptime</category><title>The Uptime Curse</title><description>&lt;div align=&quot;justify&quot;&gt;There are times in which you feel low, depressed and frustrated, and there are other times in which you have high morale, enthusiasm and optimism. While the former feeling is counterproductive and should be treated quickly to overcome it, the latter does not necessarily mean good thing. If not handled smartly it won’t result in boosting productivity as expected.&lt;br /&gt;&lt;br /&gt;As a matter of fact high morale leads to a rise of the self confidence and may lead to overconfidence which might have severe consequences on the ability to take the right decision. When experiencing an uptime it is crucial to keep your feet on the ground and avoid thinking that everything is possible, and can be done disregarding of the required resources and efforts.&lt;br /&gt;&lt;br /&gt;Ignoring this fact might lead you into an endless labyrinth which results into failure to achieve any of the given goals and shorten the way to another state of depression, pessimism and frustration.&lt;br /&gt;&lt;br /&gt;To avoid this pitfall, you should understand that this sort of ecstasy you are passing through is certainly transient and does not make you a superman. You can’t go beyond your capabilities. In fact if you try to do that you will over burn this energy in a minimum amount of time and return to square zero.&lt;br /&gt;&lt;br /&gt;Once you are convinced that what you can’t do normally you won’t be able to achieve because of some psychological burst, you should use this energy wisely and try to get the most benefits from it.&lt;br /&gt;To do that you need to concentrate your efforts on one or few tasks or goals that you need to accomplish. Do not over estimate your capacity, just prioritize the tasks or projects you have and focus on the most important ones.&lt;br /&gt;&lt;br /&gt;Avoid spreading your efforts on multiple subjects because you will soon discover that you are not progressing on any of them and that’s bad for your morale and your body.&lt;br /&gt;&lt;br /&gt;Remember that the up time has its own curse too. Neglecting this fact will condemn you to failure and frustration. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/07/uptime-curse.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-5034846538844567466</guid><pubDate>Fri, 09 Jul 2010 14:22:00 +0000</pubDate><atom:updated>2010-07-09T16:26:10.831+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">article</category><category domain="http://www.blogger.com/atom/ns#">blog</category><category domain="http://www.blogger.com/atom/ns#">new ideas</category><category domain="http://www.blogger.com/atom/ns#">original contet</category><category domain="http://www.blogger.com/atom/ns#">writing technique</category><category domain="http://www.blogger.com/atom/ns#">writings</category><title>How to Write Original Content</title><description>&lt;div align=&quot;justify&quot;&gt;Back to the early school days, it was very common that students were asked to construct a “meaningful” sentence using a verb such as “eat”. Usually most of the little girls and guys answer by “The boy eats an apple”. The sentence is grammatically correct; however the teacher was not happy seeing tens of similar copies. Same for search engines! &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;Search engines, just like teachers, do not like to see the same content recurring over and over for this reason they degrade its rank. However, you don’t need to be Shakespeare nor Einstein to be able to create an original content that pleases search engines. &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;Actually the original content is related to the writings and not to the subject. You really don’t have to come up with something totally new, creative and innovative. If you can this would be wonderful, but if you cannot it will not be a catastrophe. &lt;/div&gt;&lt;p align=&quot;justify&quot;&gt;Here are few steps to accomplish something original for your own blog:&lt;br /&gt;&lt;/p&gt;&lt;ol&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Determine the area of interest on which you want to write&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Search on the internet for articles, documentation, or even other blogs related to this subject&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Read 3 or more of these articles and try to fully understand what they are saying&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Take 15 min pause &lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Rewrite in your own way what you have understood from those readings&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Congratulations, you have now an original content that search engines will like&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div align=&quot;justify&quot;&gt;If you are thinking this is might be somehow fraudulent, rest assured it is not! Quite on the contrary you are contributing to the general knowledge and culture of the people who are looking for the subject you wrote about. &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;In fact people have different ways for reading and assimilating the material they read. They might not be able to understand one article because it might be written in a way that is counterintuitive for them. This is why they will drop reading very fast and search for something similar. Because different people have different ways, there will be a group that will appreciate your article over others. &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;Therefore, your content has become original and useful. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/07/how-to-write-original-content.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-8124103367667897741</guid><pubDate>Mon, 05 Jul 2010 13:17:00 +0000</pubDate><atom:updated>2010-07-06T00:07:51.893+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">discussion</category><category domain="http://www.blogger.com/atom/ns#">mini profile</category><category domain="http://www.blogger.com/atom/ns#">no registration</category><category domain="http://www.blogger.com/atom/ns#">Random chat</category><category domain="http://www.blogger.com/atom/ns#">selective chat</category><title>What Is Selective Chat</title><description>&lt;div align=&quot;justify&quot;&gt;Since the old days of IRC till our days the expression “Hi, asl plz?” is the must have opening for every chatting session between two strangers. Furthermore, if you are a male you won’t accept less than something like “25 F …”&lt;br /&gt;&lt;br /&gt;Due to the lack of enough information any discussion was very slow to start, moreover it is rarely scoped into a certain topic or subject. It is true that most of the chatters are males seeking females. This is what the statistics reveal, and can’t be denied. However any discussion would be far more interesting and fruitful if the two parties have minimum information regarding each other and be centered on a specific topic that is of common interest.&lt;br /&gt;&lt;br /&gt;It is not unusual to meet someone who is seeking to talk with another having a certain intellectual background and education level or having experience in a very specific domain. There are thousands of people who are seeking information and are not sure where to find them and how to utilize them. Obviously it can be helpful if they can meet someone online who can help them in real time manner. No doubt this type of information exchange and collaboration increases the richness of the discussion and avoid wasting time on lengthy introductions that ends most of the time in frustration.&lt;br /&gt;&lt;br /&gt;The importance of the selective chat as opposed to the random chat lays in the fact that the latter is full of bad surprises and annoyances, while the former is based on a careful selection of the peer in order to open a discussion with him or her. This gives a huge benefit for both parties because they can capitalize on their discussion to make new ones and maybe evolve their cyber relation to a real life one.&lt;br /&gt;&lt;br /&gt;In this perspective &lt;a href=&quot;http://www.simpleconnexion.com/&quot;&gt;www.simpleconnexion.com&lt;/a&gt; is trying to offer something of value to its users and by making it intuitive and friendly to use and avoiding the hassle of a long and boring registration process and profile management. Check &lt;a href=&quot;http://www.simpleconnexion.com/aboutus.aspx&quot;&gt;about us&lt;/a&gt; for more info. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/07/what-is-selective-chat.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-2044641546611129554</guid><pubDate>Wed, 30 Jun 2010 21:40:00 +0000</pubDate><atom:updated>2010-06-30T23:43:32.698+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">breeding ideas</category><category domain="http://www.blogger.com/atom/ns#">combining existing ideas</category><category domain="http://www.blogger.com/atom/ns#">solving problem</category><title>Breeding Ideas</title><description>&lt;div align=&quot;justify&quot;&gt;According the Merriam Webster online dictionary one possible definition of the word ‘idea’ is a “formulated thought or opinion”. So if you are looking for new ideas you need to think about it because they do not just come by themselves. Even if sometimes you think you got an idea spontaneously that’s not true, it is only an illusion. In reality your subconscious was busy working on it and was waiting for some sort of event or trigger to send it to your conscious.&lt;br /&gt;&lt;br /&gt;So how ideas are created? Usually ideas are issued from unsolved problems or unsatisfying solutions. People who are having trouble with certain matters on a daily basis are more likely to think about new ways to improve the way to perform their day to day tasks.&lt;br /&gt;&lt;br /&gt;If they succeed in finding a solution then the idea is born and might appear genius to some people and irrelevant to others. Not every idea will be a success at the business level, it all depends how the market reacts towards it. However, if you have solved a problem that you were facing, there are big chances that some others out there are facing the same issue and might be looking for the solution that you have invented.&lt;br /&gt;&lt;br /&gt;The above is one approach for breeding ideas. But that’s not all! There is at least one other way to create new ones and innovate. Needless to say every approach requires intellectual efforts and brainstorming.&lt;br /&gt;&lt;br /&gt;So another way to breed more ideas is to combine several existing one to create a new hybrid one. At start, there might not be an immediate need for this new idea, but as the time goes on and the idea is put to use, the public might discover that it is serving them in a way they did not expect.&lt;br /&gt;&lt;br /&gt;Combining several ideas into one is straightforward. All what is needed is to draw a table in which you put current inventions in rows and their features or uses in columns.&lt;br /&gt;&lt;br /&gt;Consider the following example: A mobile is used for making calls and send SMS at a long range; a remote control is used to control a device such a TV or Stereo at a small distance. One possible combination is to merge them into one instrument that allows people to make calls and control their home machinery over a long distance. This way when they get home they have everything in place as desired; like music is on, plate heated in the oven, the AC is working etc…&lt;br /&gt;&lt;br /&gt;Is it useful or will it gain acceptance? This is a different story. The important is that you created the idea and now you can work on it to make it appeal to people.&lt;br /&gt;&lt;br /&gt;You can also read an interesting blog “&lt;a href=&quot;http://dondodge.typepad.com/the_next_big_thing/2010/05/how-to-unlock-your-creative-genius.html&quot;&gt;How to unlock your creative genius&lt;/a&gt;” written by Don Dodge in which he exposes his opinion about how genius ideas are born. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/06/breeding-ideas.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-1362697425857299134</guid><pubDate>Mon, 28 Jun 2010 12:35:00 +0000</pubDate><atom:updated>2010-06-28T15:15:56.157+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">ipad fun</category><category domain="http://www.blogger.com/atom/ns#">ipad gadget</category><category domain="http://www.blogger.com/atom/ns#">ipad productiity</category><category domain="http://www.blogger.com/atom/ns#">Ipad review</category><category domain="http://www.blogger.com/atom/ns#">ipad work</category><title>IPad, Just Another Gadget</title><description>&lt;div align=&quot;justify&quot;&gt;Recently I have been tinkering with IPad for some time, in an attempt to convince myself to use it on day to day basis. However I felt it is was not built for working people who use the computers to produce something of value to their companies or customers.&lt;br /&gt;&lt;br /&gt;This might be hard said, but that was my reaction. For me IPad is a gadget and not a tool for work. Before going further, I would like to note that this does not diminish its value as an amazing technological device.&lt;br /&gt;&lt;br /&gt;On the other hand for people who use computers as a productivity tool, there are some big issues related to it. The minute you lay your hands on one of them you will instantly notice the following:&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;ul&gt;&lt;p align=&quot;justify&quot;&gt;&lt;/p&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Your fingers are not as precise as a mouse pointer, so if you are doing something like paintings or graphic design you will have hard times going through it.&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Also it is not suitable for real work on spreadsheets such as Excel, due to the endless manipulations you need to do with your fingers, instead of a mouse.&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Certainly it is not suitable for programming, but I guess this is the least of concerns for many people.&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Another annoying feature is the continuous switching back and forth of keyboards as well as jumping from alphabetic mode to numerical mode. This will make any writings take at least 1.5 times the writing on a real keyboard.&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div align=&quot;justify&quot;&gt;Now the real big issue is in the design concept itself. To really use the IPad for writing you will have to bend over it to use its keyboard causing you a pain in the neck and shoulders on the long run, and reducing your ability to easily view the content of the screen. If you place it vertically to read or view the content you won’t be able to write without twisting your fingers and wrists.&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;&lt;br /&gt;So with all those drawbacks, what is IPad for?&lt;br /&gt;&lt;br /&gt;Well it suffices to look at some of the advertisement to know that IPad is only for sharing photos, doing social networking, reading books or articles, viewing videos, and web browsing in general. But if you are doing serious work it won’t help you.&lt;br /&gt;&lt;br /&gt;When I asked a friend if she is going to buy an IPad she replied: “what for? For music I have my IPod, for work I have my laptop and for roaming I have my mobile”.&lt;br /&gt;&lt;br /&gt;So it is just fair to think that &lt;strong&gt;IPad is more cumbersome than a mobile, and less effective than a laptop&lt;/strong&gt;.&lt;br /&gt;&lt;br /&gt;Based on this assertion I don’t think that all of us agree with Mr. Steve Jobs that the era of PC is over. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/06/ipad-just-another-gadget.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-5291069114336681119.post-4923330750998631705</guid><pubDate>Fri, 25 Jun 2010 11:58:00 +0000</pubDate><atom:updated>2010-06-25T15:10:55.855+02:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">chat room</category><category domain="http://www.blogger.com/atom/ns#">chat website</category><category domain="http://www.blogger.com/atom/ns#">people place subject</category><title>The People, The Place and The Subject</title><description>&lt;div align=&quot;justify&quot;&gt;There are plenty of chatting and communication services out there. Each one has its own concept and tries to solve a specific problem. They adopt different approaches towards serving their users: &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;- Instant Messengers are centered on detecting when a friend or a contact goes online in order to chat with him/her. &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;- Chat rooms are about bringing people together in one place to discuss a certain subject. Usually rooms are labeled by topics. However there is rarely specified material to discuss and people engage into free discussions and speeches.&lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;- Forums are usually more focused and members are required to stick to the subject of the thread otherwise their posts will be deleted. The problem of the forums is the lack of real time interaction, and of course people have to search for the forums which fit their needs. Believe me that&#39;s not an easy task.&lt;br /&gt;&lt;br /&gt;However a brand new approach is emerging. This new concept takes a different approach to tackle the problem and offers a solution by bringing together the people, the place and the subject.&lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;The place is simply any web page on any website.&lt;br /&gt;The people are the users who are viewing that web page.&lt;br /&gt;The subject is the content of that web page. &lt;/div&gt;&lt;div align=&quot;justify&quot;&gt;&lt;br /&gt;So if a number of people are seeing the same web page, they are most probably interested in the subject offered there. If they are interested, chances are they either agree or disagree and probably they would like to say something about it and discuss it with others who are viewing the same web page as well. &lt;/div&gt;</description><link>http://ziadsalloum.blogspot.com/2010/06/people-place-and-subject.html</link><author>noreply@blogger.com (Anonymous)</author><thr:total>1</thr:total></item></channel></rss>