Friday, 23 March 2018

GAMES :

Boll Game

<div style="background-color:#FFF; border:thick; border-radius:15px;" id="game">
<div style="border-radius:50%;" id="square0">
</div>
<div style="border-radius:25px 30px 5px;" id="square1">
</div>
<div style="background-color:#CCC; border-radius:10px 8px; border:groove;" id="notepad">
</div>
<div style="background-color:#FFF; border:dotted; border-radius:15px; width:50px;" id="pad">
</div>
</div>

{
    x = document.getElementById("square1")
    square = 0
    }
bounceGame()
checkCollision()
}
 
function assignM(aM)
{
squareMotion = aM
}
 
function bounceGame()
{
    if(squareMotion==1)
    { 
        if(squareTop>=(gameHeight-40) && squareLeft>=(gameWidth-40))
        {
        assignM(3)
        moveDR(-40)
        }
 
        if(squareTop>=(gameHeight-40)) 
        { 
        assignM(2)
        moveDL(-40)
        } 
        else if(squareLeft>=(gameWidth-40))
        {
        assignM(4)
        moveDL(40)
        }
        else {
        moveDR(40)
        }
    }
    else if(squareMotion==2)
    {
        if(squareTop<=0 && squareLeft>=(gameWidth-40))
        {
        assignM(4)
        moveDL(40)
        }
 
        if(squareLeft>=(gameWidth-40))
        {
        assignM(3)
        moveDR(-40)
        } 
        else if(squareTop<=0)
        {
        assignM(1)
        moveDR(40)
        }
        else
        {
        moveDL(-40)
        }
    }
    else if(squareMotion==3)
    {
        if(squareTop<=0 && squareLeft<=0)
        {
        assignM(1)
        moveDR(40)
        }
 
        if(squareTop<=0)
        {
        assignM(4)
        moveDL(40)
        } 
        else if(squareLeft<=0)
        {
        assignM(2)
        moveDL(-40)
        }
        else
        {
        moveDR(-40)
        }
    }
    else if(squareMotion==4)
    {
        if(squareTop>=(gameHeight-40) && squareLeft<=0)
        {
        assignM(2)
        moveDL(-40)
        }
 
        if(squareLeft<=0)
        {
        assignM(1)
        moveDR(40)
        } 
        else if(squareTop>=(gameHeight-40))
        {
        assignM(3)
        moveDR(-40)
        }
        else
        {
        moveDL(40)
        }
    }
}
 
function moveDR(amount)
{ 
save = amount
amount = Math.floor(amount/angle)
 
    if(angle == 0)
    {
    amount = 0
    }
 
squareLeft += amount 
x.style.left = squareLeft+"px"
squareTop += save 
x.style.top = squareTop+"px"
}
 
function moveDL(amount)
{
save = amount
amount = Math.floor(amount/angle)
 
    if(angle == 0)
    {
    amount = 0
    }
 
squareLeft -= amount 
x.style.left = squareLeft+"px"
squareTop += save 
x.style.top = squareTop+"px"
}
 
function assignAngle(aa)
{
    if(aa==1)
    {
    angle = 0
    nextScore = 1000
    }
    if(aa==2)
    {
    angle = 2
    nextScore = 100
    }
 
    score += nextScore
 
document.getElementById("pad").innerHTML = nextScore
}
 
function flashScore()
{
    if(score > 0)
    {   
        if(nextScore == "BounceGame")
        {
        nextScore = score
        }
        else
        {
        nextScore = "BounceGame"
        }
 
    document.getElementById("notepad").innerHTML = nextScore
    }
    else
    {
    document.getElementById("notepad").innerHTML = "BounceGame"
    }
}
 
function countUp()
{
    if(count < (Math.floor(score/10)*8))
    {
    count += Math.floor(score/10)
    }
    else if(count >= (Math.floor(score/10)*8) && count <= (Math.floor(score/10)*9))
    {
        if((Math.floor(score/10)*9) > 200)
        {
        count += Math.floor(score/10)
        }
        else
        {
        count += 10
        }
    }
    else
    {
        if(Math.floor(score/10) > 30)
        {
        count += 10
        }
        else
        {
        count += 1
        }
    }
     
    if(count > score)
    {
    count = score
    clearInterval(intervalOne)
    intervalOne = setInterval("flashScore()", 2000) 
    }
 
document.getElementById("notepad").innerHTML = count
}
 
function checkCollision()
{
var actualLeft = getPad-30
 
    if(squareTop == 0)
    {
    document.getElementById("pad").innerHTML = ""
    }
 
    if((squareTop+40)==(gameHeight-40))
    {
    difference = Math.floor(squareLeft-actualLeft)
     
        if(difference>=(-39)&&difference<4)
        {
        collisionOne++
        collisionTwo = 0
        collisionThree = 0
 
            if(collisionOne > 3)
            {
            assignM(Math.floor(Math.random() * 2) + 2)
            }
            else
            {
            assignM(3)
            }
 
        assignAngle(2)
        }
        else if(difference>=5&&difference<15)
        {
        collisionOne = 0
        collisionTwo++
        collisionThree = 0
 
            if(collisionTwo > 3)
            {
            assignM(Math.floor(Math.random() * 2) + 2)
            assignAngle(2)
            }
            else
            {   
            assignM(3)
            assignAngle(1)
            }
        }
        else if(difference>=15&&difference<59)
        {
        collisionOne = 0
        collisionTwo = 0
        collisionThree++
 
            if(collisionThree > 3)
            {
            assignM(Math.floor(Math.random() * 2) + 2)
            }
            else
            {   
            assignM(2)
            }
 
        assignAngle(2)
        }
    }
    else if((squareTop+40)==gameHeight)
    {
    block = 1
    clearInterval(intervalOne)
    setupGame()
    intervalOne = setInterval("countUp()", speed) 
    }
}
 
