Kaydet (Commit) cc1bde57 authored tarafından Tuğba Fıçıcı's avatar Tuğba Fıçıcı

Saat animasyonu eklendi

üst a81b6d05
......@@ -136,8 +136,7 @@ body {
background-color: #ed664c;
border-bottom-left-radius: 40px;
margin: 0;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
margin-bottom: 20px;
color: #334443;
font-family: "Itim";
......@@ -150,8 +149,7 @@ body {
background-color: #ffe268;
border-top-right-radius: 40px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
margin: 0;
margin-top: 20px;
color: #334443;
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../assets/gameArea.css" />
<link rel="stylesheet" href="../assets/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div id="overlay">
<div>
<p id="text"></p>
</div>
<div style="position: absolute; top: 50%; left: 40%">
<button class="big-button" onclick="yenidenOyna()" style="font-size: 11px; width: 150px">
Yeniden Oyna
</button>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../assets/gameArea.css" />
<link rel="stylesheet" href="../assets/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div id="overlay">
<div>
<p id="text"></p>
</div>
<div id="overlayOda" onclick="overlayOff()">
<div class="row" style="padding: 50px">
<div class="col align-self-center disKenar" style="height: 400px">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODA KUR</div>
<div class="overlayInput">
<button
class="big-button"
style="font-size: 11px"
id="odaOlusturBtn"
>
OLUŞTUR
</button>
</div>
<div style="position: absolute; top: 50%; left: 40%">
<button class="big-button" onclick="yenidenOyna()" style="font-size: 11px; width: 150px">
Yeniden Oyna
</button>
</div>
</div>
<div id="overlayOda" onclick="overlayOff()">
<div class="row" style="padding: 50px">
<div class="col align-self-center disKenar" style="height: 400px">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODA KUR</div>
<div class="overlayInput">
<button class="big-button" style="font-size: 11px" id="odaOlusturBtn">
OLUŞTUR
</button>
</div>
</div>
<div class="col align-self-center disKenar" style="height: 400px">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODAYA KATIL</div>
<div class="overlayInput">
<div class="row">
<div class="col-7 align-self-center">
<input
class="form-control"
type="text"
placeholder="Oda Numarası"
style="margin-left: 10px; margin-top: 5px"
id="odayaKatilInput"
/>
</div>
<div class="col-5">
<button
class="big-button"
style="font-size: 11px; margin-right: 10px"
id="odayaKatilBtn"
>
GİR
</button>
</div>
</div>
<div class="col align-self-center disKenar" style="height: 400px">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODAYA KATIL</div>
<div class="overlayInput">
<div class="row">
<div class="col-7 align-self-center">
<input class="form-control" type="text" placeholder="Oda Numarası"
style="margin-left: 10px; margin-top: 5px" id="odayaKatilInput" />
</div>
<div class="col-5">
<button class="big-button" style="font-size: 11px; margin-right: 10px" id="odayaKatilBtn">
GİR
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin: 0">
<div class="col-4">
<div class="geriButonu">
<a
href="turnBackMain.html"
onclick="window.open(this.href, 'Anasayfaya Dön',
'left=20,top=20,width=405,height=350,toolbar=1,resizable=0'); return false;"
><img
width="60"
height="60"
src="../assets/image/geri.png"
alt="geri"
/></a>
</div>
<div class="row" style="margin: 0">
<div class="col-4">
<div class="geriButonu">
<a href="turnBackMain.html" onclick="window.open(this.href, 'Anasayfaya Dön',
'left=20,top=20,width=405,height=350,toolbar=1,resizable=0'); return false;"><img width="60" height="60"
src="../assets/image/geri.png" alt="geri" /></a>
</div>
<div class="col-4">
<div class="bos">
<button class="btn-primary" onclick="overlay()">overlay</button>
</div>
</div>
<div class="col-4">
<div class="bos">
</div>
<div class="col-4 text-right" id="user1">
<div id="user2card">
<b>Oyuncu 2</b>
</div>
</div>
<div class="col-4 text-right" id="user1">
<div id="user2card">
<b>Oyuncu 2</b>
<img src="../assets/image/clock.gif" width="70" height="70" id="clock1" style="visibility: hidden;">
</div>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="row" id="tahta">
<div class="col" style="align-items: center">
<div id="tahtaCerceve">
<div id="tahtaGorunum">
<div class="a">
<div class="hazine1" style="float: left">
<div id="user1hole7" class="rectangle"></div>
</div>
<div class="boncuklar" style="float: left">
<div class="boncuklar1">
<div
class="cirlce"
onclick="tikla(this.id)"
id="user1hole6"
>
<span
class="dot_black"
id="drag1"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag2"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag4"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user1hole5"
>
<span
class="dot_black"
id="drag5"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag6"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag7"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag8"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user1hole4"
>
<span
class="dot_black"
id="drag1"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag2"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag4"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user1hole3"
>
<span
class="dot_black"
id="drag5"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag6"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag7"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag8"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user1hole2"
>
<span
class="dot_black"
id="drag1"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag2"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag4"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user1hole1"
>
<span
class="dot_black"
id="drag5"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag6"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag7"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag8"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div class="clear"></div>
<div class="row" id="tahta">
<div class="col" style="align-items: center">
<div id="tahtaCerceve">
<div id="tahtaGorunum">
<div class="a">
<div class="hazine1" style="float: left">
<div id="user1hole7" class="rectangle"></div>
</div>
<div class="boncuklar" style="float: left">
<div class="boncuklar1">
<div class="cirlce" onclick="tikla(this.id)" id="user1hole6">
<span class="dot_black" id="drag1" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag2" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag3" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag4" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user1hole5">
<span class="dot_black" id="drag5" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag6" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag7" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag8" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="boncuklar2">
<div
class="cirlce"
onclick="tikla(this.id)"
id="user2hole1"
>
<span
class="dot_black"
id="drag1"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag2"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag4"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user2hole2"
>
<span
class="dot_black"
id="drag5"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag6"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag7"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag8"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user2hole3"
>
<span
class="dot_black"
id="drag1"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag2"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag4"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user2hole4"
>
<span
class="dot_black"
id="drag5"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag6"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag7"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag8"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user2hole5"
>
<span
class="dot_black"
id="drag1"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag2"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag4"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div
class="cirlce"
onclick="tikla(this.id)"
id="user2hole6"
>
<span
class="dot_black"
id="drag5"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag6"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag7"
draggable="true"
ondragstart="drag(event)"
></span>
<span
class="dot_black"
id="drag8"
draggable="true"
ondragstart="drag(event)"
></span>
</div>
<div class="clear"></div>
<div class="cirlce" onclick="tikla(this.id)" id="user1hole4">
<span class="dot_black" id="drag1" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag2" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag3" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag4" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user1hole3">
<span class="dot_black" id="drag5" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag6" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag7" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag8" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user1hole2">
<span class="dot_black" id="drag1" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag2" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag3" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag4" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user1hole1">
<span class="dot_black" id="drag5" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag6" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag7" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag8" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="clear"></div>
</div>
<dic class="clear"></dic>
<div class="hazine2" style="float: left">
<div id="user2hole7" class="rectangle"></div>
<div class="boncuklar2">
<div class="cirlce" onclick="tikla(this.id)" id="user2hole1">
<span class="dot_black" id="drag1" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag2" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag3" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag4" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user2hole2">
<span class="dot_black" id="drag5" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag6" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag7" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag8" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user2hole3">
<span class="dot_black" id="drag1" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag2" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag3" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag4" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user2hole4">
<span class="dot_black" id="drag5" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag6" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag7" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag8" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user2hole5">
<span class="dot_black" id="drag1" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag2" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag3" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag4" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="cirlce" onclick="tikla(this.id)" id="user2hole6">
<span class="dot_black" id="drag5" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag6" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag7" draggable="true" ondragstart="drag(event)"></span>
<span class="dot_black" id="drag8" draggable="true" ondragstart="drag(event)"></span>
</div>
<div class="clear"></div>
</div>
</div>
<dic class="clear"></dic>
<div class="hazine2" style="float: left">
<div id="user2hole7" class="rectangle"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin: 0">
<div class="col-4 text-left" id="user2">
<div id="user2card">
<b>Oyuncu 2</b>
</div>
</div>
<!-- toast js fonksiyonu eklenecek-->
<div class="col-4 text-center">
<div id="toasts"></div>
</div>
<div class="col-4 text-right">
<div class="oda" id="odaOlustur"></div>
<div class="row" style="margin: 0">
<div class="col-4 text-left" id="user2">
<div id="user2card">
<b>Oyuncu 2</b>
<img src="../assets/image/clock.gif" width="70" height="70" id="clock2" style="visibility: visible;">
</div>
</div>
<!-- toast js fonksiyonu eklenecek-->
<div class="col-4 text-center">
<div id="toasts"></div>
</div>
<div class="col-4 text-right">
<div class="oda" id="odaOlustur"></div>
</div>
</div>
<script src="clientGameArea.js"></script>
</div>
</div>
<script src="clientGameArea.js"></script>
</body>
</body>
</html>
<!--client script eklenecek-->
<!--client script eklenecek-->
\ No newline at end of file
......@@ -25,6 +25,8 @@ user2hole.push(treasure2);
var player = 2;
waitcolor = "#ed664c"; //// Kırmızı renk beklesin
playercolor = "#ffe268"; // Sarı renk oynasın
waitvisible="visible";
playervisible="hidden";
function tikla(id) {
// ekranda bulunan kuyulardaki kuyulara tıklama ile tetiklenen fonk.
......@@ -39,6 +41,8 @@ function tikla(id) {
if (player == 2) {
document.getElementById("user1").style.backgroundColor = waitcolor;
document.getElementById("user2").style.backgroundColor = playercolor;
document.getElementById("clock1").style.visibility=playervisible;
document.getElementById("clock2").style.visibility=waitvisible;
}
//sendMessage(Number(id[9]));
}
......@@ -52,6 +56,8 @@ function tikla(id) {
if (player == 1) {
document.getElementById("user1").style.backgroundColor = playercolor;
document.getElementById("user2").style.backgroundColor = waitcolor;
document.getElementById("clock1").style.visibility=waitvisible;
document.getElementById("clock2").style.visibility=playervisible;
}
sendMessage(Number(id[9]));
}
......
......@@ -9,135 +9,153 @@
</head>
<body>