SILAHKAN BUKA TAUTAN DENGAN KLIK LINK DIBAWAH INI !
SETELAH ITU COPY KODING DIBAWAH INI :
- KELOMPOK 1
<!DOCTYPE html>
<html>
<head>
<title>Bel</title>
<style>
.bel {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.bel:active {
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="bel" id="bel">BEL</div>
<script>
const bel = document.getElementById('bel');
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
bel.addEventListener('click', () => {
// Buat efek suara "ding"
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.5);
// Tampilkan pesan
console.log('Bel ditekan!');
alert('Ding! Bel ditekan.');
});
</script>
</body>
</html>
- KELOMPOK 2
<!DOCTYPE html>
<html>
<head>
<title>Running Text</title>
<style>
#running-text {
font-size: 24px;
font-weight: bold;
color: #00698f;
white-space: nowrap;
position: relative;
left: 100%;
}
</style>
</head>
<body>
<div id="running-text">Selamat datang di website kami! Kami menyediakan informasi terbaru dan terupdate.</div>
<script>
const runningText = document.getElementById('running-text');
let left = 100;
function updateText() {
left -= 0.5;
runningText.style.left = left + '%';
if (left < -100) {
left = 100;
}
requestAnimationFrame(updateText);
}
updateText();
</script>
</body>
</html>
- KELOMPOK 3
import pygame
import sys
import random
# Inisialisasi Pygame
pygame.init()
# Set ukuran layar
lebar_layar = 800
tinggi_layar = 600
layar = pygame.display.set_mode((lebar_layar, tinggi_layar))
# Set judul layar
pygame.display.set_caption("Game Ular")
# Set warna
hitam = (0, 0, 0)
putih = (255, 255, 255)
merah = (255, 0, 0)
# Set ukuran ular
ukuran_ular = 20
# Set posisi ular
x_ular = lebar_layar // 2
y_ular = tinggi_layar // 2
arah_x = 1
arah_y = 0
tubuh_ular = [(x_ular, y_ular)]
# Set posisi makanan
x_makanan = random.randint(0, lebar_layar - ukuran_ular) // ukuran_ular * ukuran_ular
y_makanan = random.randint(0, tinggi_layar - ukuran_ular) // ukuran_ular * ukuran_ular
# Set skor
skor = 0
# Loop utama
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()
elif event.type == pygame.KEYDOWN:
if event.key == pygame.K_UP and arah_y != 1:
arah_x = 0
arah_y = -1
elif event.key == pygame.K_DOWN and arah_y != -1:
arah_x = 0
arah_y = 1
elif event.key == pygame.K_LEFT and arah_x != 1:
arah_x = -1
arah_y = 0
elif event.key == pygame.K_RIGHT and arah_x != -1:
arah_x = 1
arah_y = 0
# Gerakkan ular
x_ular += arah_x * ukuran_ular
y_ular += arah_y * ukuran_ular
# Cek tabrakan dengan dinding
if x_ular < 0 or x_ular >= lebar_layar or y_ular < 0 or y_ular >= tinggi_layar:
print("Game Over! Skor:", skor)
pygame.quit()
sys.exit()
# Cek tabrakan dengan tubuh ular
if (x_ular, y_ular) in tubuh_ular[:-1]:
print("Game Over! Skor:", skor)
pygame.quit()
sys.exit()
# Cek makanan
if x_ular == x_makanan and y_ular == y_makanan:
skor += 1
x_makanan = random.randint(0, lebar_layar - ukuran_ular) // ukuran_ular * ukuran_ular
y_makanan = random.randint(0, tinggi_layar - ukuran_ular) // ukuran_ular * ukuran_ular
else:
tubuh_ular.pop(0)
# Update tubuh ular
tubuh_ular.append((x_ular, y_ular))
# Gambar layar
layar.fill(hitam)
for x, y in tubuh_ular:
pygame.draw.rect(layar, putih, (x, y, ukuran_ular, ukuran_ular))
pygame.draw.rect(layar, merah, (x_makanan, y_makanan, ukuran_ular, ukuran_ular))
font = pygame.font.Font(None, 36)
text = font.render("Skor: " + str(skor), True, putih)
layar.blit(text, (10, 10))
# Update layar
pygame.display.flip()
pygame.time.Clock().tick(10)
- KELOMPOK 4
- KELOMPOK 5
<html>
<head>
<title>Membuat Tulisan Berjalan Animasi Javascript</title>
<style>
.ml1 .line {
opacity: 0;
position: absolute;
left: 0;
height: 3px;
width: 100%;
background-color: #fff;
transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</head>
<body>
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">belajar koding smk muhammadiyah parung</span>
<span class="line line2"></span>
</span>
</h1>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml1 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({
loop: true
})
.add({
targets: '.ml1 .letter',
scale: [0.3, 1],
opacity: [0, 1],
translateZ: 0,
easing: "easeOutExpo",
duration: 600,
delay: (el, i) => 70 * (i + 1)
}).add({
targets: '.ml1 .line',
scaleX: [0, 1],
opacity: [0.5, 1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: (el, i, l) => 80 * (l - i)
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
</body>
</html>
0 Komentar