[자바스크립트] 공튀기기

바운스 바운스 (브라우저 1920*1080에 최적)

※모바일 안되고 웹에서만 가능합니다.

START Bounce

조종하기 a : 왼쪽 / d : 오른쪽 (영어만)

스타트 버튼(=공) 과 조종하기 버튼, 키 이벤트를 처리할 input 태그 생성

<div id='div01' onclick='ex01()' style='background-color:#FFFFFF; position:absolute; top:150px; left:800px; display:inline-block; border-radius:0px; border:1px solid #5AAFFF; width:300px;height:200px; color:#5AAFFF; font-weight:bold; font-size:20pt; padding-top:100px;'>
    START Bounce
</div>
<div id='ballControlBtn' onclick='focusToKeyEventInput()' style='border:1px solid #CCCCCC;'>
    조종하기
</div>
<input id='keyEventInput' type='text' onkeypress='keyEventFunc(event)' onfocus='btnFocuson()' onblur='btnFocusout()' style='opacity:0;'>

힘과 방향에 대한 전역 변수 선언

var v = 0.1;    //중력
var F = 0.1;    //왼쪽 오른쪽에 가할 힘
var LR = 0;        //왼쪽 른쪽 방향을 나타내는 변수

버튼을 동그랗게 만들 함수

function toCircle(){
    var div01 = document.getElementById('div01');
    var px = parseInt(div01.style['border-radius'])+1;
    if(px <= 150) {
        div01.style['border-radius'] = px+'px';
    }
}

버튼을 작게 만들 함수

function toSmall(){
    var div01 = document.getElementById('div01');
 
    //start 지우기
    div01.style['padding-top'] = '0px';
    div01.innerHTML = '';
 
    var px = parseInt(div01.style['width'])-1.5;
    if(px >= 70) {
        div01.style['width'] = px+'px';
        div01.style['height'] = px+'px';
    }
}

버튼에 색을 입힐 함수

function toColorful() {
    var div01 = document.getElementById('div01');
            
    var backgroundColor = div01.style['backgroundColor'];
    var startIdx = backgroundColor.indexOf('(')+1;
    var endIdx = backgroundColor.indexOf(')');
            
    var rgb = backgroundColor.substring(startIdx, endIdx).split(',');
 
    rgb[0] -= (rgb[0] >90) ? 1 : 0;
    rgb[1] -= (rgb[0] >175) ? 1 : 0;
 
    div01.style['backgroundColor'] = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
}

중력을 표현할 함수

function gravity() {
    var div01 = document.getElementById('div01');
 
    v += (v < 5) ? 0.1:0;
 
    var px = parseInt(div01.style['top'])+1*v;
    if(px <= 839) {
        div01.style['top'] = px+'px';
    }else {
        heatFloor();
    }
}

왼쪽 또는 오른쪽으로 힘을 받는것을 표현한 함수

function getForce() {            
    var div01 = document.getElementById('div01');
 
    F += (F < 1) ? 0.01*LR : 0;
 
    var px = parseInt(div01.style['left'])+1*F*LR;
    if(px <= 1500 && px >= 700) {
        div01.style['left'] = px+'px';
    }else {
        heatWall();
    }
}

벽이나 바닥에 부디쳤을 때 방향 전환을 표현할 함수

function heatFloor(){
    v = -v;
}
 
function heatWall(){
    LR = -LR;
}

키 이벤트 발생 시 방향 전환 처리에 대한 함수

function focusToKeyEventInput(){
    document.getElementById('keyEventInput').focus();
}
 
function keyEventFunc(e) {
    if(e.keyCode==65 || e.keyCode==97){
        LR = -1;
        clearInterval(inter05);
        inter05 = setInterval(getForce, 1);
    }else if(e.keyCode==68 || e.keyCode==100){
        LR = 1;
        clearInterval(inter05);
        inter05 = setInterval(getForce, 1);
    }
    document.getElementById('keyEventInput').value = '';
}

키 이벤트 발생 시 버튼의 CSS 효과 주는 함수

function btnFocuson(){
    ballControlBtn.style['backgroundColor'] = '#5AAFFF';
    ballControlBtn.style['color'] = 'white';
}
function btnFocusout(){
    ballControlBtn.style['backgroundColor'] = 'white';
    ballControlBtn.style['color'] = '#5AAFFF';
}

START 버튼 클릭 시 공을 움직이는 타이머 시작하는 함수

function ex01() {
    var inter01 = setInterval(toCircle, 10);    
    setTimeout(function(){
        clearInterval(inter01);
    }, 2000);
 
    var inter02 = setInterval(toSmall, 10);    
    setTimeout(function(){
        clearInterval(inter02);
    }, 2000);
 
    var inter03 = setInterval(toColorful, 15);    
    setTimeout(function(){
        clearInterval(inter03);
        var inter04 = setInterval(gravity, 1);
    }, 2000);
 
    setTimeout(function(){
        inter05 = setInterval(getForce, 1);
    }, 2000);
}