과제 피드백
플레이 버튼 누르면 숫자가 자동으로 사라지도록 하기
transition 추가하기
<input type = "text" class = "inputNumber">
숫자 중복 방지
숫자 덜 입력했을 때 경고창
난수 생성 -> 수 3개 입력 -> 플레이 버튼 순으로 진행해야 플레이가 정상적으로 진행되도록
for (var i = 0; i < 9; i++) {
var resultBox = document.createElement("div");
resultBox.id = "result" + (i + 1); // body태그 안에 9개의 id를 가진 div 넣어주기
document.body.appendChild(resultBox);
}result1 ~ result9의 id를 가진 div를 body 부분에 for문을 이용해서 추가한다.
for (var i = 0; i < 9; i++) {
var resultBox = document.getElementById("result" + (i + 1));
resultBox.innerHTML = targetNum * (i + 1);
}result1~result9에 해당하는 div의 정보를 가지고와서 targetNum(input에 입력한 값)을 1부터 9까지 차례로 곱하여 표시한다. 이 두 코드를 합치면
for (var i = 0; i < 9; i++) {
var resultBox = document.createElement("div");
resultBox.id = "result" + (i + 1); // body태그 안에 9개의 id를 가진 div 넣어주기
resultBox.innerHTML = targetNum * (i + 1);
document.body.appendChild(resultBox);
}이렇게 구현할 수 있다.
drag and down 이벤트 구현하기
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="week4_2.css" />
</head>
<body>
<div id="color1" draggable="true"></div>
<div id="color2" draggable="true"></div>
<div id="color3"></div>
E
<div id="destination"></div>
<script>
// window.onload : 따로 이벤트 호출 없이 페이지가 실행될 때 자동으로 실행됨.
window.onload = function () {
var backColor = null;
var color1Div = document.getElementById("color1"); // 태그 안에서 추가할 'ondragstart = Myfunction()'를 script 안에서 지정
color1Div.ondragstart = function () {
backColor = window.getComputedStyle(color1Div).backgroundColor;
// window의 style 문서에서 backgroundColor를 가져옴, 즉 color1의 배경색 값을 가져와 backColor 변수에 넣는다.
};
var destinationDiv = document.getElementById("destination");
destinationDiv.ondragover = function (event) {
// e는 event의 매개변수
// 예외처리해야 drag and drop 이벤트가 실행
event.preventDefault();
};
destinationDiv.ondrop = function () {
destinationDiv.style.backgroundColor = backColor;
};
};
</script>
</body>
</html>
위 세개의 box를 끌어다 밑의 네모에 넣으면 destinatio div의 background 색이 변하도록 한다.
이때 사용할 메소드는 ondragstart, ondragover, ondrag 세 가지이다.
https://doolyit.tistory.com/43
HTML5 드레그&드랍 draggable, ondragstart, ondrop, ondragover
1. draggable 속성 drag & drop 을 가능하게 하려면, 해당 엘리먼트에 draggable 속성을 주어야한다. 2. ondragstart 이벤트 drag 가 시작될 경우에 발생하는 이벤트로서, 보통 drag 되는 엘리먼트의 id 값을..
doolyit.tistory.com
+ window.onload : 제일 먼저 해당 함수가 실행되도록 한다. (함수 빌드를 먼저 해놓은 뒤에 HTML을 구성할 때 함수를 가져다 씀)
colorDiv 변수에 color div의 id를 가져와 박스를 대입한다.
colorDiv.ondragstart = function() 는 <color id = "color" ondragstart = "Function()"> 으로 치환되어 이해하면 된다.
ondragstart에서 backColor 변수에 getComputedStyle(colorDiv).backgroundColor를 대입해서 색상 값을 넣어준다.
이때 getComputedStyle은 외부 CSS를 분리해서 작업하고 있기 때문에 그냥 style을 사용하면 안되고 저렇게 getComputedStyle 메소드로 color 값을 가져오면 되는 것이다.
preventDefualt는 주어진 메소드(예외처리)
그리고 destinationDiv의 인라인 style을 가져와서 backColor를 대입
<과제>
숫자 야구 게임 만들어오기
drag and drop을 이용한 퍼즐 게임
: 시작 버튼 누르면 9칸이 위아래로 만들어지고 위쪽 9칸에 1-9의 랜덤 숫자가 중복 없이 들어간다. 위의 9칸에서 아래 9칸으로 drag and drop을 했을 때 1부터 9까지 차례로 만들어지면 게임 끝. drag and drop은 위 아래 자유롭게 가능. 위 칸끼리도, 아래끼리도 이동가능하며 drag and drop 한 칸에 이미 숫자가 존재하면 옮긴 숫자는 그 칸에 들어가고 원래 그 칸에 있던 숫자는 옮기기 전의 칸에 들어간다.
+ 타이머 기능 포함
'Framework > Front-end' 카테고리의 다른 글
| StageUs 5주차 : 서버 호스팅 및 리눅스, 웹 서버 구축 (0) | 2021.08.07 |
|---|---|
| StageUs 3주차 : 자바스크립트 (0) | 2021.07.24 |
| StageUs 2주차 CSS (0) | 2021.07.17 |
| 크레이지 아케이드 게임용 PC 견적 (0) | 2021.07.17 |
| 웹에 대한 이해, HTML을 이용한 DOM 구조, Semantic과 SEO (0) | 2021.07.13 |
