From d8553f9446f1d30e937f07d8e02b17c2af551777 Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Thu, 4 Oct 2018 22:19:42 +0530 Subject: [PATCH 1/8] Add files via upload --- index-style.css | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 index-style.css diff --git a/index-style.css b/index-style.css new file mode 100644 index 0000000..8f8af70 --- /dev/null +++ b/index-style.css @@ -0,0 +1,33 @@ +body { + padding: 0; + margin: 0; + font-size: 12px; +} +ol{ + position: absolute; + width: 100%; + top:50%; + transform: translateY(-50%); +} +ol li{ + list-style-type: none; + display: inline-block; + text-align: center; + padding:3em 1em; + margin:auto 2.5%; + width:25%; + letter-spacing: 8px; + background-image:linear-gradient(to bottom,#3c7ee8,#95BEB6); + border:2px solid #8eb2ed; + border-radius: 25px; + transition: all .5s; +} +ol li a{ + text-decoration: none; + font-weight:bold; + padding: 1.5em; + font-size: 24px; +} +ol li:hover{ + transform: scale(1.2,1.2); +} From 9f0ae443c9aed2cbb6bb76601d9f85993c1dab87 Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Thu, 4 Oct 2018 22:20:23 +0530 Subject: [PATCH 2/8] Update index.html --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 3ad4f84..70daaba 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ Web Development +
    From 884e2932019584cc9b8d9fe0206a745cb612e853 Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Thu, 4 Oct 2018 23:27:22 +0530 Subject: [PATCH 3/8] Update index-style.css --- index-style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 61 insertions(+), 4 deletions(-) diff --git a/index-style.css b/index-style.css index 8f8af70..569429f 100644 --- a/index-style.css +++ b/index-style.css @@ -1,15 +1,53 @@ body { - padding: 0; - margin: 0; - font-size: 12px; + padding: 0; + margin: 0; + font-size: 12px; } + +/*========================| BACKGROUND STYLES |========================*/ + +#background-1{ + position: fixed; + height:100%; + width: 100%; + clip-path: polygon(87% 0, 100% 0, 100% 98%, 0 100%, 54% 75%); + background-color:#042d70; +} +#background-2{ + position: fixed; + height:100%; + width: 100%; + clip-path: polygon(67% 80%, 100% 0, 100% 100%, 0% 100%); + background-color:#0d47a5; +} +#background-3{ + position: fixed; + height:100%; + width: 100%; +clip-path: polygon(0 0, 26% 0, 19% 20%, 0 27%); + background-color:#042d70; +} +#background-4{ + position: fixed; + height:100%; + width: 100%; + clip-path: polygon(0 0, 21% 0, 18% 19%, 0 26%); + background-color:#0d47a5; +} + + +/*=========================| List Style And Positioning |=========================*/ + + ol{ position: absolute; width: 100%; + height: 100%; top:50%; transform: translateY(-50%); } ol li{ + position: absolute; list-style-type: none; display: inline-block; text-align: center; @@ -17,17 +55,36 @@ ol li{ margin:auto 2.5%; width:25%; letter-spacing: 8px; + transform: translate(-50%,-50%); background-image:linear-gradient(to bottom,#3c7ee8,#95BEB6); border:2px solid #8eb2ed; + border-radius: 25px; transition: all .5s; } + ol li a{ text-decoration: none; font-weight:bold; padding: 1.5em; font-size: 24px; + color: #dedfe0; +} + +ol li:nth-child(1){ + top:10%; + left:50%; + +} +ol li:nth-child(2){ + top:40%; + left:30%; + +} +ol li:nth-child(3){ + top:70%; + left:15%; } ol li:hover{ - transform: scale(1.2,1.2); + transform:translate(-50%,-50%) scale(1.2,1.2); } From d5d92ddcaf3dd8114f69fddcf3bfad49880ed7db Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Thu, 4 Oct 2018 23:27:45 +0530 Subject: [PATCH 4/8] Update index.html --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index 70daaba..c68fe7f 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,12 @@ + +
    +
    +
    +
    +
    1. Snake Game
    2. Assignments
      3. From c57c1e0a2001e4ab2f77310a835f2797b92202ae Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Fri, 5 Oct 2018 15:16:57 +0530 Subject: [PATCH 5/8] Create readme.md --- Tic_tac_toe/readme.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 Tic_tac_toe/readme.md diff --git a/Tic_tac_toe/readme.md b/Tic_tac_toe/readme.md new file mode 100644 index 0000000..004b5f2 --- /dev/null +++ b/Tic_tac_toe/readme.md @@ -0,0 +1,3 @@ +TIC TAC TOE Game made using HTML5 Canvas and Javascript. + +--->NO INTELLIGENCE FROM COMPUTER(i.e. random moves from pc) From 04a761dbf594976beea3b72e6e969c780bcbb211 Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Fri, 5 Oct 2018 15:19:21 +0530 Subject: [PATCH 6/8] Add files via upload --- Tic_tac_toe/bubbles.js | 97 ++++++++++++++++++++++++++++++++++++++++++ Tic_tac_toe/code.js | 86 +++++++++++++++++++++++++++++++++++++ Tic_tac_toe/home.html | 45 ++++++++++++++++++++ Tic_tac_toe/style.css | 96 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 324 insertions(+) create mode 100644 Tic_tac_toe/bubbles.js create mode 100644 Tic_tac_toe/code.js create mode 100644 Tic_tac_toe/home.html create mode 100644 Tic_tac_toe/style.css diff --git a/Tic_tac_toe/bubbles.js b/Tic_tac_toe/bubbles.js new file mode 100644 index 0000000..0400e63 --- /dev/null +++ b/Tic_tac_toe/bubbles.js @@ -0,0 +1,97 @@ +var canvas = document.getElementById("screen"); +var c=canvas.getContext("2d"); +canvas.height=window.innerHeight; +canvas.width=window.innerWidth; + +function Circle(x,y,radius,dx,dy){ + this.x=x; + this.y=y; + this.dx=dx; + this.dy=dy; + this.radius=radius; + this.minradius=radius; + this.color=colors[Math.floor(Math.random()*colors.length)]; + this.draw = function(){ + c.beginPath(); + c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false); + c.fillStyle=this.color; + c.fill(); + + } + this.move=function(){ + if (this.x>(innerWidth-this.radius) || this.x(innerHeight-this.radius)|| this.ythis.minradius){ + this.radius-=1; + } + if(Math.abs(mouse.y-this.y)<50 && this.radius<30){ + this.radius+=1; + } + else if(this.radius>this.minradius){ + this.radius-=1; + } + this.draw(); + } + +} +var colors=[ + "#133046", + "#15959F", + "#F1E4B3", + "#F4A090", + "#F26144" +] +var mouse={ + x : undefined, + y : undefined +} + +window.addEventListener('mousemove',function(event){ + mouse.x=event.x; + mouse.y=event.y; + +}) +var array=[]; +for(var i=0;i<600;i++){ + var x=Math.random() * innerWidth; + var y=Math.random() * innerHeight; + + var radius = (Math.random()*2)+2; + var dx=(Math.random()-0.5)*2; + var dy=(Math.random()-0.5)*2; + var circle = new Circle(x,y,radius,dx,dy) ; + array.push(circle); +} + +function animate(){ + requestAnimationFrame(animate); + c.clearRect(0,0,innerWidth,innerHeight); + for(var i=0;i0){ + p.removeChild(h); + } + } +} + +var pcount=0; + +var arr=[0,1,2,3,4,5,6,7,8]; +var pos=[0,1,2,3,4,5,6,7,8]; + + +var boxes = document.getElementsByClassName("box"); + + +function put(i){ + if(boxes[i].childElementCount==0){ + var h=document.createElement("h1"); + var text=document.createTextNode("O"); + h.innerHTML="O"; + boxes[i].appendChild(h); + arr[i]="O"; + pos.splice(pos.indexOf(i),1); + + } + if(check()){ + setTimeout(function(){alert("YOU WON ! ");},100) + setTimeout(function(){clear()},500) + pcount+=10; + + var p1=document.getElementById("p1"); + var score = parseInt(p1.value); + score+=10; + p1.value=score; + arr=[0,1,2,3,4,5,6,7,8]; + pos=[0,1,2,3,4,5,6,7,8]; + + + + } + + + var pc=Math.floor(Math.random() * pos.length); + if(boxes[pos[pc]].childElementCount==0){ + var h=document.createElement("h1"); + var text=document.createTextNode("O"); + h.innerHTML="X"; + boxes[pos[pc]].appendChild(h); + arr[pos[pc]]="X"; + pos.splice(pc,1); + + } +} +function a(n){ + var m = parseInt(n); + return(boxes[m].children[0].innerHTML) +} + + +function check(){ + + if(arr[0]=="O" && arr[1]=="O" && arr[2]=="O"){return true;} + else if(arr[3]=="O" && arr[4]=="O" && arr[5]=="O"){return true;} + else if(arr[6]=="O" && arr[7]=="O" && arr[8]=="O"){return true;} + else if(arr[0]=="O" && arr[3]=="O" && arr[6]=="O"){return true;} + else if(arr[1]=="O" && arr[4]=="O" && arr[7]=="O"){return true;} + else if(arr[2]=="O" && arr[5]=="O" && arr[8]=="O"){return true;} + else if(arr[0]=="O" && arr[4]=="O" && arr[8]=="O"){return true;} + else if(arr[2]=="O" && arr[4]=="O" && arr[6]=="O"){return true;} + + +} + + + + diff --git a/Tic_tac_toe/home.html b/Tic_tac_toe/home.html new file mode 100644 index 0000000..1db1451 --- /dev/null +++ b/Tic_tac_toe/home.html @@ -0,0 +1,45 @@ + + + + + TIC TAC toe + + + + + + + + + +
      +

      RETRY

      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      +

      PLAYER

      + +
      +
      +

      COMPUTER

      + +
      + + + + + diff --git a/Tic_tac_toe/style.css b/Tic_tac_toe/style.css new file mode 100644 index 0000000..effe29d --- /dev/null +++ b/Tic_tac_toe/style.css @@ -0,0 +1,96 @@ + +body{ + margin:0px; + border-top:6px solid purple; +} +canvas{ + position: fixed; + z-index: -1; +} +#header{ + padding:10px 20px; + margin:0px auto; + background-color:purple; + color:white; + width:300px; + height:60px; +} +textarea{resize: none} +.p1{ + position : absolute; + left:40px; + top:50%; +} +.pc{ + position :absolute; + right:40px; + top:50%; +} +#btn{ + margin:1.2em auto; + width:150px; + background-color:#0a48ad; + color:white; + /*display:inline-block;*/ + padding:2.5px 10px; + +} +#btn:hover{ + background-color:#000651; + +} + + + + + +#board{ + outline:2px solid red; + height:500px; + width:500px; + background-color:green; + margin:1.5em auto; + padding:0; +} +.box{ + position:relative; + height:30.4%; + width:30.4%; + background-color:#26c9e2; + display:inline-block; + margin:1%; + +} +.box:hover{ + background-color:white; +} +.box h1{position:absolute;font-size:108px;margin:10px 30px;} + + + + +@media screen and (max-width: 550px){ + + #board{ + position: relative; + max-height: 500px; + max-width: 500px; + width:95%; + height:; + margin:auto; + background-color: red; + } + +} + +@media screen and (max-width: 980px) { + .p1 , .pc{ + position: relative; + top:0; + left:0; + background-color:orange; + width:80%; + margin:2.5em 10%; + } + +} From 0ad70882b983baf08e4b19c0f4f21dc82a944072 Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Fri, 5 Oct 2018 15:20:08 +0530 Subject: [PATCH 7/8] Update index.html --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index c68fe7f..b7226ff 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,10 @@
      - +
      1. Snake Game
        2. +
      2. Tic Tac Toe
      3. Assignments
      4. Design_Style
      From 2cb2f895e3f3925b553fc64feb0a2cc648504ae8 Mon Sep 17 00:00:00 2001 From: anish-kmr <41281200+anish-kmr@users.noreply.github.com> Date: Fri, 5 Oct 2018 15:20:36 +0530 Subject: [PATCH 8/8] Update index-style.css --- index-style.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/index-style.css b/index-style.css index 569429f..ee51d20 100644 --- a/index-style.css +++ b/index-style.css @@ -51,7 +51,7 @@ ol li{ list-style-type: none; display: inline-block; text-align: center; - padding:3em 1em; + padding:2.5em 1em; margin:auto 2.5%; width:25%; letter-spacing: 8px; @@ -66,23 +66,27 @@ ol li{ ol li a{ text-decoration: none; font-weight:bold; - padding: 1.5em; + padding: 1.3em; font-size: 24px; color: #dedfe0; } ol li:nth-child(1){ top:10%; - left:50%; + left:70%; } ol li:nth-child(2){ - top:40%; - left:30%; - + top:35%; + left:50%; + } ol li:nth-child(3){ - top:70%; + top:60%; + left:30%; +} +ol li:nth-child(4){ + top:85%; left:15%; } ol li:hover{