티스토리 뷰

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>example</title>


<!-- 보조 함수 -->

<script>


function nextRandomInteger(limit){

return Math.round(Math.random() * limit);

}


//랜덤한 알파벳을 리턴하는 함수

var alphabet = 'ABCDEFGHIJKLMNOPQRSTU김동철';

function randomAlphabet(){

return alphabet.charAt(nextRandomInteger(25));

}


//양음으로 랜덤한 속도를 생성하는 함수

function randomSpeed(maxSpeed){

return Math.random() * maxSpeed - Math.random() * maxSpeed;

}

</script>

<!-- 생성자 함수 -->

<script>

//MovingText의 생성자 함수

var canvasWidth = 700;

var canvasHeight = 500;


function MovingText(){

this.x = nextRandomInteger(canvasWidth);

this.y = nextRandomInteger(canvasHeight);

this.vX = randomSpeed(10);

this.vY = randomSpeed(10);

//문서 객체 생성

this.body = document.createElement('h1');

this.body.innerHTML = randomAlphabet();

this.body.style.position = 'absolute';


//문서 객체를 document.body에 추가

document.body.appendChild(this.body);

}


MovingText.prototype.move = function(){

//범위 검사

if (this.x <0 || this.x > canvasWidth) {this.vX *=-1;}

if (this.y <0 || this.y > canvasHeight) {this.vY *=-1;}


//이동

this.x +=this.vX;

this.y +=this.vY;


//화면에 이동 표시

this.body.style.left = this.x + 'px';

this.body.style.top = this.y + 'px';

}

</script>


<!-- window.onload -->

<script>

window.onload = function(){

//변수 선언

var movingTexts = [];


//배열에 MovingText 객체 100개 생성

for(var i=0;i<100;i++){

movingTexts.push(new MovingText());

}

//움직입니다.

setInterval(function(){

for(var i in movingTexts){

movingTexts[i].move();

}

},1000/60);

}

</script>

</head>

<body>

</body>

</html>

example

'java,web study > 6주차 (8월 5일~8월 11일)' 카테고리의 다른 글

130808 실습코드  (0) 2013.08.08
미쳐날뛰는 글자  (0) 2013.08.08
자바스크립트로 지구 공전 애니메이션 만들기  (0) 2013.08.08
130807 실습코드  (0) 2013.08.08
BOM (자재명세서)  (0) 2013.08.06
댓글
댓글쓰기 폼