연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~59일차 대상(원형기초)의 복습~

14655 단어 JavaScript

개시하다


안녕하세요@70days_js
나는 어제 기억한 대상을 복습했다.
59일째.(2019/12/16)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


복습 대상.
남성 이름과 여성 이름의 데이터를 미리 준비하면 무작위로 대상이 생성된다.
(모든 재부팅은 무작위로 표시됨)

html↓
 <body></body>
css↓
.page {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 30px 10px 10px 10px;
}
JavaScript(72줄 사용)↓
let canvas = document.getElementById("canvas"),
  order = 0,
  humanName = [["men1", "men2", "men3"], ["women1", "women2", "women3"]],
  men = humanName[0].length,
  woman = humanName[1].length,
  num = men + woman,
  hairetu = [],
  menOrwoman = ["men", "woman"];

function Human(id, sex, name) {
  this.initialize(id, sex, name);
}

Human.prototype.greet = function() {
  let idDiv = document.getElementById(this.id);
  idDiv.innerHTML =
    "Hello, I'm " +
    this.name +
    "<br>My sex is " +
    this.sex +
    "<br>id is " +
    this.id;
  if (this.sex === "men") {
    idDiv.style.backgroundColor = "blue";
  }
};

function render() {
  hairetu.forEach(function(object) {
    object.greet();
  });
}

Human.prototype.initialize = function(id, sex, name) {
  this.sex = menOrwoman[sex];
  this.id = id;
  this.name = name;
};

function createHuman() {
  let id = order;
  let sex;
  if (men <= 0) {
    sex = 1;
    woman--;
  } else if (woman <= 0) {
    sex = 0;
    men--;
  } else {
    sex = Math.round(Math.random());
    if (sex === 0) men--;
    if (sex === 1) woman--;
  }
  let number;
  if (menOrwoman[sex] === "men") number = Math.floor(Math.random() * men);
  if (menOrwoman[sex] === "woman") number = Math.floor(Math.random() * woman);
  let name = humanName[sex][number];
  humanName[sex].splice(number, 1);
  let human = new Human(id, sex, name);
  hairetu.push(human);
  let div = document.createElement("div");
  div.setAttribute("class", "page");
  div.setAttribute("id", order);
  order++;
  document.body.appendChild(div);
}

for (var i = 0; i < num; i++) {
  createHuman();
}

render();
핵심은 구조기를 준비하고 인티리얼즈로 초기값을 입력하며 프로타입을 통해 좋아하는 방법을 입력하는 것이다.
구조기↓
function Human(id, sex, name) {
this.initialize(id, sex, name);
}
initialize↓
Human.prototype.initialize = function(id, sex, name) {
this.sex = menOrwoman[sex];
this.id = id;
this.name = name;
};
방법↓
Human.prototype.greet = function() {
...
}
이번에는 남녀의 이름이 다차원적으로 배열되었다.↓
humanName = [["men1", "men2", "men3"], ["women1", "women2", "women3"]]
huumanName[0]는 남자, huumanName[1]은 여자다.
여기에 원하는 이름을 입력하면, 다시 불러올 때 모든 이름의 대상을 무작위로 생성합니다.

감상


나는 연말까지 침략자 게임과 오셀로를 완성하고 싶다.
상대를 대하는 법을 배우면 될 것 같아서...그렇게 지도 모른다, 아마, 아마...
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
웹 셰어 API를 사용하여 페이지 공유 시도
비욘을 개발 중입니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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