Skip to content

Instantly share code, notes, and snippets.

@jonsadka

jonsadka/.block

Last active December 14, 2023 13:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonsadka/f5b75b7735dcf36ddbde4a6604e980ab to your computer and use it in GitHub Desktop.
Save jonsadka/f5b75b7735dcf36ddbde4a6604e980ab to your computer and use it in GitHub Desktop.
Download ZIP
Rock Paper Scissors (Animated)
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var rockPaperScissorsGame = function(){
this.options = ['rock', 'paper', 'scissors'];
}
rockPaperScissorsGame.prototype.addAnotherRound = function(){
var existingHands = this.possibleHands || [];
if (existingHands.length < 1){
this.possibleHands = this.options.map(function(option){return [option];});
return;
} else {
var handsToAdd = existingHands.length
for (var i = 0; i < handsToAdd; i++){
var currentHand = this.possibleHands.shift();
for (var j = 0; j < this.options.length; j++){
var newOption = this.options[j];
var newHand = currentHand.slice().concat(newOption);
this.possibleHands.push(newHand);
}
}
}
}
rockPaperScissorsGame.prototype.play = function(rounds){
this.rounds = rounds;
this.possibleHands = [];
var roundsLeft = rounds;
while (roundsLeft > 0){
this.addAnotherRound();
roundsLeft--;
}
return this.possibleHands;
}
</script>
<script>
var game = new rockPaperScissorsGame();
game.play(5);
var width = window.innerWidth || 960,
height = window.innerHeight || 500,
margin = 0;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', 'white')
.append('g')
.attr('transform', 'translate(' + margin + ',' + margin + ')');
var gameContainerWidth = (width - 2*margin)/(game.possibleHands.length + 2);
var gameContainerHeight = (height - 2*margin)/(game.possibleHands[0].length);
var rounds = svg.selectAll('.gameContainer').data(game.possibleHands);
rounds.enter()
.append('g')
.attr({
'transform': function(d,i){ return 'translate(' + i*gameContainerWidth + ',0)'; },
'class': 'gameContainer',
'opacity': 0,
'data-index': function(d,i){ return i;}
})
.selectAll('.play').data(function(d){return d;}).enter()
.append('rect')
.attr('class', function(d){ return 'play ' + d;})
.attr('height', 0)
.attr('width', gameContainerWidth)
.attr('stroke', 'none')
.attr('fill', function(d,i){
if (d === 'rock') return '#665A88';
if (d === 'paper') return '#79C1BE';
return '#D5434D';
})
.attr('x', function(d,i){ return gameContainerWidth; })
.attr('y', function(d,i){ return i*gameContainerHeight; })
var totalAnimationTime = 2500;
var handTime = totalAnimationTime/game.rounds;
var delayMap = {}
rounds
.transition().delay(function(d,i){
var delay = Math.random()*totalAnimationTime;
delayMap[i] = delay;
return delay;
})
.attr('opacity', 1)
.selectAll('.play')
.transition().duration(handTime).delay(function(d,i){
var parentIndex = this.parentElement.getAttribute('data-index');
var parentDelay = delayMap[parentIndex];
return parentDelay + handTime * i;
})
.attr('height', gameContainerHeight)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment