룰렛 플러그인으로 룰렛 돌리는 프로그램 만들기

먼저 해외에서 룰렛을 만드는 소스를 올려 놓은 곳이 있는데, 참고해 보세요.

Home

Welcome to the home of Winwheel.js! Winwheel.js is a feature packed JavaScript library that allows you to easily create spinning Prize Wheels on HTML5 canvas using highly configurable JavaScript classes.

dougtesting.net

여기 이고요.. 예제도 잘 나와 있습니다.

저는 이예제를 가지고 설명을 드릴께요..

Wheel of Fortune style wheel

Winwheel.js example: Wheel of fortune style wheel

Example of a Wheel of Fortune wheel created on HTML canvas by the Winwheel.js JavaScript library...

dougtesting.net

룰렛의 github 사이트 입니다.

https://github.com/zarocknz/javascript-winwheel

GitHub - zarocknz/javascript-winwheel: Create spinning prize wheels on HTML canvas with Winwheel.js

Create spinning prize wheels on HTML canvas with Winwheel.js - GitHub - zarocknz/javascript-winwheel: Create spinning prize wheels on HTML canvas with Winwheel.js

github.com

이걸 만들라면 웹브라우저에 게시판 만드는걸 알아야하는데요..

스프링부트 게시판 만들기를 참고해 주세요.

https://astonysia-story.tistory.com/21

스프링부트 + jsp + yml로 게시판 만들기 - (1) 개발환경 설정

개발환경은 JAVA, 이클립스(이클립스 대신에 sts를 사용 하셔도 됩니다), 마리아디비, dbeaver(데이터베이스 툴)를 먼저 다운로드를 받아서 개발환경을 맞추어 줍니다. 1. JAVA 다운로드 설치 및 실행 h

astonysia-story.tistory.com

그리고 아래 소스는 제가 붙여서 테스트를 한 소스 입니다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas Winning Wheel</title>

</head>

<body>

<h1>Winwheel.js example wheel - wheel of fortune</h1>

<p>Here is an example of a code-drawn Wheel of Fortune looking wheel which spins to a stop with the prize won alerted to the user.</p>

<br />

<p>

With some additional coding it could be made so that the prize won is added to a total after each spin rather than

just alerting the prize to make a proper wheel of fortune like game.

</p>

<br />

<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>

<br />

<tr>

<td>

<br />

<tr>

<th align="center">Power</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

  <a href="#" onClick="resetWheel(); return false;">Play Again</a><br />     (reset)

</div>

</td>

<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>

</canvas>

</td>

</tr>

</table>

// Create new wheel object specifying the parameters at creation time.