function getMouseXY(e)
{
    if(navigator.appName=="Netscape")
    {  
    tempX = e.pageX
    tempY = e.pageY
    }  
    else
    { 
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
    }
 
    if(tempX < 0)
    {
    tempX = 0
    } 
 
    getPad = tempX
 
    if(getPad <= 30)
    {
    getPad = 30
    }
 
    if((getPad-30) > Math.floor(gameWidth-60))
    {
    getPad = Math.floor(gameWidth-60)+30
    }
 
    if(!block)
    {
    document.getElementById("pad").style.left = (getPad-30)+"px"}}
document.onmousemove = getMouseXY
setupGame()

Paddle Game

<canvas style="background: #eee; border-radius:5px;" id="myCanvas" width="480" height="320"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var lives = 3;

var bricks = [];
for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);

draw();

Snake Game

<canvas style="border:inset; border-radius:15px; box-shadow:3px 6px #000000;" id="canvas" width="450" height="450"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

$(document).ready(function(){
 
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");
 var w = $("#canvas").width();
 var h = $("#canvas").height();
 
 
 var cw = 11;
 var d;
 var food;
 var score;
 
 
 var snake_array; 
 
 function init()
 {
  d = "right"; 
  create_snake();
  create_food(); 
  
  score = 0.5;
  
  
  
  if(typeof game_loop != "undefined") clearInterval(game_loop);
  game_loop = setInterval(paint, 80);
 }
 init();
 
 function create_snake()
 {
  var length = 5; 
  snake_array = []; 
  for(var i = length-1; i>=0; i--)
  {
   
   snake_array.push({x: i, y:0});
  }
 }
 
 
 function create_food()
 {
  food = {
   x: Math.round(Math.random()*(w-cw)/cw), 
   y: Math.round(Math.random()*(h-cw)/cw), 
  };
  
 }
 
 
 function paint()
 {
  
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = "black";
  ctx.strokeRect(0, 0, w, h);
  
  
  var nx = snake_array[0].x;
  var ny = snake_array[0].y;
  
  if(d == "right") nx++;
  else if(d == "left") nx--;
  else if(d == "up") ny--;
  else if(d == "down") ny++;
  
  
  
  if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
  {
   
   init();
   
   return;
  }
  
  
  if(nx == food.x && ny == food.y)
  {
   var tail = {x: nx, y: ny};
   score++;
   
   create_food();
  }
  else
  {
   var tail = snake_array.pop(); 
   tail.x = nx; tail.y = ny;
  }
  
  
  snake_array.unshift(tail); 
  
  for(var i = 0; i < snake_array.length; i++)
  {
   var c = snake_array[i];
   
   paint_cell(c.x, c.y);
  }
  
  
  paint_cell(food.x, food.y);
  
  var score_text = "Score: " + score;
  ctx.fillText(score_text, 5, h-5);
 }
 
 
 function paint_cell(x, y)
 {
  ctx.fillStyle = "red";
  ctx.fillRect(x*cw, y*cw, cw, cw);
  ctx.strokeStyle = "white";
  ctx.strokeRect(x*cw, y*cw, cw, cw);
 }
 
 function check_collision(x, y, array)
 {
  
  for(var i = 0; i < array.length; i++)
  {
   if(array[i].x == x && array[i].y == y)
    return true;
  }
  return false;
 }
 
 
 $(document).keydown(function(e){
  var key = e.which;
  
  if(key == "37" && d != "right") d = "left";
  else if(key == "38" && d != "down") d = "up";
  else if(key == "39" && d != "left") d = "right";
  else if(key == "40" && d != "up") d = "down";
  
 })
  })

Chess Game

var B,i,y,u,b,I=[],G=120,x=10,z=15,M=1e4,l=[5,3,4,6,2,4,3,5,1,1,1,1,1,1,1,1,9,9
,9,9,9,9,9,9,13,11,12,14,10,12,11,13,0,99,0,306,297,495,846,-1,0,1,2,2,1,0,-1,-
1,1,-10,10,-11,-9,9,11,10,20,-9,-11,-10,-20,-21,-19,-12,-8,8,12,19,21];
function
X(w,c,h,e,S,s)
{var t,o,L,E,d,O=e,N=-M*M,K=78-h<<x,p,g,n,m,A,q,r,C,J,a=y?-x:x;
y^=8;G++;d=w||s&&s>=h&&X(0,0,0,21,0,0)>M;
do{if(o=I[p=O]){q=o&z^y;if(q<7){A=q--&
2?8:4;C=o-9&z?[53,47,61,51,47,47][q]:57;
do{r=I[p+=l[C]];
if(!w|p==w){g=q|p+a-S?0
:S;
if(!r&(!!q|A<3||!!g)||(r+1&z^y)>9&&q|A>2)
{if(m=!(r-2&7))return y^=8,I[G--]=
O,K;J=n=o&z;E=I[p-a]&z;t=q|E-7?n:(n+=2,6^y);
while(n<=t){L=r?l[r&7|32]-h-q:0;
if(
s)L+=(1-q?l[(p-p%x)/x+37]-l[(O-O%x)/x+37]+l[p%x+38]*(q?1:2)-l[O%x+38]+(o&16)/2:
!!m*9)+(!q?!(I[p-1]^n)+!(I[p+1]^n)+l[n&7|32]-99+!!g*99+(A<2):0)+!(E^y^9);
if(s>h
||1<s&s==h&&L>z|d){I[p]=n,I[O]=m?(I[g]=I[m],I[m]=0):g?I[g]=0:0;L-=X(s>h|d?0:p,L
-N,h+1,I[G+1],J=q|A>1?0:p,s);
if(!(h||s-1|B-O|i-n|p-b|L<-M))
return W(),G--,u=J;
J=q-1|A<7||m||!s|d|r|o<z||X(0,0,0,21,0,0)>M;I[O]=o;I[p]=r;m?(I[m]=I[g],I[g]=0):
g?I[g]=9^y:0;}
if(L>N||s>1&&L==N&&!h&&Math.random()<.5){I[G]=O;if(s>1)
{if(h&&c-L
<0)return y^=8,G--,L;if(!h)i=n,B=O,b=p;}N=L;}n+=J||(g=p,m=p<O?g-3:g+2,I[m]<z|I[
m+O-p]||I[p+=p-O])?1:0;}}}}while(!r&q>2||(p=O,q|A>2|o>z&!r&&++C*--A));}}}while(
++O>98?O=20:e-O);return y^=8,G--,N+M*M&&N>-K+1924|d?N:0;}B=i=y=u=0;while(B++<
120)I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[i++]|16:7;for(a=
"<table cellspacing=0 align=center>",i=18;i<100;a+=++i%10-9?
"<th width=40 height=40 onclick=Y("+i+") style='border:9px solid #aae' id=o"+i+
" bgcolor=#000"+(i*.9&1?"9090d0>":"c0c0ff>"):(i++,"
<tr>"));
a+="<th colspan=8><select id=t><option><option><option>";
document.write(a+"<option>N</select></table>
");
function W(){B=b;for(p=21;p<99;++p)if(q=document.getElementById("o"+p)){q.
innerHTML="<img width=40 src="+(I[p]&z)+".gif>";q.
style.borderColor=p==B?"red":"white";}}W();
function Y(s){i=(I[s]^y)&z;if(i>8){b=s;W();}else if(B&&i<9){b=s;i=I[B]&z;if((i&
7)==1&(b<29|b>90))i=14-document.getElementById("t").selectedIndex^y;X(0,0,0,21,
u,1);if(y)setTimeout("X(0,0,0,21,u,2/*ply*/),X(0,0,0,21,u,1)",250);}}
for(B=i=y=u=b=i=5-5,x=10,I=[],l=[];B++<304;
I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[i++]=("cheetah").charCodeAt(y++)-64:7);function X(c,h,e,s){c^=8;for(var c,h,e,e,t,a,h,d=e&&X(c,0
)>1e4,n,N=-1e8,O=20,K=78-h<<9;++O<99;)if((o=I[T=O])&&(G=o^c)<7){A=G--&2?8:4;C=
o-9?l[61+G]:49;do if(!(R=I[T+=l[C]])&&!!G|A<3||(R+1^c)>9&&G|A>2){if(!(R-2&7)
)return K;n=G|(c?T>29:T<91)?o:6^c;S=(R&&l[R&7|32]*2-h-G)+(n-o?110:!G&&(A<2)+1);
if(e>h||1<e&e==h&&S>2|d){I[T]=n;I[O]=0;S-=X(c,h+1,e,S-N);if(!(h||e-1|B-O|T-b|S<
-1e4))return W(),c&&setTimeout("X(8,0,2),X(8,0,1)",75);I[O]=o;I[T]=R}if(S>N||!h
&S==N&&Math.random()<.5)if(N=S,e>1)if(h?s-S<0:(B=O,b=T,0))break}while(!R&G>2||(
T=O,(G||A>2|(c?O>78:O<41)&!R)&&++C*--A))}return-K+768<N|d&&N}function W(){i=
"<table>";for(u=18;u<99;document.body.innerHTML=i+=++u%x-9?
"<th width=60 height=60 onclick='I[b="+u+
"]>8?W():X(0,0,1)'style='font-size:50px'bgcolor=#"+(u-B?u*.9&1||9:"d")+
"0f0e0>&#"+(I[u]?9808+l[67+I[u]]:160):u++&&"
<tr>")B=b}W()
for(B=i=y=u=b=i=5-5,x=10,z=15,I=[],l=[];l[B]=("ustvrtsuqqqqqqqq"+"yyyyyyyy}{|~z|{}@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg OJNMLK  IDHGFE").charCodeAt(B)-64,B++<120;I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[u++]:7);function X(c,h,e,S,s){c^=8;for(var T,o,L,E,D,O=20,G,N=-1e8,n,g,d=S&&X(c,0)>1e4,C,R,A,K=78-h<<9,a=c?x:-x;++O<99;)if((o=I[T=O])&&(G=o&z^c)<7){A=G--&2?8:4;C=9-o&
z?l[61+G]:49;do{R=I[T+=l[C]];g=D=G|T+a-e?0:e;if(!R&&(G||A<3||g)||(1+R&z^c)>9&&G
|A>2){if(!(2-R&7))return K;for(E=n=G|I[T-a]-7?o&z:6^c;E;E=!E&&!d&&!(g=T,D=T<O?g
-3:g+2,I[D]<z|I[D+O-T]|I[T+=T-O])){L=(R&&l[R&7|32]*2-h-G)+(G?0:n-o&z?110:(D&&14
)+(A<2)+1);if(S>h||1<S&S==h&&L>2|d){I[T]=n,I[g]=I[D],I[O]=D?I[D]=0:0;L-=X(c,h+1
,E=G|A>1?0:T,S,L-N);if(!(h||S-1|B-O|T-b|L<-1e4))return W(y=E),c&&setTimeout(
"X(8,0,y,2),X(8,0,y,1)",75);E=1-G|A<7|D|!S|R|o<z||X(c,0)>1e4;I[O]=o;I[T]=R;I[D
]=I[g];D?I[g]=G?0:9^c:0}if(L>N||!h&L==N&&Math.random()<.5)if(N=L,S>1)if(h?s-L<0
:(B=O,b=T,0))return N}}}while(!R&G>2||(T=O,G|A>2|z<o&!R&&++C*--A))}return-K+
768<N|d&&N}function W(){i="<table>";for(u=18;u<98;document.body.innerHTML=i+=++
u%x-9?"<th width=60 height=60 onclick='I[b="+u+
"]&8?W():X(0,0,y,1)'style='font-size:50px'bgcolor=black"+(u-B?u*.9&1||9:"d")+"#FFFF00>&#"+(I[u]&15?9808+l[67+(I[u]&15)]:160)+";":u++&&"
<tr>")B=b}W()

Piono Tiles

<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <h2 class="center" style="font-family:Arial, Helvetica, sans-serif; font-size:36px;">
Piono-Tiles</h2>
<div class="gameContainer" id="gameContainer">
            <canvas 
                width="300" 
                height="500"
                class="gamePianotitle" 
                id="gameCanvas"
                onclick="gameMouseClick(event)"></canvas>
            <img src="replay.png" id="replay" class="replay" />
            <div class="center">
             
            </div>
</div>

            body{
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;  background-image:url(rainbow_texture679.jpg);          }
   
   
   
   
            .gameContainer{
                margin: 0 auto;
                background: transparent;
    
            }
            .gamePianotitle{
                background-color: #00F;
                width: 300px;
                height: 500px;
                margin: 0 auto;
                display: block;
                border: 1px solid #111;
                cursor: pointer;
                border-left: none;
                box-shadow: 2px 3px 10px #000; border:inset; border-collapse:collapse; border-color:#FFF;
    
            }
            .replay{
                display: none; 
            }
            .center{
                text-align: center; 
            }
            .fullButton{
                width: 300px;
                padding: 10px 20px;
                font-size: 1.2rem;
                font-family: sans-serif;
                color: #000;
                background-color: #FFF;
                margin-top: 10px;
                border: 1px solid #333;
                outline: none;
                cursor: pointer; border-radius:15px 20px 5px; font-size:26px; box-shadow:2px 4px 8px #000000;
            }

function _(id) {
                return document.getElementById(id);
}

Tic Tac Toe

<form NAME="tic" method="post">
<input TYPE="button" NAME="sqr1" class="tictac inp" value="     " onClick="if(document.tic.sqr1.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr1.value = ' X '; sqr1T = 1; turn = 1; vari(); check();} else if(document.tic.sqr1.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr1.value = ' X '; sqr1T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr1.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr1.value = ' O '; sqr1T = 1; turn = 1; vari(); player1Check()} drawCheck()"><input TYPE="button" NAME="sqr2" class="tictac inp" value="     " onClick="if(document.tic.sqr2.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr2.value = ' X '; sqr2T = 1; turn = 1; vari(); check();} else if(document.tic.sqr2.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr2.value = ' X '; sqr2T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr2.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr2.value = ' O '; sqr2T = 1; turn = 1; vari(); player1Check()} drawCheck()"><input TYPE="button" NAME="sqr3" class="tictac inp" value="     " onClick="if(document.tic.sqr3.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr3.value = ' X '; sqr3T = 1; turn = 1; vari(); check();} else if(document.tic.sqr3.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr3.value = ' X '; sqr3T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr3.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr3.value = ' O '; sqr3T = 1; turn = 1; vari(); player1Check()} drawCheck()"><br /><input TYPE="button" NAME="sqr4" class="tictac inp" value="     " onClick="if(document.tic.sqr4.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr4.value = ' X '; sqr4T = 1; turn = 1; vari(); check();} else if(document.tic.sqr4.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr4.value = ' X '; sqr4T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr4.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr4.value = ' O '; sqr4T = 1; turn = 1; vari(); player1Check()} drawCheck()"><input TYPE="button" NAME="sqr5" class="tictac  inp" value="     " onClick="if(document.tic.sqr5.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr5.value = ' X '; sqr5T = 1; turn = 1; vari(); check();} else if(document.tic.sqr5.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr5.value = ' X '; sqr5T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr5.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr5.value = ' O '; sqr5T = 1; turn = 1; vari(); player1Check()} drawCheck()"><input TYPE="button" NAME="sqr6" class="tictac inp" value="     " onClick="if(document.tic.sqr6.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr6.value = ' X '; sqr6T = 1; turn = 1; vari(); check();} else if(document.tic.sqr6.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr6.value = ' X '; sqr6T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr6.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr6.value = ' O '; sqr6T = 1; turn = 1; vari(); player1Check()} drawCheck()"><br /><input TYPE="button" NAME="sqr7" class="tictac inp" value="     " onClick="if(document.tic.sqr7.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr7.value = ' X '; sqr7T = 1; turn = 1; vari(); check();} else if(document.tic.sqr7.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr7.value = ' X '; sqr7T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr7.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr7.value = ' O '; sqr7T = 1; turn = 1; vari(); player1Check()} drawCheck()"><input TYPE="button" NAME="sqr8" class="tictac inp" value="     " onClick="if(document.tic.sqr8.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr8.value = ' X '; sqr8T = 1; turn = 1; vari(); check();} else if(document.tic.sqr8.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr8.value = ' X '; sqr8T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr8.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr8.value = ' O '; sqr8T = 1; turn = 1; vari(); player1Check()} drawCheck()"><input TYPE="button" NAME="sqr9" class="tictac inp" value="     " onClick="if(document.tic.sqr9.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr9.value = ' X '; sqr9T = 1; turn = 1; vari(); check();} else if(document.tic.sqr9.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr9.value = ' X '; sqr9T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr9.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr9.value = ' O '; sqr9T = 1; turn = 1; vari(); player1Check()} drawCheck()">
</form>

 <style>
.inp{border:double; border-radius:50%; box-shadow: 2px 4px 6px #000000 ; background-color:#009; color:#FFFFFF; text-shadow: 2px 4px 6px #FFFFFF; font-size:36px; border-color:#ffffff;}
.inp:hover{background-color:#00F; transition: ease-out 0.2s; box-shadow: 2px 4px 6px #666; }
</style>

function check2()
{
  vari()
  drawCheck()
  if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
  {
    alert("You Lose!")
    reset()
  } 
  else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
  {
    alert("You Lose!")
    reset()
  } 
  else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
  {
    alert("You Lose!")
    reset()
  }
  else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
  {
    alert("You Lose!")
    reset()
  }
  else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
  {
    alert("You Lose!")
    reset()
  }
  else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
  {
    alert("You Lose!")
    reset()
  }
  else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
  {
    alert("You Lose!")
    reset()
  }
  else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
  {
    alert("You Lose!")
    reset()
  }
  else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
  {
    alert("You Lose!")
    reset()
  }
}

function player1Check()
{
  if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  } 
  else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  } 
  else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ")
  {
    alert("Player 1 wins!")
    reset()
  }
  else
  {
    player2Check()
    drawCheck()  
  } 
}

function player2Check()
{
  vari()
  drawCheck()
  if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  } 
  else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  } 
  else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
  else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
  else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
  else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
  else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
  else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
  else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
  {
    alert("Player 2 wins!")
    reset()
  }
}

function drawCheck()
{
  vari()
  moveCount = sqr1T + sqr2T + sqr3T + sqr4T + sqr5T + sqr6T + sqr7T + sqr8T + sqr9T 
  if(moveCount == 9)
  {
    reset()
    alert("Draw") 
  }
}

function AI()
{
  vari()
  if(document.tic.sqr5.value == "     " && turn == 1)
  {
    document.tic.sqr5.value = " O "
    turn = 0
    sqr5T = 1
  }
  else if(document.tic.sqr1.value == "     " && turn == 1)
  {
    document.tic.sqr1.value = " O "
    turn = 0
    sqr1T = 1
  }
  else if(document.tic.sqr9.value == "     " && turn == 1)
  {
    document.tic.sqr9.value = " O "
    turn = 0
    sqr9T = 1
  }
  else if(document.tic.sqr6.value == "     " && turn == 1)
  {
    document.tic.sqr6.value = " O "
    turn = 0
    sqr6T = 1
  }
  else if(document.tic.sqr2.value == "     " && turn == 1)
  {
    document.tic.sqr2.value = " O "
    turn = 0
    sqr2T = 1
  }
  else if(document.tic.sqr8.value == "     " && turn == 1)
  {
    document.tic.sqr8.value = " O "
    turn = 0
    sqr8T = 1
  }
  else if(document.tic.sqr3.value == "     " && turn == 1)
  {
    document.tic.sqr3.value = " O "
    turn = 0
    sqr3T = 1
  }
  else if(document.tic.sqr7.value == "     " && turn == 1)
  {
    document.tic.sqr7.value = " O "
    turn = 0
    sqr7T = 1
  }
  else if(document.tic.sqr4.value == "     " && turn == 1)
  {
    document.tic.sqr4.value = " O "
    turn = 0
    sqr4T = 1
  }
  check2()
}

function reset()
{
  document.tic.sqr1.value = "     "
  document.tic.sqr2.value = "     "
  document.tic.sqr3.value = "     "
  document.tic.sqr4.value = "     "
  document.tic.sqr5.value = "     "
  document.tic.sqr6.value = "     "
  document.tic.sqr7.value = "     "
  document.tic.sqr8.value = "     "
  document.tic.sqr9.value = "     "
  sqr1T = 0
  sqr2T = 0
  sqr3T = 0
  sqr4T = 0
  sqr5T = 0
  sqr6T = 0
  sqr7T = 0
  sqr8T = 0
  sqr9T = 0
  vari()
  turn = 0
  moveCount = 0
}

function resetter()
{
  reset()
}
</SCRIPT>

24X Game

<head>
  <meta charset="utf-8">
  <title>2 X</title>

<body>

<div class="container">
    <div class="heading">
      <h1 class="title">
2 X</h1>
<div class="scores-container">
        <div class="score-container">
0</div>
<div class="best-container">
0</div>
</div>
</div>
<div class="above-game">
      
      <a class="restart-button">New-Game</a>
    </div>
<hr>
    <div class="game-container">
      <div class="game-message">
        
        <div class="lower">
         <a class="keep-playing-button">Keep going</a>
          <a class="retry-button">Try again</a>
        </div>
</div>
<div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
</div>
<div class="grid-row">
          <div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
</div>
<div class="grid-row">
          <div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
</div>
<div class="grid-row">
          <div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
<div class="grid-cell">
</div>
</div>
</div>
<div class="tile-container">

</div>
</div>
<hr>
    
    
  </div>
<script src="js/bind_polyfill.js"></script>
  <script src="js/classlist_polyfill.js"></script>
  <script src="js/animframe_polyfill.js"></script>
  <script src="js/keyboard_input_manager.js"></script>
  <script src="js/html_actuator.js"></script>
  <script src="js/grid.js"></script>
  <script src="js/tile.js"></script>
  <script src="js/local_storage_manager.js"></script>
  <script src="js/game_manager.js"></script>
  <script src="js/application.js"></script>
</body>

CLOCKS :

Analogue Clock

<canvas id="canvas" width="150" height="150"></canvas>

window.onload = function () {
        setInterval(showClock, 1000);

function showClock() {

// DEFINE CANVAS AND ITS CONTEXT.
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

var date = new Date;
            var angle;
            var secHandLength = 60;

// CLEAR EVERYTHING ON THE CANVAS. RE-DRAW NEW ELEMENTS EVERY SECOND.
            ctx.clearRect(0, 0, canvas.width, canvas.height);

OUTER_DIAL1();
            OUTER_DIAL2();
            CENTER_DIAL();
            MARK_THE_HOURS();
            MARK_THE_SECONDS();

SHOW_SECONDS();
            SHOW_MINUTES();
            SHOW_HOURS();

function MARK_THE_HOURS() {

for (var i = 0; i < 12; i++) {
                    angle = (i - 3) * (Math.PI * 2) / 12;       // THE ANGLE TO MARK.
                    ctx.lineWidth = 1;            // HAND WIDTH.
                    ctx.beginPath();

var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
                    var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
                    var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 7));
                    var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 7));

ctx.moveTo(x1, y1);
                    ctx.lineTo(x2, y2);

ctx.strokeStyle = '#466B76';
                    ctx.stroke();
                }
            }

function MARK_THE_SECONDS() {

for (var i = 0; i < 60; i++) {
                    angle = (i - 3) * (Math.PI * 2) / 60;       // THE ANGLE TO MARK.
                    ctx.lineWidth = 1;            // HAND WIDTH.
                    ctx.beginPath();

var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
                    var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
                    var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30));
                    var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30));

ctx.moveTo(x1, y1);
                    ctx.lineTo(x2, y2);

ctx.strokeStyle = '#C4D1D5';
                    ctx.stroke();
                }
            }

