연말까지 매일 웹 사이트를 꾸준히 제작하는 대학생~70일차 대상과 문자 입력~

18062 단어 JavaScript

개시하다


안녕하세요@70days_js
문자를 입력한 후 화면에 나타나 오른쪽에 도착하면 멈추는 것.↓(gif)

오늘은 70일째다.(2019/12/27)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


문자를 입력한 후 화면에 나타나 오른쪽에 도착하면 멈추는 것.
html↓
  <body>
    <canvas id="canvas"></canvas>
  </body>
css↓
body {
  margin: 0;
  background-color: black;
}
JavaScript↓
let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  twidth = (canvas.width = window.innerWidth),
  theight = (canvas.height = window.innerHeight),
  chars = [],
  x,
  y;

function Character(ctx, e) {
  this.size = Math.random() * 100 + 10;
  this.ctx = ctx;
  this.x = twidth / 2;
  this.y = theight / 2;
  this.v = Math.ceil(Math.random() * 10);
  this.v2 = Math.ceil(Math.random() * 10);
  this.char = String.fromCharCode(e.keyCode);
  this.direction = Math.ceil(Math.random() * 2);
  this.mode = true;
}

Character.prototype.render = function() {
  this.draw();
  this.syukaku(x, y);
  this.potision();
};

Character.prototype.potision = function() {
  if (this.direction === 1 && this.mode === true) {
    this.x += this.v;
    this.y += this.v2;
  } else if (this.mode === true) {
    this.x -= this.v;
    this.y -= this.v2;
  }
  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;
};
Character.prototype.syukaku = function(x, y) {
  if (this.x > twidth - this.size) {
    this.mode = false;
  }
};
Character.prototype.draw = function() {
  let ctx = this.ctx;
  ctx.beginPath();
  ctx.fillStyle = "rgba(20,136,131,1)";
  ctx.font = this.size + "px Arial";
  ctx.fill();
  ctx.fillText(this.char, this.x, this.y);
  ctx.closePath();
};

document.addEventListener("keydown", logKey, false);

function logKey(e) {
  if (e.keyCode < 65 || e.keyCode > 91) {
    return false;
  } else {
    let char = new Character(ctx, e);
    chars.push(char);
  }
}

document.body.addEventListener("mousemove", returnMousePosition);
function returnMousePosition(e) {
  x = e.pageX;
  y = e.pageY;
}

function render() {
  fontSize = Math.random() * 100;
  ctx.clearRect(0, 0, twidth, theight);
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI * 2);
  ctx.fillStyle = "rgba(20, 136, 131, 1)";
  ctx.fill();
  ctx.closePath();
  for (var i = 0; chars.length > i; i++) {
    let char = chars[i];
    char.render();
  }

  requestAnimationFrame(render);
}

render();
mousemove 이벤트는 마우스의 위치만 표시합니다.녹색 원형은 마우스의 위치다.
대상에this가 있습니다.모델 속성을 가지고 있습니다. 이 값이 사실이라면 계속 이동하고 가짜라면 멈추십시오.
다음 줄에서 진행을 중지합니다.↓
if (this.x > twidth - this.size) {
this.mode = false;
}

감상


오세로는 아직 전혀 할 줄 모른다.급하지 않으면
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
하나의div는 200px이다.다른 div가 남은 페이지를 어떻게 채우는지
연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~71일차 대상, 엔화, 발행~

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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