[JavaScript] div 태그를 이용하여 공 움직이기

↓↓ 참고 링크 ↓↓

순수한 자바스크립트를 이용한 2D 벽돌깨기 게임 - 게임 개발 | MDN

 

 

 

내가 참고한 링크는 canvas를 이용하여 벽돌깨기 게임을 만들었는데,

나의 경우에는 딱 공 움직이기 정도만 활용하려고 참고했다.

 

 

 

See the Pen 공 움직이기 by b-sseung (@b-sseung) on CodePen.

 

 

 

참고 페이지를 열심히 참고하면서 만들어서 함수랑은 비슷한 모양이다.

 

 

 

- 변수들 선언 부분 -

const box = document.querySelector(".mainBox");
const boxWidth = box.offsetWidth;
const boxHeight = box.offsetHeight;
const boxX = box.getBoundingClientRect().left;
const boxY = box.getBoundingClientRect().top;
var sign = [-1, 1];

var dx = new Array();
var dy = new Array();

var circles = new Array();

const colors = new Array("#d8d4cb", "#fbc5c3", "#f2c292", "#f6da76",
  "#b1d690", "#b2dac2", "#97d7d7", "#a6ccdf", "#a7bede", "#cab6d2",
  "#f1c2cc", "#f8dfd8", "#f2d9ba", "#fdeca7", "#d3ecc5", "#d7ebdf",
  "#c7e7e6", "#ccdfe6", "#c7d0ed", "#d8ccda");

let numberOfShapes = 10;

 

 

 

- 원 생성 부분 -

window.onload에서는 20개의 원을 생성하기 위해 for문으로 생성 함수를 호출.

원의 크기는 10~50vmin 사이의 크기로 만들기 위해 랜덤 함수를 만들어서 호출.

위치 역시 제각각으로 생성되게 하기 위해서 (부모객체의 크기 - 원의 크기 사이) 사이의 위치를 랜덤으로 출력.

dx와 dy는 원이 움직이게 하기 위해서 만들어졌는데, 원이 움직이는 것은 아래의 draw 함수를 통해 움직이고,

setInterval 을 이용해서 약 0.01초에 한 번씩 2px만큼 움직이도록 설정.

window.onload = function() {
  for (var i = 0; i <= 20; i++) {
    createCircle(i);
  }
}

function createCircle(num) {
  var circle = document.createElement("div");
  circle.classList.add("circle");
  box.appendChild(circle);
  
  var temp = randMinMax(10, 50);
  circle.style.width = temp + "vmin";
  circle.style.height = temp + "vmin";

  circle.style.top = randMax(boxHeight - circle.offsetHeight) + "px";
  circle.style.left = randMax(boxWidth - circle.offsetWidth) + "px";

  var position = randMinMax(0, colors.length-1);
  circle.style.backgroundColor = colors[position];

  colors.splice(position, 1);
  circle.value = num;
  circle.style.zIndex = num;
  circles[num] = circle;

  dx[num] = 2 * sign[randMinMax(0, 1)];
  dy[num] = 2 * sign[randMinMax(0, 1)];

  var interval = setInterval(draw, 10, circle);
}

function randMax(max) {
  return Math.floor(Math.random() * max) + 1;
}

function randMinMax(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

 

 

 

- 원 이동 부분 -

원이 이동은 하되 만약 부모객체 밖으로 넘어가면 안되기 때문에

벽에 부딪히면 방향을 바꾸도록 하였고, 이 부분이 가장 참고한 부분이다.

boxX와 boxY는 각각 부모객체의 left와 top이며, 왼쪽면과 윗면을 나타내고,

boxX + boxWidth와 boxY + boxHeight는 각각 오른쪽면과 아랫면을 나타내는데,

이 때 size인 원의 크기를 뺀 이유는 빼지 않으면 벽 밖으로 나가서 튕기기 때문이다. 그래서 원의 크기만큼은 꼭 빼줘야함.

뭐 이런 식으로 구성해서 만들었다.

function draw(circle) {

  var rect = circle.getBoundingClientRect();
  var x = rect.left; 
  var y = rect.top;
  var size = circle.offsetWidth;
  var num = circle.value;
  var xTemp = dx[num];
  var yTemp = dy[num];

  if(x + xTemp < boxX || x + xTemp > boxX + boxWidth - size) {
    dx[num] = -dx[num];
    xTemp = -xTemp;
  }
  if(y + yTemp < boxY || y + yTemp > boxY + boxHeight - size) {
    dy[num] = -dy[num];
    yTemp = -yTemp;
  }
    
  circle.style.top = (y + yTemp) + "px";
  circle.style.left = (x + xTemp) + "px";
}