Skip to content

M
mangala-pardusacikhack
Kaydet (Commit) 2226de01 authored tarafından Tuğba Fıçıcı's avatar Tuğba Fıçıcı
Dosyalara gözat
Seçenekler

Merge branch 'Tugba'

üst b8138308 b5c5d3c5
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 178 deletions
assets/bootstrap.min.css 0 → 100644
Dosyayı görüntüle @ 2226de01
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/gameArea.css
Dosyayı görüntüle @ 2226de01
......@@ -58,3 +58,25 @@
padding: 10px;
border: 1px solid #aaaaaa;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
\ No newline at end of file
assets/main.css
Dosyayı görüntüle @ 2226de01
......@@ -13,6 +13,7 @@
--colorShadeC: rgb(150, 232, 195);
--colorShadeD: rgb(187, 232, 211);
--colorShadeE: rgb(205, 255, 232);
--shadow: #2e383a;
}
* {
......@@ -24,6 +25,19 @@
box-sizing: border-box;
}
@font-face {
font-family: "RobotoThin";
src: url('fonts/Roboto-Thin.ttf') format("truetype");
}
@font-face {
font-family: "RobotoRegular";
src: url('fonts/AAhaWow-2O1K8.ttf') format("truetype");
}
@font-face {
font-family: "RobotoBold";
src: url('fonts/Roboto-Regular.ttf') format("truetype");
}
body {
font-family: "OpenSans", sans-serif;
font-size: 1rem;
......@@ -33,7 +47,7 @@ body {
justify-content: center;
margin: 0;
min-height: 100vh;
background: var(--backgroundColor);
background-image: linear-gradient(to bottom, #416e75, #529290, #6db7a6, #94dbb5, #c6ffc1);
}
button {
......@@ -93,4 +107,125 @@ button.big-button:active {
button.big-button:active::before {
transform: translate3d(0, 0, -1em);
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}
.row.oyun{
height: 150px;
width: 290px;
margin-bottom: 10px;
background-color: #34656d;
border-radius: 25px 10px;
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;
}
.row.skor{
height: 70px;
width: 290px;
margin-bottom: 10px;
background-color: #34656d;
border-radius: 25px 10px;
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;
}
#infoTitle{
height: 150px;
width: 600px;
margin-bottom: 10px;
color: #334443;
background: rgba(125, 179, 192, 0.25);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba(97, 201, 128, 0.18);
}
#mangalaTitle{
font-family: "RobotoRegular";
font-size: 60px;
margin-left: auto;
margin-right: auto;
color: aliceblue;
text-shadow:
6px 6px var(--shadow),
5.75px 5.75px var(--shadow),
5.5px 5.5px var(--shadow),
5.25px 5.25px var(--shadow),
5px 5px var(--shadow),
4.75px 4.75px var(--shadow),
4.5px 4.5px var(--shadow),
4.25px 4.25px var(--shadow),
4px 4px var(--shadow),
3.75px 3.75px var(--shadow),
3.5px 3.5px var(--shadow),
3.25px 3.25px var(--shadow),
3px 3px var(--shadow),
2.75px 2.75px var(--shadow),
2.5px 2.5px var(--shadow),
2.25px 2.25px var(--shadow),
2px 2px var(--shadow),
1.75px 1.75px var(--shadow),
1.5px 1.5px var(--shadow),
1.25px 1.25px var(--shadow),
1px 1px var(--shadow),
0.75px 0.75px var(--shadow),
0.5px 0.5px var(--shadow),
0.25px 0.25px var(--shadow);
}
#infoText{
font-family: "RobotoRegular";
font-size: 14px;
}
.link{
font-family: "RobotoBold";
font-size: 14px;
margin-right: 5px;
color: #334443;
text-decoration: none;
}
#linksiz{
font-family: "RobotoBold";
font-size: 14px;
margin-top: 8px;
color: #334443;
text-decoration: none;
}
.link:hover{
font-family: "RobotoBold";
font-size: 14px;
color: #334443;
text-shadow: 1px 1px #ee8a17;
text-decoration: none;
}
.oyunText{
font-family: "RobotoBold";
font-size: 20px;
color: #c6ffc1;
text-decoration: none;
margin-top: 10px;
text-shadow: 2px 2px #2e383a;
}
.oyunText:hover{
font-family: "RobotoBold";
font-size: 20px;
color: #c6ffc1;
margin-top: 10px;
text-shadow: 2px 2px #ee8a17;
text-decoration: none;
}
.boxA:hover{
text-decoration: none;
}
\ No newline at end of file
main.html
Dosyayı görüntüle @ 2226de01
......@@ -6,207 +6,94 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mangala | CLUTCH</title>
<link rel="stylesheet" href="assets/main.css" />
<style>
.info {
background-color: #d5ecc2;
height: 150px;
width: 600px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 20px;
}
.otherButtonWrap {
display: flex;
justify-content: center;
align-items: center;
}
.playVsRobot {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: 290px;
}
.playVsPerson {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: 290px;
}
.score {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 75px;
width: 290px;
}
.howToPlay {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 75px;
width: 290px;
}
.contact {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 75px;
width: 290px;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
<link rel="stylesheet" href="assets/bootstrap.min.css" />
</head>
<body style="background-color:#ffd3b4">
<body>
<div class="container">
<div>
<div class="info">
<div class="info-text">
<div style="display:flex;flex-direction:row;" class="info-header">
<h2 style="margin-right:20px">MANGALA | CLUTCH
<h2>
<div class="row" id="infoTitle">
<div class="col">
<div class="row ">
<p id="mangalaTitle">MANGALA</p>
</div>
<div style="display:flex;">
<p>Türk Zeka ve Strateji Oyunu
<p>
<div class="row" id="infoText">
<div class="col">
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p>
</div>
<div class="col text-right">
<img width="35" height="35" src="./assets/image/rulesYellow.png" alt="rules">
<a href="#" class="link"><b>Nasıl Oynanır?</b></a>
</div>
</div>
</div>
<div class="info-image" style="margin:20px; transform: rotate(45deg);">
<img style="width:150px;height:150px;" src="./assets/image/ball.png" alt="ball">
</div>
</div>
<div class="otherButtonWrap">
<div class="rowOne">
<div class="playVsRobot" style="margin-bottom: 10px; margin-right: 15px;">
<div style="display: flex; margin: 0px; padding: 0px; height: 100%;">
<span>
<p>Robota Karşı Oyna</p>
<button class="big-button" id="sendBtn" style="margin:0px; margin-left: 25px;">
<a
href="./pages/robotGameArea.html"
style="text-decoration: none; color: gray"
>Oyna
</a>
</button>
</span>
</div>
<span>
<img width="100" height="80" src="./assets/image/robot.png" alt="robot" >
</span>
</div>
<div class="row">
<div class="col" style="margin-right: 10px;">
<a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center;">
<div class="col text-center">
<img width="100" height="80" src="./assets/image/robot.png" alt="robot">
</div>
<div class="col text-center">
<p class="oyunText">Robota Karşı Oyna</p>
</div>
<div class="playVsPerson">
<div style="display: flex; margin: 0px; padding: 0px; height: 100%;">
<span>
<p>Arkadaşına Karşı Oyna</p>
<button class="big-button" id="sendBtn" style="margin:0px; margin-left: 40px;">
<a
href="./pages/gameArea.html"
style="text-decoration: none; color: gray"
>Oyna
</a>
</button>
</span>
</div>
<span>
<img width="100" height="100" src="./assets/image/playFriends.png" alt="robot" >
</span>
</div>
</a>
<a href="pages/gameArea.html" class="boxA">
<div class="row oyun" style="align-items: center;">
<div class="col text-center">
<img width="100" height="100" src="./assets/image/playFriendskirp.png" alt="playFriends">
</div>
<div class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p>
</div>
</div>
</a>
</div>
<div class="rowOne">
<div class="score" style="margin-bottom: 20px;">
<div style="display: flex; margin: 0px; padding: 0px; height: 100%;">
<span>
<p>Skor</p>
</span>
<div class="col" style="margin-left: 10px;">
<a href="" class="boxA">
<div class="row skor" style="align-items: center;">
<div class="col text-center">
<img width="50" height="50" src="./assets/image/score.png" alt="playFriends">
</div>
<div class="col text-center">
<p class="oyunText">Skor</p>
</div>
</div>
<span>
<img width="50" height="50" src="./assets/image/score.png" alt="robot" >
</span>
</div>
<div class="howToPlay" style="margin-bottom: 20px;">
<div>
<div>
<p>yazi</p>
</a>
<a href="" class="boxA">
<div class="row oyun" style="align-items: center;">
<div class="col text-center">
<img width="80" height="80" src="./assets/image/onlineSoluk.png" alt="playFriends">
</div>
<div>
<p>image</p>
<div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p>
</div>
</div>
</div>
<div class="contact">
<div>
<div>
<p>yazi</p>
</a>
<a href="" class="boxA">
<div class="row skor" style="align-items: center;">
<div class="col text-center">
<img width="50" height="50" src="./assets/image/contact.png" alt="playFriends">
</div>
<div>
<p>image</p>
<div class="col text-center">
<p class="oyunText">Clutch</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!--
<header class="container">
<button class="big-button" id="sendBtn">
<a
href="./pages/gameArea.html"
style="text-decoration: none; color: gray"
>Oyna</a
>
</button>
<button class="big-button" id="btnSettings">Ayarlar</button>
<button class="big-button" id="btnExit">Çıkış</button>
</header>
-->
<!-- Backend ile Frontend arasında bilgi alışverişi.-->
<script>
const electron = require("electron");
const {
......
pages/gameArea.html
Dosyayı görüntüle @ 2226de01
......@@ -10,6 +10,9 @@
<body>
<div class="container">
<div id="overlay" onclick="overlayOff()">
<div id="text">Bitti</div>
</div>
<div id="user1hole7" class="rectangle">hazine</div>
<div class="circle_container">
<div class="circle_wrap">
......
pages/gameArea.js
Dosyayı görüntüle @ 2226de01
......@@ -125,6 +125,7 @@ function dagit(user,hole){
user2hole[k].value=0;
}
user1hole[6].value += tabladakiBoncuklar;
overlay();
}
//#####################3333
......@@ -198,6 +199,7 @@ function dagit(user,hole){
user1hole[k].value=0;
}
user2hole[6].value += tabladakiBoncuklar;
overlay();
}
}
......@@ -265,6 +267,22 @@ function robotEasy(){
}
function robotEasy(){
// player 1 i kontrol eden robot
let x = 0;
let holeID = Math.floor(Math.random() * 10) % 6 ;
while(user1hole[holeID] == 0 && x<100){
holeID = Math.floor(Math.random() * 10) % 6 ;
x+=1;
}
return holeID
}
var clicks = 0;
function counterUp() {
clicks += 1;
......@@ -288,4 +306,15 @@ function drop(ev) {
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
counterDown();
}
\ No newline at end of file
}
//overlay ac kapa
function overlay() {
document.getElementById("overlay").style.display = "block";
}
function overlayOff() {
document.getElementById("overlay").style.display = "none";
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment