Animation and Sound Effects

(1)

Kelompok 8

1. Rianto Padli 11221049

2. Muhammad Akmal Al Fathan 11221037 3. Dilla Ayu Puspitasari 11221031

4. Wafiq Ajriyah 11221027

Progress ke-4 Tugas 2 (Animasi)

Gambar diatas adalah output yang dihasilkan dari kode program yang telah dijalankan.

Seperti yang bisa dilihat, Untuk progres minggu ini kami menampilkan efek suara jika menekan Spin dan untuk pemutaran nya sudah dibuat lambat tapi belum terlalu greget. Untuk progres minggu depan kemungkinan akan menampilkan show winner message dan efek suara menang seperti terompet dan kembang api.

Berikut adalah Source code yang digunakan untuk menampilkan ilustrasi di atas.

No index.html

1 <!DOCTYPE html>

<ht<!DOCTYPE html>

<head>

initial-scale=1.0">

<title>Source Code Of Spin Wheel</title>

(2)

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/al l.min.css"

integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9l JmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="

crossorigin="anonymous" referrerpolicy="no-referrer" />

<script

src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.j s"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/

2.1.0/chartjs-plugin-datalabels.min.js"></script>

</head>

<body>

<h1>CATSPIN</h1>

</div>

<div id="text"><p>Wheel Of Fortune</p></div>

// Get the audio elements

var spinAudio = document.getElementById("spin-sound");

var winAudio = document.getElementById("win-sound");

// Get the button element

(3)

var spinButton = document.getElementById("spin_btn");

// Add event listener to the button to play audio when clicked spinButton.addEventListener("click", function() {

// Play the spinning sound spinAudio.play();

// Check the result of the wheel here

var result = getResult(); // For example, this function returns a random result

// If the result is a win, play the win sound if (result === "win") {

winAudio.play();

} });

// Function to get the result of the wheel (You can replace it with your game logic)

function getResult() {

// Simple logic example, if a random number is even, then it's a win

var randomNumber = Math.floor(Math.random() * 10) + 1; // Random number from 1 to 10

if (randomNumber % 2 === 0) { return "win";

} else {

return "lose";

} }

</script>

<button id="mode-toggle-btn">Toggle Mode</button>

</body>

</html>

ml lang="en">

<head>

(4)

initial-scale=1.0">

<title>Source Code Of Spin Wheel</title>

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/al l.min.css"

integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9l JmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="

crossorigin="anonymous" referrerpolicy="no-referrer" />

<script

src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.j s"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/

2.1.0/chartjs-plugin-datalabels.min.js"></script>

</head>

<body>

<h1>CATSPIN</h1>

</div>

<div id="text"><p>Wheel Of Fortune</p></div>

</div>

</body>

</html>

style.css

/*--- GOOGLE FONTS ---*/

(5)

@import

url('https://fonts.googleapis.com/css2?family=PT+Serif&display=sw ap');

/*--- VARIABLES ---*/

:root {

/* Colors */

--white_color : rgb(255, 255, 255);

--gold_color: rgb(255, 215, 0);

--green_color: rgb(38, 236, 20);

--body_background: linear-gradient(to right, #141e30,

#243b55);

--spin_background: linear-gradient(to right, #fc4a1a,

#f7b733);

}

/*--- Base ---*/

* {

box-sizing: border-box;

padding: 0;

margin: 0;

font-family: 'PT Serif', serif;

} body {

height: 100vh;

background: var(--body_background);

}

/*--- Styling Start ---*/

h1 {

position: absolute;

font-size: 4rem;

top: 10%;

left: 50%;

transform: translate(-50%, -50%);

color: var(--gold_color);

}

.container { width: 90%;

max-width: 34.37rem;

margin-top: 3rem;

max-height: 90vh;

position: absolute;

(6)

top: 50%;

left: 50%;

padding: 3rem;

border-radius: 1rem;

}

.wheel_box {

position: relative;

width: 100%;

height: 10%;

}

#spinWheel {

max-height: inherit;

width: inherit;

transform: rotate(270deg);

}

#spin_btn {

position: absolute;

top: 50%;

left: 50%;

height: 26%;

width: 26%;

border-radius: 50%;

cursor: pointer;

border: 0;

background: var(--spin_background);

color: var(--white_color);

text-transform: uppercase;

font-size: 1.8rem;

letter-spacing: 0.1rem;

font-weight: 600;

}

.fa-solid {

position: absolute;

top: -8%;

left: 43.7%;

font-size: 4rem;

color: var(--green_color);

transform: rotate(-228deg);

}

#text {

font-size: 1.5rem;

(7)

text-align: center;

margin-top: 1.5rem;

color: var(--gold_color);

font-weight: 500;

}

/* Dark Mode */

