Created
September 27, 2020 18:07
-
-
Save khru/6f07938a2fe8ce6f3b50895bfcad34a4 to your computer and use it in GitHub Desktop.
// source https://jsbin.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> | |
| <title>JS Bin</title> | |
| <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <main id="app"> | |
| <div class="flex w-screen h-screen container mx-auto px-4 flex bg-white mx-4 "> | |
| <div v-bind:class="'w-full place-items-cente grid gap-4 place-items-center grid-cols-'+gridX"> | |
| <div v-on:click="check(item)" class="p-10 text-5xl text-center" v-for="item in game"><label class="content-center"><span v-if="!item.checked">?</span><span v-if="item.checked">{{item.emoji}}</span><input class="hidden" v-model="item.checked" type="checkbox"></label></div> | |
| </div> | |
| </div> | |
| </main> | |
| <script id="jsbin-javascript"> | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| gridX: 4, | |
| gridY: 4, | |
| game: [], | |
| checked: [], | |
| emojis: [ | |
| '๐', '๐', '๐', '๐', 'โบ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ณ', '๐', '๐', '๐', '๐', '๐', '๐ฃ', '๐ข', '๐', '๐ญ', '๐ช', '๐ฅ', '๐ฐ', '๐ ', '๐', '๐ฉ', '๐ซ', '๐จ', '๐ฑ', '๐ ', '๐ก', '๐ค', '๐', '๐', '๐', '๐ท', '๐', '๐ด', '๐ต', '๐ฒ', '๐', '๐ฆ', '๐ง', '๐', '๐ฟ', '๐ฎ', '๐ฌ', '๐', '๐', '๐ฏ', '๐ถ', '๐', '๐', '๐', '๐ฒ', '๐ณ', '๐ฎ', '๐ท', '๐', '๐ถ', '๐ฆ', '๐ง', '๐จ', '๐ฉ', '๐ด', '๐ต', '๐ฑ', '๐ผ', '๐ธ', '๐บ', '๐ธ', '๐ป', '๐ฝ', '๐ผ', '๐', '๐ฟ', '๐น', '๐พ', '๐น', '๐บ', '๐', '๐', '๐', '๐', '๐ฝ', '๐ฉ', '๐ฅ', 'โจ', '๐', '๐ซ', '๐ฅ', '๐ข', '๐ฆ', '๐ง', '๐ค', '๐จ', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', 'โ', 'โ', '๐', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', 'โ', '๐', '๐ช', '๐ถ', '๐', '๐', '๐ซ', '๐ช', '๐ฌ', '๐ญ', '๐', '๐', '๐ฏ', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐ ', '๐ฐ', '๐', '๐', '๐', '๐ฉ', '๐', '๐', '๐', '๐', '๐ก', '๐ ', '๐ข', '๐', '๐', '๐', '๐', '๐ฝ', '๐', '๐', '๐', '๐ผ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', 'โค', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ค', '๐ฅ', '๐ฌ', '๐ฃ', '๐ญ', '๐ถ', '๐บ', '๐ฑ', '๐ญ', '๐น', '๐ฐ', '๐ธ', '๐ฏ', '๐จ', '๐ป', '๐ท', '๐ฝ', '๐ฎ', '๐', '๐ต', '๐', '๐ด', '๐', '๐', '๐ผ', '๐ง', '๐ฆ', '๐ค', '๐ฅ', '๐ฃ', '๐', '๐', '๐ข', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐ฌ', '๐ณ', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฒ', '๐ก', '๐', '๐ซ', '๐ช', '๐', '๐', '๐ฉ', '๐พ', '๐', '๐ธ', '๐ท', '๐', '๐น', '๐ป', '๐บ', '๐', '๐', '๐', '๐ฟ', '๐พ', '๐', '๐ต', '๐ด', '๐ฒ', '๐ณ', '๐ฐ', '๐ฑ', '๐ผ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', 'โญ', 'โ', 'โ ', 'โ', 'โก', 'โ', 'โ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ป', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฎ', '๐ฅ', '๐ท', '๐น', '๐ผ', '๐ฟ', '๐', '๐ฝ', '๐พ', '๐ป', '๐ฑ', 'โ', '๐', '๐', '๐ ', '๐ก', '๐บ', '๐ป', '๐', '๐', '๐', '๐', '๐', '๐', '๐ข', '๐ฃ', 'โณ', 'โ', 'โฐ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐ก', '๐ฆ', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐ฟ', '๐ฝ', '๐ง', '๐ฉ', '๐จ', '๐ช', '๐ฌ', '๐ฃ', '๐ซ', '๐ช', '๐', '๐', '๐ฐ', '๐ด', '๐ต', '๐ท', '๐ถ', '๐ณ', '๐ธ', '๐ฒ', '๐ง', '๐ฅ', '๐ค', 'โ', '๐ฉ', '๐จ', '๐ฏ', '๐ซ', '๐ช', '๐ฌ', '๐ญ', '๐ฎ', '๐ฆ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', 'โ', '๐', '๐', 'โ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฌ', '๐ญ', '๐ฐ', '๐จ', '๐ฌ', '๐ค', '๐ง', '๐ผ', '๐ต', '๐ถ', '๐น', '๐ป', '๐บ', '๐ท', '๐ธ', '๐พ', '๐ฎ', '๐', '๐ด', '๐', '๐ฒ', '๐ฏ', '๐', '๐', 'โฝ', 'โพ', '๐พ', '๐ฑ', '๐', '๐ณ', 'โณ', '๐ต', '๐ด', '๐', '๐', '๐', '๐ฟ', '๐', '๐', '๐', '๐ฃ', 'โ', '๐ต', '๐ถ', '๐ผ', '๐บ', '๐ป', '๐ธ', '๐น', '๐ท', '๐ด', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ค', '๐ฑ', '๐ฃ', '๐ฅ', '๐', '๐', '๐', '๐', '๐ฒ', '๐ข', '๐ก', '๐ณ', '๐', '๐ฉ', '๐ฎ', '๐ฆ', '๐จ', '๐ง', '๐', '๐ฐ', '๐ช', '๐ซ', '๐ฌ', '๐ญ', '๐ฏ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐ ', '๐ฝ', '๐ ', '๐ก', '๐ซ', '๐ข', '๐ฃ', '๐ฅ', '๐ฆ', '๐ช', '๐ฉ', '๐จ', '๐', 'โช', '๐ฌ', '๐ค', '๐', '๐', '๐ฏ', '๐ฐ', 'โบ', '๐ญ', '๐ผ', '๐พ', '๐ป', '๐', '๐ ', '๐', '๐ฝ', '๐', '๐ ', '๐ก', 'โฒ', '๐ข', '๐ข', 'โต', '๐ค', '๐ฃ', 'โ', '๐', 'โ', '๐บ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐จ', '๐', '๐', '๐', '๐', '๐', '๐ฒ', '๐ก', '๐', '๐ ', '๐', '๐', '๐', '๐ซ', '๐ฆ', '๐ฅ', 'โ ', '๐ง', '๐ฐ', 'โฝ', '๐ฎ', '๐ฐ', 'โจ', '๐ฟ', '๐ช', '๐ญ', '๐', '๐ฉ', 'โฌ', 'โฌ', 'โฌ ', 'โก', '๐ ', '๐ก', '๐ค', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', '๐', 'โ', 'โถ', '๐ผ', '๐ฝ', 'โฉ', 'โช', 'โน', 'โช', 'โฉ', 'โซ', 'โฌ', 'โคต', 'โคด', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ถ', '๐ฆ', '๐', '๐ฏ', '๐ณ', '๐ต', '๐ด', '๐ฒ', '๐', '๐น', '๐บ', '๐ถ', '๐', '๐ป', '๐น', '๐บ', '๐ผ', '๐พ', '๐ฐ', '๐ฎ', '๐ ฟ', 'โฟ', '๐ญ', '๐ท', '๐ธ', '๐', 'โ', '๐', '๐', '๐ ', '๐', '๐', 'ใ', 'ใ', '๐', '๐', '๐', '๐ซ', '๐', '๐ต', '๐ฏ', '๐ฑ', '๐ณ', '๐ท', '๐ธ', 'โ', 'โณ', 'โ', 'โ', 'โ ', 'โด', '๐', '๐', '๐ณ', '๐ด', '๐ ฐ', '๐ ฑ', '๐', '๐ พ', '๐ ', 'โฟ', 'โป', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', '๐ฏ', '๐ง', '๐น', '๐ฒ', '๐ฑ', 'ยฉ', 'ยฎ', 'โข', 'ใฝ', 'ใฐ', '๐', '๐', '๐', '๐', '๐', 'โ', 'โญ', 'โ', 'โ', 'โ', 'โ', '๐', '๐', '๐ง', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐ก', '๐ข', '๐ฃ', '๐ค', '๐ฅ', '๐ฆ', 'โ', 'โ', 'โ', 'โ', 'โ ', 'โฅ', 'โฃ', 'โฆ', '๐ฎ', '๐ฏ', 'โ', 'โ', '๐', '๐', 'โฐ', '๐ฑ', '๐ฒ', '๐ณ', 'โผ', 'โป', 'โพ', 'โฝ', 'โช', 'โซ', '๐บ', 'โฌ', 'โฌ', 'โซ', 'โช', '๐ด', '๐ต', '๐ป', '๐ถ', '๐ท', '๐ธ', '๐น' | |
| ], | |
| }, | |
| methods: { | |
| generateGame: function() { | |
| const maxNumOfEmojis = (this.gridX * this.gridY) / 2; | |
| const emojisForTheGame = this.shuffled(this.getRandomAmountOfEmojis(maxNumOfEmojis).reduce(function(res, current, index, array) { | |
| return res.concat([current, current]); | |
| }, [])); | |
| this.game = emojisForTheGame.map(function(item) { | |
| return { | |
| emoji: item, | |
| checked: false | |
| }; | |
| }); | |
| console.log(this.game); | |
| }, | |
| getRandomAmountOfEmojis: function(amount) { | |
| // Shuffle array | |
| const shuffled = this.shuffled(this.emojis); | |
| // Get sub-array of first n elements after shuffled | |
| return shuffled.slice(0, amount); | |
| }, | |
| shuffled: function(array) { | |
| // Shuffle array | |
| return array.sort(() => 0.5 - Math.random()); | |
| }, | |
| check: function(item) { | |
| item.checked = true | |
| } | |
| }, | |
| mounted() { | |
| this.generateGame(); | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">new Vue({ | |
| el: '#app', | |
| data: { | |
| gridX: 4, | |
| gridY: 4, | |
| game: [], | |
| checked: [], | |
| emojis: [ | |
| '๐', '๐', '๐', '๐', 'โบ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ณ', '๐', '๐', '๐', '๐', '๐', '๐ฃ', '๐ข', '๐', '๐ญ', '๐ช', '๐ฅ', '๐ฐ', '๐ ', '๐', '๐ฉ', '๐ซ', '๐จ', '๐ฑ', '๐ ', '๐ก', '๐ค', '๐', '๐', '๐', '๐ท', '๐', '๐ด', '๐ต', '๐ฒ', '๐', '๐ฆ', '๐ง', '๐', '๐ฟ', '๐ฎ', '๐ฌ', '๐', '๐', '๐ฏ', '๐ถ', '๐', '๐', '๐', '๐ฒ', '๐ณ', '๐ฎ', '๐ท', '๐', '๐ถ', '๐ฆ', '๐ง', '๐จ', '๐ฉ', '๐ด', '๐ต', '๐ฑ', '๐ผ', '๐ธ', '๐บ', '๐ธ', '๐ป', '๐ฝ', '๐ผ', '๐', '๐ฟ', '๐น', '๐พ', '๐น', '๐บ', '๐', '๐', '๐', '๐', '๐ฝ', '๐ฉ', '๐ฅ', 'โจ', '๐', '๐ซ', '๐ฅ', '๐ข', '๐ฆ', '๐ง', '๐ค', '๐จ', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', 'โ', 'โ', '๐', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', 'โ', '๐', '๐ช', '๐ถ', '๐', '๐', '๐ซ', '๐ช', '๐ฌ', '๐ญ', '๐', '๐', '๐ฏ', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐ ', '๐ฐ', '๐', '๐', '๐', '๐ฉ', '๐', '๐', '๐', '๐', '๐ก', '๐ ', '๐ข', '๐', '๐', '๐', '๐', '๐ฝ', '๐', '๐', '๐', '๐ผ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', 'โค', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ค', '๐ฅ', '๐ฌ', '๐ฃ', '๐ญ', '๐ถ', '๐บ', '๐ฑ', '๐ญ', '๐น', '๐ฐ', '๐ธ', '๐ฏ', '๐จ', '๐ป', '๐ท', '๐ฝ', '๐ฎ', '๐', '๐ต', '๐', '๐ด', '๐', '๐', '๐ผ', '๐ง', '๐ฆ', '๐ค', '๐ฅ', '๐ฃ', '๐', '๐', '๐ข', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐ฌ', '๐ณ', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฒ', '๐ก', '๐', '๐ซ', '๐ช', '๐', '๐', '๐ฉ', '๐พ', '๐', '๐ธ', '๐ท', '๐', '๐น', '๐ป', '๐บ', '๐', '๐', '๐', '๐ฟ', '๐พ', '๐', '๐ต', '๐ด', '๐ฒ', '๐ณ', '๐ฐ', '๐ฑ', '๐ผ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', 'โญ', 'โ', 'โ ', 'โ', 'โก', 'โ', 'โ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ป', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฎ', '๐ฅ', '๐ท', '๐น', '๐ผ', '๐ฟ', '๐', '๐ฝ', '๐พ', '๐ป', '๐ฑ', 'โ', '๐', '๐', '๐ ', '๐ก', '๐บ', '๐ป', '๐', '๐', '๐', '๐', '๐', '๐', '๐ข', '๐ฃ', 'โณ', 'โ', 'โฐ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐ก', '๐ฆ', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐ฟ', '๐ฝ', '๐ง', '๐ฉ', '๐จ', '๐ช', '๐ฌ', '๐ฃ', '๐ซ', '๐ช', '๐', '๐', '๐ฐ', '๐ด', '๐ต', '๐ท', '๐ถ', '๐ณ', '๐ธ', '๐ฒ', '๐ง', '๐ฅ', '๐ค', 'โ', '๐ฉ', '๐จ', '๐ฏ', '๐ซ', '๐ช', '๐ฌ', '๐ญ', '๐ฎ', '๐ฆ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', 'โ', '๐', '๐', 'โ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฌ', '๐ญ', '๐ฐ', '๐จ', '๐ฌ', '๐ค', '๐ง', '๐ผ', '๐ต', '๐ถ', '๐น', '๐ป', '๐บ', '๐ท', '๐ธ', '๐พ', '๐ฎ', '๐', '๐ด', '๐', '๐ฒ', '๐ฏ', '๐', '๐', 'โฝ', 'โพ', '๐พ', '๐ฑ', '๐', '๐ณ', 'โณ', '๐ต', '๐ด', '๐', '๐', '๐', '๐ฟ', '๐', '๐', '๐', '๐ฃ', 'โ', '๐ต', '๐ถ', '๐ผ', '๐บ', '๐ป', '๐ธ', '๐น', '๐ท', '๐ด', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ค', '๐ฑ', '๐ฃ', '๐ฅ', '๐', '๐', '๐', '๐', '๐ฒ', '๐ข', '๐ก', '๐ณ', '๐', '๐ฉ', '๐ฎ', '๐ฆ', '๐จ', '๐ง', '๐', '๐ฐ', '๐ช', '๐ซ', '๐ฌ', '๐ญ', '๐ฏ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐ ', '๐ฝ', '๐ ', '๐ก', '๐ซ', '๐ข', '๐ฃ', '๐ฅ', '๐ฆ', '๐ช', '๐ฉ', '๐จ', '๐', 'โช', '๐ฌ', '๐ค', '๐', '๐', '๐ฏ', '๐ฐ', 'โบ', '๐ญ', '๐ผ', '๐พ', '๐ป', '๐', '๐ ', '๐', '๐ฝ', '๐', '๐ ', '๐ก', 'โฒ', '๐ข', '๐ข', 'โต', '๐ค', '๐ฃ', 'โ', '๐', 'โ', '๐บ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐จ', '๐', '๐', '๐', '๐', '๐', '๐ฒ', '๐ก', '๐', '๐ ', '๐', '๐', '๐', '๐ซ', '๐ฆ', '๐ฅ', 'โ ', '๐ง', '๐ฐ', 'โฝ', '๐ฎ', '๐ฐ', 'โจ', '๐ฟ', '๐ช', '๐ญ', '๐', '๐ฉ', 'โฌ', 'โฌ', 'โฌ ', 'โก', '๐ ', '๐ก', '๐ค', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', '๐', 'โ', 'โถ', '๐ผ', '๐ฝ', 'โฉ', 'โช', 'โน', 'โช', 'โฉ', 'โซ', 'โฌ', 'โคต', 'โคด', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ถ', '๐ฆ', '๐', '๐ฏ', '๐ณ', '๐ต', '๐ด', '๐ฒ', '๐', '๐น', '๐บ', '๐ถ', '๐', '๐ป', '๐น', '๐บ', '๐ผ', '๐พ', '๐ฐ', '๐ฎ', '๐ ฟ', 'โฟ', '๐ญ', '๐ท', '๐ธ', '๐', 'โ', '๐', '๐', '๐ ', '๐', '๐', 'ใ', 'ใ', '๐', '๐', '๐', '๐ซ', '๐', '๐ต', '๐ฏ', '๐ฑ', '๐ณ', '๐ท', '๐ธ', 'โ', 'โณ', 'โ', 'โ', 'โ ', 'โด', '๐', '๐', '๐ณ', '๐ด', '๐ ฐ', '๐ ฑ', '๐', '๐ พ', '๐ ', 'โฟ', 'โป', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', '๐ฏ', '๐ง', '๐น', '๐ฒ', '๐ฑ', 'ยฉ', 'ยฎ', 'โข', 'ใฝ', 'ใฐ', '๐', '๐', '๐', '๐', '๐', 'โ', 'โญ', 'โ', 'โ', 'โ', 'โ', '๐', '๐', '๐ง', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐ก', '๐ข', '๐ฃ', '๐ค', '๐ฅ', '๐ฆ', 'โ', 'โ', 'โ', 'โ', 'โ ', 'โฅ', 'โฃ', 'โฆ', '๐ฎ', '๐ฏ', 'โ', 'โ', '๐', '๐', 'โฐ', '๐ฑ', '๐ฒ', '๐ณ', 'โผ', 'โป', 'โพ', 'โฝ', 'โช', 'โซ', '๐บ', 'โฌ', 'โฌ', 'โซ', 'โช', '๐ด', '๐ต', '๐ป', '๐ถ', '๐ท', '๐ธ', '๐น' | |
| ], | |
| }, | |
| methods: { | |
| generateGame: function() { | |
| const maxNumOfEmojis = (this.gridX * this.gridY) / 2; | |
| const emojisForTheGame = this.shuffled(this.getRandomAmountOfEmojis(maxNumOfEmojis).reduce(function(res, current, index, array) { | |
| return res.concat([current, current]); | |
| }, [])); | |
| this.game = emojisForTheGame.map(function(item) { | |
| return { | |
| emoji: item, | |
| checked: false | |
| }; | |
| }); | |
| console.log(this.game); | |
| }, | |
| getRandomAmountOfEmojis: function(amount) { | |
| // Shuffle array | |
| const shuffled = this.shuffled(this.emojis); | |
| // Get sub-array of first n elements after shuffled | |
| return shuffled.slice(0, amount); | |
| }, | |
| shuffled: function(array) { | |
| // Shuffle array | |
| return array.sort(() => 0.5 - Math.random()); | |
| }, | |
| check: function(item) { | |
| item.checked = true | |
| } | |
| }, | |
| mounted() { | |
| this.generateGame(); | |
| } | |
| });</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| el: '#app', | |
| data: { | |
| gridX: 4, | |
| gridY: 4, | |
| game: [], | |
| checked: [], | |
| emojis: [ | |
| '๐', '๐', '๐', '๐', 'โบ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ณ', '๐', '๐', '๐', '๐', '๐', '๐ฃ', '๐ข', '๐', '๐ญ', '๐ช', '๐ฅ', '๐ฐ', '๐ ', '๐', '๐ฉ', '๐ซ', '๐จ', '๐ฑ', '๐ ', '๐ก', '๐ค', '๐', '๐', '๐', '๐ท', '๐', '๐ด', '๐ต', '๐ฒ', '๐', '๐ฆ', '๐ง', '๐', '๐ฟ', '๐ฎ', '๐ฌ', '๐', '๐', '๐ฏ', '๐ถ', '๐', '๐', '๐', '๐ฒ', '๐ณ', '๐ฎ', '๐ท', '๐', '๐ถ', '๐ฆ', '๐ง', '๐จ', '๐ฉ', '๐ด', '๐ต', '๐ฑ', '๐ผ', '๐ธ', '๐บ', '๐ธ', '๐ป', '๐ฝ', '๐ผ', '๐', '๐ฟ', '๐น', '๐พ', '๐น', '๐บ', '๐', '๐', '๐', '๐', '๐ฝ', '๐ฉ', '๐ฅ', 'โจ', '๐', '๐ซ', '๐ฅ', '๐ข', '๐ฆ', '๐ง', '๐ค', '๐จ', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', 'โ', 'โ', '๐', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', 'โ', '๐', '๐ช', '๐ถ', '๐', '๐', '๐ซ', '๐ช', '๐ฌ', '๐ญ', '๐', '๐', '๐ฏ', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐ ', '๐ฐ', '๐', '๐', '๐', '๐ฉ', '๐', '๐', '๐', '๐', '๐ก', '๐ ', '๐ข', '๐', '๐', '๐', '๐', '๐ฝ', '๐', '๐', '๐', '๐ผ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', 'โค', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ค', '๐ฅ', '๐ฌ', '๐ฃ', '๐ญ', '๐ถ', '๐บ', '๐ฑ', '๐ญ', '๐น', '๐ฐ', '๐ธ', '๐ฏ', '๐จ', '๐ป', '๐ท', '๐ฝ', '๐ฎ', '๐', '๐ต', '๐', '๐ด', '๐', '๐', '๐ผ', '๐ง', '๐ฆ', '๐ค', '๐ฅ', '๐ฃ', '๐', '๐', '๐ข', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐ฌ', '๐ณ', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฒ', '๐ก', '๐', '๐ซ', '๐ช', '๐', '๐', '๐ฉ', '๐พ', '๐', '๐ธ', '๐ท', '๐', '๐น', '๐ป', '๐บ', '๐', '๐', '๐', '๐ฟ', '๐พ', '๐', '๐ต', '๐ด', '๐ฒ', '๐ณ', '๐ฐ', '๐ฑ', '๐ผ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', 'โญ', 'โ', 'โ ', 'โ', 'โก', 'โ', 'โ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ป', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฎ', '๐ฅ', '๐ท', '๐น', '๐ผ', '๐ฟ', '๐', '๐ฝ', '๐พ', '๐ป', '๐ฑ', 'โ', '๐', '๐', '๐ ', '๐ก', '๐บ', '๐ป', '๐', '๐', '๐', '๐', '๐', '๐', '๐ข', '๐ฃ', 'โณ', 'โ', 'โฐ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐ก', '๐ฆ', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐ฟ', '๐ฝ', '๐ง', '๐ฉ', '๐จ', '๐ช', '๐ฌ', '๐ฃ', '๐ซ', '๐ช', '๐', '๐', '๐ฐ', '๐ด', '๐ต', '๐ท', '๐ถ', '๐ณ', '๐ธ', '๐ฒ', '๐ง', '๐ฅ', '๐ค', 'โ', '๐ฉ', '๐จ', '๐ฏ', '๐ซ', '๐ช', '๐ฌ', '๐ญ', '๐ฎ', '๐ฆ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', 'โ', '๐', '๐', 'โ', 'โ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ฌ', '๐ญ', '๐ฐ', '๐จ', '๐ฌ', '๐ค', '๐ง', '๐ผ', '๐ต', '๐ถ', '๐น', '๐ป', '๐บ', '๐ท', '๐ธ', '๐พ', '๐ฎ', '๐', '๐ด', '๐', '๐ฒ', '๐ฏ', '๐', '๐', 'โฝ', 'โพ', '๐พ', '๐ฑ', '๐', '๐ณ', 'โณ', '๐ต', '๐ด', '๐', '๐', '๐', '๐ฟ', '๐', '๐', '๐', '๐ฃ', 'โ', '๐ต', '๐ถ', '๐ผ', '๐บ', '๐ป', '๐ธ', '๐น', '๐ท', '๐ด', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ค', '๐ฑ', '๐ฃ', '๐ฅ', '๐', '๐', '๐', '๐', '๐ฒ', '๐ข', '๐ก', '๐ณ', '๐', '๐ฉ', '๐ฎ', '๐ฆ', '๐จ', '๐ง', '๐', '๐ฐ', '๐ช', '๐ซ', '๐ฌ', '๐ญ', '๐ฏ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐ ', '๐ฝ', '๐ ', '๐ก', '๐ซ', '๐ข', '๐ฃ', '๐ฅ', '๐ฆ', '๐ช', '๐ฉ', '๐จ', '๐', 'โช', '๐ฌ', '๐ค', '๐', '๐', '๐ฏ', '๐ฐ', 'โบ', '๐ญ', '๐ผ', '๐พ', '๐ป', '๐', '๐ ', '๐', '๐ฝ', '๐', '๐ ', '๐ก', 'โฒ', '๐ข', '๐ข', 'โต', '๐ค', '๐ฃ', 'โ', '๐', 'โ', '๐บ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐จ', '๐', '๐', '๐', '๐', '๐', '๐ฒ', '๐ก', '๐', '๐ ', '๐', '๐', '๐', '๐ซ', '๐ฆ', '๐ฅ', 'โ ', '๐ง', '๐ฐ', 'โฝ', '๐ฎ', '๐ฐ', 'โจ', '๐ฟ', '๐ช', '๐ญ', '๐', '๐ฉ', 'โฌ', 'โฌ', 'โฌ ', 'โก', '๐ ', '๐ก', '๐ค', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', '๐', 'โ', 'โถ', '๐ผ', '๐ฝ', 'โฉ', 'โช', 'โน', 'โช', 'โฉ', 'โซ', 'โฌ', 'โคต', 'โคด', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ถ', '๐ฆ', '๐', '๐ฏ', '๐ณ', '๐ต', '๐ด', '๐ฒ', '๐', '๐น', '๐บ', '๐ถ', '๐', '๐ป', '๐น', '๐บ', '๐ผ', '๐พ', '๐ฐ', '๐ฎ', '๐ ฟ', 'โฟ', '๐ญ', '๐ท', '๐ธ', '๐', 'โ', '๐', '๐', '๐ ', '๐', '๐', 'ใ', 'ใ', '๐', '๐', '๐', '๐ซ', '๐', '๐ต', '๐ฏ', '๐ฑ', '๐ณ', '๐ท', '๐ธ', 'โ', 'โณ', 'โ', 'โ', 'โ ', 'โด', '๐', '๐', '๐ณ', '๐ด', '๐ ฐ', '๐ ฑ', '๐', '๐ พ', '๐ ', 'โฟ', 'โป', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', 'โ', '๐ฏ', '๐ง', '๐น', '๐ฒ', '๐ฑ', 'ยฉ', 'ยฎ', 'โข', 'ใฝ', 'ใฐ', '๐', '๐', '๐', '๐', '๐', 'โ', 'โญ', 'โ', 'โ', 'โ', 'โ', '๐', '๐', '๐ง', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐', '๐ ', '๐', '๐', '๐', '๐', '๐', '๐', '๐ก', '๐ข', '๐ฃ', '๐ค', '๐ฅ', '๐ฆ', 'โ', 'โ', 'โ', 'โ', 'โ ', 'โฅ', 'โฃ', 'โฆ', '๐ฎ', '๐ฏ', 'โ', 'โ', '๐', '๐', 'โฐ', '๐ฑ', '๐ฒ', '๐ณ', 'โผ', 'โป', 'โพ', 'โฝ', 'โช', 'โซ', '๐บ', 'โฌ', 'โฌ', 'โซ', 'โช', '๐ด', '๐ต', '๐ป', '๐ถ', '๐ท', '๐ธ', '๐น' | |
| ], | |
| }, | |
| methods: { | |
| generateGame: function() { | |
| const maxNumOfEmojis = (this.gridX * this.gridY) / 2; | |
| const emojisForTheGame = this.shuffled(this.getRandomAmountOfEmojis(maxNumOfEmojis).reduce(function(res, current, index, array) { | |
| return res.concat([current, current]); | |
| }, [])); | |
| this.game = emojisForTheGame.map(function(item) { | |
| return { | |
| emoji: item, | |
| checked: false | |
| }; | |
| }); | |
| console.log(this.game); | |
| }, | |
| getRandomAmountOfEmojis: function(amount) { | |
| // Shuffle array | |
| const shuffled = this.shuffled(this.emojis); | |
| // Get sub-array of first n elements after shuffled | |
| return shuffled.slice(0, amount); | |
| }, | |
| shuffled: function(array) { | |
| // Shuffle array | |
| return array.sort(() => 0.5 - Math.random()); | |
| }, | |
| check: function(item) { | |
| item.checked = true | |
| } | |
| }, | |
| mounted() { | |
| this.generateGame(); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment