Ajax Loader
HTML 
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Color Pong v0.1</title>
6
</head>
7
<body>
8
<div id="g"></div>
9
<div id="shine"></div>
10
<canvas id="c"></canvas>
11
 
12
<audio preload="true" id="snd">
13
  <source src="http://www.mcalister.ch/lab/colorpong/c.wav"/>
14
</audio>
15
16
  <div id="link"><a href="http://www.lemu.ch">www.lemu.ch</a></div>
17
</body>
18
</html>
 
CSS 
html, body {
1
html, body {
2
  width:  100%;
3
  height: 100%;
4
  margin: 0px;
5
  padding: 0px;
6
  text-align: center;
7
}
8
9
#g{
10
  position:absolute;
11
  width:100%;
12
  height:100%;
13
14
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 50%, rgba(255,255,255,0.25) 100%);
15
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.25)));
16
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
17
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
18
  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
19
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
20
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#40ffffff',GradientType=0 );
21
}
22
 
23
#c{
24
  margin:-150px 0 0 -200px;
25
  position:absolute;
26
  top:50%;
27
  left:50%;
28
  -moz-box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
29
  -webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
30
  -o-box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
31
  box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
32
  border:5px solid #262626;
33
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.15)));
34
}
35
 
36
#shine{
37
    width:400px;
38
    height:300px;
39
    position:absolute;
40
    top:50%;
41
    left:50%;
42
    margin-left:-195px;
43
    margin-top:-145px;
44
  z-index:9999;
45
  background-image:url(data:image/png;base64,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%3D%3D);
46
  opacity:0.4;
47
}
48
 
49
#link{
50
  position:absolute;
51
  right:10px;
52
  bottom:10px;
53
}
54
 
55
#link a{
56
  color:#262626;
57
  text-shadow:0 1px 1px rgba(255,255,255,0.3);
58
  text-decoration:none;
59
  font-size:10px;
60
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
61
  transition:font-size 0.2s ease-in-out;
62
}
63
 
64
#link a:hover{
65
  font-size:14px;
66
}
 
JavaScript 
/////////////////////////////
1
/////////////////////////////
2
//     Color Pong v0.1     //
3
//   by Brian Mc Alister   //
4
//                         //
5
//    work in progress     //
6
/////////////////////////////
7
 
8
// init canvas
9
var canvas = document.getElementById("c");
10
var ctx= canvas.getContext("2d");
11
canvas.width = 400;
12
canvas.height = 300;
13
 
14
// set global vars
15
var score = 0;
16
var highscore = 0;
17
var collision = false;
18
var fl = 0;
19
var fr = 0;
20
var logo = new Image();   // Create new img element
21
logo.src = "data:image/png;base64,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";
22
snd =  document.getElementById("snd");
23
 
24
 
25
// function for random color
26
function randcol(){
27
 
28
  // random 70 through 255 (so its never too dark)
29
  var start = 70;
30
  return start + Math.round(Math.random() * (255-start));
31
}
32
 
33
// initialize objects
34
var bar = {
35
  height: 5,
36
  width: 70,
37
  x: 0,
38
  y: canvas.height-this.height,
39
  r: 255,
40
  g: 255,
41
  b: 255
42
}
43
 
44
var ball = {
45
  y: 0,
46
  x: 0,
47
  width: 5,
48
  height: 5,
49
  speedx: 200,
50
  speedy: -200
51
}
52
 
53
var ball2 = {
54
  width: ball.width,
55
  height: ball.height,
56
  x: ball.width*2*(-1),
57
  y: ball.height*2*(-1),
58
  r: 255,
59
  g: 255,
60
  b: 255,
61
  a: 1
62
}
63
 
64
var reset = function () {
65
 
66
  //initialize bar on left
67
  bar.x=0;
68
  bar.y=canvas.height-bar.height;
69
70
  //set speed so ball goes up first
71
  ball.speedy = -200;
72
  ball.speedx = 200;
73
74
  // reset score
75
  score = 0;
76
 
77
  // Place ball on screen randomly (halfway on y axis)
78
  ball.x = (Math.random() * (canvas.width - 5));
79
  ball.y = (canvas.width/2)-(ball.height/2);
80
};
81
 
82
function resetball2(){
83
  // hide ball2
84
  ball2.x=ball2.width*(-1);
85
  ball2.y=ball2.height*(-1);
86
87
  //set same size as ball
88
  ball2.width=ball.width;
89
  ball2.height=ball.height;
90
91
  // get random color
92
  ball2.r = randcol();
93
  ball2.g = randcol();
94
  ball2.b = randcol();
95
96
  // set alpha = 1
97
  ball2.a = 1;
98
}
99
 
100
// function for updating bar X position
101
function follow(e)
102
{
103
  v = e.pageX - canvas.offsetLeft -bar.width/2;
104
  if (v < 0){v = 0;}
105
  if (v > canvas.width-bar.width){v = canvas.width-bar.width;}
106
 
107
  bar.x = v;
108
}
109
 
110
// update bar x position
111
window.addEventListener("mousemove",follow,false);
112
 
113
var update = function (modifier) {
114
 
115
//update ball position
116
ball.x = ball.x+(ball.speedx*modifier);
117
ball.y= ball.y+(ball.speedy*modifier);
118
 
119
// collision ball
120
if (collision == true){
121
if (ball2.a > 0){ball2.width = ball2.width+1000*modifier;
122
ball2.height=ball2.height+1000*modifier;
123
ball2.x = ball.x;
124
ball2.y = ball.y;
125
ball2.a = ball2.a - 2*modifier;
126
 
127
}else{
128
collision = false;
129
resetball2();
130
}
131
}
132
 
133
// Is ball touching top?
134
if (ball.y <= (0) && ball.speedy < 0) {
135
136
  //change direction
137
  ball.speedy = ball.speedy * -1;
138
 
139
}
140
 
141
// Is ball touching left
142
if (ball.x <= (0) && ball.speedx < (0)){
143
  ball.speedx = ball.speedx * -1;
144
}
145
 
146
// Is ball touching right
147
if (ball.x >= (canvas.width-ball.width) && ball.speedx > (0)){
148
  ball.speedx = ball.speedx * -1;
149
}
150
 
151
// Is ball touching bar?
152
if (
153
  ball.x+ball.width >= (bar.x)
154
  && ball.x <= (bar.x+bar.width)
155
  && ball.y+ball.height >= (bar.y)
156
  && ball.speedy > 0
157
) {
158
  // reset sound and play
159
  snd.currentTime = 0;
160
  snd.play();
161
162
  // update score
163
  ++score;
164
  if (score > highscore){highscore = score;}
165
166
  // increase speed
167
  // boost X if ball hits corner of bar
168
  if(ball.x+ball.width <= (bar.x+ball.width*2)){
169
  
170
    // define flick size
171
    fl = 10+(ball.width*2-((ball.x+ball.width)-bar.x))*5;
172
  
173
    // always flick ball left
174
    if(ball.speedx < 0){ball.speedx = ball.speedx-fl;}
175
    if(ball.speedx > 0){ball.speedx = ball.speedx*(-1)-fl;}
176
  }else if(ball.x >= (bar.x+bar.width-ball.width*2)){
177
178
    // define flick size
179
    fr = 10+(ball.width*2-((ball.x+ball.width)-(bar.x+bar.width)))*5;
180
181
    // always flick ball right
182
    if(ball.speedx < 0){ball.speedx = ball.speedx*(-1)+fr;}
183
    if(ball.speedx > 0){ball.speedx = ball.speedx+fr;}
184
  }else{
185
    // Randomize x speed on central hit ((-20) to 20)
186
    ball.speedx = ball.speedx + ((Math.random()*40)-20);
187
  }
188
189
  // update Y speed
190
  ball.speedy = ball.speedy +20;
191
192
  //change y direction of ball
193
  ball.speedy = ball.speedy * -1;
194
195
  //set collision true
196
  collision=true;
197
198
  //reset / initialize ball2
199
  resetball2();
200
  //set color
201
  bar.r = ball2.r;
202
  bar.g = ball2.g;
203
  bar.b = ball2.b;
204
205
  // set background color
206
  document.body.style.background = "rgb("+bar.r+","+bar.g+","+bar.b+")";
207
}
208
 
209
// Is ball touching bottom?
210
if (ball.y >= (canvas.height-ball.height) && ball.speedy > 0) {
211
  reset();
212
}
213
 
214
 
215
 
216
};
217
 
218
// Draw everything
219
var render = function () {
220
 
221
// set dark grey bg
222
ctx.fillStyle   = '#262626';
223
ctx.fillRect(0,0,canvas.width,canvas.height);
224
 
225
// set logo
226
ctx.drawImage(logo,canvas.width/2-logo.width/2,canvas.height/2-logo.height/2);
227
 
228
// draw ball2 (collision effect)
229
ctx.beginPath();
230
ctx.fillStyle   = "rgba("+ball2.r+","+ball2.g+","+ball2.b+","+ball2.a+")";
231
//ctx.fillRect(ball2.x,ball2.y,ball2.width,ball2.height);
232
ctx.arc(ball2.x+ball.width,bar.y,ball2.width,ball2.height, Math.PI*2, true);
233
ctx.fill();
234
ctx.closePath();
235
 
236
// draw ball
237
ctx.fillStyle   = "rgb("+bar.r+","+bar.g+","+bar.b+")";
238
ctx.fillRect(ball.x,ball.y,ball.width,ball.height);
239
 
240
// draw bar
241
ctx.fillStyle   = "rgb("+bar.r+","+bar.g+","+bar.b+")";
242
ctx.fillRect(bar.x,bar.y,bar.width,bar.height);
243
 
244
// Score
245
ctx.fillStyle = "rgb(250, 250, 250)";
246
ctx.font = "12px Helvetica";
247
ctx.textAlign = "right";
248
ctx.textBaseline = "top";
249
ctx.fillText("score: " + score, canvas.width-10, 23);
250
 
251
// HighScore
252
ctx.fillStyle = "rgb(250, 250, 250)";
253
ctx.font = "bold 12px Helvetica";
254
ctx.textAlign = "right";
255
ctx.textBaseline = "top";
256
ctx.fillText("best: " + highscore, canvas.width-10, 10);
257
 
258
};
259
 
260
var main = function () {
261
var now = Date.now();
262
var delta = now - then;
263
 
264
update(delta / 1000);
265
render();
266
 
267
then = now;
268
};
269
 
270
reset();
271
var then = Date.now();
272
setInterval(main, 1);
 

Color Pong Game

CSSDeck G+