연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~71일차 대상, 엔화, 발행~

17563 단어 JavaScript

개시하다


안녕하세요@70days_js
마우스 위치에 원을 세우고 놓기 버튼을 누르면 원이 움직인다.
원 경계선 버튼을 사용하여 원을 제거합니다.(gif)↓

오늘이 71일째야.(2019/12/28)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


마우스의 위치에 원을 세우고 놓기 버튼을 누르면 원이 움직여 포지셔닝 버튼으로 원이 사라진 것을 만든다.
html↓
  <body>
    <input type="button" value="delete" id="delete" />
    <input type="button" value="release" id="release" />
    <canvas id="canvas"></canvas>
  </body>
> 단추와 canvas만 있습니다.
css↓
body {
  margin: 0;
  background-color: black;
}

#delete {
  position: absolute;
  left: 10px;
  top: 10px;
}

#release {
  position: absolute;
  left: 100px;
  top: 10px;
}
css에서 단추의 위치를 변경했습니다.
JavaScript↓
let canvas = document.getElementById("canvas"),
  myDelete = document.getElementById("delete"),
  myRelease = document.getElementById("release"),
  ctx = canvas.getContext("2d"),
  twidth = (canvas.width = window.innerWidth),
  theight = (canvas.height = window.innerHeight),
  chars = [],
  mode;

function Circle(ctx, x, y) {
  this.size = 10;
  this.ctx = ctx;
  this.x = x;
  this.y = y;
  this.r = Math.floor(Math.random() * 256);
  this.g = Math.floor(Math.random() * 256);
  this.b = Math.floor(Math.random() * 256);
  this.a = Math.ceil(Math.random() * 10);
  this.v = Math.ceil(Math.random() * 10);
}

Circle.prototype.potision = function() {
  this.x += this.v;
  this.y += this.v;

  if (this.x < 0 + this.size) this.v *= -1;
  if (this.x > twidth - this.size) this.v *= -1;
  if (this.y < 0 + this.size) this.v2 *= -1;
  if (this.y > theight - this.size) this.v2 *= -1;
};

Circle.prototype.render = function() {
  this.draw();
  if (mode === true) this.potision();
};

Circle.prototype.draw = function() {
  let ctx = this.ctx,
    color = this.r + "," + this.g + "," + this.b + "," + this.a;

  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  ctx.fillStyle = "rgba(" + color + ")";
  ctx.fill();
  ctx.closePath();
};

document.body.addEventListener("mousemove", returnMousePosition);
function returnMousePosition(e) {
  let char = new Circle(ctx, e.pageX, e.pageY);
  chars.push(char);
}

function render() {
  ctx.clearRect(0, 0, twidth, theight);
  ctx.fill();
  for (var i = 0; chars.length > i; i++) {
    let char = chars[i];
    char.render();
  }

  requestAnimationFrame(render);
}
myRelease.addEventListener("click", function() {
  mode = true;
});

myDelete.addEventListener("click", function() {
  chars.length = 0;
});

render();
발행에 관해서는 단추를 누르면 이벤트에서 모드라는 변수의 값을 진짜로 바꾸어 시작합니다.↓
myRelease.addEventListener("click", function() {
mode = true;
});
방법 부분에서 모드를 판정하고 있습니다.↓
Circle.prototype.render = function() {
this.draw();
if (mode === true) this.potision();//← 여기.거짓이라면 움직이지 않을 겁니다.
};
경계 문자는 대상 그룹의 값만 0으로 설정합니다.↓
myDelete.addEventListener("click", function() {
chars.length = 0;
});

감상


발매 시점부터 움직이는 방향이 규칙적이기 때문에 뭐라도 해볼 방법을 강구한다.
어떡하죠?
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
연말까지 매일 웹 사이트를 꾸준히 제작하는 대학생~70일차 대상과 문자 입력~
지원되는 날짜와 시간을 연월일과 분초로 통일

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage