Skip to content

Commit c3f4f18

Browse files
BaydoganMiracBaydoganMirac
committed
init
1 parent fbe4fa5 commit c3f4f18

File tree

6 files changed

+375
-0
lines changed

6 files changed

+375
-0
lines changed

‎animation.json

+1
Large diffs are not rendered by default.

‎data.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
var dataS = '[{ "harfler": ["K", "Ş", "A"], "kelimeler": ["KAŞ", "AŞK"]},{ "harfler": ["U", "L", "K", "Y", "U"], "kelimeler": ["UYLUK","KUYU","UYKU","ULU","KUL"]}]';

‎debug.log

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[0123/232046.607:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
2+
[0125/225554.219:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

‎index.html

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Kelime Oyunu</title>
5+
<link rel="stylesheet" type="text/css" href="./style.css">
6+
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
7+
8+
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
11+
<script type="text/javascript" src="data.json"></script>
12+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
13+
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js" integrity="sha512-BB7rb8ZBAxtdJdB7nwDijJH9NC+648xSzviK9Itm+5APTtdpgKz1+82bDl4znz/FBhd0R7pJ/gQtomnMpZYzRw==" crossorigin="anonymous"></script>
15+
16+
17+
<script type="text/javascript">
18+
var level = 0;
19+
var gameData = JSON.parse(dataS);
20+
function setGame(gameData, level){
21+
$('#animation').css("display", "none");
22+
if(level > 0){
23+
$('#animation').css("display", "block");
24+
konfeti.stop();
25+
konfeti.play();
26+
let audio = document.getElementById("soundEffect");
27+
audio.play();
28+
}
29+
30+
gameData[level].harfler.forEach(function(item, index){
31+
$(".randomLetter").append('<div class="absoluteLet"><div class="let" data-id="'+index+'">'+item+'</div></div>');
32+
});
33+
let karakter = gameData[level].harfler.length;
34+
let aci = 360/karakter;
35+
$('.absoluteLet').each(function(index, item){
36+
let yatay = aci*index;
37+
$(item).css({'transform': 'rotate('+ yatay +'deg)'});
38+
$(item).children().css({'transform': 'rotate('+ -1*yatay +'deg)'});;
39+
});
40+
let html = "";
41+
gameData[level].kelimeler.forEach(function(item, index){
42+
html += "<div class='letter' data-id='"+index+"' data-valid='0' >";
43+
44+
for(let i = 0; i<item.length; i++){
45+
html+= "<div class='letter-item'>_</div>";
46+
}
47+
html += "</div>";
48+
$(".text").html(html);
49+
});
50+
}
51+
function checkAnswer(gameData, level, answer){
52+
let isTrue = true;
53+
console.log(level);
54+
gameData[level].kelimeler.forEach(function(item, index){
55+
if(item.toString() === answer.toString()){
56+
isTrue = false;
57+
$(".draggable").css("color", "green");
58+
for(let i = 0; i<answer.length; i++){
59+
$($(".letter[data-id = "+index+"]").children()[i]).html(answer[i]);
60+
$(".letter[data-id = "+index+"]").attr("data-valid","1");
61+
}
62+
setTimeout(function(){
63+
$(".draggable").css("color", "white");
64+
},2000);
65+
}
66+
67+
});
68+
if(isTrue){
69+
$(".draggable").css("color", "red");
70+
setTimeout(function(){
71+
$(".draggable").css("color", "white");
72+
},2000);
73+
}
74+
}
75+
function checkTrues(gameData){
76+
let sum = 0;
77+
$('.letter').each(function(index, item){
78+
sum += parseInt($(item).attr("data-valid"));
79+
console.log($(item).attr("data-valid"));
80+
});
81+
if(sum == gameData[level].kelimeler.length){
82+
level++;
83+
$(".absoluteLet").remove();
84+
setGame(gameData, level);
85+
}
86+
}
87+
88+
window.onload = function(){
89+
var yOffset = $('.draggable').offset().top;
90+
var xOffset = $('.draggable').offset().left;
91+
setGame(gameData, level);
92+
let text = [];
93+
$(".draggable").draggable({revert: true,
94+
start: function(){
95+
text = [];
96+
},
97+
drag: function(){
98+
let i = 0;
99+
$('.let').each(function(index, item){
100+
if(($(item).offset().top-20 < $(".draggable").offset().top && $(".draggable").offset().top < $(item).offset().top+20) && ($(item).offset().left-20 < $(".draggable").offset().left && $(".draggable").offset().left < $(item).offset().left+20) ){
101+
$(item).css("background-color", "purple");
102+
//console.log($(item).html());
103+
let dataID = $(item).data("id");
104+
let val = $(item).html();
105+
let isAddable = false;
106+
text.forEach(function(item){
107+
if(parseInt(item.id) == parseInt(dataID)){
108+
isAddable = true;
109+
}
110+
});
111+
if(isAddable == false){
112+
text.push({id:dataID, value:val});
113+
}
114+
}
115+
});
116+
117+
let top = (window.innerHeight/$('.draggable').offset().top > 2)? 2 : window.innerHeight/$('.draggable').offset().top ;
118+
let left = (window.innerWidth/$('.draggable').offset().left > 2) ? 2 : window.innerWidth/$('.draggable').offset().left;
119+
if(yOffset >= $('.draggable').offset().top || xOffset <= $('.draggable').offset().left){
120+
$(".navigation").css('box-shadow', ''+(left*-10)+'px '+(top*10)+'px 20px 3px #fff');
121+
}
122+
if( yOffset <= $('.draggable').offset().top || xOffset >= $('.draggable').offset().left ){
123+
$(".navigation").css('box-shadow', ''+(left*10)+'px '+(top*-10)+'px 20px 3px #fff');
124+
}
125+
},
126+
stop: function(){
127+
let answer = "";
128+
text.forEach(function(item){
129+
answer += item.value;
130+
});
131+
checkAnswer(gameData, level, answer);
132+
$('.let').each(function(index, item){
133+
$(item).css("background-color", "turquoise");
134+
});
135+
checkTrues(gameData);
136+
}
137+
});
138+
}
139+
</script>
140+
</head>
141+
<body>
142+
<div style="position: relative; width: 100%;">
143+
<div id='stars'></div>
144+
<div id='stars2'></div>
145+
<div id='stars3'></div>
146+
</div>
147+
<div class="container">
148+
<div class="column">
149+
<div class="text">
150+
151+
</div>
152+
</div>
153+
154+
<div class="column">
155+
<div class="navigation">
156+
<i class="fas fa-hand-pointer draggable"></i>
157+
<div class="randomLetter">
158+
</div>
159+
</div>
160+
</div>
161+
162+
</div>
163+
<div id="animation"></div>
164+
<audio id="soundEffect">
165+
<source src="victory.wav" type="audio/wav">
166+
Your browser does not support the audio element.
167+
</audio>
168+
<script type="text/javascript">
169+
var konfeti = bodymovin.loadAnimation({
170+
container: document.getElementById('animation'),
171+
path: 'animation.json',
172+
renderer: 'svg/canvas/html',
173+
loop: false,
174+
autoplay: false,
175+
rendererSettings: {
176+
scaleMode: '100',
177+
clearCanvas: false,
178+
progressiveLoad: false,
179+
hideOnTransparent: true
180+
}
181+
});
182+
konfeti.addEventListener('complete', function(){
183+
$('#animation').css("display", "none");
184+
})
185+
</script>
186+
187+
</body>
188+
</html>

0 commit comments

Comments
 (0)