How to Make Color Switch Game In Html
1) First of All you Need to Create a Basic Html Page.
<!DOCTYPE html>
<html>
<head>
<title>Color switch Game</title>
</head>
<body></body>
</html>
2)Second Add This Code JS code on Head Section.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
3)Add This Javascript file Before </body> closing Tag..
<script>
$(function(){
$('body').css('background-color','#000');
var FPS = 60;
var T = TT = 0;
var canvas = $('<canvas>');
var c = canvas[0].getContext('2d');
var W = _W = 360;
var H = _H = 512;
var score = 0;
var dim = {w:$(window).width(),h:$(window).height()};
$(canvas).attr({'width':W,'height':H});
_H = dim.h;
_W = dim.h*W/H;
if(W/H > dim.w/dim.h){
_W = dim.w;
_H = dim.w*H/W;
};
$(canvas).css({'position':'absolute','top':(dim.h-_H)/2,'left':(dim.w-_W)/2,'width':_W,'height':_H});
$('body').append(canvas);
var camY = 0;
var died = false;
var dCircle = function(coords,radius,color){
c.beginPath();
c.fillStyle = color;
c.arc(coords.x,coords.y,radius,0,2*Math.PI);
c.fill();
};
var coord = function(dx,dy){
return {x:dx,y:H+camY-dy};
};
var col = ['#F39','#3FF','#FF3','#A0F'];
var gCol = function(index){
var n = index;
return col[n%4];
};
var rRange = function(x1,x2){
return x1+Math.random()*(x2-x1);
};
var choose = function(){
return arguments[Math.floor(arguments.length*Math.random())];
};
var rCol = function(){
return col[Math.floor(4*Math.random())];
};
var repeat = function(func,rep){
for(var _rep = 0; _rep < rep; _rep++){
func();
};
};
var getDots = function(xy1,xy2){
return {
d:Math.sqrt(Math.pow(xy1.x-xy2.x,2)+Math.pow(xy1.y-xy2.y,2)),
a:Math.atan2(xy1.y-xy2.y,xy2.x-xy1.x)
};
};
var die = function(){
died = true;
repeat(function(){newParticle(p.x,p.y+5);},14);
TT = 1;
};
var colIndex = Math.floor(4*Math.random());
var p = {x:W/2,y:H/4,r:10,c:gCol(colIndex),spd:0,spdMax:6,acc:0};
var objects = [];
var newObject = function(x,y,r,c){
var o = {x:x,y:y,r:r,c:c,t:0,destroyed:false};
o.move = function(){};
o.draw = function(){
dCircle(coord(o.x,o.y),o.r,o.c);
};
o.destroy = function(){
o.destroyed = true;
};
o.update = function(){
o.move();
o.draw();
if(o.y+100 < camY){
o.destroy();
};
o.t++;
};
objects.push(o);
return o;
};
var modAng = function(x){
var y = x;
while(y < 0){
y += Math.PI*2;
};
return y%(Math.PI*2);
};
var obstacles = {n:0,sep:350};
var cspd = 1;
var new8 = function(y,ang,dir,col){
var o8 = newObject(W/2,100+obstacles.sep*y,10,gCol(col));
o8.cx = o8.x;
o8.cy = o8.y;
o8.rad8 = 80;
o8.d = dir;
o8.a = ang;
o8.move = function(){
with(o8){
x = cx+1.5*rad8*Math.cos(a);
y = cy+0.7*rad8*Math.sin(2*a);
a += d*0.02;
};
if(!died && p.c != o8.c && getDots(coord(p.x,p.y),coord(o8.x,o8.y)).d < p.r+o8.r){
die();
};
};
};
var newW8 = function(y){
var ddir = choose(-1,1);
for(var i = 0; i < Math.PI*2; i += Math.PI*2/20){
new8(y,i,ddir,Math.floor(8*(i/(Math.PI*2))));
};
};
var newC1 = function(y,rad,ospd,dir){
var c1 = newObject(W/2,100+obstacles.sep*y,rad,Math.floor(4*Math.random()));
c1.angle = Math.PI*2*Math.floor(4*Math.random());
c1.spd = dir*cspd*ospd;
c1.w = c1.r*15/100;
c1.draw = function(){
var co = coord(c1.x,c1.y);
c.lineWidth = c1.w;
for(var j = 0; j < 4; j++){
c.beginPath();
c.strokeStyle = gCol(j+c1.c);
var a = modAng(c1.angle+Math.PI/2*j);
var a2 = modAng(a+Math.PI/2);
if(gCol(j+c1.c) != p.c && !died){
var dots = getDots(co,coord(p.x,p.y));
if(dots.d+p.r > c1.r-c1.w/2 && dots.d-p.r < c1.r+c1.w/2){
var pa = modAng(-dots.a);
if(pa > a && pa < a2){
die();
};
};
};
c.arc(co.x,co.y,c1.r,a,a2);
c.stroke();
};
c1.angle += c1.spd*Math.PI/180;
};
};
var newParticle = function(x,y){
var part = newObject(x,y,5,rCol());
part.g = 0.6;
part.hspd = rRange(-10,10);
part.vspd = rRange(10,20);
part.move = function(){
with(part){
vspd -= g;
x += hspd;
y += vspd;
if(x < 0 || x > W){
hspd *= -1;
};
if(y < camY){
destroy();
};
};
};
};
var newSwitch = function(n){
var sw = newObject(W/2,100+obstacles.sep*n+obstacles.sep/2,15,'#FFF');
sw.move = function(){
if(getDots({x:sw.x,y:sw.y},{x:p.x,y:p.y}).d < p.r+sw.r){
p.c = gCol(++colIndex);
sw.destroy();
};
};
sw.draw = function(){
var co = coord(sw.x,sw.y);
for(var i = 0; i < 4; i++){
var a = i*Math.PI/2;
c.fillStyle = col[i];
c.beginPath();
c.lineTo(co.x,co.y);
c.arc(co.x,co.y,sw.r,a,a+Math.PI/2);
c.lineTo(co.x,co.y);
c.fill();
};
};
};
var newStar = function(n){
var st = newObject(W/2,100+obstacles.sep*n,15,'#DDD');
st.score = choose(1,1,1,1,1,1,10);
st.a = 0;
st.rs = st.r;
st.move = function(){
if(getDots({x:p.x,y:p.y},{x:st.x,y:st.y}).d < st.r){
score += st.score;
st.destroy();
};
st.r = st.rs+1.2*Math.sin((st.a++)/180*Math.PI*4);
};
st.draw = function(){
dStar(st.x,st.y,st.r,0,st.c,1,st.score == 1);
};
};
var dStar = function(x,y,r1,ang,col,alpha,outline){
var co = coord(x,y);
c.fillStyle = col;
c.strokeStyle = col;
c.lineWidth = 2;
c.globalAlpha = alpha;
c.beginPath();
for(var j = 0; j <= 5; j++){
var a1 = j*Math.PI*2/5-Math.PI/2-ang;
var a2 = a1+Math.PI/5;
var r2 = r1*0.5;
c.lineTo(co.x+r1*Math.cos(a1),co.y+r1*Math.sin(a1));
c.lineTo(co.x+r2*Math.cos(a2),co.y+r2*Math.sin(a2));
};
if(outline){
c.fill();
}else{
c.stroke();
};
c.globalAlpha = 1;
};
p.yy = p.y;
var clicked = false;
$(canvas).click(function(){clicked = true;});
setInterval(function(){
c.fillStyle = '#222';
c.fillRect(0,0,W,H);
c.fillStyle = '#FFF';
c.font = '30px Arial';
c.textAlign = 'left';
c.fillText(score,10,30);
c.font = '50px Arial';
c.textAlign = 'center';
c.fillText('COLOR',W/2,coord(0,250).y);
c.fillText('SWITCH',W/2,coord(0,200).y);
while(obstacles.n < 2+Math.floor(camY/obstacles.sep)){
obstacles.n += 1;
switch(choose(0,0,0,0,1,2,2,2)){
case 0:
newC1(obstacles.n,choose(100,100,70),1,choose(-1,1));
break;
case 1:
newC1(obstacles.n,100,2/3,1);
newC1(obstacles.n,70,1,-1);
break;
case 2:
newW8(obstacles.n);
break;
};
newSwitch(obstacles.n);
newStar(obstacles.n);
cspd *= 1.04;
};
if(!died){
if(clicked){
p.spd = p.spdMax;
if(p.acc == 0){
p.spd *= 1.2;
p.acc = -0.3;
};
};
with(p){
spd = Math.max(spd+acc,-spdMax);
y = Math.max(y+spd,yy);
if(y < camY){
die();
};
dCircle(coord(x,y),r,c);
};
};
for(var i in objects){
objects[i].update();
};
for(var i = objects.length-1; i >= 0; i--){
if(objects[i].destroyed){
objects.splice(i,1);
};
};
camY = Math.max(camY,p.y-250);
T += TT;
if(T > 70){
c.globalAlpha = 0.7;
c.fillStyle = '#000';
c.fillRect(0,0,W,H);
c.globalAlpha = 1;
c.fillStyle = '#000';
c.strokeStyle = '#EEE';
c.lineWidth = 2;
c.fillText('TAP TO',W/2,H/2);
c.strokeText('TAP TO',W/2,H/2);
c.fillText('RESTART',W/2,H/2+50);
c.strokeText('RESTART',W/2,H/2+50);
if(clicked){
score = 0;
T = 0;
TT = 0;
camY = 0;
cspd = 1;
died = false;
p.y = H*1/4;
p.acc = 0;
p.spd = 0;
objects = [];
obstacles.n = 0;
};
};
clicked = false;
},1000/FPS);
});
</script>
Full Code---
<!DOCTYPE html>
<html>
<head>
<title>Color switch</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</head>
<body>
<script>
$(function(){
$('body').css('background-color','#000');
var FPS = 60;
var T = TT = 0;
var canvas = $('<canvas>');
var c = canvas[0].getContext('2d');
var W = _W = 360;
var H = _H = 512;
var score = 0;
var dim = {w:$(window).width(),h:$(window).height()};
$(canvas).attr({'width':W,'height':H});
_H = dim.h;
_W = dim.h*W/H;
if(W/H > dim.w/dim.h){
_W = dim.w;
_H = dim.w*H/W;
};
$(canvas).css({'position':'absolute','top':(dim.h-_H)/2,'left':(dim.w-_W)/2,'width':_W,'height':_H});
$('body').append(canvas);
var camY = 0;
var died = false;
var dCircle = function(coords,radius,color){
c.beginPath();
c.fillStyle = color;
c.arc(coords.x,coords.y,radius,0,2*Math.PI);
c.fill();
};
var coord = function(dx,dy){
return {x:dx,y:H+camY-dy};
};
var col = ['#F39','#3FF','#FF3','#A0F'];
var gCol = function(index){
var n = index;
return col[n%4];
};
var rRange = function(x1,x2){
return x1+Math.random()*(x2-x1);
};
var choose = function(){
return arguments[Math.floor(arguments.length*Math.random())];
};
var rCol = function(){
return col[Math.floor(4*Math.random())];
};
var repeat = function(func,rep){
for(var _rep = 0; _rep < rep; _rep++){
func();
};
};
var getDots = function(xy1,xy2){
return {
d:Math.sqrt(Math.pow(xy1.x-xy2.x,2)+Math.pow(xy1.y-xy2.y,2)),
a:Math.atan2(xy1.y-xy2.y,xy2.x-xy1.x)
};
};
var die = function(){
died = true;
repeat(function(){newParticle(p.x,p.y+5);},14);
TT = 1;
};
var colIndex = Math.floor(4*Math.random());
var p = {x:W/2,y:H/4,r:10,c:gCol(colIndex),spd:0,spdMax:6,acc:0};
var objects = [];
var newObject = function(x,y,r,c){
var o = {x:x,y:y,r:r,c:c,t:0,destroyed:false};
o.move = function(){};
o.draw = function(){
dCircle(coord(o.x,o.y),o.r,o.c);
};
o.destroy = function(){
o.destroyed = true;
};
o.update = function(){
o.move();
o.draw();
if(o.y+100 < camY){
o.destroy();
};
o.t++;
};
objects.push(o);
return o;
};
var modAng = function(x){
var y = x;
while(y < 0){
y += Math.PI*2;
};
return y%(Math.PI*2);
};
var obstacles = {n:0,sep:350};
var cspd = 1;
var new8 = function(y,ang,dir,col){
var o8 = newObject(W/2,100+obstacles.sep*y,10,gCol(col));
o8.cx = o8.x;
o8.cy = o8.y;
o8.rad8 = 80;
o8.d = dir;
o8.a = ang;
o8.move = function(){
with(o8){
x = cx+1.5*rad8*Math.cos(a);
y = cy+0.7*rad8*Math.sin(2*a);
a += d*0.02;
};
if(!died && p.c != o8.c && getDots(coord(p.x,p.y),coord(o8.x,o8.y)).d < p.r+o8.r){
die();
};
};
};
var newW8 = function(y){
var ddir = choose(-1,1);
for(var i = 0; i < Math.PI*2; i += Math.PI*2/20){
new8(y,i,ddir,Math.floor(8*(i/(Math.PI*2))));
};
};
var newC1 = function(y,rad,ospd,dir){
var c1 = newObject(W/2,100+obstacles.sep*y,rad,Math.floor(4*Math.random()));
c1.angle = Math.PI*2*Math.floor(4*Math.random());
c1.spd = dir*cspd*ospd;
c1.w = c1.r*15/100;
c1.draw = function(){
var co = coord(c1.x,c1.y);
c.lineWidth = c1.w;
for(var j = 0; j < 4; j++){
c.beginPath();
c.strokeStyle = gCol(j+c1.c);
var a = modAng(c1.angle+Math.PI/2*j);
var a2 = modAng(a+Math.PI/2);
if(gCol(j+c1.c) != p.c && !died){
var dots = getDots(co,coord(p.x,p.y));
if(dots.d+p.r > c1.r-c1.w/2 && dots.d-p.r < c1.r+c1.w/2){
var pa = modAng(-dots.a);
if(pa > a && pa < a2){
die();
};
};
};
c.arc(co.x,co.y,c1.r,a,a2);
c.stroke();
};
c1.angle += c1.spd*Math.PI/180;
};
};
var newParticle = function(x,y){
var part = newObject(x,y,5,rCol());
part.g = 0.6;
part.hspd = rRange(-10,10);
part.vspd = rRange(10,20);
part.move = function(){
with(part){
vspd -= g;
x += hspd;
y += vspd;
if(x < 0 || x > W){
hspd *= -1;
};
if(y < camY){
destroy();
};
};
};
};
var newSwitch = function(n){
var sw = newObject(W/2,100+obstacles.sep*n+obstacles.sep/2,15,'#FFF');
sw.move = function(){
if(getDots({x:sw.x,y:sw.y},{x:p.x,y:p.y}).d < p.r+sw.r){
p.c = gCol(++colIndex);
sw.destroy();
};
};
sw.draw = function(){
var co = coord(sw.x,sw.y);
for(var i = 0; i < 4; i++){
var a = i*Math.PI/2;
c.fillStyle = col[i];
c.beginPath();
c.lineTo(co.x,co.y);
c.arc(co.x,co.y,sw.r,a,a+Math.PI/2);
c.lineTo(co.x,co.y);
c.fill();
};
};
};
var newStar = function(n){
var st = newObject(W/2,100+obstacles.sep*n,15,'#DDD');
st.score = choose(1,1,1,1,1,1,10);
st.a = 0;
st.rs = st.r;
st.move = function(){
if(getDots({x:p.x,y:p.y},{x:st.x,y:st.y}).d < st.r){
score += st.score;
st.destroy();
};
st.r = st.rs+1.2*Math.sin((st.a++)/180*Math.PI*4);
};
st.draw = function(){
dStar(st.x,st.y,st.r,0,st.c,1,st.score == 1);
};
};
var dStar = function(x,y,r1,ang,col,alpha,outline){
var co = coord(x,y);
c.fillStyle = col;
c.strokeStyle = col;
c.lineWidth = 2;
c.globalAlpha = alpha;
c.beginPath();
for(var j = 0; j <= 5; j++){
var a1 = j*Math.PI*2/5-Math.PI/2-ang;
var a2 = a1+Math.PI/5;
var r2 = r1*0.5;
c.lineTo(co.x+r1*Math.cos(a1),co.y+r1*Math.sin(a1));
c.lineTo(co.x+r2*Math.cos(a2),co.y+r2*Math.sin(a2));
};
if(outline){
c.fill();
}else{
c.stroke();
};
c.globalAlpha = 1;
};
p.yy = p.y;
var clicked = false;
$(canvas).click(function(){clicked = true;});
setInterval(function(){
c.fillStyle = '#222';
c.fillRect(0,0,W,H);
c.fillStyle = '#FFF';
c.font = '30px Arial';
c.textAlign = 'left';
c.fillText(score,10,30);
c.font = '50px Arial';
c.textAlign = 'center';
c.fillText('COLOR',W/2,coord(0,250).y);
c.fillText('SWITCH',W/2,coord(0,200).y);
while(obstacles.n < 2+Math.floor(camY/obstacles.sep)){
obstacles.n += 1;
switch(choose(0,0,0,0,1,2,2,2)){
case 0:
newC1(obstacles.n,choose(100,100,70),1,choose(-1,1));
break;
case 1:
newC1(obstacles.n,100,2/3,1);
newC1(obstacles.n,70,1,-1);
break;
case 2:
newW8(obstacles.n);
break;
};
newSwitch(obstacles.n);
newStar(obstacles.n);
cspd *= 1.04;
};
if(!died){
if(clicked){
p.spd = p.spdMax;
if(p.acc == 0){
p.spd *= 1.2;
p.acc = -0.3;
};
};
with(p){
spd = Math.max(spd+acc,-spdMax);
y = Math.max(y+spd,yy);
if(y < camY){
die();
};
dCircle(coord(x,y),r,c);
};
};
for(var i in objects){
objects[i].update();
};
for(var i = objects.length-1; i >= 0; i--){
if(objects[i].destroyed){
objects.splice(i,1);
};
};
camY = Math.max(camY,p.y-250);
T += TT;
if(T > 70){
c.globalAlpha = 0.7;
c.fillStyle = '#000';
c.fillRect(0,0,W,H);
c.globalAlpha = 1;
c.fillStyle = '#000';
c.strokeStyle = '#EEE';
c.lineWidth = 2;
c.fillText('TAP TO',W/2,H/2);
c.strokeText('TAP TO',W/2,H/2);
c.fillText('RESTART',W/2,H/2+50);
c.strokeText('RESTART',W/2,H/2+50);
if(clicked){
score = 0;
T = 0;
TT = 0;
camY = 0;
cspd = 1;
died = false;
p.y = H*1/4;
p.acc = 0;
p.spd = 0;
objects = [];
obstacles.n = 0;
};
};
clicked = false;
},1000/FPS);
});
</script>
</body>
</html>
0 Comments