Skip to content

Instantly share code, notes, and snippets.

@juanbrujo

juanbrujo/index.html

Created September 22, 2014 23:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juanbrujo/d6ecbe40779ff51c9f7b to your computer and use it in GitHub Desktop.
Save juanbrujo/d6ecbe40779ff51c9f7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#player {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
width: 50px;
height: 50px;
border-radius: 50%;
border-width: 50px;
border-style: solid;
border-top-color: blue;
border-left-color: green;
border-bottom-color: orange;
border-right-color: pink;
transition: 0.15s ease-in-out;
}
span {
display: block;
position: absolute;
top: 0;
left: 50%;
height: 30px;
width: 30px;
background-color: gray;
}
span.blue {
background-color: blue;
}
span.green {
background-color: green;
}
span.orange {
background-color: orange;
}
span.pink {
background-color: pink;
}
#modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
z-index: 7;
}
#title,
#msg {
position: absolute;
top: 30%;
left: 5%;
width: 90%;
text-align: center;
z-index: 9;
color: white;
}
#msg {
top: 50%;
}
#start {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
z-index: 9;
}
#score {
position: absolute;
top: 1%;
right: 1%;
font-weight: bold;
font-size: 24px;
padding: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="player"></div>
<div id="score"></div>
<div id="modal"></div>
<div id="title">Four Points</div>
<div id="msg">click the wheel to make it match the color of the box</div>
<button id="start">start</button>
<script id="jsbin-javascript">
var player = document.querySelector('#player'),
start = document.querySelector('#start'),
totalHeight = player.offsetTop,
counter = 0,
speed = 10,
score = document.querySelector('#score'),
colors= ["blue","green","orange","pink"],
indexColor = 1;
// ===
// === PLAYER
// ===
// ITERATE COLORS FROM ARRAY
function nextColor() {
player.className = colors[indexColor];
indexColor = (indexColor+1)%(colors.length);
};
// ROTATE THE PLAYER CLOCKWISE
function play(){
player.className = colors[0];
player.addEventListener('click',function(e){
var deg = 90;
player.style.webkitTransform += 'rotate('+deg+'deg)';
player.style.transform += 'rotate('+deg+'deg)';
nextColor();
});
makeBox(speed);
score.innerHTML = 0;
}
// ===
// === BOX
// ===
// CREATE NEW BOX
function makeBox(speed) {
var random = colors[Math.floor(Math.random() * colors.length)],
box = document.querySelector('span');
function newBox(){
var box = document.createElement('span');
box.className = random
document.body.appendChild(box);
move(box,totalHeight,speed);
}
if (box) {
document.body.removeChild(box);
newBox();
} else {
newBox();
}
}
function eliminateBox(){
document.body.removeChild(box);
}
// ANIMATE THE BOX
function move(elem,height,speed) {
var top = 0;
function frame() {
top++;
elem.style.top = top + 'px';
if (top == height){
clearInterval(id);
win(player,elem);
}
}
alert(speed)
var id = setInterval(frame, speed); // 10 normal
}
// ===
// === WIN/LOOSE
// ===
// WIN
function win(player,box){
var playerColor = player.className,
boxColor = box.className;
var currentScore = score.innerHTML;
if(playerColor === boxColor) {
score.innerHTML = parseInt(currentScore) + 1;
alert('gano '+speed)
makeBox(speed + 1);
} else {
alert('perdio '+speed)
makeBox(speed - (speed -currentScore));
}
}
// MODAL CONTROL
function modal(){
var modal = document.querySelector('#modal'),
title = document.querySelector('#title'),
msg = document.querySelector('#msg');
modal.style.webkitTransform += 'translateX(-100%)';
modal.style.transform += 'translateX(-100%)';
title.style.webkitTransform += 'translateX(-100%)';
title.style.transform += 'translateX(-100%)';
msg.style.webkitTransform += 'translateX(-100%)';
msg.style.transform += 'translateX(-100%)';
start.style.webkitTransform += 'translateX(-1000%)';
start.style.transform += 'translateX(-1000%)';
}
// ===
// === INIT
// ===
start.addEventListener('click',function(e){
modal();
play();
});
</script>
<script id="jsbin-source-css" type="text/css">#player {
@size: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: (-@size/2) + (-@size/2);
width: @size;
height: @size;
border-radius: 50%;
border-width: @size;
border-style: solid;
border-top-color: blue;
border-left-color: green;
border-bottom-color: orange;
border-right-color: pink;
transition: .15s ease-in-out;
}
span {
@size: 30px;
display: block;
position: absolute;
top: 0;
left: 50%;
height: @size;
width: @size;
background-color: gray;
&.blue {
background-color: blue;
}
&.green {
background-color: green;
}
&.orange {
background-color: orange;
}
&.pink {
background-color: pink;
}
}
body {}
#modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: fade(black,100%);
z-index: 7;
}
#title,
#msg{
position: absolute;
top: 30%;
left: 5%;
width: 90%;
text-align: center;
z-index: 9;
color: white;
}
#msg {
top: 50%;
}
#start {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
z-index: 9;
}
#score {
position: absolute;
top: 1%;
right: 1%;
font-weight: bold;
font-size: 24px;
padding: 10px;
border: 1px solid green;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var player = document.querySelector('#player'),
start = document.querySelector('#start'),
totalHeight = player.offsetTop,
counter = 0,
speed = 10,
score = document.querySelector('#score'),
colors= ["blue","green","orange","pink"],
indexColor = 1;
// ===
// === PLAYER
// ===
// ITERATE COLORS FROM ARRAY
function nextColor() {
player.className = colors[indexColor];
indexColor = (indexColor+1)%(colors.length);
};
// ROTATE THE PLAYER CLOCKWISE
function play(){
player.className = colors[0];
player.addEventListener('click',function(e){
var deg = 90;
player.style.webkitTransform += 'rotate('+deg+'deg)';
player.style.transform += 'rotate('+deg+'deg)';
nextColor();
});
makeBox(speed);
score.innerHTML = 0;
}
// ===
// === BOX
// ===
// CREATE NEW BOX
function makeBox(speed) {
var random = colors[Math.floor(Math.random() * colors.length)],
box = document.querySelector('span');
function newBox(){
var box = document.createElement('span');
box.className = random
document.body.appendChild(box);
move(box,totalHeight,speed);
}
if (box) {
document.body.removeChild(box);
newBox();
} else {
newBox();
}
}
function eliminateBox(){
document.body.removeChild(box);
}
// ANIMATE THE BOX
function move(elem,height,speed) {
var top = 0;
function frame() {
top++;
elem.style.top = top + 'px';
if (top == height){
clearInterval(id);
win(player,elem);
}
}
alert(speed)
var id = setInterval(frame, speed); // 10 normal
}
// ===
// === WIN/LOOSE
// ===
// WIN
function win(player,box){
var playerColor = player.className,
boxColor = box.className;
var currentScore = score.innerHTML;
if(playerColor === boxColor) {
score.innerHTML = parseInt(currentScore) + 1;
alert('gano '+speed)
makeBox(speed + 1);
} else {
alert('perdio '+speed)
makeBox(speed - (speed -currentScore));
}
}
// MODAL CONTROL
function modal(){
var modal = document.querySelector('#modal'),
title = document.querySelector('#title'),
msg = document.querySelector('#msg');
modal.style.webkitTransform += 'translateX(-100%)';
modal.style.transform += 'translateX(-100%)';
title.style.webkitTransform += 'translateX(-100%)';
title.style.transform += 'translateX(-100%)';
msg.style.webkitTransform += 'translateX(-100%)';
msg.style.transform += 'translateX(-100%)';
start.style.webkitTransform += 'translateX(-1000%)';
start.style.transform += 'translateX(-1000%)';
}
// ===
// === INIT
// ===
start.addEventListener('click',function(e){
modal();
play();
});
</script></body>
</html>
Raw
jsbin.sidigovacuca.css
#player {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
width: 50px;
height: 50px;
border-radius: 50%;
border-width: 50px;
border-style: solid;
border-top-color: blue;
border-left-color: green;
border-bottom-color: orange;
border-right-color: pink;
transition: 0.15s ease-in-out;
}
span {
display: block;
position: absolute;
top: 0;
left: 50%;
height: 30px;
width: 30px;
background-color: gray;
}
span.blue {
background-color: blue;
}
span.green {
background-color: green;
}
span.orange {
background-color: orange;
}
span.pink {
background-color: pink;
}
#modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
z-index: 7;
}
#title,
#msg {
position: absolute;
top: 30%;
left: 5%;
width: 90%;
text-align: center;
z-index: 9;
color: white;
}
#msg {
top: 50%;
}
#start {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
z-index: 9;
}
#score {
position: absolute;
top: 1%;
right: 1%;
font-weight: bold;
font-size: 24px;
padding: 10px;
border: 1px solid green;
}
Raw
jsbin.sidigovacuca.js
var player = document.querySelector('#player'),
start = document.querySelector('#start'),
totalHeight = player.offsetTop,
counter = 0,
speed = 10,
score = document.querySelector('#score'),
colors= ["blue","green","orange","pink"],
indexColor = 1;
// ===
// === PLAYER
// ===
// ITERATE COLORS FROM ARRAY
function nextColor() {
player.className = colors[indexColor];
indexColor = (indexColor+1)%(colors.length);
};
// ROTATE THE PLAYER CLOCKWISE
function play(){
player.className = colors[0];
player.addEventListener('click',function(e){
var deg = 90;
player.style.webkitTransform += 'rotate('+deg+'deg)';
player.style.transform += 'rotate('+deg+'deg)';
nextColor();
});
makeBox(speed);
score.innerHTML = 0;
}
// ===
// === BOX
// ===
// CREATE NEW BOX
function makeBox(speed) {
var random = colors[Math.floor(Math.random() * colors.length)],
box = document.querySelector('span');
function newBox(){
var box = document.createElement('span');
box.className = random
document.body.appendChild(box);
move(box,totalHeight,speed);
}
if (box) {
document.body.removeChild(box);
newBox();
} else {
newBox();
}
}
function eliminateBox(){
document.body.removeChild(box);
}
// ANIMATE THE BOX
function move(elem,height,speed) {
var top = 0;
function frame() {
top++;
elem.style.top = top + 'px';
if (top == height){
clearInterval(id);
win(player,elem);
}
}
alert(speed)
var id = setInterval(frame, speed); // 10 normal
}
// ===
// === WIN/LOOSE
// ===
// WIN
function win(player,box){
var playerColor = player.className,
boxColor = box.className;
var currentScore = score.innerHTML;
if(playerColor === boxColor) {
score.innerHTML = parseInt(currentScore) + 1;
alert('gano '+speed)
makeBox(speed + 1);
} else {
alert('perdio '+speed)
makeBox(speed - (speed -currentScore));
}
}
// MODAL CONTROL
function modal(){
var modal = document.querySelector('#modal'),
title = document.querySelector('#title'),
msg = document.querySelector('#msg');
modal.style.webkitTransform += 'translateX(-100%)';
modal.style.transform += 'translateX(-100%)';
title.style.webkitTransform += 'translateX(-100%)';
title.style.transform += 'translateX(-100%)';
msg.style.webkitTransform += 'translateX(-100%)';
msg.style.transform += 'translateX(-100%)';
start.style.webkitTransform += 'translateX(-1000%)';
start.style.transform += 'translateX(-1000%)';
}
// ===
// === INIT
// ===
start.addEventListener('click',function(e){
modal();
play();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment