Bunu deneyin hocam. Scriptte hata var onu da düzenlemeniz gerekiyor.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='tr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[/* ]]></b:skin>
<style id='css'>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 20px;
align-items: center;
background-color: #ecf0f1;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.counter {
margin: 0;
font-size: 1.2em;
font-weight: bold;
}
.colorLabel {
margin-right: 10px;
font-size: 1em;
}
button, select, input[type="color"] {
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
button {
background-color: #3498db;
color: white;
}
button:hover {
background-color: #2980b9;
}
select {
background-color: #bdc3c7;
color: #2c3e50;
}
input[type="color"] {
border: none;
padding: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div id='ball'/>
<div id='controls'>
<label class='colorLabel' for='colorPickerBall'>Top Rengi</label>
<input id='colorPickerBall' title='Top Rengi Seç' type='color'/>
<label class='colorLabel' for='colorPickerBg'>Arka Plan Rengi</label>
<input id='colorPickerBg' title='Arka Plan Rengi Seç' type='color'/>
<button id='startStopButton'>Durdur/Başlat</button>
<select id='speedSelector' title='Hız Seç'>
<option value='1'>Hız 1</option>
<option value='2'>Hız 2</option>
<option value='3'>Hız 3</option>
<option value='4'>Hız 4</option>
<option value='5'>Hız 5</option>
<option value='6'>Hız 6</option>
<option value='7'>Hız 7</option>
<option value='8'>Hız 8</option>
<option value='9'>Hız 9</option>
<option value='10'>Hız 10</option>
</select>
<p class='counter' id='movementCounter'>0</p>
<p class='counter' id='setCounter'>Set: 0</p>
</div>
<script>
<!-- js kodları buraya gelecek. -->
</script>
</body>
<b:section class='bos' id='bos' showaddelement='no'/>
</html>
iyi akşamlar hocam. öncelikle forumda yardım ettiğiniz için teşekkür ederim. Ben hala bir sonuca ulaşamadım her seferinde kod hata veriyor. kodun son hali bu bir türlü yapamadım nerede hata yapıyorum js ekleyince hep hata veriyor. İzninizle kodun son halini burada sizinle paylaşmak istiyorum. Yardımcı olursanız sevinirim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Hareketi</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #BBBBBB;
overflow: hidden;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF0000;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.button {
background-color: #04AA6D;
color: white;
border: none;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
font-size: 0.9em;
transition: background-color 0.3s;
}
.button:hover {
background-color: #3a8267;
}
#homeButton {
position: absolute;
top: 10px;
}
#copyrightButton {
position: absolute;
bottom: 10px;
right: 10px;
}
#controls {
position: absolute;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ffffff;
padding: 10px 20px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: auto;
left: 50%;
transform: translateX(-50%);
gap: 15px; /* Increased gap between elements */
}
.counter, #speed-controls div {
margin: 0;
font-size: 1em;
font-weight: bold;
padding: 5px 10px;
background-color: #ecf0f1;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.settings-panel {
display: none;
position: absolute;
bottom: 80px;
background-color: #ffffff;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
flex-direction: column;
}
.settings-panel p {
margin: 5px 0;
font-weight: bold;
}
.settings-panel .color-options {
display: flex;
gap: 10px;
}
.color-options div {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #000000;
cursor: pointer;
}
#speed-controls {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 600px) {
#controls {
flex-direction: column;
padding: 10px;
gap: 5px;
}
}
</style>
</head>
<body>
<button id="homeButton" class="button">Ana Sayfa</button>
<button id="copyrightButton" class="button"><i class="fa-solid fa-copyright"></i> Telif</button>
<div id="ball"></div>
<div id="controls">
<div id="timer" class="counter">00:00</div>
<div class="counter"><span id="passesCounter">0</span></div>
<div class="counter">Set: <span id="setsCounter">0</span></div>
<button id="startStopButton" class="button"><i class="fa-solid fa-play"></i></button>
<button id="resetButton" class="button"><i class="fa-solid fa-redo"></i></button>
<div id="speed-controls">
<label><strong>Hız</strong></label>
<button id="speedMinus" class="button"><strong>-</strong></button>
<div id="speedLevel">5</div>
<button id="speedPlus" class="button"><strong>+</strong></button>
</div>
<button id="settingsButton" class="button"><i class="fa-solid fa-cog"></i></button>
</div>
<div id="settingsPanel" class="settings-panel">
<p>Top Rengi:</p>
<div class="color-options" id="ballColors">
<div style="background-color: #00008B;" data-color="#00008B"></div>
<div style="background-color: #2bd768;" data-color="#2bd768"></div>
<div style="background-color: #FFD700;" data-color="#FFD700"></div>
<div style="background-color: #FF0000;" data-color="#FF0000"></div>
</div>
<p>Arka Plan Rengi:</p>
<div class="color-options" id="bgColors">
<div style="background-color: #BBBBBB;" data-color="#BBBBBB"></div>
<div style="background-color: #7F7F7F;" data-color="#7F7F7F"></div>
<div style="background-color: #FFFFFF; border: 1px solid #000000;" data-color="#FFFFFF"></div>
<div style="background-color: #FCE9EB;" data-color="#FCE9EB"></div>
</div>
</div>
<script>
const ball = document.getElementById('ball');
const startStopButton = document.getElementById('startStopButton');
const resetButton = document.getElementById('resetButton');
const speedMinus = document.getElementById('speedMinus');
const speedPlus = document.getElementById('speedPlus');
const settingsPanel = document.getElementById('settingsPanel');
const settingsButton = document.getElementById('settingsButton');
const ballColors = document.getElementById('ballColors');
const bgColors = document.getElementById('bgColors');
const timerDisplay = document.getElementById('timer');
const passesCounter = document.getElementById('passesCounter');
const setsCounter = document.getElementById('setsCounter');
const speedLevel = document.getElementById('speedLevel');
const homeButton = document.getElementById('homeButton');
const copyrightButton = document.getElementById('copyrightButton');
let posX = window.innerWidth / 2 - 25;
let direction = 1;
let passes = 0;
let sets = 0;
let intervalId = null;
let startTime = null;
let elapsed = 0;
const minDuration = 2000;
const maxDuration = 500;
const stepDuration = (minDuration - maxDuration) / 9;
const calculateVelocity = (speedLevel) => {
const duration = minDuration - (speedLevel - 1) * stepDuration;
return (window.innerWidth - 50) / (duration / (1000 / 60));
};
const moveBall = () => {
const velocityX = calculateVelocity(Number(speedLevel.textContent));
posX += velocityX * direction;
if (posX <= 0 || posX + 50 >= window.innerWidth) {
direction *= -1;
if (direction === 1) passesCounter.textContent = ++passes;
}
ball.style.left = `${posX}px`;
updateTimer();
};
const updateTimer = () => {
if (startTime) {
const now = Date.now();
elapsed = now - startTime;
const seconds = Math.floor(elapsed / 1000);
const minutes = Math.floor(seconds / 60);
timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
}
};
const toggleSettingsPanel = () => {
settingsPanel.style.display = settingsPanel.style.display === 'none' || settingsPanel.style.display === '' ? 'flex' : 'none';
};
const changeColor = (event, callback) => {
const color = event.target.dataset.color;
if (color) callback(color);
settingsPanel.style.display = 'none';
};
const changeBallColor = (color) => ball.style.backgroundColor = color;
const changeBgColor = (color) => document.body.style.backgroundColor = color;
const updateSpeed = (increment) => {
let speed = Number(speedLevel.textContent);
speed = Math.max(1, Math.min(10, speed + increment));
speedLevel.textContent = speed;
if (intervalId) {
clearInterval(intervalId);
intervalId = setInterval(moveBall, 1000 / 60);
}
};
const startStop = () => {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
startTime = null;
startStopButton.innerHTML = '<i class="fa-solid fa-play"></i>';
posX = window.innerWidth / 2 - 25;
ball.style.left = `${posX}px`;
} else {
startTime = Date.now() - elapsed;
intervalId = setInterval(moveBall, 1000 / 60);
startStopButton.innerHTML = '<i class="fa-solid fa-stop"></i>';
setsCounter.textContent = ++sets;
}
};
const reset = () => {
clearInterval(intervalId);
intervalId = null;
posX = window.innerWidth / 2 - 25;
ball.style.left = `${posX}px`;
direction = 1;
passes = sets = 0;
passesCounter.textContent = setsCounter.textContent = 0;
timerDisplay.textContent = '00:00';
startStopButton.innerHTML = '<i class="fa-solid fa-play"></i>';
startTime = null;
elapsed = 0;
};
ballColors.addEventListener('click', (event) => changeColor(event, changeBallColor));
bgColors.addEventListener('click', (event) => changeColor(event, changeBgColor));
startStopButton.addEventListener('click', startStop);
resetButton.addEventListener('click', reset);
speedMinus.addEventListener('click', () => updateSpeed(-1));
speedPlus.addEventListener('click', () => updateSpeed(1));
settingsButton.addEventListener('click', toggleSettingsPanel);
homeButton.addEventListener('click', () => window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL
copyrightButton.addEventListener('click', () => window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL
window.addEventListener('resize', () => {
posX = window.innerWidth / 2 - 25;
ball.style.left = `${posX}px`;
});
ball.style.left = `${posX}px`;
</script>
</body>
</html>
ball.style.left = `${posX}px`;
</script>
</body>
</html>