.dark-mode {

--body_background: #0a0404; /* Ganti dengan warna latar belakang gelap yang Anda inginkan */

--spin_background: linear-gradient(to right, #000000, #434343);

/* Ganti dengan warna latar belakang roda putar yang Anda inginkan */

--gold_color: #ffd700; /* Ganti dengan warna teks atau ikon yang sesuai untuk mode gelap */

--white_color: #fff; /* Ganti dengan warna teks atau ikon yang sesuai untuk mode gelap */

}

/* Light Mode */

.light-mode {

--body_background: linear-gradient(to right, #141e30, #243b55);

/* Ganti dengan warna latar belakang terang yang Anda inginkan */

--spin_background: linear-gradient(to right, #fc4a1a, #f7b733);

/* Ganti dengan warna latar belakang roda putar yang Anda inginkan */

--gold_color: #ffd700; /* Ganti dengan warna teks atau ikon yang sesuai untuk mode terang */

--white_color: #fff; /* Ganti dengan warna teks atau ikon yang sesuai untuk mode terang */

}

script.js

/* --- Spin Wheel --- */

const spinWheel = document.getElementById("spinWheel");

const spinBtn = document.getElementById("spin_btn");

(8)

const text = document.getElementById("text");

/* --- Minimum And Maximum Angle For A value --- */

const spinValues = [

{ minDegree: 61, maxDegree: 90, value: 100 }, { minDegree: 31, maxDegree: 60, value: 200 }, { minDegree: 0, maxDegree: 30, value: 300 }, { minDegree: 331, maxDegree: 360, value: 400 }, { minDegree: 301, maxDegree: 330, value: 500 }, { minDegree: 271, maxDegree: 300, value: 600 }, { minDegree: 241, maxDegree: 270, value: 700 }, { minDegree: 211, maxDegree: 240, value: 800 }, { minDegree: 181, maxDegree: 210, value: 900 }, { minDegree: 151, maxDegree: 180, value: 1000 }, { minDegree: 121, maxDegree: 150, value: 1100 }, { minDegree: 91, maxDegree: 120, value: 1200 }, ];

/* --- Size Of Each Piece --- */

const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];

/* --- Background Colors --- */

const spinColors = [

"#E74C3C",

"#7D3C98",

"#2E86C1",

"#138D75",

"#F1C40F",

"#D35400",

"#138D75",

"#F1C40F",

"#b163da",

"#E74C3C",

"#7D3C98",

"#138D75", ];

/* --- Chart --- */

let spinChart = new Chart(spinWheel, { plugins: [ChartDataLabels],

type: "pie",

(9)

data: {

labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], datasets: [

{

backgroundColor: spinColors, data: size,

}, ], },

options: {

responsive: true,

animation: { duration: 3 }, plugins: {

tooltip: false, legend: {

display: false, },

datalabels: { rotation: 90, color: "#ffffff",

formatter: (_, context) =>

context.chart.data.labels[context.dataIndex], font: { size: 24 },

}, }, }, });

/* --- Display Value Based On The Angle --- */

const generateValue = (angleValue) => { for (let i of spinValues) {

if (angleValue >= i.minDegree && angleValue <= i.maxDegree) { text.innerHTML = `<p>Congratulations, You Have ${i.value} !

</p>`;

spinBtn.disabled = false;

frames } } };

/* --- Spinning Code --- */

(10)

let count = 0;

let resultValue = 101;

let rotationInterval;

spinBtn.addEventListener("click", () => { spinBtn.disabled = true;

text.innerHTML = `<p>Best Of Luck!</p>`;

let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);

let rotationSpeed = 16; // Kecepatan awal putaran

rotationInterval = window.setInterval(() => {

spinChart.options.rotation = spinChart.options.rotation + resultValue;

spinChart.update();

if (spinChart.options.rotation >= 360) { count += 1;

resultValue -= 5;

spinChart.options.rotation = 0;

} else if (count > 15 && spinChart.options.rotation ==

randomDegree) {

generateValue(randomDegree);

clearInterval(rotationInterval);

count = 0;

resultValue = 101;

}

if (rotationSpeed > 1) { rotationSpeed -= 0;

} else {

clearInterval(rotationInterval);

spinBtn.disabled = false;

}

}, rotationSpeed);

});

// Menambahkan event listener untuk setiap opsi tambahan costumeOption.addEventListener("click", () => {

// Logika untuk opsi kostum });

colorModeOption.addEventListener("click", () => {

(11)

// Logika untuk opsi mode warna });

soundEffectOption.addEventListener("click", () => { // Logika untuk opsi efek suara

});

rotationSpeedOption.addEventListener("click", () => { // Logika untuk opsi kecepatan putaran

});

// Function to toggle between dark mode and light mode const toggleMode = () => {

const body = document.body;

body.classList.toggle("dark-mode"); // Toggle dark mode class on body

};

// Adding event listener to the mode toggle button

const modeToggleBtn = document.getElementById("mode-toggle-btn");

modeToggleBtn.addEventListener("click", toggleMode);

// Dapatkan elemen audio

var audio = document.getElementById("epic-hybrid");

// Dapatkan elemen tombol

var spinButton = document.getElementById("spin_btn");

// Tambahkan event listener ke tombol untuk memutar audio ketika diklik

spinButton.addEventListener("click", function() { if (audio.paused) {

audio.play();

} else {

audio.pause();

audio.currentTime = 0; // Putar dari awal audio.play();

} });

(12)