function SHOW_SECONDS() {

var sec = date.getSeconds();
                angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4);
                ctx.lineWidth = 0.5;              // HAND WIDTH.

ctx.beginPath();
                // START FROM CENTER OF THE CLOCK.
                ctx.moveTo(canvas.width / 2, canvas.height / 2);   
                // DRAW THE LENGTH.
                ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength),
                    canvas.height / 2 + Math.sin(angle) * secHandLength);

// DRAW THE TAIL OF THE SECONDS HAND.
                ctx.moveTo(canvas.width / 2, canvas.height / 2);    // START FROM CENTER.
                // DRAW THE LENGTH.
                ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 20),
                    canvas.height / 2 - Math.sin(angle) * 20);

ctx.strokeStyle = '#586A73';        // COLOR OF THE HAND.
                ctx.stroke();
            }

function SHOW_MINUTES() {

var min = date.getMinutes();
                angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4);
                ctx.lineWidth = 1.5;              // HAND WIDTH.

ctx.beginPath();
                ctx.moveTo(canvas.width / 2, canvas.height / 2);  // START FROM CENTER.
                // DRAW THE LENGTH.
                ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.1),      
                    canvas.height / 2 + Math.sin(angle) * secHandLength / 1.1);

ctx.strokeStyle = '#999';  // COLOR OF THE HAND.
                ctx.stroke();
            }

function SHOW_HOURS() {

var hour = date.getHours();
                var min = date.getMinutes();
                angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4);
                ctx.lineWidth = 1.5;              // HAND WIDTH.

ctx.beginPath();
                ctx.moveTo(canvas.width / 2, canvas.height / 2);     // START FROM CENTER.
                // DRAW THE LENGTH.
                ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.5),      
                    canvas.height / 2 + Math.sin(angle) * secHandLength / 1.5);

ctx.strokeStyle = '#000';   // COLOR OF THE HAND.
                ctx.stroke();
            }
        }
    }

Colourful Analogue Clock

<canvas id="canvas" width="150" height="150" style="background-color:transparent;">
</canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#F00');
  grad.addColorStop(0.5, 'blue');
  grad.addColorStop(1, '#FFF');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#FFF';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

Big Clock

var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));

var cx = 100;
var cy = 100;

function shifter(val) {
  return [val, cx, cy].join(' ');
}

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));

for(var i = 1; i <= 12; i++) {
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  el.setAttribute('x1', '100');
  el.setAttribute('y1', '30');
  el.setAttribute('x2', '100');
  el.setAttribute('y2', '40');
  el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)');
  el.setAttribute('style', 'stroke: #ffffff;');
  document.querySelector('svg').appendChild(el);
}