let theWheel = new Winwheel({

'outerRadius' : 212, // Set outer radius so wheel fits inside the background.

'innerRadius' : 75, // Make wheel hollow so segments don't go all way to center.

'textFontSize' : 24, // Set default font size for the segments.

'textOrientation' : 'vertical', // Make text vertial so goes down from the outside of wheel.

'textAlignment' : 'outer', // Align text to outside of wheel.

'numSegments' : 24, // Specify number of segments.

'segments' : // Define segments including colour and text.

[ // font size and test colour overridden on backrupt segments.

{'fillStyle' : '#ee1c24', 'text' : '홍길동'},

{'fillStyle' : '#3cb878', 'text' : '450'},

{'fillStyle' : '#f6989d', 'text' : '600'},

{'fillStyle' : '#00aef0', 'text' : '750'},

{'fillStyle' : '#f26522', 'text' : '500'},

{'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},

{'fillStyle' : '#e70697', 'text' : '3000'},

{'fillStyle' : '#fff200', 'text' : '600'},

{'fillStyle' : '#f6989d', 'text' : '700'},

{'fillStyle' : '#ee1c24', 'text' : '350'},

{'fillStyle' : '#3cb878', 'text' : '500'},

{'fillStyle' : '#f26522', 'text' : '800'},

{'fillStyle' : '#a186be', 'text' : '300'},

{'fillStyle' : '#fff200', 'text' : '400'},

{'fillStyle' : '#00aef0', 'text' : '650'},

{'fillStyle' : '#ee1c24', 'text' : '1000'},

{'fillStyle' : '#f6989d', 'text' : '500'},

{'fillStyle' : '#f26522', 'text' : '400'},

{'fillStyle' : '#3cb878', 'text' : '900'},

{'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},

{'fillStyle' : '#a186be', 'text' : '600'},

{'fillStyle' : '#fff200', 'text' : '700'},

{'fillStyle' : '#00aef0', 'text' : '800'},

{'fillStyle' : '#ffffff', 'text' : 'LOOSE TURN', 'textFontSize' : 12}

'animation' : // Specify the animation to use.

{

'type' : 'spinToStop',

'duration' : 10, // Duration in seconds.

'spins' : 3, // Default number of complete spins.

'callbackFinished' : alertPrize,

'callbackSound' : playSound, // Function to call when the tick sound is to be triggered.

'soundTrigger' : 'pin' // Specify pins are to trigger the sound, the other option is 'segment'.

'pins' : // Turn pins on.

{

'number' : 24,

'fillStyle' : 'silver',

'outerRadius': 4,

}

});

// Loads the tick audio sound in to an audio object.

let audio = new Audio('/music/tick.mp3');

// This function is called when the sound is to be played.

function playSound()

{

// Stop and rewind the sound if it already happens to be playing.

audio.pause();

audio.currentTime = 0;

// Play the sound.

audio.play();

}

// Vars used by the code in this page to do power controls.

let wheelPower = 0;

let wheelSpinning = false;

// -------------------------------------------------------

// Function to handle the onClick on the power buttons.

// -------------------------------------------------------

function powerSelected(powerLevel)

{

// Ensure that power can't be changed while wheel is spinning.

if (wheelSpinning == false) {

// Reset all to grey incase this is not the first time the user has selected the power.

document.getElementById('pw1').className = "";

document.getElementById('pw2').className = "";

document.getElementById('pw3').className = "";

// Now light up all cells below-and-including the one selected by changing the class.

if (powerLevel >= 1) {

document.getElementById('pw1').className = "pw1";

}

if (powerLevel >= 2) {

document.getElementById('pw2').className = "pw2";

}

if (powerLevel >= 3) {

document.getElementById('pw3').className = "pw3";

}

// Set wheelPower var used when spin button is clicked.

wheelPower = powerLevel;

// Light up the spin button by changing it's source image and adding a clickable class to it.

document.getElementById('spin_button').src = "/img/spin_on.png";

document.getElementById('spin_button').className = "clickable";

}

// -------------------------------------------------------

// Click handler for spin button.

// -------------------------------------------------------

function startSpin()

{

// Ensure that spinning can't be clicked again while already running.

if (wheelSpinning == false) {

// Based on the power level selected adjust the number of spins for the wheel, the more times is has

// to rotate with the duration of the animation the quicker the wheel spins.

if (wheelPower == 1) {

theWheel.animation.spins = 3;

} else if (wheelPower == 2) {

theWheel.animation.spins = 6;

} else if (wheelPower == 3) {

theWheel.animation.spins = 10;

}

// Disable the spin button so can't click again while wheel is spinning.

document.getElementById('spin_button').src = "/img/spin_off.png";

document.getElementById('spin_button').className = "";

// Begin the spin animation by calling startAnimation on the wheel object.

theWheel.startAnimation();

// Set to true so that power can't be changed and spin button re-enabled during

// the current animation. The user will have to reset before spinning again.

wheelSpinning = true;

}

// -------------------------------------------------------

// Function for reset button.

// -------------------------------------------------------

function resetWheel()

{

theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.

theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.

theWheel.draw(); // Call draw to render changes to the wheel.

document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.

document.getElementById('pw2').className = "";

document.getElementById('pw3').className = "";

wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.

}

// -------------------------------------------------------

// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.

// -------------------------------------------------------

function alertPrize(indicatedSegment)

{

// Just alert to the user what happened.

// In a real project probably want to do something more interesting than this with the result.

if (indicatedSegment.text == 'LOOSE TURN') {

alert('Sorry but you loose a turn.');

} else if (indicatedSegment.text == 'BANKRUPT') {

alert('Oh no, you have gone BANKRUPT!');

} else {

alert("You have won " + indicatedSegment.text);

}

</script>

</body>

</html>

결과

해당에서 spin을 누르면 눌렛이 돕니다.

그리고 Play Again을 누르면 다시 돌릴수 있게 룰렛이 멈춥니다.

Power의 High, Med, Low를 클릭을 해서 룰렛 돌리는 속도를 조절을 할수 있습니다.

High가 가장 빠른 속도 입니다.

그리고 간단하게 소스를 설명을 드리지면

function alertPrize(indicatedSegment) <- 이 부분의 소스를 보시면 룰렛이 종료가 되면 결과값을 보여주는 함수 입니다.

그리고 룰렛의 텍스트를 변경 하는 곳은

let theWheel = new Winwheel({ <- 이 부분에 있습니다.

{'fillStyle' : '#ee1c24', 'text' : '300'}, <- 여기서 #ee1c24 : 룰렛 배경, 300은 텍스트 입니다.

해당내용에서 텍스트를 변경 하시면 원하는 룰렛을 얻을수 있습니다.

예를 들어 300을 홍길동을 바꾸시면... 결과는 이렇습니다.

그리고..

{'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},

해당 소스에서는 textFontSize : 글자 크기, textFillStyle : 글자색 입니다.

결과

이부분을 이렇게 바꾸시면 이렇게 보입니다.

홍길동 이라는 글자가 보이시죠. 이렇게 변경을 해서 사용 하시면 됩니다.

그리고 스프링부트 게시판 만들기에도 적어 놓기는 했는데요.

스프링부트 게시판 만들기에서 게시판 만들기를 하시면 이렇게 동일하게 폴더를 만들어서 파일을 넣으시면 됩니다.

그리고 이미지 파일이나 스크립트 파일등은 제소스를 보면 알겠지만요.

이런식으로 앞에 /img/ 를 붙여 주어야 합니다.

그리고 마지막으로 main.css 파일에 한가지를 바꾸어 주어야 합니다.

main.css 파일을 열고 저부분을 저렇게 바꾸어 주시면 룰렛의 배경도 정상적으로 나올겁니다.

그리고 github에서 소스를 다운로드 받는 방법은...

code > download zip 하시면 됩니다.

그리고 zip 파일 압축을 풀면 제가 설명한 소스는 해당 경로 있습니다.

혹시 궁굼하시건 질문 주세요.

'IT, 인터넷 > HTML, JQUERY, JAVASCRIPT, CSS' 카테고리의 다른 글

html의 기본문법(코드)에 대해서 설명 해 드리겠습니다 (0)	2021.09.27
웹개발의 아주 기초적인 html, javascript, style(css), jquery 를 배워 보세요 (0)	2021.09.27
jquery 사용해서 배열 json 데이터 만들기 (array, object) (0)	2021.09.16

맛집, 연예, IT, 여행, 주식, 아파트, 투자

룰렛 플러그인으로 룰렛 돌리는 프로그램 만들기

'IT, 인터넷 > HTML, JQUERY, JAVASCRIPT, CSS' 카테고리의 다른 글

티스토리툴바

룰렛 플러그인으로 룰렛 돌리는 프로그램 만들기

'IT, 인터넷 > HTML, JQUERY, JAVASCRIPT, CSS' 카테고리의 다른 글

'IT, 인터넷/HTML, JQUERY, JAVASCRIPT, CSS' Related Articles

티스토리툴바