Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hacking JavaScript Games - Cellular Automata

2,254 views

Published on

Slides to support a series of videos in the "Hacking JavaScript" Series, which demonstrate how to use browser dev tools to 'hack' and manipulate and test JavaScript Games and Applications from the browser dev tools console.

See related blog post:

http://blog.eviltester.com/2016/12/hacking-javascript-games-cellular.html

We will Hack This Game:

- http://compendiumdev.co.uk/apps/games/ca/ca_v1.html

Videos In this Series:

- Change Colour of Cells
- https://youtu.be/gWnvKQOb2yc
- Change Colour Automatically
- https://youtu.be/hfE99d4Slck
- Create a Glider Invasion
- https://youtu.be/CeOzcn7pBQY
- Change Size of the World
- https://youtu.be/lLnyNP33S_Q
- Create a Randomly Generated World
- https://youtu.be/uZv2s5QjPps
- History Of The Game of Life
- https://youtu.be/H1rMF7SnGn8

---

# Alan Richardson

Read my writing and blogs at:

- http://www.compendiumdev.co.uk
- http://blog.eviltester.com/
- http://www.seleniumsimplified.com
- http://blog.javafortesters.com/


Follow me on social media:

- https://uk.linkedin.com/in/eviltester
- https://twitter.com/eviltester - @eviltester
- [YouTube](http://www.youtube.com/subscription_center?add_user=EvilTesterVideos)
- https://www.youtube.com/user/EviltesterVideos
- https://www.instagram.com/eviltester/

---

# Books And Training

- "Java For Testers" - Learn to code in Java with http://javafortesters.com/page/about/
- "Dear Evil Tester" - Enjoy your testing http://eviltester.com/page/dearEvilTester/
- Online Training in Technical Testing, Selenium WebDriver, Java and more http://www.compendiumdev.co.uk/page/online_training

Published in: Software

Hacking JavaScript Games - Cellular Automata

  1. 1. Hacking JavaScript Games Cellular Automata Alan Richardson www.eviltester.com
  2. 2. We will Hack This Game Cellular Automata Life Game Suitable for Hacking http://compendiumdev.co.uk/apps/games/ca/ca_v1.html
  3. 3. Supporting Videos Change Colour of Cells https://youtu.be/gWnvKQOb2yc Change Colour Automatically https://youtu.be/hfE99d4Slck Create a Glider Invasion https://youtu.be/CeOzcn7pBQY Change Size of the World https://youtu.be/lLnyNP33S_Q Create a Randomly Generated World https://youtu.be/uZv2s5QjPps History Of The Game of Life https://youtu.be/H1rMF7SnGn8 Bonus: Making Text With Cellular Automata https://youtu.be/YAgBeG53lVI
  4. 4. Challenge ‐ Change Colour in Cellular Automata The simplest thing we can do to this game of life is to change the colour. It is also the most visible thing. Using the game: http://compendiumdev.co.uk/apps/games/ca/ca_v1.html
  5. 5. Colour in the Game In the code we have the  World function ‐ which is an object  class . And the  World object has an  entityColour . If we can change that, then we can change the colour. I could use any six values from 0‐9, A‐F to make an HTML colour code e.g. http://htmlcolorcodes.com
  6. 6. Change colour by debugging I set a break point on the line where the colour is set in the sources view. Line 153  this.entityColour = "#FF0000";  Then: Step over that line so the colour is set. press  esc to get the console up. change the colour in the console: this.entityColour = "#111111";
  7. 7. Change colour from console when runnning game change the colour using the console inspect element and find where  World is instantiated with  new . i.e.  ctrl+F and search for  new World . var world = new World(worldSizes.myWorldWidth,                        worldSizes.myWorldHeight); And I can change that whenever I want: world.entityColour = "#111111";
  8. 8. Watch The Video https://youtu.be/gWnvKQOb2yc
  9. 9. Change Colour Automatically Simple ‐ have a bot to change colour every set time interval ‐ say 1000 milliseconds. The challenge is that I need to use a hex value to do that. So let's figure that out first.
  10. 10. Random Hex Value I can use  0xFF as a Hex integer value, and it is 255 I can use the  toString method on a  Number to convert a number to a base e.g. base 2 for binary or base 16 for hex: I need to get a 6 character string, even if my hex value is only  FF and I can do that by creating a string and using the last 6 characters e.g. And I want my string to be  "0" padded at the front so I'll just add  "000000" at the front of any string: And I want a Hash  # in front var myNum=3; "#" + (("000000" + myNum.toString(16)).substr(‐6))
  11. 11. Use Game Random Int Code The game already has a random number generator: getRandomInt(0, 0xFFFFFF); Use that "#" + (("000000" +  getRandomInt(0, 0xFFFFFF).toString(16)).substr(‐6)) And I have a way to generate a random HTML hex colour value.
  12. 12. Randomly set the colour every second Create a bot to change the colour every 1000 milliseconds. var colourChangeBot = setInterval(function() {     world.entityColour = "#" + (("000000" +          getRandomInt(0, 0xFFFFFF).toString(16)).substr(‐6)); }, 1000); Stop the bot with: clearInterval(colourChangeBot);
  13. 13. Make Bot Faster or Slower Change the value 1000, to make it faster, or slower: 500 ‐ every half second 200 ‐ every 200 milliseconds Danger Flashing Lights. Just be careful you don't make it so fast that you have a seizure.
  14. 14. Cycle over all the colours This is a bit slower: var currColour = 0; var colourChangeBot = setInterval(function() {     world.entityColour = "#" + ("000000" +            currColour.toString(16)).substr(‐6);     currColour++;     if (currColour >= 0xFFFFFF) {         currColour = 0;     } }, 1)
  15. 15. Watch The Video https://youtu.be/hfE99d4Slck
  16. 16. References http://www.w3schools.com/jsref/jsref_tostring_number.asp http://www.w3schools.com/jsref/jsref_substr.asp
  17. 17. An Invasion Challenge Control the Invasion Stop the invasion by calling: stopInvasion(); Start an invasion with: startInvasion(100); Where  100 is the amount of milliseconds before the next lifeform is added.
  18. 18. Create a Glider addLifeForms.glider(world,10,0); Which creates a glider at position  (10,0)  I could create an invasion of gliders like that var gliderInvasion = setInterval(function() {     addLifeForms.glider(world, 10, 0); }, 1000);
  19. 19. But an invasion should be random First stop the old invasion: clearInterval(gliderInvasion) Then start our new invasion: var gliderInvasion = setInterval(function() {     addLifeForms.glider(world,         getRandomInt(0, world.xSize ‐ 50),         getRandomInt(0, world.ySize ‐ 50)); }, 100);
  20. 20. Watch The Video https://youtu.be/CeOzcn7pBQY
  21. 21. Change World Size One of the challenges in the Cellular Automata game is changing the world size. There is a clue in the game code, because we know that it does some resizing when we change the window size.  worldSizes.calculateScales(); And... var world = new World(             worldSizes.myWorldWidth,              worldSizes.myWorldHeight);
  22. 22. Let's Change the World ‐ Make is smaller worldSizes.myWorldWidth=100;  worldSizes.myWorldHeight=100; worldSizes.calculateScales();
  23. 23. Let's Change the World ‐ Make is bigger worldSizes.myWorldWidth=1000; worldSizes.myWorldHeight=1000; worldSizes.calculateScales(); Nope, that didn't work
  24. 24. Let's Change the World ‐ Make is bigger tell the  world that it is bigger worldSizes.myWorldWidth=1000; worldSizes.myWorldHeight=1000; world.xSize=1000; world.ySize=1000; worldSizes.calculateScales(); That worked ‐ and its a little slower now, because thats 1000 x 1000 grid, which is 1,000,000 ﴾1 million﴿ cells!
  25. 25. Simulate ZX‐81 The ZX‐81 had a resolution of 64x48, and it was black and white, so let's simulate that. worldSizes.myWorldWidth=64; worldSizes.myWorldHeight=48; world.xSize=worldSizes.myWorldWidth;  world.ySize=worldSizes.myWorldHeight; world.entityColour="#000000"; worldSizes.calculateScales(); And slow it down: stopInvasion(); stopGame(); startGame(1000); startInvasion(3000);
  26. 26. Watch The Video https://youtu.be/lLnyNP33S_Q
  27. 27. Create A Random World We first want total control over the game. start game  startGame(5)  stop game  stopGame()  stop invasion  stopInvasion() 
  28. 28. Stop the Game and Clear the world stopGame(); stopInvasion(); It would be useful to also clear the display. world.nukeEmAll(); But we'll only see the results if we start & stop the game again: startGame(5); stopGame();
  29. 29. Randomly generate stuff Reset the population: world.population = []; I'll add items in a loop, and create 100 of them: for(var itemLoop=0; itemLoop < 100; itemLoop++){   world.addToPopulation(new LifeForm().move(0,   getRandomInt(0, world.xSize),    getRandomInt(0, world.ySize))); } Start the game, we should see the results: startGame(5); 100 might not actually be big enough, you might need to create more for a viable world.
  30. 30. Experiment and Watch the Video Experiment with different loop sizes to see what works for your world ‐ remember its a harsh world out there for these cells so sometimes you need to start with a lot of them. https://youtu.be/uZv2s5QjPps
  31. 31. History of Game Of Life John Horton Conway's Game of Life https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life#Rule s http://conwaylife.com/ Programs to download, install and experiment with: Golly http://golly.sourceforge.net/ Also available on IPad and Android
  32. 32. online games of life: Cellular Automata Life Game Suitable for Playing https://bitstorm.org/gameoflife/ http://pmav.eu/stuff/javascript‐game‐of‐life‐v3.1.1/ Cellular Automata Life Game Suitable for Hacking http://compendiumdev.co.uk/apps/games/ca/ca_v1.html
  33. 33. Related References: Good simple Overview http://www.math.com/students/wonders/life/life.html Good set of resources http://www.ibiblio.org/lifepatterns/ http://www.ibiblio.org/lifepatterns/october1970.html Wolfram description http://mathworld.wolfram.com/GameofLife.html History of Computer Game Design ‐ Stanford http://web.stanford.edu/class/sts145/ http://web.stanford.edu/class/sts145/html/library.htm
  34. 34. Recommended Books Artificial Life ‐ by Stephen Levy The Garden in the Machine by Clause Emmeche
  35. 35. Watch A Video on the History of the Game of Life https://youtu.be/H1rMF7SnGn8
  36. 36. Other Contributions Danny Dainton experimented with the Game of life and created a 'text' image. https://twitter.com/DannyDainton/status/789499155785842688 And he has released thecode for it on github. https://github.com/DannyDainton/Cellular_Automata_Hacking
  37. 37. How to Create Text I took a different approach to Danny for the text creation: I thought it would be easier to write text to the screen scrape the pixels add the pixels as blocks to the world
  38. 38. First Write the Text // stop the world and clear the world and screen stopInvasion(); stopGame(); world.population = []; clearCanvas(); // plot the text we want context.font = "14px verdana"; context.strokeStyle="#FF0000"; // kerning hack // http://stackoverflow.com/questions/8952909/letter‐spacing‐in‐canva var padding = String.fromCharCode(8202)+String.fromCharCode(8202 context.strokeText("Thank".split("").join(padding), 0, 15); context.strokeText("You".split("").join(padding), 0, 30); context.strokeText("Danny".split("").join(padding), 0, 45);
  39. 39. Then get the pixels and add them to the world var imageData = context.getImageData(0,0,200,60); var scale=4; // less than 4 and it will evolve var imageX=0;var imageY=0; for (var i=0;i<imageData.data.length;i+=4)   {   if(imageData.data[i]!==0 ||      imageData.data[i+1]!==0 ||       imageData.data[i+1] !== 0){     addLifeForms.block(world, imageX*scale,imageY*scale);    }       imageX++;   if(imageX>=200){      imageX=0;      imageY++;   } } Then  startGame(5); 
  40. 40. Uses? We could use this for image generation, just with the canvas. resize canvas create a border plot text that shows the size save the image And we could create custom sized images for testing.
  41. 41. Resize Canvas canvas.width=500; canvas.height=500; Create a Border context.rect(0,0,canvas.width, canvas.height); context.stroke(); Add Text context.font = "80px verdana"; var padding = String.fromCharCode(8202)+               String.fromCharCode(8202); context.strokeText("500px".split("").join(padding), 0, 80); context.strokeText("500px".split("").join(padding), 0, 160);
  42. 42. Watch A Bonus Video ‐ Create Text For Cellular Automata https://youtu.be/YAgBeG53lVI
  43. 43. What can you do with it? Experiment and see what you come up with
  44. 44. Alan Richardson Read my writing and blogs at: http://www.compendiumdev.co.uk http://blog.eviltester.com/ http://www.seleniumsimplified.com http://blog.javafortesters.com/ Follow me on social media: https://uk.linkedin.com/in/eviltester https://twitter.com/eviltester ‐ @eviltester YouTube https://www.youtube.com/user/EviltesterVideos https://www.instagram.com/eviltester/
  45. 45. Books And Training "Java For Testers" ‐ Learn to code in Java with http://javafortesters.com/page/about/ "Dear Evil Tester" ‐ Enjoy your testing http://eviltester.com/page/dearEvilTester/ Online Training in Technical Testing, Selenium WebDriver, Java and more http://www.compendiumdev.co.uk/page/online_training

×