Digital Clock

Sample

Black Digi Clock

<table class="ta" border="0" align="center" bgcolor="#c0c0c0" cellspacing="0" cellpadding="2" width="136">
     <tr>
       <td colspan="4">
                 <font size="1" face="verdana, arial, helvetica, ms sans serif">
                   <b>Current Time</b>
                 </font>
              </td>
          
     <td>
   <form name="hours">
          <p><input class="time" type="text" size="2" name="clock"></p>
          </form>
       </td>
       <td>
   <form name="minutes">
          <p><input class="time" type="text" size="2" name="clock" /></p>
          </form>
       </td>
       <td>
   <form name="seconds">
          <p><input class="time" type="text" size="2" name="clock" /></p>
          </form>
       </td>
       <td>
   <form name="ampm">
          <p><input class="time" type="text" size="2" name="clock" /></p>
          </form>
       </td>
     </tr>
  </table>

.time{box-shadow:4px 6px 9px #000000; background-color:#000000; color:#FFFFFF;}
.ta{background-color:#FFFFFF;}

var musicsrc="apollo13.mid"

function sivamtime() {
 now=new Date();
 hour=now.getHours();
 min=now.getMinutes();
 sec=now.getSeconds();

if (min<=9) {
 min="0"+min;
 }
if (sec<=9) {
 sec="0"+sec;
 }
if (hour>12) {
 hour=hour-12;
 add="pm";
 }
else {
 hour=hour;
 add="am";
 }
if (hour==12) {
 add="pm";
 }
if (hour==00) {
 hour="12";
 }

document.hours.clock.value = (hour<=9) ? "0"+hour : hour;
  document.minutes.clock.value = min;
  document.seconds.clock.value = sec;
  document.ampm.clock.value= add;
 setTimeout("sivamtime()", 1000);

}

playit=false
function playmusic(){
musicwin=window.open("","","width=100,height=100")
if (navigator.appName=="Microsoft Internet Explorer")
musicwin.document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="infinite">')
else
musicwin.document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="true">')
musicwin.document.close()
}

function soundcheck(cbox){
playit=cbox.checked
}

function alarm() {
    note = document.arlm.message.value;
    if (note == '') {note = 'ALARM!!';}

hrs = document.arlm.hr.value;
    min = document.arlm.mts.value;
    apm = document.arlm.am_pm.value;

if ((document.hours.clock.value == hrs) &&
    (document.minutes.clock.value == min) &&
    (document.ampm.clock.value == apm)) {
     if (playit)
     playmusic()
     else
     alert(note);
     return false}

if (hrs == '') {alert('The Hour field is empty'); return false}
 if (min == '') {alert('The Minute field is empty'); return false}
 if (apm == '') {alert('The am/pm field is empty'); return false}

if (hrs.length == 1) {document.arlm.hr.value = '0' + hrs}
 if (min.length == 1) {document.arlm.mts.value = '0' + min}
 if (hrs.length > 2) {alert('The Hour is wrongly typed.'); return false}
 if (min.length > 2) {alert('The Minute is wrongly typed.'); return false}
 if (apm != 'am' && apm != 'pm' ) {alert('The am/pm is wrongly typed.'); return false}

setTimeout("alarm()", 1000);}

Simple Digital Clock

Stylush Clock

Simple Calender

<body onLoad="displayCalendar()"> 
 
<div id="calendar"></div> 
</body>

.monthPre{
 color: gray;
 text-align: center;  
}
.monthNow{
 color: blue;
 text-align: center; 
}
.dayNow{
 border: 2px solid black; background-color: #00F; 
 color: #FFF;
 text-align: center;
}
.calendar td{
 htmlContent: 2px;
 width: 40px; border-radius: 5px; box-shadow:#CCC 2px 4px 6px;
}
.monthNow th{
 background-color: #000000; border-radius: 10px 5px 15px; text-shadow: 2px 4px 6px #CCCCCC;
 color: #FFFFFF;
 text-align: center;
}
.dayNames{
 background: #000;
 color: #FFFFFF;
 text-align: center;
}
 
     
function displayCalendar(){
 
 
 var htmlContent ="";
 var FebNumberOfDays ="";
 var counter = 1;
 
 
 var dateNow = new Date();
 var month = dateNow.getMonth();

Thursday, 22 March 2018

CALCULATOR :

Prompt Calculator

var f_no=eval(prompt("Enter First No","Type here"));
var op=prompt("Enter airthmatic Operator","type here");
var s_no=eval(prompt("Enter Second No","Type here"));
document.write('<table id=tablei border="1"><tr><th id=thi>value 1</th><th id=thi>operator</th><th id=thi>value 2</th></tr>','<td id=tdi>',f_no,'</td>','<td id=tdi>',op,'</td>','<td id=tdi>',s_no,'</td></tr>',"<br>");
switch(op)
{
 case '+':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=tdi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no+s_no,'</td></tr></table>');
 break;
 
 case '-':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=tdi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no-s_no,'</td></tr></table>');
 break;
 
 case '*':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=thi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no*s_no,'</td></tr></table>');
 break;
 
 case '/':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=tdi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no /s_no,'</td></tr></table>');
 break;
 
 default:
 document.write("Invalid Operators");
}

