Permalink
Browse files

Add new levels

Cleanup server side script
Add a bonus animation
Add audio playing.
Add a start playing game button.
Add credits
Turn off the story/text when on the iphone.
Various fixes.
  • Loading branch information...
1 parent 67e57b0 commit 88630a33865b341e3388be8b816f0c633c7f519f @icefox committed Feb 12, 2010
Showing with 3,952 additions and 354 deletions.
  1. +1 −0 .gitignore
  2. +5 −0 .htaccess
  3. +77 −0 about.html
  4. +768 −0 anigma.js
  5. BIN audio/04 Without You.mp3
  6. BIN audio/All Systems Go.mp3
  7. BIN audio/Alpha_C_-_Neon_Aurora.mp3
  8. BIN audio/FantomenK - Tiny Tunes.mp3
  9. BIN audio/Reflect 2.mp3
  10. BIN audio/Siddhis - Wine Walls.mp3
  11. BIN audio/Solo City.mp3
  12. BIN audio/The Blackbird.mp3
  13. BIN audio/aftershocksunrise.mp3
  14. BIN audio/first.mp3
  15. BIN audio/nullsleep_-_her_lazer_light_eyes.mp3
  16. +2 −0 cgi-bin/.htaccess
  17. +25 −0 cgi-bin/getlevel.cgi
  18. +102 −353 index.html
  19. +9 −0 levels/101.level
  20. +11 −0 levels/102.level
  21. +1 −1 levels/16.level
  22. +9 −0 levels/201.level
  23. +9 −0 levels/202.level
  24. +9 −0 levels/203.level
  25. +9 −0 levels/204.level
  26. +9 −0 levels/205.level
  27. +9 −0 levels/206.level
  28. +9 −0 levels/207.level
  29. +9 −0 levels/208.level
  30. +9 −0 levels/209.level
  31. +9 −0 levels/210.level
  32. +9 −0 levels/211.level
  33. +9 −0 levels/212.level
  34. +9 −0 levels/213.level
  35. +9 −0 levels/214.level
  36. +9 −0 levels/215.level
  37. +9 −0 levels/216.level
  38. +9 −0 levels/217.level
  39. +9 −0 levels/218.level
  40. +9 −0 levels/219.level
  41. +9 −0 levels/220.level
  42. +9 −0 levels/221.level
  43. +9 −0 levels/222.level
  44. +9 −0 levels/223.level
  45. +9 −0 levels/224.level
  46. +9 −0 levels/225.level
  47. +9 −0 levels/226.level
  48. +9 −0 levels/227.level
  49. +9 −0 levels/228.level
  50. +9 −0 levels/229.level
  51. +9 −0 levels/230.level
  52. +9 −0 levels/231.level
  53. +9 −0 levels/232.level
  54. +9 −0 levels/233.level
  55. +9 −0 levels/234.level
  56. +9 −0 levels/235.level
  57. +9 −0 levels/236.level
  58. +9 −0 levels/237.level
  59. +9 −0 levels/238.level
  60. +9 −0 levels/239.level
  61. +9 −0 levels/240.level
  62. +9 −0 levels/241.level
  63. +9 −0 levels/242.level
  64. +9 −0 levels/243.level
  65. +9 −0 levels/244.level
  66. +9 −0 levels/245.level
  67. +9 −0 levels/246.level
  68. +9 −0 levels/247.level
  69. +9 −0 levels/248.level
  70. +9 −0 levels/249.level
  71. +9 −0 levels/250.level
  72. +9 −0 levels/251.level
  73. +9 −0 levels/252.level
  74. +9 −0 levels/253.level
  75. +9 −0 levels/254.level
  76. +9 −0 levels/255.level
  77. +9 −0 levels/256.level
  78. +9 −0 levels/257.level
  79. +9 −0 levels/258.level
  80. +589 −0 levels/259.level
  81. 0 levels/260.level
  82. BIN png/anigma.png
  83. BIN png/arch.png
  84. BIN png/background.png
  85. BIN png/broken_wall.png
  86. BIN png/cursor.png
  87. BIN png/fire.png
  88. BIN png/freezing_animation.png
  89. BIN png/front_1.png
  90. BIN png/front_title.png
  91. BIN png/jewel_blue.png
  92. BIN png/jewel_cyan.png
  93. BIN png/jewel_gray.png
  94. BIN png/jewel_green.png
  95. BIN png/jewel_orange.png
  96. BIN png/jewel_purple.png
  97. BIN png/jewel_red.png
  98. BIN png/jewel_white.png
  99. BIN png/jewel_yellow.png
  100. BIN png/trap_left.png
  101. BIN png/trap_right.png
  102. BIN png/wall.png
  103. +317 −0 style.css
  104. +385 −0 svg/background.svg
  105. +79 −0 svg/cursor.svg
  106. +127 −0 svg/jewel_blue.svg
  107. +175 −0 svg/jewel_green.svg
  108. +127 −0 svg/jewel_orange.svg
  109. +102 −0 svg/jewel_purple.svg
  110. +153 −0 svg/jewel_red.svg
  111. +116 −0 svg/jewel_white.svg
  112. +85 −0 svg/jewel_yellow.svg
  113. +172 −0 svg/wall.svg
  114. +2 −0 sync
View
@@ -0,0 +1 @@
+*.swp
View
@@ -0,0 +1,5 @@
+RewriteEngine on
+Options FollowSymLinks
+#RewriteBase /~ben/anigma_web/
+RewriteBase /anigma/
+RewriteRule ^levels/(.*)\.level$ cgi-bin/getlevel.cgi?$1 [env=LEVEL:$1]
View
@@ -0,0 +1,77 @@
+<html
+<head>
+ <title>About Anigma</title>
+ <link rel=stylesheet type="text/css" href="style.css">
+</head>
+<body>
+
+<div style="padding: 1em;">
+<h1>About</h1>
+Anigma is a test of various features that are proposed in CSS3. In particular this was my own way of trying out the new <a href="http://www.w3.org/TR/css3-transitions/">css3-transitions</a> and <a href="http://www.w3.org/TR/css3-animations/">css3-animations</a>. Anigma was tested on Arora, Safari and Google Chrome.
+<p>
+
+Some Easter Eggs features:<br>
+Hit the 'e' key to bring up a level editor.<br>
+Hit the 'k' key to bring up the debug form including a way to jump to any level you want.<br>
+
+<h4>SVG</h4>
+I hoped to have the game only use svg graphics, but currently there are some painting bugs related to transitions and svg images. Once these are fixed in WebKit I will update the game to point to the svg files rather then the rendered png's.
+
+<h1>Credits</h1>
+Anigma is inspired by the game <a href="http://benjamin-meyer.blogspot.com/2007/03/anigma-game.html">Anigma</a> which is a game written in C++ using the Qt library. None of the code in the C++ Anigma was re-used in the making of this Anigma only some of the levels and a few of the graphics. The Javascript code here in this demo is under the BSD.
+
+<h4>Images</h4>
+The Jewel images and background came from the game <a href="http://benjamin-meyer.blogspot.com/2007/03/anigma-game.html">Gweled</a> and <a href="http://games.kde.org/game.php?game=klines">KLines</a>. They are all under the GPLv2.
+
+<h4>Audio</h4>
+All of the background music is from <a href="http://8bitcollective.com">8bitcollective</a> and under the Creative Commons BY-NC-SA License.
+<ul>
+<li>First by <a href="http://8bitcollective.com/members/neil/">Neil</a>
+<li>Tiny Tunes by <a href="http://8bitcollective.com/members/FantomenK/">FantomenK</a>
+<li>Reflect 2 by <a href="http://8bitcollective.com/members/Nanoshine/">Nanoshine</a>
+<li>Neon Aurora by <a href="http://8bitcollective.com/members/Alpha+C/">Alpha C</a>
+<li>Wine Walls by <a href="http://8bitcollective.com/members/Siddhis/">Siddhis</a>
+<li>All Systems Go by <a href="http://8bitcollective.com/members/Emar/">Emar</a>
+<li>Aftershock Sunrise by <a href="http://8bitcollective.com/members/sleepy/">Sleepy</a>
+<li>Solo City by <a href="http://8bitcollective.com/members/Pompei/">Pompei</a>
+<li>Without You by <a href="http://8bitcollective.com/members/Pompei/">Pompei</a>
+<li>The Blackbird by <a href="http://8bitcollective.com/members/sailfish/">Sailfish</a>
+<li>Her Lazer Light Eyes by <a href="http://8bitcollective.com/music/Guest/186/">Nullsleep</a>
+</ul>
+
+<h1>Technical Details</h1>
+
+<h4>Movement</h4>
+The cursor and the jewel all have a transition property set on their top and left so when their position is changed via the mouse/keyboard they will slide across the screen. When an action causes the board to change (such as moving a jewel to the left/right) a functions checks to see if anything should fall down one block and if so sets their top property causing a transition.
+
+<h4>Removing Jewels</h4>
+When two jewels of the same type are next to each other the opacity is set to 0 starting a transition. The transition end event is used to actually remove the jewels from the dom allowing other jewels to fall down.
+
+<h4>Clock</h4>
+The countdown clock is a div that starts at the length of the screen and a background color of white. When the level is loaded the transition time is set to the time allowed for the level, the color is then set to red and width of 0 starting the transition. When the transition end event is fired it calls the function to drop the 'Out of time!' dialog.
+
+<h4>Score</h4>
+The score behaves similarly to the clock with a transition set on the width.
+
+<h4>Trap</h4>
+Use two background images with transitions followed by a change in id to a wall on the completion of the transition (via the end event).
+
+<h4>Fire & Crumble</h4>
+While this could have been done with an animated gif easily enough I tried out the CSS3 animations and setup keyframes to move the background offsets to the correct location in the image/sprite.
+
+<h4>Other</h4>
+Several other fun new properties were used including:
+<ul>
+<li>-webkit-background-size - cause the background image to scale to the width of the screen
+<li>-webkit-transform: - rotate the CSS3 logo 90 degres.
+<li>-webkit-border-radius and -webkit-box-shadow on the message box.
+<li>The HTML5 audio tag.
+</ul>
+
+<h1>Contact</h1>
+
+If you have any questions or feedback feel free to send me an <a href="mailto:ben@meyerhome.net">email</a>.
+
+</div>
+
+</body>
Oops, something went wrong.

0 comments on commit 88630a3

Please sign in to comment.