Created
September 2, 2012 21:30
-
-
Save ynonp/3604711 to your computer and use it in GitHub Desktop.
Red Spotter Game Example using Object Oriented JavaScript
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: 9/2/12 | |
* Time: 3:01 PM | |
* To change this template use File | Settings | File Templates. | |
*/ | |
(function() { | |
var Square = function( cls, id ) { | |
var container = document.querySelector('#squares'); | |
this.render = function( ) { | |
var el = document.createElement('div'); | |
el.setAttribute('class', cls ); | |
el.setAttribute('data-id', String(id)); | |
container.appendChild(el); | |
}; | |
}; | |
var Winner = function( game, score, id ) { | |
var self = new Square( "winner", id ); | |
self.onClick = function() { | |
score.add(); | |
game.nextRound(); | |
}; | |
return self; | |
}; | |
var Looser = function( game, score, id ) { | |
var self = new Square( "looser", id); | |
self.onClick = function() { | |
score.reset(); | |
game.nextRound(); | |
}; | |
return self; | |
}; | |
var Score = function() { | |
var score = 0; | |
var el = document.querySelector('#score'); | |
this.add = function() { | |
score++; | |
}; | |
this.get = function() { | |
return score; | |
}; | |
this.reset = function() { | |
score = 0; | |
}; | |
this.render = function() { | |
el.innerHTML = 'Score: ' + score; | |
}; | |
}; | |
var Game = function() { | |
var players = []; | |
var score = new Score(); | |
var container = document.querySelector('#squares'); | |
container.addEventListener('click', function(e) { | |
var el = e.target; | |
var id = Number(el.getAttribute('data-id')); | |
console.dir(e); | |
players[id].onClick(); | |
}); | |
this.nextRound = function() { | |
players = []; | |
container.innerHTML = ''; | |
var idx = Math.floor( Math.random() * 4 ); | |
var next; | |
for ( var i=0; i < 4; i++ ) { | |
if ( i === idx ) { | |
next = new Winner( this, score, i ); | |
} else { | |
next = new Looser( this, score, i ); | |
} | |
next.render( ); | |
players.push( next ); | |
} | |
score.render(); | |
}; | |
}; | |
var g = new Game(); | |
for ( var i=0; i < 50000; i++ ) { | |
g.nextRound(); | |
} | |
}()); |
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 Ultimate</title> | |
<meta name="viewport" content="maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=0" /> | |
<style> | |
#squares { | |
width: 200px; | |
margin: 0 auto; | |
border:5px dashed #a3a3a3; | |
padding:20px; | |
} | |
#squares div { | |
display: inline-block; | |
width:80px; | |
height:80px; | |
margin:10px; | |
} | |
.winner { background: red; } | |
.looser { background: blue; } | |
</style> | |
</head> | |
<body> | |
<h1>Red Spotter Ultimate</h1> | |
<div id="score"></div> | |
<div id="squares"></div> | |
<script src="game.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment