티스토리 뷰
<!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 |
- Total
- Today
- Yesterday
- 충북대
- JQuery
- 프로젝트
- 게임
- 배열
- 잡담
- 도전과제
- 클래스
- 자바
- CSS
- HTML
- jsp
- 소켓
- 아두이노
- 청주
- 안드로이드
- 오라클
- SQL
- 이론
- SVN
- 자바스크립트
- 알고리즘
- 메모장
- 정보
- ERP
- db
- 데이터베이스
- 파이썬
- 정렬
- 졸업작품
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |