doc01 = html`<output>잠시 시간이 흐르고 나면 ....</output>`
setTimeout( callbackFunc01, 5000 ) // 5000ms(5초) 후에 첫째 인자로 받은 콜백 함수 실행
callbackFunc01 = () => doc01.innerHTML += " 내가 등장한다!"
beginBtn02 = html`<button type="button">반복 시작</button>`
endBtn02 = html`<button type="button" disabled>이제 그만</button>`
doc02 = html`<div><output>일정 시간마다 주기적으로 ...</output></div>`
beginBtn02.onclick = () => {
beginBtn02.disabled = true
const interval = setInterval( callbackFunc02, 1500 ) // 1500ms(1.5초)마다 첫째 인자로 받은 콜백 함수 실행
endBtn02.disabled = false
endBtn02.onclick = () => { clearInterval( interval ); endBtn02.disabled = true; beginBtn02.disabled = false; }
}
callbackFunc02 = () => doc02.innerHTML += " 내가 돌아왔다!"
doc03 = html`<div class='mymap'>${mkMapContent(30,30)}</div>`
mkMapContent = (m,n) => Array(n).fill(`<div>${Array(m).fill("<div></div>").join("")}</div>`).join("")
// doc03.appendChild( doc03.children[0] )
setInterval( () => doc03.appendChild(doc03.children[0]), 50 ) // 자동으로 0.05초마다 반복
{ // 대각선만 노란색으로
for (let i=0; i < doc03.children.length; ++i)
for (let j=0; j < doc03.children[i].children.length; ++j)
doc03.children[i].children[j].setAttribute("class", (i===j)?"theroad":"offroad")
}
style03 = html`
<style>
div.mymap { display: flex; flex-direction: column; flex-shrink: 0;
margin: 0; padding: 0; width: min-content; height: min-content; border: LightGray solid 1px; }
div.mymap > div { display: flex; flex-direction: row; flex-shrink: 0;
width: min-content; height: min-content; }
div.mymap > div > div { flex-shrink: 0; margin: 0; padding: 0; width: 5px; height: 13px; }
.offroad { background: black; }
.theroad { background: yellow; }
.car { background: magenta; }
</style>
`
doc04 = { // 맵 초기화
const doc = html`
<div class='three'>
<div class='mymap'>${mkMapContent(80,30)}</div>
keyboard control: J(←), K(↑), L(→)
</div>`
const map = doc.children[0]
for (let i=0; i < map.children.length; ++i)
for (let j=0; j < map.children[i].children.length; ++j)
map.children[i].children[j].setAttribute("class", (32<j && j<=48)?"theroad":"offroad")
return doc
}
style04 = html`
<style>
.three { height: 450px; perspective: 300px; }
.three > .mymap { margin-left:auto; margin-right:auto; transform: rotateX(60deg); }
</style>
`
theMap = doc04.children[0]
theCar = {
return { // car object
pos: 40, // x축 위치
dir: 0, // 이동방향 - 왼쪽(-1), 제자리(0), 오른쪽(1)
move() {
this.pos += this.dir;
this.pos = (this.pos<0)? 0: (this.pos>=80)? 79: this.pos; // 맨 끝에서는 map 바깥으로 빠져나가지 않게
}
}
}
// stepRoad()
setInterval( stepRoad, 10 )
stepRoad = () => {
const row = theMap.children[0].cloneNode(true) // 새로운 row를 맵에서 가장 위의 row에서 복사해 생성
const first = row.children[0]
const firstClass = first.getAttribute("class")
const last = row.children[row.children.length-1]
const lastClass = last.getAttribute("class")
switch ( dRoad() ) { // 새로운 row의 길을 랜덤값에 따라 적절히 이동
case 0: break;
case 1: if ( lastClass=="offroad") { row.prepend(last) } else { row.appendChild(first) } break;
case -1: if (firstClass=="offroad") { row.appendChild(first) } else { row.prepend(last) } break;
}
theMap.children[theMap.children.length-1].remove() // 맵의 맨 아래 row 제거
theMap.prepend(row) // 맵의 맨 위에 새로운 row를 추가
theCar.move() // 자동차 이동
drawCar() // 자동차를 맵에 그림
}
document.addEventListener("keydown", driveCar)
driveCar = e => {
switch (e.code) {
case "KeyJ": theCar.dir =-1; break; // 좌
case "KeyK": theCar.dir = 0; break; // 상 (제자리)
case "KeyL": theCar.dir = 1; break; // 우
default: break;
}
// console.log( theCar )
}
drawCar = () => {
const lastRow = theMap.children[theMap.children.length-1]
lastRow.children[theCar.pos].setAttribute("class","car")
}
// 다음 길을 한칸 왼쪽이나 오른쪽으로 꺾아기나 아니면 그냥 제자리에
// 랜덤하게 생성하기 만들기 위해 -1, 0, 1을 랜덤으로 돌려주는 함수
dRoad = () => {
const r = Math.random();
return (r <= 1/3)? -1: (r > 2/3)? 1: 0;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
