글자들이 네모난 공간에서 계속 움직인다. 이전에 테트리스를 만들어보던 때가 생각난다.
<!DOCTYPE html>
<html>
<head>
<!-- 보조 함수 -->
<script>
// 랜덤한 정수를 생성합니다.
function nextRandomInteger(limit) {
return Math.round(Math.random() * limit);
}
// 랜덤한 알파벳을 리턴하는 함수입니다.
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
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>
내가 만든게 아니므로 링크를 걸어두자.
'Javascript' 카테고리의 다른 글
| 소셜네트워크에 글올리기 (0) | 2012.12.10 |
|---|---|
| 스크립트로 form 관리 (0) | 2012.07.20 |
| 문서 객체를 이용한 움직임 구현 (0) | 2012.07.09 |
| 문서 객체를 배열로 가져오기 (0) | 2012.07.09 |
| IE에서 innerHTML로 내용을 바꿀 수 없는 태그들 (0) | 2012.07.06 |