728x90
300x250
SMALL
요구사항)
01. 일정 시간 동안 누가 물고기를 많이 클릭하는지 알아보는 게임
02. 물고기 클릭 시 점수 1점 증가 후 화면에 출력
03. 물고기 위치를 0.5초마다 한 번씩 랜덤하게 움직이도록
04. 10초 후 게임 종료
물고기 움직이는 방법
$fish.css({
left:x축으로 물고기 위치,
top:y축으로 물고기 위치
});
단계01_요소 초기화
<script>
var count =0; //1
var $score = null;
var $fish = null;
var playing= true; //2
$(document).ready(function(){
// 요소 초기화
init(); //4
});
// 전역에서 사용할 요소 초기화.
function init(){ //3
$score = $("#score");
$fish = $("#fish");
}
</script>
</head>
<body>
<div>
<button id="start">게임 시작</button>
현재점수 <span id="score">0</span>
</div>
<div class="panel">
<img src="fish1.png" id="fish">
</div>
</body>물고기, 점수, 게임시작 유뮤, 현재점수 변수 초기화
문서를 시작하면 init()함수 불러오기
변수에 값 넣어주기
단계02_랜덤하게 물고기 움직이기
<script>
var count =0;
var $score = null;
var $fish = null;
var playing= false;
var timerID=0; //5
$(document).ready(function(){
// 요소 초기화
init();
startGame(); //7
});
// 전역에서 사용할 요소 초기화.
function init(){
$score = $("#score");
$fish = $("#fish");
}
// 물고기 움직이기
function moveFish(){//1
/*
물고기 크기 120*70
패널 크기 600*400
물고기 x 이동 영역 0~ 480 (600-120)
물고기 y 이동 영역 0~ 330 (400-70)
*/
var x = Math.floor(Math.random()*480); //2
var y = Math.floor(Math.random()*330);
$fish.css({//3
left:x,
top:y
})
}
// 게임 시작
function startGame(){//4
timerID = setInterval(function(){//6
// 물고기 움직이기
moveFish();
}, 500)
}게임 시작 함수를 만들어서
- timerID 변수 추가
- setInterval(일정시간 마다 주기적으로 특정 구문 실행) 0.5초 마다 moveFish함수 실행
- moveFish함수 Math.random()로 랜덤한값을 구한다.
이 때 물고기 움직이는 영역은
x축 최대 위치 = 패널너비-물고기 너비
y축 최대 위치 = 패널높이 -물고기 높이
즉 최대위치는 480*330이 된다.
단계03_시작버튼 클릭시 게임 시작하기
<script>
var count =0;
var $score = null;
var $fish = null;
var playing= false;
var timerID=0;
$(document).ready(function(){
// 요소 초기화
init();
//startGame(); //3
initEvent(); //4
});
// 전역에서 사용할 요소 초기화.
function init(){
$score = $("#score");
$fish = $("#fish");
}
// 물고기 움직이기
function moveFish(){
/*
물고기 크기 120*70
패널 크기 600*400
물고기 x 이동 영역 0~ 480 (600-120)
물고기 y 이동 영역 0~ 330 (400-70)
*/
var x = Math.floor(Math.random()*480);
var y = Math.floor(Math.random()*330);
$fish.css({
left:x,
top:y
})
}
// 게임 시작
function startGame(){
// 게임이 시작하지 않은 경우에만 동작할 수 있게 처리
if(playing==false){ //2
playing=true;
timerID = setInterval(function(){
// 물고기 움직이기
moveFish();
}, 500)
}
}
function initEvent(){ //1
$("#start").click(function(){
startGame();
})
}
</script>
</head>
<body>
<div>
<button id="start">게임 시작</button>
현재점수 <span id="score">0</span>
</div>
<div class="panel">
<img src="fish1.png" id="fish">
</div>
</body>- initEvent 함수를 추가해서 버튼을 클릭하면 startGame을 실행하도록
- startGame를 실행했을때 playing가 false이면 true로 변경하고 게임시작
단계04_ 물고기 클릭 시 점수 증가 처리
<script>
var count =0;
var $score = null;
var $fish = null;
var playing= false;
var timerID=0;
$(document).ready(function(){
// 요소 초기화
init();
//startGame();
initEvent();
});
// 전역에서 사용할 요소 초기화.
function init(){
$score = $("#score");
$fish = $("#fish");
}
// 물고기 움직이기
function moveFish(){
/*
물고기 크기 120*70
패널 크기 600*400
물고기 x 이동 영역 0~ 480 (600-120)
물고기 y 이동 영역 0~ 330 (400-70)
*/
var x = Math.floor(Math.random()*480);
var y = Math.floor(Math.random()*330);
$fish.css({
left:x,
top:y
})
}
// 게임 시작
function startGame(){
// 게임이 시작하지 않은 경우에만 동작할 수 있게 처리
if(playing==false){
playing=true;
timerID = setInterval(function(){
// 물고기 움직이기
moveFish();
}, 500)
}
}
function initEvent(){
$("#start").click(function(){
startGame();
})
$("#fish").click(function(){ //2
addScore();
}
}
// 점수 증가 처리
function addScore(){ //1
if(playing==true){
// 점수 증가
count++;
$score.html(count);
}
}- #fish를 클릭했을때 addScore 함수 추가
- addScroe()함수가 실행되면 playing이 true이면 count++된다
- count의 점수는 $score에 들어간다.
단계05_게임종료
5초후 게임이 종료되는 기능 구현
<script>
var count =0;
var $score = null;
var $fish = null;
var playing= false;
var timerID=0;
$(document).ready(function(){
// 요소 초기화
init();
//startGame();
initEvent();
});
// 전역에서 사용할 요소 초기화.
function init(){
$score = $("#score");
$fish = $("#fish");
}
// 물고기 움직이기
function moveFish(){
/*
물고기 크기 120*70
패널 크기 600*400
물고기 x 이동 영역 0~ 480 (600-120)
물고기 y 이동 영역 0~ 330 (400-70)
*/
var x = Math.floor(Math.random()*480);
var y = Math.floor(Math.random()*330);
$fish.css({
left:x,
top:y
})
}
// 게임 시작
function startGame(){
// 게임이 시작하지 않은 경우에만 동작할 수 있게 처리
if(playing==false){
// 게임 종료 체크 하기
checkEndGame(); //3
playing=true;
timerID = setInterval(function(){
// 물고기 움직이기
moveFish();
}, 500)
}
}
function initEvent(){
$("#start").click(function(){
startGame();
})
$("#fish").click(function(){
addScore();
})
}
// 점수 증가 처리
function addScore(){
if(playing==true){
// 점수 증가
count++;
$score.html(count);
}
}
// 게임 종료 유무 처리 하기
function checkEndGame(){ //1
// 게임을 5초후에 종료시켜 줍니다.
setTimeout(function(){
playing=false;
// 물고기 움직이는 타이머 제거
clearInterval(timerID);//2
alert("게임이 종료 되었습니다.")
},5000)
}
</script>
</head>
<body>
<div>
<button id="start">게임 시작</button>
현재점수 <span id="score">0</span>
</div>
<div class="panel">
<img src="fish1.png" id="fish">
</div>
</body>- 게임 종료를 처리하는 checkEndGame()함수를 신규로 만든다.
- 게임 종료 처리 시 물고기를 랜덤하게 움직이는 타이머를 반드시 제거해 줘야 한다.
- 게임 시작시 checkEndGame()함수를 호출해 10초 후 게임이 종료될 수 있게 만들어 준다.
728x90
반응형
LIST
'javaScript > JS Examples' 카테고리의 다른 글
| 위로가기 스크립트 (0) | 2021.06.27 |
|---|---|
| 공백 없애기 함수로 만들기 (0) | 2019.09.01 |
| 랜덤으로 배경이미지 변경하기 (0) | 2019.08.25 |
| 타이머 함수 : 심플배너만들기2 (0) | 2019.08.10 |
| 타이머 함수 : 심플이미지 배너 (0) | 2019.08.09 |
댓글