html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Six Hexadecimal Color Race</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<body>
<h1 class="r">Six Hexadecimal Color Race</h1>
<div id="container">
<div id="road">
<div id="car1" class="c1">93</div>
<div class="sep"></div>
<div id="car2" class="c2">21</div>
<div class="sep"></div>
<div id="car3" class="c3">45</div>
<div class="sep2" ></div>
<div class="sep2" ></div>
<div id="car4" class="c4">53</div>
<div class="sep" ></div>
<div id="car5" class="c5">99</div>
<div class="sep" ></div>
<div id="car6" class="c6">46</div>
</div>
<div id="controls">
<label>Car 1
Speed (px/sec.): </label>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* url for fonts */
@import url("https://fonts.googleapis.com/css?family=Shadows+Into+Light|Poiret+One");
body {width:585px; font-family: Handlee; background: #ee1280;}
#container {
width:585px;}
/* car color */
#car1 {
background-color: #f00;}
#car2 {
background-color: #ff0;}
#car3 {
background-color: #0f0;}
#car4 {
background-color: #0ff;}
#car5 {
background-color: #00f;}
#car6 {
background-color: #f0f;}
.c1, .c2, .c3, .c4, .c5, .c6 {
position:relative;
width:90px;
height:50px;
border:none;
}
#road {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var interval = {};
function initMovement(car, speed)
{
var carObj = document.getElementById(car);
var left = 0;
interval[car] = setInterval(function()
{
left += speed/100;
carObj.style.left = left+"px";
if(left >= 484) //finish
{
for(var i in interval)
{
clearInterval(interval[i]);
}
document.getElementById("start").disabled = false;
document.getElementById("stop").disabled = true;
}
},10);
}
function start()
{
var speed1 = document.getElementById("speed1").value;
var speed2 = document.getElementById("speed2").value;
var speed3 = document.getElementById("speed3").value;
var speed4 = document.getElementById("speed4").value;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run