Skip to content

Instantly share code, notes, and snippets.

@ynonp
Created September 2, 2012 21:30
Show Gist options
  • Save ynonp/3604711 to your computer and use it in GitHub Desktop.
Save ynonp/3604711 to your computer and use it in GitHub Desktop.
Red Spotter Game Example using Object Oriented JavaScript
/**
* 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();
}
}());
<!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