티스토리 뷰
<!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>
'java,web study > 6주차 (8월 5일~8월 11일)' 카테고리의 다른 글
| 130808 실습코드 (0) | 2013.08.08 |
|---|---|
| 자바스크립트로 지구 공전 애니메이션 만들기 (0) | 2013.08.08 |
| 130807 실습코드 (0) | 2013.08.08 |
| BOM (자재명세서) (0) | 2013.08.06 |