Challenge Bieber

by alexb

HTML

<div class="biebs">
    <div class="n">1</div>
    <img src="http://s3.amazonaws.com/rapgenius/filepicker%2FomQQUIGKQCCG2i1I2IwA_justin_bieber.jpg" width="128" />
</div>
<div class="u">
    <div class="n">2</div>
    <img src="http://web.archive.org/web/20091015182314/http://www.faeries.com.au/images/products/girl-u-(large).jpg" width="160" />
</div>

CSS

body > div {
    background: #A46269;
    border: 0 solid #FFBEA5;
    border-width: 5px 0;
    color: white;
    white-space: nowrap;
}

.n {
    float: right;
    font-size: 60px;
    line-height: 150px;
}

img {
    transform: rotate(-15deg);
    animation: wiggle 0.5s linear 0s infinite alternate;
}

.u img {
    position: relative;
    left: -20px;
}

@keyframes wiggle {
    from { transform: rotate(-15deg); }
    to { transform: rotate(15deg); }
}

JavaScript

var start = null;
var biebs = 0, u = 0;
var winner;

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;

  u = Math.min(0.8, u + Math.random() / 200 );
  biebs = Math.min(0.8, biebs + Math.random() / 205);
    
  document.querySelector('.u img').style.marginLeft = (u * 100) + '%';
  document.querySelector('.biebs img').style.marginLeft = (biebs * 100) + '%';
    
    if (!winner) {
        if (u >= 0.8 && u > biebs) {
            winner = 'u';
            alert('You beat Justin Bieber!');
        }
        else if (biebs >= 0.8 && u <
                 biebs) {
            winner = 'biebs';
            alert('Bieber whipped yo scrawny ass.');
        }
    }
    

  if (Math.min(u, biebs) < 1) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

/*confirm("I am ready to play!");

var age = prompt("What's your age?")

if(age < 13)
{
    console.log("you can play but I take no responsibility")
}

else
{
    console.log("enjoy the game!")
}

console.log("You are at a Justin Bieber concert, and you hear this lyric 'Lace my shoes off, start racing.'")

console.log("Suddenly, Bieber stops and says, 'Who wants to race me?'")

var userAnswer = prompt("Do you want to race Bieber on stage?")

if(userAnswer === "yes")
{
    console.log("You and Bieber start racing. It's neck and neck! You win by a shoelace!")
}

else
{
    console.log("Oh no! Bieber shakes his head and sings 'I set a pace, so I can race without pacing.'")
}

var feedback = prompt("please rate my game out of 10!")

if(feedback >8)
{
    console.log("Thank you! We should race at the next concert!")
}
else
{
    console.log("I'll keep practicing coding and racing.")
}*/