![]() ![]() ![]() However, still determined to make my idea work, I felt sure I could make some optimizations. It had to calculate every possible choice. Here was the biggest challenge though, the last two loops were huge. I used br tags and removed the tables to resolve this issue, which got me up to the second to last loop. Chrome was rendering over half a million nodes, so clearly using tables for this was a bad idea. I thought about this for a while and decided to abandon tables completely. When I got to the later permutations, performance still tanked when rendering the HTML in the browser. However, I got round that limit by splitting it into different strings. I discovered that Chrome apparently has a limit of approximately 1023mb that can be stored in a string. I continued building the game in this way however, by the time I got to the sixth or seventh permutation things started to slow down. For example:Īs you can see, the amount of iterations quickly starts to get out of hand. You can calculate this by multiplying the number of loops by nine each time, so nine to the power of the number of nested loops. Nesting loops creates a lot of iterations. Popovertarget passes every choice made by the player, for example: x1-o2-x3 means X chooses the first position, O chooses the second and X chooses the third, and so on. Traditionally "X" goes first, which is convenient because it reduces the amount of boards we need to create. You have to brute force all the players choices, and the second loop then generates a board that targets the next choice and so on. When you click on a button, it targets the popup generated by the second loop. The first loop generates all of the buttons, without any choices being made. At first I used tables to construct the board, and buttons for the choices: Putting this theory to the test, I did a little experiment to see if you could use multiple popups one after another and it worked! The basic idea now confirmed, I then started to write some code that would generate the permutations. ![]() Then you use a popovertarget attribute in another element, usually either an input or a button, to link to the element to show it when you click the button:Ĭan you see where this is going? You could use the popups to show a Tic Tac Toe board, and then use the ids for each move. Popovers are quite simple you use a popover attribute to define the element you want to use as a popover element, which is then hidden. Idea now fully committed, I spent my lunch hours creating the game. I thought you could then use this state information to create a pure HTML game and for whatever reason, Tic Tac Toe stuck in my head. The idea went like this: if you could create a popup using pure HTML, then you have some form of state e.g. An idea popped into my head and once it's there, my brain goes into overdrive and I'm compelled to do it. You would think this is where the story ends, but that's not the case. My first action was to test it for XSS vectors and, with the help of the XSS community, we found some pretty cool vectors that allow you to It all started when Chrome implemented popovers in HTML so I wanted to challenge myself to create a game with just HTML. Creating the game in CSS is trivial - as I've proven when I created a In this post I'm going to show you how I created Tic Tac Toe (Noughts and crosses) with HTML, using one of those experimental features. I love it when Chrome releases a new feature, I especially like it when it is experimental. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |