├── .github └── FUNDING.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── css └── style.css ├── images ├── 1-star.png ├── 10-musical-note.png ├── 11-sun.png ├── 12-peace-sign.png ├── 13-moon.png ├── 14-heart.png ├── 15-zig-zag.png ├── 16-colors.png ├── 17-clover.png ├── 17-star.png ├── 18-apple.png ├── 19-castle.png ├── 2-butterfly.png ├── 20-dolar.png ├── 21-circles.png ├── 22-bars.png ├── 23-ball.png ├── 24-carpet.png ├── 25-rectangle.png ├── 26-grey-park.png ├── 27-question-mark.png ├── 28-tree.png ├── 29-sandtime.png ├── 3-chinese.png ├── 30-diode.png ├── 4-potion.png ├── 5-happy-face.png ├── 6-stop.png ├── 7-house.png ├── 8-black-sign.png └── 8-chees.png ├── index.html ├── js ├── highscores.js ├── index.js ├── jq.min.js └── match.min.js └── package.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: ionicabizau 2 | patreon: ionicabizau 3 | open_collective: ionicabizau 4 | custom: https://www.buymeacoffee.com/h96wwchmy -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.swo 3 | *~ 4 | *.log 5 | node_modules 6 | *.env 7 | .DS_Store 8 | package-lock.json 9 | .bloggify/* 10 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 🌟 Contributing 2 | 3 | Want to contribute to this project? Great! Please read these quick steps to streamline the process and avoid unnecessary tasks. ✨ 4 | 5 | ## 💬 Discuss Changes 6 | Start by opening an issue in the repository using the [bug tracker][1]. Describe your proposed contribution or the bug you've found. If relevant, include platform info and screenshots. 🖼️ 7 | 8 | Wait for feedback before proceeding unless the fix is straightforward, like a typo. 📝 9 | 10 | ## 🔧 Fixing Issues 11 | 12 | Fork the project and create a branch for your fix, naming it `some-great-feature` or `some-issue-fix`. Commit changes while following the [code style][2]. If the project has tests, add one. ✅ 13 | 14 | If a `package.json` or `bower.json` exists, add yourself to the `contributors` array; create it if it doesn't. 🙌 15 | 16 | ```json 17 | { 18 | "contributors": [ 19 | "Your Name (http://your.website)" 20 | ] 21 | } 22 | ``` 23 | 24 | ## 📬 Creating a Pull Request 25 | Open a pull request and reference the initial issue (e.g., *fixes #*). Provide a clear title and consider adding visual aids for clarity. 📊 26 | 27 | ## ⏳ Wait for Feedback 28 | Your contributions will be reviewed. If feedback is given, update your branch as needed, and the pull request will auto-update. 🔄 29 | 30 | ## 🎉 Everyone Is Happy! 31 | Your contributions will be merged, and everyone will appreciate your effort! 😄❤️ 32 | 33 | Thanks! 🤩 34 | 35 | [1]: /issues 36 | [2]: https://github.com/IonicaBizau/code-style -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-25 Ionică Bizău (https://ionicabizau.net) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | [![memory-blocks](http://i.imgur.com/m6ToUa4.png)](https://ionicabizau.github.io/memory-blocks/) 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | # Memory Blocks 23 | 24 | [![Support me on Patreon][badge_patreon]][patreon] [![Buy me a book][badge_amazon]][amazon] [![PayPal][badge_paypal_donate]][paypal-donations] [![Ask me anything](https://img.shields.io/badge/ask%20me-anything-1abc9c.svg)](https://github.com/IonicaBizau/ama) [![Version](https://img.shields.io/npm/v/memory-blocks.svg)](https://www.npmjs.com/package/memory-blocks) [![Downloads](https://img.shields.io/npm/dt/memory-blocks.svg)](https://www.npmjs.com/package/memory-blocks) [![Get help on Codementor](https://cdn.codementor.io/badges/get_help_github.svg)](https://www.codementor.io/@johnnyb?utm_source=github&utm_medium=button&utm_term=johnnyb&utm_campaign=github) 25 | 26 | Buy Me A Coffee 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | > The old Memory Blocks game (part of the Symantec Game Pack) ported to modern web. 35 | 36 | 37 | 38 | 39 | 40 | 41 | ## :memo: A Bit of History 42 | 43 | 44 | 2001 was the year when I first played a computer game. I was 6 year old. 45 | 46 | It happened when we visited a friend in the neighboring village. I really enjoyed that game. That time there were just few people having computers. 47 | 48 | The game I played was **Memory Blocks**. It is part of the *Symantec Game Pack*, coded by Charles Timmerman–founder of [Funster](http://funster.com) and author of over 90 puzzle books. 49 | 50 | In the meantime I became a web developer and finally decided to port this game to WEB. Yes, you're looking at it and you can play it in your browser. 51 | 52 | ---- 53 | 54 | I contacted Charles Timmerman and showed him what I built. He was so happy to see his game alive on a modern platform: 55 | 56 | 57 | > Amazing! That looks exactly my game! 58 | 59 | 60 | 61 | > I like how the high score table looks the same and even the black & white option is preserved. In those days, there were Windows computers that were in black & white! You might be interested to know that I wrote all the games in assembly language- my choice in those days over the usual C. 62 | 63 | 64 | 65 | 66 | I asked him to tell me more about the game history. He said: 67 | 68 | > There wasn't very many games for Windows in 1991 when I 69 | > created Memory Blocks and the other games in the 70 | > Symantec Game Pack. I liked the idea of making 71 | > cutting-edge computers play children's games that even 72 | > our grandparents might be familiar with. It was a chance 73 | > for the player to go back to childhood while still sitting 74 | > in an office. (Windows computers were mainly for business 75 | > in those days). I think these familiar games resonated 76 | > with people and lead to their success. 77 | 78 | ## :camera: Screenshots 79 | 80 | ### :question: About & How to play 81 | 82 | 83 | [![](http://i.imgur.com/3Y7jJvF.png)](https://ionicabizau.github.io/memory-blocks/) 84 | 85 | ### :camel: High Scores, Big board, colored 86 | 87 | 88 | [![](http://i.imgur.com/OymyC8A.png)](https://ionicabizau.github.io/memory-blocks/) 89 | 90 | ### :tv: High Scores, Little board, greyscale 91 | 92 | 93 | [![](http://i.imgur.com/OydrO2v.png)](https://ionicabizau.github.io/memory-blocks/) 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | ## :question: Get Help 128 | 129 | There are few ways to get help: 130 | 131 | 132 | 133 | 1. Please [post questions on Stack Overflow](https://stackoverflow.com/questions/ask). You can open issues with questions, as long you add a link to your Stack Overflow question. 134 | 2. For bug reports and feature requests, open issues. :bug: 135 | 3. For direct and quick help, you can [use Codementor](https://www.codementor.io/johnnyb). :rocket: 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | ## :yum: How to contribute 155 | Have an idea? Found a bug? See [how to contribute][contributing]. 156 | 157 | 158 | ## :sparkling_heart: Support my projects 159 | I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, 160 | this takes time. You can integrate and use these projects in your applications *for free*! You can even change the source code and redistribute (even resell it). 161 | 162 | However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it: 163 | 164 | 165 | - Starring and sharing the projects you like :rocket: 166 | - [![Buy me a book][badge_amazon]][amazon]—I love books! I will remember you after years if you buy me one. :grin: :book: 167 | - [![PayPal][badge_paypal]][paypal-donations]—You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea: 168 | - [![Support me on Patreon][badge_patreon]][patreon]—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone). 169 | - **Bitcoin**—You can send me bitcoins at this address (or scanning the code below): `1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6` 170 | 171 | ![](https://i.imgur.com/z6OQI95.png) 172 | 173 | 174 | Thanks! :heart: 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | ## :cake: Thanks 185 | 186 | - Lots of thanks to [Charles Timmerman](http://funster.com/)–the 187 | author of the original game, part of the Symantec Game Pack for 188 | Windows. He granted me permissions to use the game images and design in this 189 | clone. :cake: 190 | - Big thanks to [Antonija Šimić (**@tonkec**)](https://github.com/tonkec) for implementing the 3D animations. :sparkles: 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | ## :scroll: License 209 | 210 | [MIT][license] © [Ionică Bizău][website] 211 | 212 | 213 | 214 | 215 | 216 | 217 | [license]: /LICENSE 218 | [website]: https://ionicabizau.net 219 | [contributing]: /CONTRIBUTING.md 220 | [docs]: /DOCUMENTATION.md 221 | [badge_patreon]: https://ionicabizau.github.io/badges/patreon.svg 222 | [badge_amazon]: https://ionicabizau.github.io/badges/amazon.svg 223 | [badge_paypal]: https://ionicabizau.github.io/badges/paypal.svg 224 | [badge_paypal_donate]: https://ionicabizau.github.io/badges/paypal_donate.svg 225 | [patreon]: https://www.patreon.com/ionicabizau 226 | [amazon]: http://amzn.eu/hRo9sIZ 227 | [paypal-donations]: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVXDDLKKLQRJW 228 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body.grayscale { 2 | -webkit-filter: grayscale(1); 3 | -moz-filter: grayscale(1); 4 | filter: grayscale(1); 5 | } 6 | 7 | body, 8 | html { 9 | height: 100%; 10 | padding: 0; 11 | margin: 0; 12 | width: 100%; 13 | overflow: hidden; 14 | background-color: #2c3e50; 15 | } 16 | main { 17 | position: absolute; 18 | top: 90px; 19 | height: 612px; 20 | box-shadow: 0 15px 85px rgba(0, 0, 0, 0.19); 21 | } 22 | body[game-skill=little] main { 23 | width: 742px; 24 | left: 50%; 25 | margin-left: -371px; 26 | } 27 | body[game-skill=big] main { 28 | width: 1200px; 29 | left: 50%; 30 | margin-left: -600px; 31 | } 32 | .game > div { 33 | width: 73px; 34 | height: 70px; 35 | position: absolute; 36 | display: inline-block; 37 | text-align: center; 38 | } 39 | body[game-skill=big] .game { 40 | top: 20px; 41 | } 42 | .game { 43 | text-align: center; 44 | position: absolute; 45 | left: 55px; 46 | top: 55px; 47 | } 48 | .game > div .front { 49 | position: absolute; 50 | width: 100%; 51 | height: 100%; 52 | } 53 | .game > div .back { 54 | width: calc(100% + 1px); 55 | height: 100%; 56 | background-color: #FFFF00; 57 | position: absolute; 58 | left: -0.6px; 59 | } 60 | img { 61 | height: 100%; 62 | width: 100%; 63 | } 64 | .front > div { 65 | height: 100%; 66 | } 67 | .wrap { 68 | -webkit-perspective: 10000px; 69 | -moz-perspective: 10000px; 70 | perspective: 10000px; 71 | -webkit-perspective-origin: 50% 100px; 72 | -moz-perspective-origin: 50% 100px; 73 | perspective-origin: 50% 100px; 74 | } 75 | .cube { 76 | position: relative; 77 | width: 80px; 78 | height: 60px; 79 | transform-style: preserve-3d; 80 | 81 | -webkit-transform: rotateY(10deg); 82 | -moz-transform: rotateY(10deg); 83 | -ms-transform: rotateY(10deg); 84 | -o-transform: rotateY(10deg); 85 | transform: rotateY(10deg); 86 | 87 | -webkit-transition: all .4s ease; 88 | -moz-transition: all .4s ease; 89 | -ms-transition: all .4s ease; 90 | -o-transition: all .4s ease; 91 | transition: all .4s ease; 92 | 93 | -webkit-transform-origin: 35px; 94 | -moz-transform-origin: 35px; 95 | -ms-transform-origin: 35px; 96 | -o-transform-origin: 35px; 97 | transform-origin: 35px; 98 | } 99 | .cube div { 100 | position: absolute; 101 | width: 100%; 102 | height: 100%; 103 | border: 1px solid rgb(99, 99, 99); 104 | } 105 | .left, 106 | .right, 107 | .bottom, 108 | .top { 109 | background-color: #ADAD0C; 110 | } 111 | .front { 112 | -webkit-transform: translateZ(-52px) rotateY(180deg); 113 | -moz-transform: translateZ(-52px) rotateY(180deg); 114 | -ms-transform: translateZ(-52px) rotateY(180deg); 115 | -o-transform: translateZ(-52px) rotateY(180deg); 116 | transform: translateZ(-52px) rotateY(180deg); 117 | } 118 | .top { 119 | -webkit-transform: rotateZ(180deg) rotateX(-99deg) translateZ(8px) translateY(31px) translateZ(15px); 120 | -moz-transform: rotateZ(180deg) rotateX(-99deg) translateZ(8px) translateY(31px) translateZ(15px); 121 | -ms-transform: rotateZ(180deg) rotateX(-99deg) translateZ(8px) translateY(31px) translateZ(15px); 122 | -o-transform: rotateZ(180deg) rotateX(-99deg) translateZ(8px) translateY(31px) translateZ(15px); 123 | transform: rotateZ(180deg) rotateX(-99deg) translateZ(8px) translateY(31px) translateZ(15px); 124 | height: 30px !important; 125 | background: #ffff00; 126 | z-index: 0; 127 | } 128 | .right { 129 | -webkit-transform: rotateY(-270deg) translateX(53px) scale(.4, 1) skewY(3deg); 130 | -moz-transform: rotateY(-270deg) translateX(53px) scale(.4, 1) skewY(3deg); 131 | -ms-transform: rotateY(-270deg) translateX(53px) scale(.4, 1) skewY(3deg); 132 | -o-transform: rotateY(-270deg) translateX(53px) scale(.4, 1) skewY(3deg); 133 | transform: rotateY(-270deg) translateX(53px) scale(.4, 1) skewY(3deg); 134 | transform-origin: top right; 135 | z-index: 0; 136 | } 137 | .left { 138 | -webkit-transform: rotateY(270deg) translateX(-44px) translateY(1px) translateZ(2px) scale(.42, 1) skewY(-4deg); 139 | -moz-transform: rotateY(270deg) translateX(-44px) translateY(1px) translateZ(2px) scale(.42, 1) skewY(-4deg); 140 | -ms-transform: rotateY(270deg) translateX(-44px) translateY(1px) translateZ(2px) scale(.42, 1) skewY(-4deg); 141 | -o-transform: rotateY(270deg) translateX(-44px) translateY(1px) translateZ(2px) scale(.42, 1) skewY(-4deg); 142 | transform: rotateY(270deg) translateX(-44px) translateY(1px) translateZ(2px) scale(.42, 1) skewY(-4deg); 143 | transform-origin: center left; 144 | } 145 | .bottom { 146 | -webkit-transform: rotateX(99deg) translateY(-17px) translateZ(8px) scale(1, .5); 147 | -moz-transform: rotateX(99deg) translateY(-17px) translateZ(8px) scale(1, .5); 148 | -ms-transform: rotateX(99deg) translateY(-17px) translateZ(8px) scale(1, .5); 149 | -o-transform: rotateX(99deg) translateY(-17px) translateZ(8px) scale(1, .5); 150 | transform: rotateX(99deg) translateY(-17px) translateZ(8px) scale(1, .5); 151 | transform-origin: bottom center; 152 | z-index: 1; 153 | } 154 | .back { 155 | -webkit-transform: translateZ(-18px) translateY(-5px); 156 | -moz-transform: translateZ(-18px) translateY(-5px); 157 | -ms-transform: translateZ(-18px) translateY(-5px); 158 | -o-transform: translateZ(-18px) translateY(-5px); 159 | transform: translateZ(-18px) translateY(-5px); 160 | z-index: 1; 161 | } 162 | .spin { 163 | -webkit-animation: spin .3s forwards; 164 | -moz-animation: spin .3s forwards; 165 | -o-animation: spin .3s forwards; 166 | animation: spin .3s forwards; 167 | } 168 | .spin .front { 169 | -webkit-animation: spin-front .3s forwards; 170 | -moz-animation: spin-front .3s forwards; 171 | -o-animation: spin-front .3s forwards; 172 | animation: spin-front .3s forwards; 173 | z-index: 0; 174 | } 175 | .spin .right { 176 | z-index: 1; 177 | } 178 | @keyframes spinned-zoom-out { 179 | from { 180 | transform: rotateY(-170deg) scale3d(1, 1, 1); 181 | } 182 | to { 183 | transform: rotateY(-170deg) scale3d(.001, .001, .001); 184 | } 185 | } 186 | 187 | .spinned-zoom-out { 188 | -webkit-animation: spinned-zoom-out .5s ease forwards; 189 | -moz-animation: spinned-zoom-out .5s ease forwards; 190 | -o-animation: spinned-zoom-out .5s ease forwards; 191 | animation: spinned-zoom-out .5s ease forwards; 192 | } 193 | 194 | @keyframes unspin { 195 | from { 196 | transform: rotateY(-170deg); 197 | } 198 | to { 199 | transform: rotateY(10deg); 200 | } 201 | } 202 | @-webkit-keyframes unspin { 203 | from { 204 | transform: rotateY(-170deg); 205 | } 206 | to { 207 | transform: rotateY(10deg); 208 | } 209 | } 210 | 211 | .unspin { 212 | -webkit-animation: unspin .3s forwards; 213 | -moz-animation: unspin .3s forwards; 214 | -o-animation: unspin .3s forwards; 215 | animation: unspin .3s forwards; 216 | } 217 | 218 | .background { 219 | position: absolute; 220 | border: 2px solid black; 221 | top: 20px; 222 | } 223 | body[game-skill=little] .background { 224 | width: 740px; 225 | height: 560px; 226 | } 227 | body[game-skill=big] .background { 228 | width: 1195px; 229 | height: 660px; 230 | top: -20px; 231 | } 232 | .background.background-easy { 233 | background-color: #0FF; 234 | } 235 | h1 { 236 | margin-top: 20px; 237 | } 238 | a:hover { 239 | color: inherit !important; 240 | } 241 | .description { 242 | margin-top: 0; 243 | } 244 | .hide { 245 | display: none; 246 | } 247 | small { 248 | color: #444; 249 | font-size: 13px; 250 | margin-left: 12px; 251 | font-weight: bold; 252 | } 253 | .game-info { 254 | font-family: monospace; 255 | position: absolute; 256 | border: 2px solid black; 257 | padding: 15px; 258 | background-color: white; 259 | text-align: right; 260 | } 261 | body[game-skill=little] .game-info { 262 | width: 710px; 263 | top: 581px; 264 | } 265 | body[game-skill=big] .game-info { 266 | width: 1165px; 267 | top: 642px; 268 | } 269 | span.time { 270 | margin-right: 40px; 271 | } 272 | .highscores { 273 | width: 530px; 274 | height: 360px; 275 | margin-left: -265px; 276 | } 277 | .retro-window { 278 | position: absolute; 279 | background: white; 280 | left: 50%; 281 | top: 30px; 282 | z-index: 99; 283 | padding: 13px; 284 | font-family: monospace; 285 | color: black; 286 | } 287 | .retro-border { 288 | border-top: 2px solid #E3E3E3; 289 | border-left: 2px solid #E3E3E3; 290 | border-right: 2px solid #A0A0A0; 291 | border-bottom: 2px solid #A0A0A0; 292 | box-shadow: 2px 0px 0 #696969, 2px 2px 0 #696969, 0px 2px 0 #696969; 293 | } 294 | .retro-window .title { 295 | font-family: monospace; 296 | color: black; 297 | text-align: center; 298 | padding: 10px 0; 299 | } 300 | .highscores .board { 301 | border: 2px solid #696969; 302 | position: relative; 303 | margin-top: 23px; 304 | padding: 10px; 305 | } 306 | .board-title { 307 | text-align: center; 308 | background: white; 309 | top: -8px; 310 | position: absolute; 311 | left: 50%; 312 | } 313 | .board.fastest-times .board-title { 314 | width: 150px; 315 | margin-left: -75px; 316 | } 317 | .board.fewest-pairs .board-title { 318 | width: 240px; 319 | margin-left: -120px; 320 | } 321 | .highscores table { 322 | width: 100%; 323 | border-collapse: collapse; 324 | } 325 | .highscores td:last-of-type { 326 | text-align: right; 327 | width: 160px; 328 | padding-right: 4px; 329 | } 330 | .highscores td:nth-of-type(1) { 331 | text-align: left; 332 | width: 10px; 333 | padding-left: 4px; 334 | } 335 | .highscores td:nth-of-type(2) { 336 | text-align: left; 337 | width: 200px; 338 | text-overflow: ellipsis; 339 | white-space: nowrap; 340 | overflow: hidden; 341 | max-width: 200px; 342 | } 343 | .highscores td:nth-of-type(3), 344 | .highscores td:nth-of-type(4), 345 | .highscores td:nth-of-type(5) { 346 | text-align: right; 347 | } 348 | .board tr.selected td { 349 | border-color: #A0A0A0; 350 | border-bottom: 1px solid; 351 | border-top: 1px solid; 352 | } 353 | .board tr.selected td:first-of-type { 354 | border-left: 1px solid; 355 | } 356 | .board tr.selected td:last-of-type { 357 | border-right: 1px solid; 358 | } 359 | .controls { 360 | padding-top: 20px; 361 | text-align: center; 362 | } 363 | a.retro-border, 364 | button.retro-border { 365 | width: 190px; 366 | height: 30px; 367 | margin: 6px 20px; 368 | background: #F0F0F0; 369 | cursor: pointer; 370 | display: inline-block; 371 | font-size: 13px; 372 | color: inherit; 373 | font-weight: normal; 374 | vertical-align: middle; 375 | text-decoration: none; 376 | font-family: monospace; 377 | } 378 | .congrats { 379 | width: 280px; 380 | padding: 20px; 381 | margin-left: -140px; 382 | } 383 | .congrats form input:focus { 384 | border: 1px solid black; 385 | outline: none; 386 | } 387 | .congrats form input { 388 | width: calc(100% - 8px); 389 | font-family: monospace; 390 | color: black; 391 | padding: 4px; 392 | background: white; 393 | margin-bottom: 14px; 394 | border: 1px solid #A0A0A0; 395 | } 396 | .congrats form .ok-btn { 397 | width: 50px; 398 | } 399 | .game-controls { 400 | position: absolute; 401 | left: 0; 402 | top: -76px; 403 | right: 0; 404 | } 405 | .highscores { 406 | display: none; 407 | } 408 | .unselectable { 409 | -webkit-user-select: none; 410 | -khtml-user-select: none; 411 | -moz-user-select: -moz-none; 412 | -ms-user-select: none; 413 | user-select: none; 414 | } 415 | .bg-win { 416 | background: #FFFF00; 417 | } 418 | .bg-win-purple { 419 | background: #FF00FF; 420 | } 421 | .bg-win-purple small { 422 | color: white; 423 | } 424 | /* hacking the direction */ 425 | 426 | .game > div.spin .front { 427 | top: -5px; 428 | } 429 | .game > div.spin .back { 430 | bottom: -9px; 431 | left: -1px; 432 | } 433 | .game > div.spin .right { 434 | -webkit-transform: rotateY(-270deg) translateY(68px) translateX(58px) scale(.5, -1) skewY(184deg); 435 | -moz-transform: rotateY(-270deg) translateY(68px) translateX(58px) scale(.5, -1) skewY(184deg); 436 | -ms-transform: rotateY(-270deg) translateY(68px) translateX(58px) scale(.5, -1) skewY(184deg); 437 | -o-transform: rotateY(-270deg) translateY(68px) translateX(58px) scale(.5, -1) skewY(184deg); 438 | transform: rotateY(-270deg) translateY(68px) translateX(58px) scale(.5, -1) skewY(184deg); 439 | } 440 | .game > div.spin .bottom { 441 | -webkit-transform: rotatex(81deg) translatex(-1px) translatey(-20px) translatez(-4px) scale(1, .5); 442 | -moz-transform: rotatex(81deg) translatex(-1px) translatey(-20px) translatez(-4px) scale(1, .5); 443 | -ms-transform: rotatex(81deg) translatex(-1px) translatey(-20px) translatez(-4px) scale(1, .5); 444 | -o-transform: rotatex(81deg) translatex(-1px) translatey(-20px) translatez(-4px) scale(1, .5); 445 | transform: rotatex(81deg) translatex(-1px) translatey(-20px) translatez(-4px) scale(1, .5); 446 | } 447 | .game > div.spin .left { 448 | display: none; 449 | } 450 | .game > div.spin .top { 451 | -webkit-transform: rotateZ(180deg) rotateX(-79deg) translateZ(10px) translateY(36px); 452 | -moz-transform: rotateZ(180deg) rotateX(-79deg) translateZ(10px) translateY(36px); 453 | -ms-transform: rotateZ(180deg) rotateX(-79deg) translateZ(10px) translateY(36px); 454 | -o-transform: rotateZ(180deg) rotateX(-79deg) translateZ(10px) translateY(36px); 455 | transform: rotateZ(180deg) rotateX(-79deg) translateZ(10px) translateY(36px); 456 | } 457 | @keyframes spin { 458 | 0% { 459 | transform: rotateY(0); 460 | } 461 | 100% { 462 | transform: rotateY(-170deg); 463 | } 464 | } 465 | @keyframes spin-front { 466 | 30% { 467 | z-index: 2; 468 | } 469 | 100% { 470 | z-index: 2; 471 | } 472 | } 473 | .cube.active { 474 | margin-top: -1px; 475 | margin-left: -11px; 476 | } 477 | .window-about { 478 | width: 520px; 479 | margin-left: -260px; 480 | } 481 | select.retro-border { 482 | top: -2px; 483 | height: 19px; 484 | color: #444444; 485 | background: rgb(255, 255, 255); 486 | font-family: inherit; 487 | font-weight: bold; 488 | font-size: 10px; 489 | position: relative; 490 | } 491 | .retro-window a { 492 | color: inherit; 493 | font-weight: initial; 494 | text-decoration: underline; 495 | } 496 | a.retro-border { 497 | height: 21px; 498 | padding-top: 5px; 499 | width: 186px; 500 | } 501 | 502 | .text-center { 503 | text-align: center; 504 | } 505 | body[game-skill=big] .game-controls .retro-border { 506 | margin: 3px 2px; 507 | } -------------------------------------------------------------------------------- /images/1-star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/1-star.png -------------------------------------------------------------------------------- /images/10-musical-note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/10-musical-note.png -------------------------------------------------------------------------------- /images/11-sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/11-sun.png -------------------------------------------------------------------------------- /images/12-peace-sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/12-peace-sign.png -------------------------------------------------------------------------------- /images/13-moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/13-moon.png -------------------------------------------------------------------------------- /images/14-heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/14-heart.png -------------------------------------------------------------------------------- /images/15-zig-zag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/15-zig-zag.png -------------------------------------------------------------------------------- /images/16-colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/16-colors.png -------------------------------------------------------------------------------- /images/17-clover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/17-clover.png -------------------------------------------------------------------------------- /images/17-star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/17-star.png -------------------------------------------------------------------------------- /images/18-apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/18-apple.png -------------------------------------------------------------------------------- /images/19-castle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/19-castle.png -------------------------------------------------------------------------------- /images/2-butterfly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/2-butterfly.png -------------------------------------------------------------------------------- /images/20-dolar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/20-dolar.png -------------------------------------------------------------------------------- /images/21-circles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/21-circles.png -------------------------------------------------------------------------------- /images/22-bars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/22-bars.png -------------------------------------------------------------------------------- /images/23-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/23-ball.png -------------------------------------------------------------------------------- /images/24-carpet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/24-carpet.png -------------------------------------------------------------------------------- /images/25-rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/25-rectangle.png -------------------------------------------------------------------------------- /images/26-grey-park.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/26-grey-park.png -------------------------------------------------------------------------------- /images/27-question-mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/27-question-mark.png -------------------------------------------------------------------------------- /images/28-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/28-tree.png -------------------------------------------------------------------------------- /images/29-sandtime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/29-sandtime.png -------------------------------------------------------------------------------- /images/3-chinese.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/3-chinese.png -------------------------------------------------------------------------------- /images/30-diode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/30-diode.png -------------------------------------------------------------------------------- /images/4-potion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/4-potion.png -------------------------------------------------------------------------------- /images/5-happy-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/5-happy-face.png -------------------------------------------------------------------------------- /images/6-stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/6-stop.png -------------------------------------------------------------------------------- /images/7-house.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/7-house.png -------------------------------------------------------------------------------- /images/8-black-sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/8-black-sign.png -------------------------------------------------------------------------------- /images/8-chees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicaBizau/memory-blocks/3c0641cf45e6b9ea33bc9752bd8bcc89e4fb7b25/images/8-chees.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Memory Blocks 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | View on GitHub 19 | 26 | 27 |
28 |
29 |
30 |
31 |
Congratulations!
32 |
33 |

You have one of the top scores.
34 | Please enter your name...

35 |
36 | 37 | 38 |
39 |
40 |
41 |
42 |
Welcome to Memory Blocks!
43 |

Tiles are randomly dealt with the picture side down.

44 |

Flip over any two tiles by clicking on them. If the pictures on the tiles are identical then they will disappear. If they are not identical then they will be flipped back to picture-side-down.

45 |

Continue flipping pairs until all matches have been found and there are no more tiles.

46 |

You are scored two ways. First, by the number of seconds it takes for you to find all of the matches. Second, by the total number of pairs you need to flip in order to find all of the matches.

47 |

The top scores are displayed on the high score list.

48 |

Good luck!

49 |
50 |

* * *

51 |

SYMANTEC GAME PACK

52 |

Memory Blocks

53 |

Version 1.00

54 |

Copyright © 1991 Charles Timmerman

55 |

Ported to web, with <3 and author's permission, by Ionică Bizău.

56 | 57 |
58 |
59 | 60 |
61 |
Little Board High Scores
62 |
63 |
The Fastest Times
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
1.SecondsTotal Pairs Flipped
2.SecondsTotal Pairs Flipped
3.SecondsTotal Pairs Flipped
4.SecondsTotal Pairs Flipped
5.SecondsTotal Pairs Flipped
108 |
109 |
110 |
The Fewest Total Pairs Flipped
111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 |
1.SecondsTotal Pairs Flipped
2.SecondsTotal Pairs Flipped
3.SecondsTotal Pairs Flipped
4.SecondsTotal Pairs Flipped
5.SecondsTotal Pairs Flipped
155 |
156 |
157 | 158 | 159 |
160 |
161 |
162 | Time: 0 Total pairs flipped: 0 163 |
164 |
165 |
166 |
167 |
168 |
169 | 170 |
171 |
172 |
173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /js/highscores.js: -------------------------------------------------------------------------------- 1 | var Highscores = { 2 | get: function (skill) { 3 | var ls = localStorage.getItem(this.getSkill(skill)) || ""; 4 | try { 5 | ls = JSON.parse(ls); 6 | } catch (e) { 7 | ls = {} 8 | } 9 | return this.sort(ls); 10 | } 11 | , getSkill: function (skill) { 12 | return "highscores-" + skill; 13 | } 14 | , reset: function (skill) { 15 | localStorage.setItem(this.getSkill(skill), ""); 16 | } 17 | , _sort: function (by) { 18 | return function (a, b) { 19 | return a[by] > b[by]; 20 | } 21 | } 22 | , sort: function (ls) { 23 | return { 24 | fastestTimes: (ls.fastestTimes || []).sort(this._sort("time")).slice(0, 5) 25 | , fewestPairs: (ls.fewestPairs || []).sort(this._sort("pairs")).slice(0, 5) 26 | }; 27 | } 28 | , check: function (pairs, time, skill) { 29 | var s = this.get(skill); 30 | // 0 - no highscores 31 | // 1 - fastesttimes 32 | // 2 - fewestpairs 33 | // 3 - fastesttimes && fewestpairs 34 | if ( 35 | (s.fastestTimes.length < 5 && s.fewestPairs.length < 5) 36 | || (s.fastestTimes.slice(-1)[0].time > time && s.fewestPairs.slice(-1)[0].pairs > pairs) 37 | ) { 38 | return 3; 39 | } 40 | 41 | if (s.fastestTimes.length < 5 || s.fastestTimes.slice(-1)[0].time > time) { 42 | return 1; 43 | } 44 | 45 | if (s.fewestPairs.length < 5 || s.fewestPairs.slice(-1)[0].pairs > pairs) { 46 | return 2; 47 | } 48 | 49 | return 0; 50 | } 51 | , obj: function (name, time, pairs) { 52 | return { 53 | name: name 54 | , time: time 55 | , pairs: pairs 56 | , timestamp: new Date().getTime() 57 | }; 58 | } 59 | , insert: function (name, time, pairs, skill) { 60 | var s = this.get(skill) 61 | , where = this.check(time, pairs, skill) 62 | , obj = this.obj(name, time, pairs) 63 | ; 64 | 65 | switch (where) { 66 | case 1: 67 | s.fastestTimes.push(obj); 68 | break; 69 | case 2: 70 | s.fewestPairs.push(obj); 71 | break; 72 | case 3: 73 | s.fastestTimes.push(obj); 74 | s.fewestPairs.push(obj); 75 | break; 76 | } 77 | 78 | localStorage.setItem(this.getSkill(skill), JSON.stringify(s)); 79 | 80 | return obj; 81 | } 82 | }; 83 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var game = null 3 | , $aboutWindow = $(".window-about") 4 | , $closeAboutBtn = $(".close-about") 5 | , $game = $(".game-info") 6 | , $enterName = $(".enter-name") 7 | , $congrats = $(".congrats") 8 | , $nameInput = $("form input.user-name") 9 | , $time = $(".time") 10 | , $pairsCount = $(".pairs-count") 11 | , $highscores = $(".highscores") 12 | , $body = $(document.body) 13 | , $skillSelect = $("select") 14 | , $gameSkillType = $("span.game-skill-type") 15 | ; 16 | 17 | function closeAbout() { 18 | if (game === null) { 19 | newGame(); 20 | } 21 | $aboutWindow.addClass("hide"); 22 | } 23 | 24 | $closeAboutBtn.on("click", closeAbout); 25 | 26 | function newGame() { 27 | 28 | if (game) { 29 | clearInterval(game.timer); 30 | clearInterval(game.winInterval); 31 | $congrats.addClass("hide"); 32 | $game.removeClass("bg-win-purple", "bg-win"); 33 | $time.html(0); 34 | $pairsCount.html(0); 35 | } 36 | 37 | var gameSize = gameSkill === "little" ? { 38 | x: 6 39 | , y: 5 40 | } : { 41 | x: 10 42 | , y: 6 43 | }; 44 | 45 | game = new Match(".game", { 46 | templateElm: ".templates > div" 47 | , autoremove: false 48 | , size: gameSize 49 | , step: { 50 | x: 115 51 | , y: 105 52 | } 53 | }, [ 54 | { 55 | img: "images/1-star.png" 56 | } 57 | , { 58 | img: "images/10-musical-note.png" 59 | } 60 | , { 61 | img: "images/11-sun.png" 62 | } 63 | , { 64 | img: "images/12-peace-sign.png" 65 | } 66 | , { 67 | img: "images/13-moon.png" 68 | } 69 | , { 70 | img: "images/14-heart.png" 71 | } 72 | , { 73 | img: "images/15-zig-zag.png" 74 | } 75 | , { 76 | img: "images/16-colors.png" 77 | } 78 | , { 79 | img: "images/17-clover.png" 80 | } 81 | , { 82 | img: "images/17-star.png" 83 | } 84 | , { 85 | img: "images/18-apple.png" 86 | } 87 | , { 88 | img: "images/19-castle.png" 89 | } 90 | , { 91 | img: "images/2-butterfly.png" 92 | } 93 | , { 94 | img: "images/20-dolar.png" 95 | } 96 | , { 97 | img: "images/21-circles.png" 98 | } 99 | , { 100 | img: "images/22-bars.png" 101 | } 102 | , { 103 | img: "images/23-ball.png" 104 | } 105 | , { 106 | img: "images/24-carpet.png" 107 | } 108 | , { 109 | img: "images/25-rectangle.png" 110 | } 111 | , { 112 | img: "images/26-grey-park.png" 113 | } 114 | , { 115 | img: "images/27-question-mark.png" 116 | } 117 | , { 118 | img: "images/28-tree.png" 119 | } 120 | , { 121 | img: "images/29-sandtime.png" 122 | } 123 | , { 124 | img: "images/3-chinese.png" 125 | } 126 | , { 127 | img: "images/30-diode.png" 128 | } 129 | , { 130 | img: "images/4-potion.png" 131 | } 132 | , { 133 | img: "images/5-happy-face.png" 134 | } 135 | , { 136 | img: "images/6-stop.png" 137 | } 138 | , { 139 | img: "images/7-house.png" 140 | } 141 | , { 142 | img: "images/8-black-sign.png" 143 | } 144 | , { 145 | img: "images/8-chees.png" 146 | } 147 | ]); 148 | 149 | closeAbout(); 150 | 151 | game.on("win", function () { 152 | setTimeout(function () { 153 | var time = game.passedTime 154 | , pairs = game.flippedPairs 155 | ; 156 | 157 | $game.addClass("bg-win"); 158 | game.winInterval = setInterval(function () { 159 | $game.toggleClass("bg-win-purple"); 160 | }, 500); 161 | 162 | if (Highscores.check(pairs, time, gameSkill)) { 163 | $enterName.removeClass("hide"); 164 | setTimeout(function() { 165 | $nameInput.focus(); 166 | }, 10); 167 | } else { 168 | $enterName.addClass("hide"); 169 | } 170 | $congrats.removeClass("hide"); 171 | }, 1500); 172 | }); 173 | 174 | game.on("activate", function (elm) { 175 | $(elm).removeClass("unspin").addClass("spin"); 176 | }); 177 | 178 | game.on("deactivate", function (elm) { 179 | $(elm).removeClass("spin").addClass("unspin"); 180 | }); 181 | 182 | game.on("success", function (elm1, elm2) { 183 | var $elm1 = $(elm1) 184 | , $elm2 = $(elm2) 185 | ; 186 | 187 | setTimeout(function() { 188 | $elm1.addClass("spinned-zoom-out"); 189 | $elm2.addClass("spinned-zoom-out"); 190 | setTimeout(function() { 191 | $elm1.remove(); 192 | $elm2.remove(); 193 | }, 900); 194 | }, 1000); 195 | }); 196 | 197 | game.on("time", function (time) { 198 | var sec = Math.floor(time / 1000); 199 | $time.html(sec); 200 | game.passedTime = sec; 201 | }); 202 | 203 | game.on("pair-flip", function () { 204 | $pairsCount.html(game.flippedPairs + 1); 205 | }); 206 | 207 | game.start(); 208 | } 209 | 210 | function showHighscores() { 211 | var hScores = Highscores.get(gameSkill); 212 | 213 | function forTable(selector, scores) { 214 | var elms = $(selector + " table tbody tr"); 215 | elms.each(function (cRow, i) { 216 | 217 | var $cRow = $(cRow) 218 | , $tds = $("td", $cRow) 219 | ; 220 | 221 | scores[i] = scores[i] || { 222 | name: "" 223 | , time: "" 224 | , pairs: "" 225 | , timestamp: "" 226 | }; 227 | 228 | $tds.eq(1).text(scores[i].name); 229 | $tds.eq(2).text(scores[i].time); 230 | $tds.eq(4).text(scores[i].pairs); 231 | 232 | $cRow.attr("data-timestamp", scores[i].timestamp.toString()); 233 | $cRow.removeClass("selected"); 234 | }); 235 | } 236 | 237 | forTable(".fastest-times", hScores.fastestTimes); 238 | forTable(".fewest-pairs", hScores.fewestPairs); 239 | $highscores.show(); 240 | } 241 | 242 | $(".highscores .ok-btn").on("click", function () { 243 | $highscores.hide(); 244 | }); 245 | 246 | // Restart game 247 | $(".restart").on("click", newGame); 248 | 249 | // Toggle colors 250 | $(".toggle-colors").on("click", function () { 251 | $body.toggleClass("grayscale"); 252 | }); 253 | 254 | // Show highscores 255 | $(".show-highscores").on("click", showHighscores); 256 | 257 | // Reset highscores 258 | $(".reset-btn").on("click", function () { 259 | Highscores.reset(gameSkill); 260 | showHighscores(); 261 | }); 262 | 263 | // Form submit 264 | $("form").on("submit", function (e) { 265 | var name = $nameInput.val() 266 | , inserted = Highscores.insert(name, game.passedTime, game.flippedPairs, gameSkill) 267 | ; 268 | 269 | $enterName.addClass("hide"); 270 | showHighscores(); 271 | 272 | var $toSelect = $("[data-timestamp='" + inserted.timestamp + "']"); 273 | $toSelect.addClass("selected"); 274 | 275 | e.preventDefault(); 276 | }); 277 | 278 | $(".btn-about").on("click", function (e) { 279 | $aboutWindow.toggleClass("hide"); 280 | }); 281 | 282 | $skillSelect.on("change", function () { 283 | gameSkill = this.value; 284 | $body.attr("game-skill", gameSkill); 285 | $gameSkillType.text(gameSkill.charAt(0).toUpperCase() + gameSkill.substring(1)); 286 | if (game) { 287 | newGame(); 288 | } 289 | }).trigger("change"); 290 | })(); 291 | -------------------------------------------------------------------------------- /js/jq.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function _typeof(t){return t&&"undefined"!=typeof Symbol&&t.constructor===Symbol?"symbol":typeof t}function _classCallCheck(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}!function(){function t(t,n){if("string"==typeof t){if(n&&n.constructor===e){var r=n.elms[0];if(!r)return[];n=r}return n=n||document,n.querySelectorAll(t)}return[t]}function n(r,o){return"function"==typeof r?n(window).on("DOMContentLoaded",r):new e(t(r,o)||[])}var e=function r(t){_classCallCheck(this,r),this.elms=t,this.length=this.elms.length};e.prototype.each=function(t){for(var n=this.elms,e=0;ee||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},n.prototype.emit=function(e){var t,n,r,a,c,u;if(this._events||(this._events={}),"error"===e&&(!this._events.error||s(this._events.error)&&!this._events.error.length)){if(t=arguments[1],t instanceof Error)throw t;throw TypeError('Uncaught, unspecified "error" event.')}if(n=this._events[e],o(n))return!1;if(i(n))switch(arguments.length){case 1:n.call(this);break;case 2:n.call(this,arguments[1]);break;case 3:n.call(this,arguments[1],arguments[2]);break;default:for(r=arguments.length,a=new Array(r-1),c=1;r>c;c++)a[c-1]=arguments[c];n.apply(this,a)}else if(s(n)){for(r=arguments.length,a=new Array(r-1),c=1;r>c;c++)a[c-1]=arguments[c];for(u=n.slice(),r=u.length,c=0;r>c;c++)u[c].apply(this,a)}return!0},n.prototype.addListener=function(e,t){var r;if(!i(t))throw TypeError("listener must be a function");if(this._events||(this._events={}),this._events.newListener&&this.emit("newListener",e,i(t.listener)?t.listener:t),this._events[e]?s(this._events[e])?this._events[e].push(t):this._events[e]=[this._events[e],t]:this._events[e]=t,s(this._events[e])&&!this._events[e].warned){var r;r=o(this._maxListeners)?n.defaultMaxListeners:this._maxListeners,r&&r>0&&this._events[e].length>r&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace())}return this},n.prototype.on=n.prototype.addListener,n.prototype.once=function(e,t){function n(){this.removeListener(e,n),r||(r=!0,t.apply(this,arguments))}if(!i(t))throw TypeError("listener must be a function");var r=!1;return n.listener=t,this.on(e,n),this},n.prototype.removeListener=function(e,t){var n,r,o,a;if(!i(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(n=this._events[e],o=n.length,r=-1,n===t||i(n.listener)&&n.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(s(n)){for(a=o;a-->0;)if(n[a]===t||n[a].listener&&n[a].listener===t){r=a;break}if(0>r)return this;1===n.length?(n.length=0,delete this._events[e]):n.splice(r,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},n.prototype.removeAllListeners=function(e){var t,n;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(n=this._events[e],i(n))this.removeListener(e,n);else for(;n.length;)this.removeListener(e,n[n.length-1]);return delete this._events[e],this},n.prototype.listeners=function(e){var t;return t=this._events&&this._events[e]?i(this._events[e])?[this._events[e]]:this._events[e].slice():[]},n.listenerCount=function(e,t){var n;return n=e._events&&e._events[t]?i(e._events[t])?1:e._events[t].length:0}},{}],2:[function(e,t){function n(){u=!1,o.length?c=o.concat(c):l=-1,c.length&&i()}function i(){if(!u){var e=setTimeout(n);u=!0;for(var t=c.length;t;){for(o=c,c=[];++l1)for(var n=1;na;++a)i=document.createElement("div"),i.setAttribute("data-pattern",n),i.classList.add("cube"),r=document.createElement("div"),r.classList.add("front"),topElm=document.createElement("div"),topElm.classList.add("top"),bottomElm=document.createElement("div"),bottomElm.classList.add("bottom"),leftElm=document.createElement("div"),leftElm.classList.add("left"),rightElm=document.createElement("div"),rightElm.classList.add("right"),s=document.createElement("div"),s.classList.add("back"),i.appendChild(r),i.appendChild(s),i.appendChild(topElm),i.appendChild(bottomElm),i.appendChild(leftElm),i.appendChild(rightElm),r.innerHTML=o(t.ui.template,e),t.ui.items.push({element:i,data:e,duplicate:!!a}),t.emit("render",i,e,a)}),t.shuffle(t.ui.items),t.ui.container.innerHTML=t.ui.items.map(function(e){return n.cY===t.options.size.y?"":n.cX===t.options.size.x&&(n.y+=t.options.step.y,n.x=0,n.cX=0,++n.cY,n.cY===t.options.size.y)?"":(e.element.style.top=n.y+"px",e.element.style.left=n.x+"px",n.x+=t.options.step.x,++n.cX,e.element.outerHTML)}).join(""),t.addHandlers()},n.prototype.start=function(){var e=this;e.render(!0),e.timestamps[0]=new Date,e.timer=setInterval(function(){e.emit("time",new Date-e.timestamps[0])},1e3)},t.exports=n},{barbe:4,"elm-select":6,events:1,"iterate-object":8,"shuffle-array":9,ul:10}],4:[function(e,t){function n(e,t,n){function r(n,i){Object.keys(n).forEach(function(o){return s=n[o],i.push(o),"object"==typeof s?r(s,i):(e=e.replace(new RegExp(t[0]+i.join(".")+t[1],"g"),s),void i.pop())})}if(Array.isArray(t)||(n=t,t=["{","}"]),!n||n.constructor!==Object)return e;t=t.map(i);var s=null;return r(n,[]),e}var i=e("regex-escape");t.exports=n},{"regex-escape":5}],5:[function(e,t){function n(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}n.proto=function(){return RegExp.escape=n,n},t.exports=n},{}],6:[function(e,t){function n(e,t,r,s){var o=0,a=null;if("string"==typeof e&&(s=s?n(s):document,e=s.querySelectorAll(e)),i(e,NodeList)||i(e,HTMLCollection)||(e=[e]),"function"==typeof t)for(Array.isArray(r)||(r=[r]);o0;)if(e=i.splice(-1)[0],"object"===r(e))for(t in e)e.hasOwnProperty(t)&&("object"===r(e[t])?n[t]=this.deepMerge(e[t],n[t]||{}):void 0!==e[t]&&(n[t]=e[t]));return n},i.prototype.clone=function(e){if(!e)return e;var t,n,i=this,r=[Number,String,Boolean];if(r.forEach(function(n){e instanceof n&&(t=n(e))}),"undefined"==typeof t)if(Array.isArray(e))t=[],e.forEach(function(e,n){t[n]=i.clone(e)});else if("object"==typeof e)if(e.prototype)t=e;else if(e instanceof Date)t=new Date(e);else{t={};for(n in e)t[n]=i.clone(e[n])}else t=e;return t},i.prototype.HOME_DIR=n.env["win32"==n.platform?"USERPROFILE":"HOME"],i.prototype.home=function(){return this.HOME_DIR},t.exports=new i}).call(this,e("_process"))},{_process:2,deffy:11,typpy:12}],11:[function(e,t){function n(e,t,n){return"function"==typeof t?t(e):(n="boolean"===i(n)?{empty:n}:{empty:!1},n.empty?e||t:i(e)===i(t)?e:t)}var i=e("typpy");t.exports=n},{typpy:12}],12:[function(e,t){function n(e){return"string"==typeof e?"string":null===e?"null":void 0===e?"undefined":e.constructor.name.toLowerCase()}t.exports=n},{}]},{},[3])(3)}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "memory-blocks", 3 | "version": "1.0.12", 4 | "description": "The old Memory Blocks game (part of the Symantec Game Pack) ported to modern web.", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/IonicaBizau/memory-blocks.git" 12 | }, 13 | "keywords": [ 14 | "old", 15 | "game", 16 | "blocks", 17 | "html", 18 | "web", 19 | "modern", 20 | "memory" 21 | ], 22 | "author": "Ionică Bizău (https://ionicabizau.net)", 23 | "contributors": [ 24 | "Antonija Šimić (http://tonkec.github.io)" 25 | ], 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/IonicaBizau/memory-blocks/issues" 29 | }, 30 | "homepage": "https://github.com/IonicaBizau/memory-blocks#readme", 31 | "blah": { 32 | "title": "Memory Blocks", 33 | "h_img": "http://i.imgur.com/m6ToUa4.png", 34 | "h_url": "https://ionicabizau.github.io/memory-blocks/", 35 | "description": [ 36 | { 37 | "h2": ":memo: A Bit of History" 38 | }, 39 | { 40 | "p": [ 41 | [ 42 | "2001 was the year when I first played a computer game. I was 6 year old.", 43 | "It happened when we visited a friend in the neighboring village. I really enjoyed that game. That time there were just few people having computers." 44 | ], 45 | "The game I played was **Memory Blocks**. It is part of the *Symantec Game Pack*, coded by Charles Timmerman–founder of [Funster](http://funster.com) and author of over 90 puzzle books.", 46 | "In the meantime I became a web developer and finally decided to port this game to WEB. Yes, you're looking at it and you can play it in your browser.", 47 | "----", 48 | "I contacted Charles Timmerman and showed him what I built. He was so happy to see his game alive on a modern platform:" 49 | ] 50 | }, 51 | { 52 | "p": [ 53 | { 54 | "blockquote": "Amazing! That looks exactly my game!" 55 | }, 56 | { 57 | "blockquote": "I like how the high score table looks the same and even the black & white option is preserved. In those days, there were Windows computers that were in black & white! You might be interested to know that I wrote all the games in assembly language- my choice in those days over the usual C." 58 | } 59 | ] 60 | }, 61 | { 62 | "p": "I asked him to tell me more about the game history. He said:" 63 | }, 64 | { 65 | "blockquote": [ 66 | "There wasn't very many games for Windows in 1991 when I", 67 | "created Memory Blocks and the other games in the", 68 | "Symantec Game Pack. I liked the idea of making", 69 | "cutting-edge computers play children's games that even", 70 | "our grandparents might be familiar with. It was a chance", 71 | "for the player to go back to childhood while still sitting", 72 | "in an office. (Windows computers were mainly for business", 73 | "in those days). I think these familiar games resonated", 74 | "with people and lead to their success." 75 | ] 76 | }, 77 | { 78 | "h2": ":camera: Screenshots" 79 | }, 80 | { 81 | "h3": ":question: About & How to play" 82 | }, 83 | { 84 | "p": "[![](http://i.imgur.com/3Y7jJvF.png)](https://ionicabizau.github.io/memory-blocks/)" 85 | }, 86 | { 87 | "h3": ":camel: High Scores, Big board, colored" 88 | }, 89 | { 90 | "p": "[![](http://i.imgur.com/OymyC8A.png)](https://ionicabizau.github.io/memory-blocks/)" 91 | }, 92 | { 93 | "h3": ":tv: High Scores, Little board, greyscale" 94 | }, 95 | { 96 | "p": "[![](http://i.imgur.com/OydrO2v.png)](https://ionicabizau.github.io/memory-blocks/)" 97 | } 98 | ], 99 | "thanks": { 100 | "ul": [ 101 | [ 102 | "Lots of thanks to [Charles Timmerman](http://funster.com/)–the", 103 | "author of the original game, part of the Symantec Game Pack for", 104 | "Windows. He granted me permissions to use the game images and design in this", 105 | "clone. :cake:" 106 | ], 107 | "Big thanks to [Antonija Šimić (**@tonkec**)](https://github.com/tonkec) for implementing the 3D animations. :sparkles:" 108 | ] 109 | } 110 | }, 111 | "files": [ 112 | "bin/", 113 | "app/", 114 | "lib/", 115 | "dist/", 116 | "src/", 117 | "scripts/", 118 | "resources/", 119 | "menu/", 120 | "cli.js", 121 | "index.js", 122 | "index.d.ts", 123 | "package-lock.json", 124 | "bloggify.js", 125 | "bloggify.json", 126 | "bloggify/" 127 | ] 128 | } --------------------------------------------------------------------------------