let timer = null;
let running = false;
function startRace() {
? if (running) return;
? running = true;
? const horses = document.querySelectorAll(".horse");
? const track = document.querySelector(".track");
? const distance = track.clientWidth - 75;
? let positions = [0,0,0,0,0];
? document.getElementById("result").innerText = "???? 출발!!";
? timer = setInterval(() => {
? ? for(let i=0;i<5;i++) {
? ? ? positions[i] += Math.random()*12+3;
? ? ? horses[i].style.left =
? ? ? ? Math.min(positions[i],distance)+"px";
? ? }
? ? let winner = positions.findIndex(p=>p>=distance);
? ? if(winner !== -1) {
? ? ? clearInterval(timer);
? ? ? running = false;
? ? ? let bet = Number(
? ? ? ? document.getElementById("bet").value
? ? ? );
? ? ? document.getElementById("result").innerText =
? ? ? ? "???? "+(winner+1)+"번 말 우승! "+
? ? ? ? (bet===winner+1 ? "???? 베팅 적중!" : "아쉽습니다!");
? ? }
? },150);
}
function resetRace() {
? if(timer) clearInterval(timer);
? timer = null;
? running = false;
? document.querySelectorAll(".horse").forEach(h=>{
? ? h.style.left="0px";
? });
? document.getElementById("result").innerText="출발 준비!";
}
모바일 경마 게임* { box-sizing:border-box; }
body {
? margin:0;
? background:#164b25;
? color:white;
? font-family:Arial,sans-serif;
? text-align:center;
}
h1 { font-size:27px; }
.track {
? margin:12px;
? padding:10px;
? background:#b68a51;
? border:4px solid white;
? border-radius:12px;
}
.lane {
? height:62px;
? border-bottom:2px dashed white;
? position:relative;
}
.horse {
? position:absolute;
? left:0;
? top:10px;
? font-size:30px;
? white-space:nowrap;
}
.finish {
? position:absolute;
? right:5px;
? top:0;
? height:100%;
? border-left:4px solid red;
}
button, select {
? font-size:19px;
? padding:14px;
? border-radius:10px;
? border:0;
? margin:8px;
}
button {
? background:#ffd700;
? font-weight:bold;
? width:85%;
}
#result {
? font-size:23px;
? color:yellow;
}
모바일 미니 경마
<--선택
출발 준비!
let timer = null;
let running = false;
function startRace() {
? if (running) return;
? running = true;
? const horses = document.querySelectorAll(".horse");
? const track = document.querySelector(".track");
? const distance = track.clientWidth - 75;
? let positions = [0,0,0,0,0];
? document.getElementById("result").innerText = "???? 출발!!";
? timer = setInterval(() => {
? ? for(let i=0;i<5;i++) {
? ? ? positions[i] += Math.random()*12+3;
? ? ? horses[i].style.left =
? ? ? ? Math.min(positions[i],distance)+"px";
? ? }
? ? let winner = positions.findIndex(p=>p>=distance);
? ? if(winner !== -1) {
? ? ? clearInterval(timer);
? ? ? running = false;
? ? ? let bet = Number(
? ? ? ? document.getElementById("bet").value
? ? ? );
? ? ? document.getElementById("result").innerText =
? ? ? ? "???? "+(winner+1)+"번 말 우승! "+
? ? ? ? (bet===winner+1 ? "???? 베팅 적중!" : "아쉽습니다!");
? ? }
? },150);
}
function resetRace() {
? if(timer) clearInterval(timer);
? timer = null;
? running = false;
? document.querySelectorAll(".horse").forEach(h=>{
? ? h.style.left="0px";
? });
? document.getElementById("result").innerText="출발 준비!";
}
let audioCtx;
let timer;
function playSound(type) {
stopSound();
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function beep(freq, duration, volume=0.15) {
let osc = audioCtx.createOscillator();
let gain = audioCtx.createGain();
osc.frequency.value = freq;
gain.gain.value = volume;
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + duration);
}
if(type === 'start') {
beep(880, 0.3);
setTimeout(() => beep(1100, 0.5), 350);
}
if(type === 'horse') {
let count = 0;
timer = setInterval(() => {
beep(count % 2 ? 180 : 240, 0.07, 0.2);
count++;
}, 180);
}
if(type === 'finish') {
beep(523, 0.3);
setTimeout(() => beep(659, 0.3), 300);
setTimeout(() => beep(784, 0.7), 600);
}
}
function stopSound() {
clearInterval(timer);
if(audioCtx) audioCtx.close();
}