문제1. 버튼을 클릭할때마다 캐릭터가 달릴 수 있도록 프로그래밍 해보세요.
사용 이미지 : run1.png / run2.png / run3.png
문제2. 버튼을 클릭시 캐릭터가 자동으로 달릴 수 있도록 프로그래밍 해보세요
문제3. 버튼을 클릭시 캐릭터가 달리기를 멈출 수 있도록해보세요.
문제4. 자동으로 달리기 버튼을 여러번 클릭해도 멈추기 버튼이 동작하고,
멈추기 버튼을 클릭한 뒤에도 자동으로 달리기 버튼이 실행될 수 있도록 해주세요
문제5. 자동달리기 버튼을 클릭했을 때 캐릭터가 달리면서 앞으로 나갔다가 어느정도 뒤에 뒤로 올 수 있도록 처리해주세요.
목적1. 사용할 img파일을 배열로 나열하고 함수 실행시 사용할 수 있다.
목적2. 변수를 적절한 위치에 설정할 수 있다.
목적3. if 구문을 사용할 수 있다.
목적4. javascript로 HTML 문서 객체의 속성(Attribute) 접근 및 수정하기 setAttribute("속성명", "속성값");
목적5. 내장 객체인 setInterval(function(){}, num);를 이해하고 사용할줄 안다. - n초(num) 마다 함수가 call 됨.
목적6. clearInterval(); 메소드를 이해하고 사용할 줄 안다.
목적7. 상태값(state) 을 관리할 수 있다.
답1
<body>
<!-- button과 이미지를 넣어 준다. -->
<button onclick="run();">달리기</button>
<button onclick="autoRun();">자동으로 달리기</button>
<button onclick="stop();">멈추기</button>
<br/>
<img src="./images/run1.png" id="one">
<script>
/*
run1.png, run1.png, run1.png를 사용.
1. 달리기 버튼을 클릭할때마다 이미지 사진이 바껴야함.
2. run1~3까지 있으므로 자동으로 바뀌도록 처리되어야함.
이미지가 순서대로 나와야 달리는게 자연스러움으로 순서대로 이미지가 나와야 좋음.
*/
var ninja=["./images/run1.png", "./images/run2.png", "./images/run3.png"];
var ninjaIndex=0;
var run=function(){
//3. 버튼을 클릭할때마다 배열에 있는 이미지 사진이 순차적으로 불러와져야함.
ninjaIndex=ninjaIndex+1;
//5. 배열0~2방이 반복적으로 출력되게 해야함.
if(ninjaIndex==3){
ninjaIndex=0;
}
//4. setAttribute("속성명", "속성값");의 속성값을 변수에 담아 자동으로 바뀌게
document.querySelector("#one").setAttribute("src", ninja[ninjaIndex]);
};
</script>
</body>
답2
<body>
<!-- button과 이미지를 넣어 준다. -->
<button onclick="run();">달리기</button>
<button onclick="autoRun();">자동으로 달리기</button>
<button onclick="stop();">멈추기</button>
<br/>
<img src="./images/run1.png" id="one">
<script>
/*
<<문제1>>
run1.png, run1.png, run1.png를 사용.
1. 달리기 버튼을 클릭할때마다 이미지 사진이 바껴야함.
2. run1~3까지 있으므로 자동으로 바뀌도록 처리되어야함.
이미지가 순서대로 나와야 달리는게 자연스러움으로 순서대로 이미지가 나와야 좋음.
*/
var ninja=["./images/run1.png", "./images/run2.png", "./images/run3.png"];
var ninjaIndex=0;
var run=function(){
ninjaIndex=ninjaIndex+1;
if(ninjaIndex==3){
ninjaIndex=0;
}
document.querySelector("#one").setAttribute("src", ninja[ninjaIndex]);
};
//run 함수를 활용해서 자동으로 달리기 실행해보기
var autoRun=function(){
/*
HTML문서 img#one에 접근하여
setInterval(function(){}, num); 로 run함수를 call하기
*/
setInterval(run, 50);
};
</script>
</body>
답3, 4
<body>
<!-- button과 이미지를 넣어 준다. -->
<button onclick="run();">달리기</button>
<button onclick="autoRun();">자동으로 달리기</button>
<button onclick="stop();">멈추기</button>
<br/>
<img src="./images/run1.png" id="one">
<script>
var ninja=["./images/run1.png", "./images/run2.png", "./images/run3.png"];
var ninjaIndex=0;
var run=function(){
ninjaIndex=ninjaIndex+1;
if(ninjaIndex==3){
ninjaIndex=0;
}
document.querySelector("#one").setAttribute("src", ninja[ninjaIndex]);
};
/*
<<문제2>>
run 함수를 활용해서 자동으로 달리기 실행해보기
*/
/*
1. HTML문서 img#one에 접근하여
setInterval(function(){}, num);
ㄴ 함수를 n초 마다 한번씩 자동실행하는 코드
로 run함수를 call하기
*/
var intervalId;
var isMoving=false;
var autoRun=function(){
if(isMoving==true){
return;
}
intervalId=setInterval(run, 50);
isMoving=true;
};
/*
<<문제3>>
멈추기 버튼으로 달리는 캐릭터 멈추기
clearInterval(setInterval의 아이디 값);은 함수의 자동실행을 중지해준다.
*/
/*
1. setInterval();은 함수를 call할때마다 아이디 값을 return한다.
2. clearInterval에는 autoRun함수안에 있는 setInterval의 아이디 값을 담아줘야 캐릭터가 멈춘다.
3. setInterval의 아이디 값을 변수에 담고 stop함수에서도 사용할 수 있도록 전역변수를 설정해주기
*/
var stop=function(){
clearInterval(intervalId);
isMoving=false;
};
/*
<<문제4>>
자동으로 달리기 버튼을 여러번 클릭해도 멈추기 버튼이 동작하고,
멈추기 버튼을 클릭한 뒤에도 자동으로 달리기 버튼이 실행될 수 있도록 해주세요
1. 자동으로 달리기 button을 여러번 클릭할 경우, 멈추기 버튼을 눌러도 캐릭터가 멈추지 않는다.
2. 이유 : setInterval();은 함수를 call할때마다 새로운 아이디 값을 return하기때문
3. 멈추기 버튼을 동작하게 하려면 setInterval();이 새로운 아이디 값을 생성하지 않게 만들어 줘야한다.
4. 캐릭터 상태는 달리는 상태와 멈춰 있는 상태 2가지가 있다.
5. 캐릭터가 달리는 상태에서는 조건문을 사용해 버튼 클릭이 되지 않게 하면된다.
(1)페이지가 로딩되는 시점에 isMoving이라는 변수에 false로 주고
(2)autoRun함수에 if 구문을 넣어 준다.
변수로 기본값을 false로 정해주고, 달릴때(true)는 버튼이 동작하지 않도록 처리한다.
(3)autoRun함수에만 if 구문을 넣어주면 stop함수를 call한뒤에 다시 자동달리기를 할 수 없다.
이유: autoRun함수에서 if구문을 활욯해서 isMoving 변수가 true로 되게 해놓았기때문.
(4)따라서 stop함수를 call 했을때 isMoving 변수가 다시 false가 되도록 코드를 만들어줘야함.
*/
</script>
</body>
답5
<body>
<!-- button과 이미지를 넣어 준다. -->
<button onclick="run();">달리기</button>
<button onclick="autoRun();">자동으로 달리기</button>
<button onclick="stop();">멈추기</button>
<br/>
<img src="./images/run1.png" id="one">
<script>
/*
<<문제1>>
*/
var ninja=["./images/run1.png", "./images/run2.png", "./images/run3.png"];
var ninjaIndex=0;
var moveLeft=0;
var step=10;
var run=function(){
ninjaIndex=ninjaIndex+1;
if(ninjaIndex==3){
ninjaIndex=0;
}
moveLeft=moveLeft+step;
if(moveLeft==300){
step=-10;
}
if(moveLeft==0){
step=10;
}
document.querySelector("#one").style.marginLeft=moveLeft+"px";
document.querySelector("#one").setAttribute("src", ninja[ninjaIndex]);
};
/*
<<문제2>>
run 함수를 활용해서 자동으로 달리기 실행해보기
*/
var intervalId;
var isMoving=false;
var autoRun=function(){
if(isMoving==true){
return;
}
intervalId=setInterval(run, 50);
isMoving=true;
};
/*
<<문제3>>
멈추기 버튼으로 달리는 캐릭터 멈추기
clearInterval(setInterval의 아이디 값);은 함수의 자동실행을 중지해준다.
*/
var stop=function(){
clearInterval(intervalId);
isMoving=false;
};
/*
<<문제4>>
자동으로 달리기 버튼을 여러번 클릭해도 멈추기 버튼이 동작하고,
멈추기 버튼을 클릭한 뒤에도 자동으로 달리기 버튼이 실행될 수 있도록 해주세요
*/
/*
<<문제5>
자동달리기 버튼을 클릭했을 때
캐릭터가 달리면서 앞으로 나갔다가 어느정도 뒤에 뒤로 올 수 있도록 처리해주세요.
1. run 함수 안에 있는 이미지 파일이 setInterval함수에 의해 자동으로 출력되에 되어 있으므로
margin값도 자동으로 증감하려면 run 함수안에 코드를 작성해 주어야함.
2. 코스 작성시 증감할 margin 값을 변수로 주고 if 구문을 통해 margin을 얼만큼 증감할지 정해준다.
*/
</script>
</body>'Javascript' 카테고리의 다른 글
| key값과 value 값 (0) | 2019.11.06 |
|---|---|
| IF 구문 (0) | 2019.11.06 |
| 그림을 사방으로 움직이고, 회전, 리셋 시켜 보기 (0) | 2019.11.05 |
| 버튼 클릭시 자동 계산 되도록하기 (0) | 2019.11.05 |
| 입력된 내용 출력하기 (0) | 2019.11.05 |
