스코어게임 임베드 가이드

이 가이드는 스코어게임을 웹사이트에 안전하고 효율적으로 임베드하는 방법을 상세히 설명합니다.

시작하기 전에

필수 요구사항
  • iframe의 특성이해
  • HTML/JavaScript 기본 지식
  • 반응형 웹 디자인 이해

1. HTML 구조 구현

스코어게임을 웹사이트에 완벽하게 통합하기 위한 기본 HTML 구조입니다.

구현 가이드

iframe 요소는 다음과 같은 특징을 가지고 있습니다:

  • 기본 너비 800px로 설정되어 최적의 게임 경험 제공
  • 스크롤 방지 및 테두리 제거로 깔끔한 UI 구현
  • 반응형 디자인을 위한 컨테이너 구조

<div id="scoregame-iframe">
    <iframe src="https://scoregame.io/games/dogePowerball/index.php?hid=dogePowerball120" scrolling="no" frameborder="0" style="width:800px; height:400px;border:none;"></iframe>
</div>

2. JavaScript 반응형 구현

다양한 디바이스에서 최적의 사용자 경험을 제공하기 위한 스케일링 로직입니다.

코드 설명

이 JavaScript 코드는 다음과 같은 주요 기능을 수행합니다:

  • 디바이스 너비 실시간 감지 및 자동 스케일링
  • 부드러운 반응형 전환을 위한 transform 속성 활용
  • 디바이스별 최적화된 스케일 값 적용

document.addEventListener("DOMContentLoaded", function() {
    function adjustIframeScale() {
        const iframeContainer = document.getElementById('scoregame-iframe');
        const deviceWidth = window.innerWidth;
        let scaleValue = 1;
        
        if (deviceWidth <= 320) {
            scaleValue = 0.376;
        } else if (deviceWidth <= 360) {
            scaleValue = 0.4;
        } else if (deviceWidth <= 480) {
            scaleValue = 0.4;
        } else if (deviceWidth <= 600) {
            scaleValue = 0.681;
        } else if (deviceWidth <= 768) {
            scaleValue = 0.906;
        } else if (deviceWidth <= 900) {
            scaleValue = 0.98;
        } else if (deviceWidth <= 1024) {
            scaleValue = 1;
        }

        iframeContainer.style.transform = `scale(${scaleValue})`;
        iframeContainer.style.transformOrigin = 'top left';
        const originalHeight = 400;
        iframeContainer.style.height = `${originalHeight * scaleValue}px`;
    }

    adjustIframeScale();
    window.addEventListener('resize', adjustIframeScale);
});

3. 반응형 상세 가이드

각 디바이스 환경에 최적화된 디스플레이 설정을 제공합니다.

디바이스별 최적화 설정

각 해상도별로 사용자 경험을 최적화하기 위해 세심하게 조정된 스케일 값을 적용했습니다:

  • 320px 이하 (소형 모바일)

    37.6% 스케일로 완벽한 모바일 최적화

  • 360px-480px (일반 모바일)

    40% 스케일로 가독성과 사용성 균형

  • 600px-768px (태블릿)

    68.1%-90.6% 스케일로 태블릿 최적화

  • 900px-1024px (데스크톱)

    98%-100% 스케일로 완전한 데스크톱 경험

프로 팁:

반응형 구현 시 transform-origin: top left 설정으로 일관된 정렬을 유지하며,

각 환경에서 디테일한 수치조정의 커스터마이징이 필요할 수 있습니다.

게임 결과 데이터 처리 예제:
/**
 * 게임 결과 분석에 사용되는 함수들
 */

/**
 * 일반볼 번호를 2자리씩 분리하여 배열로 반환
 * @param string $n 연결된 일반볼 번호 (예: '010203040506')
 * @return array 분리된 번호 배열 (예: ['01','02','03','04','05','06'])
 */
function pb_extractNormalBall($n) {
    return str_split($n, 2);
}

/**
 * 일반볼 결과 분석
 * @param array $balls 일반볼 번호 배열
 * @return array 분석 결과
 * 
 * 판정 기준:
 * - 숫자합 홀짝: 모든 수의 합의 홀짝
 * - 언오버: 72이하=언더, 73이상=오버
 * - 대중소: 대(81-130), 중(65-80), 소(15-64)
 * - 구간: A(15-35), B(36-49), C(50-57), D(58-65), E(66-78), F(79-130)
 */
