<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전역함수</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
.box1{
width: 270px;
border: 2px solid;
border-radius: 10px;
text-align: center;
background-color: red;
color: black;
}
.box2{
width: 270px;
border: 2px solid;
}
#bt1{
text-align: center;
}
.box3{
width: 270px;
height: 100px;
border: 2px solid black;
text-align: center;
padding-top: 20px;
}
.box4{
border: black 2px solid;
width: 270px;
height: 80px;
padding-top: 30px;
text-align: center;
}
.game{
width: 80px;
border: 2px solid;
}
.def1{
width: 55px;
padding-left: 40px;
padding-right: 43px;
float: left;
}
/* 나 */
/* 컴퓨터 */
</style>
<script>
var clickCnt=0; //전체횟수
var winCnt=0; //이긴횟수
$(document).ready(function(){ //jquery시작
$("p>img").click(function(){
clickCnt++;
var user = parseInt($(this).attr("id").charAt(1));//선택한것의 id의 index[1]값을 user에 넣기
var com = Math.floor(Math.random()*3)+1;//1~3사이의 수를 com에 넣기
$("#img1").attr("src",$(this).attr("src"));//img1의 id를 가진것의 src속성에 $(this).attr("src")값넣기
$("#img1").css({"width":"90px"});
$("#img2").attr("src",$("#i"+com).attr("src"));//img2의 id를 가진것의 src속성에 랜덤값을 넣어줌
$("#img2").css({"width":"90px"});
if ((user == 1 && com == 3) || (user == 2 && com == 1) || (user == 3 && com == 2) ) {
$("#msg").html("이겼습니다!").css("color","red");
winCnt++;
}
//이겼을때
else if (user == com){
$("#msg").html("비겼습니다!").css("color","blue");
}
//비겼을때
else {
$("#msg").html("졌습니다!").css("color","black");
}
//졌을때
$("#msg").html(" 도전횟수: "+clickCnt+"<br>"+" 이긴횟수: "+winCnt);
});
$("#bt1").click(function(){
$("#img1").attr("src","hello.html\\dsad.jpg");//img1초기화
$("#img1").css("width","60px");
$("#img2").attr("src","hello.html\\dsad.jpg");//img2초기화
$("#img2").css("width","60px");
$("#msg").text(" ")//text 초기화
clickCnt=0;//click 횟수 초기화
winCnt=0;//win 횟수
});
});
</script>
</head>
<form name="myform">
<div class="box1">
가위바위보게임
</div>
<p></p>
<div class="box2">
<p>
<img src="hello.html\가위.png" class="game" id="i1">
<img src="hello.html\바위.png" class="game" id="i2">
<img src="hello.html\보.png" class="game" id="i3">
</p>
<p style="text-align: center;"><input type="button" value="다시하기" id="bt1"></p>
</div>
<div class="box3">
<img src="hello.html\dsad.jpg" style="width: 60px;" id="img1">
<img src="hello.html\vs.jpg" style="width: 60px;">
<img src="hello.html\dsad.jpg" style="width: 60px;" id="img2"><br>
<div class="def1">
나
</div>
컴퓨터
</div>
<P>
<div class="box4" id="msg" >
</div>
</P>
</form>
<body>
</body>
</html>배운점
1. .html();를 두번하면 첫번째한거에 덮어쓰기된다.
2. if 함수의 조건에 or and 를 사용하는 방법을 배웠다.
'프로그래밍 언어 > Java' 카테고리의 다른 글
| 유투브로 음악 player 만들기 jquery 예제6 (0) | 2020.10.15 |
|---|---|
| Jqeury 예제5.카드게임 구현하기 (0) | 2020.10.10 |
| 자바스크립트 jquery 예제4.지뢰찾기게임 (0) | 2020.10.06 |
| jquery 예제2.주사위게임 (0) | 2020.09.29 |
| Jquery 예제1.랜덤 카드를 만들고 짝/홀 카드 구분하기 (0) | 2020.09.28 |