탈

이동하는 글자

· 2012-04-18 (수) 18:14:13 · 3094 · 2
<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;
   }
  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';
 
  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';
   };
   window.onload = function () {
  var movingTexts = [];
  for (var i = 0; i < 100; i++) {
     movingTexts.push(new MovingText());
     }
  setInterval(function () {
     for (var i in movingTexts) {
     movingTexts[i].move();
  }
     }, 1000 / 60);
    };
</script>
 
오류도 없는데 빈화면으로밖에 나오질않네요...
뭐가문제인가요?
|

댓글 2개

소스가 약간씩 모자라거나 열고 닫는 부분이 잘못 되어있네요.
소스를 작성하실때 function 의 시작과 끝을 잘 파악하셔야 하고 무조건 따라 작성하시기 보다는 코드의 흐름을 파악하시고 작성하시는것이 좋을 것 같습니다.

완성소스는 아래와 같습니다.
(참고문헌 : 모던 웹을 위한 javascript jQuery 입문 (윤인성 저) )

<!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>

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.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>
<script>
window.onload = function () {
var movingTexts = [];
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>
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
12-04-26 조회 3,824
12-04-24 조회 3,220
12-04-23 조회 4,552
12-04-22 조회 3,244
12-04-19 조회 3,326
12-04-18 조회 4,383
12-04-18 조회 3,095
12-04-17 조회 3,366
12-04-17 조회 5,122
12-04-16 조회 3,538
12-04-13 조회 3,085
12-04-09 조회 3,154
12-04-04 조회 3,923
12-04-01 조회 3,205
12-03-31 조회 3,594
12-03-30 조회 3,200
12-03-30 조회 3,867
12-03-26 조회 3,475
12-03-26 조회 3,048
12-03-22 조회 3,210
12-03-21 조회 3,063
12-03-19 조회 3,472
12-03-17 조회 3,500
12-03-14 조회 3,232
12-03-10 조회 3,912
12-03-09 조회 3,493
12-03-09 조회 3,321
12-03-08 조회 3,791
12-03-08 조회 3,966
12-03-08 조회 4,057
12-03-03 조회 3,298
12-03-02 조회 4,631
12-02-28 조회 3,168
12-02-27 조회 2,977
12-02-25 조회 3,127
12-02-24 조회 3,836
12-02-23 조회 3,100
12-02-22 조회 3,620
12-02-22 조회 5,394
12-02-22 조회 3,967
12-02-22 조회 4,284
12-02-18 조회 3,772
12-02-17 조회 2,996
12-02-17 조회 3,405
12-02-14 조회 3,476
12-02-13 조회 3,361
12-02-10 조회 1만
12-02-08 조회 3,021
12-02-07 조회 3,358
12-02-06 조회 3,085
12-02-05 조회 3,548
12-01-31 조회 3,473
12-01-30 조회 9,655
12-01-29 조회 3,813
12-01-26 조회 3,416
12-01-25 조회 4,027
12-01-24 조회 3,420
12-01-10 조회 3,733
12-01-10 조회 4,481
12-01-09 조회 3,268
12-01-08 조회 7,128
12-01-08 조회 3,652
12-01-07 조회 5,177
12-01-04 조회 3,886
12-01-02 조회 3,109
12-01-02 조회 3,163
12-01-02 조회 3,468
12-01-01 조회 3,104
11-12-31 조회 3,411
11-12-31 조회 3,084
11-12-30 조회 3,253
11-12-30 조회 3,403
11-12-29 조회 3,616
11-12-28 조회 3,710
11-12-26 조회 3,276
11-12-23 조회 3,501
11-12-22 조회 3,046
11-12-15 조회 4,135
11-12-08 조회 3,952
11-12-05 조회 3,290
11-12-04 조회 5,707
11-12-03 조회 3,567
11-12-02 조회 3,350
11-12-01 조회 5,424
11-11-30 조회 2,912
11-11-30 조회 2,806
11-11-28 조회 3,154
11-11-26 조회 3,333
11-11-25 조회 3,351
11-11-24 조회 2,948
11-11-22 조회 3,037
11-11-22 조회 2,882
11-11-17 조회 2,818
11-11-11 조회 2,817
11-11-09 조회 2,873
11-11-08 조회 3,248
11-11-08 조회 2,542
11-11-04 조회 3,625
11-11-01 조회 2,930
11-10-26 조회 2,518