function pb_sectionNormalball($balls) {
    $sum = array_sum($balls);
    
    // 홀짝 판정
    $oddEven = ($sum % 2 == 0) ? '짝' : '홀';
    
    // 언오버 판정
    $underOver = ($sum >= 73) ? '오' : '언';
    
    // 대중소 판정
    if ($sum >= 81 && $sum <= 130) {
        $size = '대';
    } elseif ($sum >= 65 && $sum <= 80) {
        $size = '중';
    } else {
        $size = '소';
    }
    
    // 구간 판정
    if ($sum >= 15 && $sum <= 35) {
        $section = 'A';
    } elseif ($sum >= 36 && $sum <= 49) {
        $section = 'B';
    } elseif ($sum >= 50 && $sum <= 57) {
        $section = 'C';
    } elseif ($sum >= 58 && $sum <= 65) {
        $section = 'D';
    } elseif ($sum >= 66 && $sum <= 78) {
        $section = 'E';
    } else {
        $section = 'F';
    }
    
    return [
        '합계' => $sum,
        '홀짝' => $oddEven,
        '언오버' => $underOver,
        '대중소' => $size,
        '구간' => $section
    ];
}

/**
 * 파워볼 결과 분석
 * @param int $ball 파워볼 번호
 * @return array 분석 결과
 * 
 * 판정 기준:
 * - 홀짝: 홀(1,3,5,7,9), 짝(0,2,4,6,8)
 * - 언오버: 언더(0-4), 오버(5-9)
 * - 구간: A(0-2), B(3-4), C(5-6), D(7-9)
 */
function pb_sectionPowerball($ball) {
    // 홀짝 판정
    $oddEven = ($ball % 2 == 0) ? '짝' : '홀';
    
    // 언오버 판정
    $underOver = ($ball <= 4) ? '언' : '오';
    
    // 구간 판정
    if ($ball >= 0 && $ball <= 2) {
        $section = 'A';
    } elseif ($ball >= 3 && $ball <= 4) {
        $section = 'B';
    } elseif ($ball >= 5 && $ball <= 6) {
        $section = 'C';
    } else {
        $section = 'D';
    }
    
    return [
        '파워볼' => $ball,
        '홀짝' => $oddEven,
        '언오버' => $underOver,
        '구간' => $section
    ];
}

// 사용 예제 및 결과 출력
// 1. API에서 받은 게임 결과 데이터
$gameResult = [
    'p' => 5,  // 파워볼 결과
   
// 4. HTML로 결과 출력 예시
echo "파워볼 결과: {$powerballResult['파워볼']} (";
echo "{$powerballResult['홀짝']}, {$powerballResult['언오버']}, ";
echo "구간{$powerballResult['구간']})<br>";

echo "일반볼 결과: ";
echo implode(',', $normalBalls);
echo " (합계:{$normalballResult['합계']}, ";
echo "{$normalballResult['홀짝']}, {$normalballResult['언오버']}, ";
echo "{$normalballResult['대중소']}, 구간{$normalballResult['구간']})";

/*
출력 결과:
파워볼 결과: 5 (홀, 오, 구간C)
일반볼 결과: 01,02,03,04,05,06 (합계:21, 홀, 언, 소, 구간A)
*/ 'n' => '010203040506'  // 일반볼 결과 (6개의 2자리 숫자)
];

// 2. 파워볼 결과 분석
$powerballResult = pb_sectionPowerball($gameResult['p']);
print_r($powerballResult);
/*
결과:
Array(
    '파워볼' => 5,
    '홀짝' => '홀',
    '언오버' => '오',
    '구간' => 'C'
)
*/

// 3. 일반볼 결과 분석
$normalBalls = pb_extractNormalBall($gameResult['n']);
print_r($normalBalls);
/*
결과:
Array(
    [0] => '01',
    [1] => '02',
    [2] => '03',
    [3] => '04',
    [4] => '05',
    [5] => '06'
)
*/

$normalballResult = pb_sectionNormalball($normalBalls);
print_r($normalballResult);
/*
결과:
Array(
    '합계' => 21,
    '홀짝' => '홀',
    '언오버' => '언',
    '대중소' => '소',
    '구간' => 'A'
)
*/