Created
October 24, 2012 16:21
-
-
Save ynonp/3947093 to your computer and use it in GitHub Desktop.
Red Spotter Game
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
| (function(global) { | |
| var g = new global.app.Game( | |
| global.app.Score, | |
| global.app.Winner, | |
| global.app.Looser | |
| ); | |
| }(this)); |
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> | |
| <title>Red Spotter</title> | |
| <meta name="viewport" content="user-scalable=0,width=320" /> | |
| <style> | |
| body { | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| } | |
| #container div { | |
| width: 100px; | |
| height: 100px; | |
| background: green; | |
| margin: 10px; | |
| border: 7px solid black; | |
| display: inline-block; | |
| } | |
| #container div.winner { | |
| background: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Spot the Red</h1> | |
| <div id="container"> | |
| <div></div> | |
| <div></div> | |
| <div class="winner"></div> | |
| <div></div> | |
| </div> | |
| <script src="app.js"></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
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 10/24/12 | |
| * Time: 7:37 PM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| (function(global) { | |
| global.app = global.app || {}; | |
| global.app.Game = function( Score, Winner, Looser ) { | |
| var self = {}; | |
| var score = new Score( document.querySelector('.score') ); | |
| var squares = []; | |
| var container = document.querySelector('#container'); | |
| self.add_score = function() { | |
| score.add(); | |
| }; | |
| self.reset_score = function() { | |
| score.zero(); | |
| }; | |
| self.reshuffle = function() { | |
| squares = []; | |
| container.innerHTML = ''; | |
| var winner_idx = Math.floor( Math.random() * 4 ); | |
| for ( var i=0; i < 4; i++ ) { | |
| var el; | |
| if ( winner_idx === i ) { | |
| el = new Winner( i, container, self ); | |
| } else { | |
| el = new Looser( i, container, self ); | |
| } | |
| squares.push( el ); | |
| el.render(); | |
| } | |
| score.render(); | |
| }; | |
| container.addEventListener('click', function(e) { | |
| var idx = Number(e.target.getAttribute('data-index')); | |
| console.log(e.target); | |
| console.log(idx); | |
| if ( idx >= 0 && idx < squares.length ) { | |
| squares[idx].user_clicked_here(); | |
| } | |
| }); | |
| self.reshuffle(); | |
| return self; | |
| }; | |
| }(this)); |
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
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 10/24/12 | |
| * Time: 7:36 PM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| (function(global) { | |
| global.app = global.app || {}; | |
| global.app.Looser = function( i, el, game ) { | |
| var self = {}; | |
| self.user_clicked_here = function() { | |
| game.reset_score(); | |
| game.reshuffle(); | |
| console.log('Loose'); | |
| }; | |
| self.render = function() { | |
| el.innerHTML += '<div data-index="' + i + '"></div>'; | |
| }; | |
| return self; | |
| }; | |
| }(this)); | |
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
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 10/24/12 | |
| * Time: 7:43 PM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| (function(global) { | |
| global.app = global.app || {}; | |
| global.app.Score = function( el ) { | |
| var score = 0; | |
| var self = {}; | |
| self.render = function() { | |
| el.innerHTML = score; | |
| }; | |
| self.add = function() { | |
| score += 10; | |
| }; | |
| self.zero = function() { | |
| score = 0; | |
| }; | |
| return self; | |
| }; | |
| }(this)); |
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
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 10/24/12 | |
| * Time: 7:32 PM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| (function(global) { | |
| global.app = global.app || {}; | |
| global.app.Winner = function( i, el, game ) { | |
| var self = {}; | |
| self.user_clicked_here = function() { | |
| game.add_score(); | |
| game.reshuffle(); | |
| console.log('Win'); | |
| }; | |
| self.render = function() { | |
| el.innerHTML += '<div class="winner" data-index="' + i + '"></div>'; | |
| }; | |
| return self; | |
| }; | |
| }(this)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment