<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Günlük Fizik Kelime Oyunu</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.word {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 40px;
font-size: 20px;
}
.correct {
background-color: green;
color: #fff;
}
.partially-correct {
background-color: yellow;
}
.partially-correct-two {
background-color: orange;
}
.incorrect {
background-color: gray; /* Change background color to gray */
color: #fff;
}
.letter-input {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
padding: 5px;
text-transform: uppercase;
text-align: center;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 20px;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.attempted-words {
margin-top: 20px;
text-align: center;
width: 100%;
}
.attempt {
margin: 5px;
}
.attempt .word {
display: inline-block;
}
.rules {
flex-basis: 100%;
margin-top: 20px;
text-align: left;
}
/* New styles for keyboard letters */
.keyboard {
margin-top: 20px;
}
.keyboard-letter {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
}
.used-letter {
background-color: blue !important;
color: white;
}
.rules {
background-color: #E4F4D4 !important;
color: black;
}
</style>
</head>
<body>
<div class="container">
<div>
<h1>Günlük Fizik Kelime Oyunu</h1>
<div class="keyboard">
<!-- Turkish alphabet keyboard -->
<div class="keyboard-letter" data-letter="A">A</div>
<div class="keyboard-letter" data-letter="B">B</div>
<div class="keyboard-letter" data-letter="C">C</div>
<div class="keyboard-letter" data-letter="Ç">Ç</div>
<div class="keyboard-letter" data-letter="D">D</div>
<div class="keyboard-letter" data-letter="E">E</div>
<div class="keyboard-letter" data-letter="F">F</div>
<div class="keyboard-letter" data-letter="G">G</div>
<div class="keyboard-letter" data-letter="Ğ">Ğ</div>
<div class="keyboard-letter" data-letter="H">H</div>
<div class="keyboard-letter" data-letter="I">I</div>
<div class="keyboard-letter" data-letter="İ">İ</div>
<div class="keyboard-letter" data-letter="J">J</div>
<div class="keyboard-letter" data-letter="K">K</div>
<div class="keyboard-letter" data-letter="L">L</div>
<div class="keyboard-letter" data-letter="M">M</div>
<div class="keyboard-letter" data-letter="N">N</div>
<div class="keyboard-letter" data-letter="O">O</div>
<div class="keyboard-letter" data-letter="Ö">Ö</div>
<div class="keyboard-letter" data-letter="P">P</div>
<div class="keyboard-letter" data-letter="R">R</div>
<div class="keyboard-letter" data-letter="S">S</div>
<div class="keyboard-letter" data-letter="Ş">Ş</div>
<div class="keyboard-letter" data-letter="T">T</div>
<div class="keyboard-letter" data-letter="U">U</div>
<div class="keyboard-letter" data-letter="Ü">Ü</div>
<div class="keyboard-letter" data-letter="V">V</div>
<div class="keyboard-letter" data-letter="Y">Y</div>
<div class="keyboard-letter" data-letter="Z">Z</div>
</div>
<div id="guessContainer">
<!-- Input boxes for the word to be guessed -->
</div>
<button id="submitGuess">Gönder</button>
<div id="feedback"></div>
<div id="attemptedWords" class="attempted-words"></div>
<div id="attemptsLeft" style="margin-top: 10px;"></div>
</div>
<div class="rules">
<h2>Oyun Kuralları:</h2>
<ol>
<li>
<p>Tahmin etmek istediğiniz kelimenin her harfini tek tek girin.</p>
<p>Bu kural, oyuncunun tahmin etmeye çalıştığı kelimenin her harfini tek tek girmesi gerektiğini belirtir. Yani, doğru kelimeyi bulmak için harfleri sırayla tahmin etmek zorundasınız.</p>
</li>
<li>
<p>Doğru harf doğru konumdaysa <span style="color: green;">yeşil</span> renkte, Doğru harf yanlış konumdaysa <span style="color: yellow;">sarı</span> renkte ve yanlış bir harf tahmin ettiyseniz <span style="color: red;">kırmızı</span> renkte görünecektir.</p>
<p>Bu kural, doğru harflerin doğru konumda olduğu durumda bu harflerin yeşil renkte gösterileceğini, doğru harflerin yanlış konumda olduğu durumda sarı renkte gösterileceğini ve yanlış bir harf tahmin edildiğinde kırmızı renkte gösterileceğini belirtir. Bu renkler, oyuncuya tahminlerinin doğruluğu hakkında görsel geri bildirim sağlar.</p>
</li>
<li>
<p>Toplamda 6 tahmin hakkınız bulunmaktadır.</p>
<p>Bu kural, oyuncunun toplamda 6 tahmin hakkı olduğunu belirtir. Yani, kelimeyi doğru tahmin etmek için toplamda 6 kez hata yapabilirsiniz.</p>
</li>
<li>
<p>Harfleri klavyeden de girebilirsiniz. Klavyeden harf girişi yapıldığında, kullanılan harfler <span style="color: blue;">mavi</span> renkte gösterilecektir.</p>
<p>Bu kural, oyuncunun klavyeden harf girişi yapabileceğini ve girilen harflerin kullanıldığını belirtir. Klavyeden girilen harfler, mavi renkte gösterilir, böylece oyuncu hangi harfleri zaten girdiğini görebilir.</p>
</li>
<li>
<p>Her gün yeni bir kelime yayınlanacaktır.</p>
<p>Bu kural, her gün oyunun yeni bir kelime ile güncelleneceğini ve oyuncuların her gün farklı bir kelimeyi tahmin etmeye çalışacaklarını belirtir. Bu, oyunun her gün farklı ve heyecanlı olmasını sağlar.</p>
</li>
</ol>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const submitButton = document.getElementById("submitGuess");
const feedbackDiv = document.getElementById("feedback");
const attemptedWordsDiv = document.getElementById("attemptedWords");
const attemptsLeftDiv = document.getElementById("attemptsLeft");
const guessContainer = document.getElementById("guessContainer");
let guessInputs = document.querySelectorAll(".letter-input"); // Initialize guessInputs
const physicsWords = [
"manyetizma", "enerji", "momentum", "elektrik", "manyetik", "radyasyon", "frekans",
"parçacık", "eylemsizlik", "direnç", "kutuplaşma", "nükleer", "kinetik", "yoğunluk",
"sıcaklık", "basınç", "hacim", "sürtünme", "hızlanma", "mesafe", "darbe", "tork",
"şarj", "potansiyel", "iletkenlik", "indüksiyon", "devre", "amper", "kulomb", "farad",
"hertz", "newton", "tesla", "gösterge", "jeneratör", "dönüştürücü", "diod", "rezistans",
"kapasitör", "indüktör", "amplifikatör", "anahtar", "osilatör", "termometre", "kalorimetre",
"reflektör", "kırınım", "yansıma", "geçirgenlik", "spektrometre", "radyometre", "spektroskopi",
"akustik", "titreşim", "dalgaUzunluğu", "rezonans", "dalgaBoyu", "harmonik", "doppler",
"interferans", "absorpsiyon", "soğurma", "transmisyon", "konveksiyon", "termal", "akışkan",
"mekanik", "termodinamik", "elektromanyetizma", "görelilik", "kozmoloji", "astrofizik",
"biyofizik", "istatistiksel", "atomik", "moleküler", "yoğunlaşmış", "elektrodinamik", "plazma",
"dinamik", "doğrusal", "denge", "süperiletken", "mikrodalga", "frekanslar", "nötrino", "kaon",
"özkütle", "kromotografi", "kristalografi", "jeomanyetik", "kohezyon", "adhezyon", "vakum",
"dolaşım", "gerilme", "gezegen", "yörünge", "uydu", "astronomi", "astroloji", "yıldız",
"galaksi", "madde", "bağlaşma", "ortam", "kimyasal", "matematik", "formül", "tetikleme",
"pürüzlü", "diyot", "periyodik", "makine", "kırılma",
"ortalama", "paralel", "düzlem", "akıntı", "değişim", "anyon", "asit", "atom", "atomağırlığı",
"atommodeli", "atomnumarası", "atomsayısı", "avagadrosayısı", "atışhareketi", "çarpışmadeneyleri",
"çekimalanı", "çekimkuvveti", "çıkışsüresi", "çıkrık", "çizgiselhız", "çizgiselivme", "daireselhareket",
"değerlik", "değerlikelektronu", "elektron", "deney", "dinamo", "dinamometre",
"doğruakım", "donma", "donmasıcaklığı", "eğikatış", "eğikdüzlem", "elektrikakımı",
"elektrikkuvveti", "elektriksarkacı", "joule", "kaldıraç", "kalorimetre", "kanun", "kapalı",
"sistem", "katyon", "katot", "kaynama", "kinematik", "kinetiksürtünme", "konum",
"korozyon", "kovalent", "kütlemerkezi", "limit", "teorem", "makara", "mikroskobik", "molekül",
"sayısı", "momentumun", "koruma", "nötron", "reaktör", "normal", "orbital", "sürat",
"öteleme", "hareketi", "özdirenç", "özısı", "palanga", "pauli", "prensibi", "periyot",
"proton", "rotor", "radyoaktiflik", "radyoaktif", "reaksiyon", "referans", "reosta", "sabit",
"ivme", "hareket", "salınım", "santigrat", "derece", "sarım", "saydam", "serbest", "düşme",
"seri","skaler", "büyüklük", "spin", "süblimleşme",
"statik", "standart", "teori", "termik", "termostat", "türbin", "türdeş", "birim", "katsayı",
"üreteç", "ürün", "vektör", "veri", "volt", "voltmetre", "yalıtkan", "yanma", "yarıçap",
"yatay", "yerçekimi", "yerdeğiştirme", "düşey", "ışık", "dalga", "atom", "akım", "alan",
"manyetikFlüks", "motor", "moment", "manyetostatik", "gravitasyon", "elektrostatik", "rezonatör",
"lazer", "manyetometre", "radyoaktif", "manyetometrik", "faraday", "nükleotid", "anot", "ionize",
"analog", "digital", "kondansatör", "fotovoltaik", "foton", "kuark", "dipol", "entropi",
"einstein", "fermi", "spektrum", "ünite", "değer", "transformator", "hologram", "akıllı",
"ölçüm", "termalizasyon", "kuantumlu", "ayrıştırıcı", "gamma", "alfa", "beta", "dalgalet",
"mikroskop", "teleskop", "kromotografi", "yüzey", "sismik", "hızlandırıcı", "teklik",
"magnetometre", "spektroskopik", "kinetoskop", "antiproton", "antinötron", "füzyon",
"fisyon", "hadron", "egzotik", "elektrofil", "nötralizasyon", "yarıiletken", "ampermetre",
"elektroskop", "pascal", "curie", "nükleon", "komet", "asteroid", "yayınım", "evrensel",
"çarpışma", "reaksiyon", "dalgacık", "kırılma", "refleksiyon", "yalıtkan", "süperiletkenlik",
"gama", "nötrino", "kaon", "ötelenme", "ışıldama", "gerilme", "gerginlik",
"kırma", "gezegen", "yörünge", "uydu", "astronomi", "astroloji", "asteroit", "yıldız",
"galaksi", "kara", "aşılama", "katman", "bağlaşma", "ortam", "kimyasal", "matematik",
"formül", "tetikleme", "güçlü", "zayıf", "ışıma", "çıkış", "giriş", "kablo",
"uzay", "karadeliğ", "yıldızlararası", "fırlatma", "pürüzlü", "düzgün", "dağılım", "döteryum",
"alıcı", "verici", "yoğun", "takım", "kısım", "birim", "akış", "vektör",
"yüzey", "kesir", "olay", "saat", "sıcaklık",
"negatif","muon"
];
// Define an array that maps each day of the year to an index
const dayIndexMap = [
// January
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
// February
32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61,
// March
62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91,
// April
92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
// May
122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
// June
152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
// July
182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211,
// August
212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241,
// September
242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271,
// October
272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301,
// November
302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331,
// December
332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361
];
// Get the current day of the year (0 to 364) in Turkey's time zone
const now = new Date();
const options = { timeZone: 'Europe/Istanbul' }; // Set Turkey's time zone
const startOfYear = new Date(now.getFullYear(), 0, 0, 0, 0, 0, 0).toLocaleDateString('en-US', options);
const diff = now - new Date(startOfYear);
const dayOfYear = Math.floor(diff / (1000 * 60 * 60 * 24));
// Use the day of the year to get the corresponding index
const selectedWordIndex = dayIndexMap[dayOfYear % dayIndexMap.length];
const selectedWord = physicsWords[selectedWordIndex];
const solution = selectedWord.toLocaleUpperCase('tr-TR'); // Convert solution to uppercase
let attemptsLeft = 6;
let lastFiveAttempts = [];
// Add event listener to keyboard letters
document.querySelectorAll(".keyboard-letter").forEach(letter => {
letter.addEventListener("click", function() {
const letterValue = this.textContent;
const emptyInput = Array.from(guessInputs).find(input => input.value === "");
if (emptyInput) {
emptyInput.value = letterValue;
emptyInput.focus();
this.classList.add("used-letter");
}
});
});
/* // Add event listener for keyboard input
document.addEventListener("keydown", function(event) {
const key = event.key.toUpperCase();
const keyboardLetter = document.querySelector(`.keyboard-letter[data-letter="${key}"]`);
if (keyboardLetter) {
const emptyInput = Array.from(guessInputs).find(input => input.value === "");
if (emptyInput) {
emptyInput.value = key;
emptyInput.focus();
keyboardLetter.classList.add("used-letter");
}
}
});*/
// Add event listener for keyboard input
document.addEventListener("keydown", function(event) {
const key = event.key.toUpperCase();
const keyboardLetter = document.querySelector(`.keyboard-letter[data-letter="${key}"]`);
if (keyboardLetter) {
const emptyInput = Array.from(guessInputs).find(input => input.value === "");
if (emptyInput) {
emptyInput.value = key;
emptyInput.focus();
keyboardLetter.classList.add("used-letter");
}
} else if (key === "BACKSPACE") {
event.preventDefault(); // Prevent default behavior of backspace
const focusedInput = document.activeElement;
const currentIndex = Array.from(guessInputs).indexOf(focusedInput);
if (currentIndex > 0) {
// Remove "used-letter" class from the corresponding keyboard letter first
const correspondingKey = document.querySelector(`.keyboard-letter[data-letter="${focusedInput.value}"]`);
if (correspondingKey) {
correspondingKey.classList.remove("used-letter");
}
// Clear content of current input box and move cursor to the previous input
const prevInput = guessInputs[currentIndex - 1];
prevInput.focus();
focusedInput.value = ""; // Clear content after moving cursor
} else {
const correspondingKey = document.querySelector(`.keyboard-letter[data-letter="${focusedInput.value}"]`);
if (correspondingKey) {
correspondingKey.classList.remove("used-letter");
}
// If cursor is in the first input box, simply clear its content and remove highlight
focusedInput.value = "";
}
} else if (key === "DELETE") {
event.preventDefault(); // Prevent default behavior of delete
const focusedInput = document.activeElement;
const currentIndex = Array.from(guessInputs).indexOf(focusedInput);
if (currentIndex >= 0 && currentIndex < guessInputs.length - 1) {
// Clear content of next input box and keep cursor there
const nextInput = guessInputs[currentIndex + 1];
nextInput.value = "";
nextInput.focus();
// Remove "used-letter" class from the corresponding keyboard letter
const correspondingKey = document.querySelector(`.keyboard-letter[data-letter="${nextInput.value}"]`);
if (correspondingKey) {
correspondingKey.classList.remove("used-letter");
}
}
}
});
submitButton.addEventListener("click", function() {
const guessedWord = Array.from(guessInputs, input => input.value.toUpperCase()).join('');
const solutionUpper = solution.toUpperCase(); // Convert solution to uppercase
// Check if the guessed word is correct, partially correct, or incorrect
let feedback = "";
const matchedIndices = new Set();
const incorrectIndices = new Set();
const foundLetters = new Set();
for (let i = 0; i < solutionUpper.length; i++) { // Use solutionUpper.length for comparison
if (guessedWord[i] === solutionUpper[i]) { // Compare uppercase versions
feedback += '<div class="word correct">' + guessedWord[i] + '</div>';
foundLetters.add(guessedWord[i]);
} else if (solutionUpper.includes(guessedWord[i]) && !foundLetters.has(guessedWord[i])) {
const solutionIndex = solutionUpper.indexOf(guessedWord[i]);
if (matchedIndices.has(solutionIndex)) {
feedback += '<div class="word incorrect">' + guessedWord[i] + '</div>';
incorrectIndices.add(i);
} else {
feedback += '<div class="word partially-correct">' + guessedWord[i] + '</div>';
matchedIndices.add(solutionIndex);
foundLetters.add(guessedWord[i]);
}
} else {
feedback += '<div class="word incorrect">' + guessedWord[i] + '</div>';
incorrectIndices.add(i);
}
}
feedbackDiv.innerHTML = feedback;
// Clear input boxes after submission
guessInputs.forEach(input => {
input.value = "";
});
// Store the attempt and its feedback in the lastFiveAttempts array
lastFiveAttempts.push({ word: guessedWord, feedback: feedback });
if (lastFiveAttempts.length > 5) {
lastFiveAttempts.shift(); // Remove the oldest attempt if more than 5
}
// Display the last five attempts with their corresponding color codes
let lastFiveDisplay = "";
lastFiveAttempts.forEach(attempt => {
lastFiveDisplay += '<div class="attempt">' + attempt.feedback + '</div>';
});
attemptedWordsDiv.innerHTML = lastFiveDisplay;
// Update attempts left message
attemptsLeft--;
attemptsLeftDiv.textContent = "Kalan Deneme Sayısı: " + attemptsLeft;
// Decrease attempts or end the game when all letters are correct
if (guessedWord === solutionUpper) { // Compare uppercase version for solution
feedbackDiv.innerHTML += "<p>Tebrikler! Doğru kelimeyi tahmin ettiniz!</p>";
disableInputs(); // Disable inputs after successful guess
} else if (attemptsLeft === 0) {
feedbackDiv.innerHTML += "<p>Oyun bitti! Doğru kelime: " + solutionUpper + "</p>";
disableInputs(); // Disable inputs after 5 attempts
}
});
// Disable input fields after 5 attempts
function disableInputs() {
guessInputs.forEach(input => {
input.disabled = true;
});
submitButton.disabled = true;
}
// Function to update input boxes based on word length
function updateInputBoxes(wordLength) {
guessContainer.innerHTML = ""; // Clear previous inputs
for (let i = 0; i < wordLength; i++) {
const input = document.createElement("input");
input.classList.add("letter-input");
input.maxLength = 1;
guessContainer.appendChild(input);
}
guessInputs = document.querySelectorAll(".letter-input"); // Update the input node list
}
// Initial update of input boxes based on solution length
updateInputBoxes(solution.length);
});
</script>
</body>
</html>