jquery-32: 물고기 게임
물고기게임 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>물고기</title>
<style>
#panel {
width: 600px;
height: 300px;
border: 2px solid #999;
position: relative;
}
#bar {
position: absolute;
left: 50px;
top: 190px;
width: 500px;
height: 20px;
background: #f00;
}
#fish {
position: absolute;
left: 50px;
top: 120px;
}
#nav {
text-align: center;
width: 600px;
margin-top: 20px;
}
#btnStart, #btnStop {
font-size: 20px;
font-weight: bold;
}
</style>
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
//전역변수를 선언과 동시에 초기화
var $fish = null;
//이동할 거리
var step = 50;
var timerID = 0;
$(document).ready(function(){
init();
ininEvent();
});
//요소 초기화
function init(){
//물고기 요소 찾아오기
$fish = $("#fish");
}
//이벤트 등록
function ininEvent(){
//물고기 움직이는 이벤트를 등록
$("#btnStart").click(function(){
start();
});
//물고기 멈추는 이벤트를 등록
$("#btnStop").click(function(){
stop();
});
}
//물고기 움직이기 타이머 실행
function start() {
if(timerID == 0){
timerID = setInterval(function(){
//물고기 움직이기(0.1초마다 moveFish()함수를 호출)
moveFish();
}, 100);
}
}
//물고기 멈추기
function stop() {
//alert(timerID);
clearInterval(timerID);
timerID = 0;
}
//물고기 움직이기
function moveFish(){
//다음 물고기 위치
var x = $fish.position().left + step;
//물고기 위치가 430을 넘는 경우, 물고기 이동방향을 반대쪽으로 해주
//는 부분
if(x >= 430) {
//.attr()함수는 선택자에 의해서 선택된 요소들 중에서 요소의
//속성값을 가지고 오는 함수이다.
$fish.attr("src","images/fish2.png");
step = -50;
}
//물고기 위치가 50보다 작은 경우, 물고기의 이동방향을 오른쪽 변경
if(x < 50) {
//.attr()함수는 선택자에 의해서 선택된 요소들 중에서 요소의
//속성값을 가지고 오는 함수이다.
$fish.attr("src", "images/fish1.png");
step = 50;
}
//물고기 위치 설정
$fish.css("left", x);
}
</script>
</head>
<body>
<div>
<div id="panel">
<div id="bar"></div>
<img src="images/fish1.png" id="fish">
</div>
<div id="nav">
<button id="btnStart">시작</button>
<button id="btnStop">멈춤</button>
</div>
</div>
</body>
</html>
물고게임 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>물고기 게임</title>
<link rel="stylesheet" href="css/fish.css">
<script src="libs/jquery-3.5.1.min.js"></script>
<script src="js/fish.js"></script>
</head>
<body>
<div>
<button id="start">게임 시작</button>
<span id="socreText">현재점수 : </span>
<span id="score">0</span>
</div>
<div class="panel">
<img src="images/fish1.png" id="fish">
</div>
</body>
</html>
#start {
font-size: 20px;
font-weight: bold;
margin-left: 180px;
}
#socreText {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
#score {
font-size: 20px;
font-weight: bold;
color: red;
margin-left: 10px;
}
.panel {
width: 600px;
height: 400px;
position: relative;
border: 2px solid blue;
margin-top: 20px;
}
.panel #fish {
position: absolute;
left: 240px;
top: 165px;
}
//전역변수 선언과 동시에 초기화
var cnt = 0;
var $score = null;
var $fish = null;
var play = false; //플래그 변수
var timerID = 0;
$(document).ready(function(){
//요소 초기화
init();
//이벤트를 등록
initEvent();
});
//전역에서 사용할 요소를 찾아오기
function init() {
$score = $("#score");
$fish = $("#fish");
}
//이벤트 등록하기
function initEvent() {
//버튼을 누르면 게임 시작
$("#start").click(function(){
startGame();
});
//물고기를 클릭을 하면 점수가 증가
$("#fish").click(function(){
addScore();
});
}
//startGame()구현
function startGame() {
//플래그 변수로 false일 때, 게임을 시작할 수 있게끔 만든다.
if(play == false) {
//게임이 종료가 되었는지 체크하는 함수 호출
checkEndGame();
play = true;
timerID = setInterval(function(){
//물고기 움직이기
moveFish();
}, 1000);
}
}
//점수를 증가시키는 addScore()구현
function addScore() {
if(play == true){
cnt++;
$score.html(cnt);
}
}
//물고기 움직이게 하는 moveFish()구현
function moveFish(){
//alert("move");
//물고기 크기 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);
//alert(x);
//alert(y);
$fish.css({
left:x,
top:y
});
}
function checkEndGame() {
//게임이 10초 뒤에 종료가 되게끔 한다.
setTimeout(function(){
play = false;
//물고기 움직이는 타이머를 제거를 함.
clearInterval(timerID);
alert("게임 종료");
},10000);
}
댓글남기기