#tdi {width:2in;text-align:center;font-size:18px; border:groove; border-radius:20px; background-color:#CCCCFF; color:#FFF; border-radius:12px; box-shadow:2px 4px 8px #FFFFFF; }
#thi {width:1in;text-align:center;font-size:18px; border-radius:20px; background-color:#369; color:#FFFFFF; border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}
#tablei{border:none; padding:2px; width:2in; border-top-right-radius:12px; border:outset; border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}
.butt{border-radius:30px; background-color:#000; color:#FFF; border:none; box-shadow:4px 4px 8px #999999;}
.tde {width:2in;text-align:center;font-size:18px; border:groove; border-radius:20px; background-color:#CCCCFF; color:#FFF; }
.the {width:1in;text-align:center;font-size:18px; border-radius:20px; background-color:#369; color:#FFFFFF;}
.tble{border:none; padding:2px; width:2in; border-top-right-radius:12px;}
.box{border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}

4-Function Calculator

<center><table class="tble">
<td class="tde">
<form name="calculator">  
Value 1: <input class="box" type="text" name="number1">   
Value 2: <input class="box" type="text" name="number2">   
Result: <input class="box" type="text" name="total"></td>  
<input class="butt" type="button" value="+" onclick="javascript:addition();">  
<input class="butt" type="button" value="-" onclick="javascript:subtraction();">  
<input class="butt" type="button" value="x" onclick="javascript:multiply();">  
<input class="butt" type="button" value="/" onclick="javascript:division();">  
<input class="butt" type="button" value="%" onclick="javascript:modulus();">  
</form></table></center>

.butt{border-radius:30px; background-color:#000; color:#FFF; border:none; box-shadow:4px 4px 8px #999999;}
.tde {width:2in;text-align:center;font-size:18px; border:groove; border-radius:20px; background-color:#CCCCFF; color:#FFF; }
.the {width:1in;text-align:center;font-size:18px; border-radius:20px; background-color:#369; color:#FFFFFF;}
.tble{border:none; padding:2px; width:2in; border-top-right-radius:12px;}
.box{border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}

All-Function Calculator

<table class="calculator" id="calc"><tr><td colspan="4" class="calc_td_result "><input type="text" readonly="readonly" name="calc_result" id="calc_result" class="calc_result bar" onkeydown="javascript:key_detect_calc('calc',event);" /></td>
</tr><tr><td class="calc_td_btn"><input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" /></td></tr><tr>
<td class="calc_td_btn"><input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" /></td></tr><tr><td class="calc_td_btn"><input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" /></td></tr><tr><td class="calc_td_btn"><input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="÷" onclick="javascript:f_calc('calc','');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
                document.getElementById('calc').onload=init_calc('calc');
        </script>

.calculator
{
        width:300px;
        height:300px;
        background-color:#eeeeee;
        border:2px solid #CCCCCC;
        margin:auto;
        padding-left:5px;
        padding-bottom:5px; background-color:#CCCCFF; border-radius:15px;
}
.calculator td
{
        height:16.66%;
}
.calc_td_result
{
        text-align:center;
}
.calc_result
{
        width:90%;
        text-align:right;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%; 
}
.calc_btn
{
        width:90%;
        height:90%;
        font-size:20px; border-radius:15px; background-color:#000000; color:#FFF; box-shadow:4px 6px 8px #FFF;
}

.bar{border-radius:15px; box-shadow:2px 4px 8px #FFFFFF;}

calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
        return document.getElementById(id);
}
function f_calc(id,n)
{
        if(n=='ce')
        {
                init_calc(id);
        }
        else if(n=='=')
        {
                if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                {
                        eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                        calc_array[id][0] = '=';
                        $id(id+'_result').value=calcul;
                        calc_array[id][2]=calcul;
                        calc_array[id][3]=0;
                }
        }
        else if(n=='+-')
        {
                $id(id+'_result').value=$id(id+'_result').value*(-1);
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
                pas_ch = 1;
        }
        else if(n=='nbs')
        {
                if($id(id+'_result').value<10 && $id(id+'_result').value>-10)
                {
                        $id(id+'_result').value=0;
                }
                else
                {
                        $id(id+'_result').value=$id(id+'_result').value.slice(0,$id(id+'_result').value.length-1);
                }
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
        }
        else
        {
                        if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                        {
                                eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                                $id(id+'_result').value=calcul;
                                calc_array[id][2]=calcul;
                                calc_array[id][3]=0;
                        }
                        calc_array[id][0] = n;
        }
        if(pas_ch==0)
        {
                calc_array[id][1] = 1;
        }
        else
        {
                pas_ch=0;
        }
        document.getElementById(id+'_result').focus();
        return true;
}
function add_calc(id,n)
{
        if(calc_array[id][1]==1)
        {
                $id(id+'_result').value=n;
        }
        else
        {
                $id(id+'_result').value+=n;
        }
        if(calc_array[id][0]=='=')
        {
                calc_array[id][2] = $id(id+'_result').value;
                calc_array[id][3] = 0;
        }
        else
        {
                calc_array[id][3] = $id(id+'_result').value;
        }
        calc_array[id][1] = 0;
        document.getElementById(id+'_result').focus();
        return true;
}
function init_calc(id)
{
        $id(id+'_result').value=0;
        calc_array[id] = new Array('=',1,'0','0',0);
        document.getElementById(id+'_result').focus();
        return true;
}
function key_detect_calc(id,evt)
{
        if((evt.keyCode>95) && (evt.keyCode<106))
        {
                var nbr = evt.keyCode-96;
                add_calc(id,nbr);
        }
        else if((evt.keyCode>47) && (evt.keyCode<58))
        {
                var nbr = evt.keyCode-48;
                add_calc(id,nbr);
        }
        else if(evt.keyCode==107)
        {
                f_calc(id,'+');
        }
        else if(evt.keyCode==109)
        {
                f_calc(id,'-');
        }
        else if(evt.keyCode==106)
        {
                f_calc(id,'*');
        }
        else if(evt.keyCode==111)
        {
                f_calc(id,'');
        }
        else if(evt.keyCode==110)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==190)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==188)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==13)
        {
                f_calc(id,'=');
        }
        else if(evt.keyCode==46)
        {
                f_calc(id,'ce');
        }
        else if(evt.keyCode==8)
        {
                f_calc(id,'nbs');
        }
        else if(evt.keyCode==27)
        {
                f_calc(id,'ce');
        }
        return true;
}

Scientific Calculator

.bar{border-radius:12px; background-color:#69C; box-shadow:2px 2px 6px #FFFFFF; border:ridge; border-color:#FFFFFF;}
.cos{border-radius:12px; background-color:#000000; box-shadow:2px 2px 4px #FFFFFF; color:#FFFFFF; border:ridge;}
.del{border-radius:12px; background-color:#F00; box-shadow:2px 2px 4px #FFFFFF; border:ridge; border-color:#CCC;}
.num{border-radius:12px; background-color:#FFF; box-shadow:2px 2px 4px #FFFFFF; border:ridge;}
.num:hover{border:none; border-radius:5px; background-color:#CCFFFF; transition:ease-out 0.2s}
.del:hover{border:none; border-radius:5px; background-color:#F69; transition:ease-out 0.2s}
.cos:hover{border:none; border-radius:5px; background-color:#99C; transition:ease-out 0.2s}

function addChar(input, character) {
if(input.value == null || input.value == "0")
  input.value = character
else
  input.value += character
}

function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)}

function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
 input.value = "-" + input.value
}

function compute(form) {
 form.display.value = eval(form.display.value)
}

function square(form) {
 form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
 for (var i = 0; i < str.length; i++) {
  var ch = str.substring(i, i+1)
  if (ch < "0" || ch > "9") {
   if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
    && ch != "(" && ch!= ")") {
    alert("invalid entry!")
    return false
    }
   }
  }
  return true
}

Sample !

What Is Javascript ?

JavaScript was initially created to “make webpages alive”. The programs in this language are called scripts. They can be written right in the HTML and execute automatically as the page loads. Scripts are provided and executed as a plain text. They don’t need a special preparation or a compilation to run. In this aspect, JavaScript is very different from another language called Java. When JavaScript was created, it initially had another name: “Live Script”. But Java language was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.But as it evolved, JavaScript became a fully independent language, with its own specification called ECMAScript, and now it has no relation to Java at all.

AS Program's

Friday, 23 March 2018

GAMES :

Boll Game

Paddle Game

Snake Game

Chess Game

Piono Tiles

Tic Tac Toe

24X Game

CLOCKS :

Analogue Clock

Colourful Analogue Clock

Big Clock

Digital Clock

Sample

Black Digi Clock

Simple Digital Clock

Stylush Clock

Simple Calender

Thursday, 22 March 2018

CALCULATOR :

Prompt Calculator

4-Function Calculator

All-Function Calculator

Scientific Calculator

Sample !

Animations :