728x90
반응형
정답을 맞추면 다음 문제로 넘어간다.
Controller.java
@RequestMapping("/minigame.do")
public String minigame(HttpServletRequest request, Model model, @RequestParam HashMap<String, Object> map) throws Exception{
return "/minigame";
}
minigame.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script src="../js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="app">
<div>미니게임 1.</div>
<div>랜덤 숫자 찾기(0~100)</div>
<input type="text" v-model="answer" maxlength="10" name="answer"/>
<button @click="fnAnswer" @keyup.enter="fnAnswer">선택</button>
</div>
</body>
</html>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data : {
randomNum : "",
answer : ""
}
, methods: {
fnGetNum : function(){
var self = this;
self.randomNum = Math.floor(Math.random() * 100) +1;
console.log(self.randomNum);
},
fnAnswer : function(){
var self = this;
if(self.answer == self.randomNum){
alert("정답입니다!");
self.fnGetNum();
} else if(self.answer < self.randomNum){
alert("UP");
} else if(self.answer > self.randomNum){
alert("DOWN");
}
}
} /* methods 끝 */
, created: function () {
var self = this;
self.fnGetNum();
}
});
</script>
정답을 맞춘 횟수까지 출력하기 위해 cnt 변수를 추가하였다.
<script type="text/javascript">
var app = new Vue({
el: '#app',
data : {
randomNum : "",
answer : "",
cnt : 0
}
, methods: {
fnGetNum : function(){
var self = this;
self.randomNum = Math.floor(Math.random() * 100) +1;
self.cnt = 0;
console.log(self.randomNum);
},
fnAnswer : function(){
var self = this;
self.cnt++;
if(self.answer == self.randomNum){
alert("정답입니다! " + self.cnt + "번만에 맞추셨습니다!");
self.fnGetNum();
} else if(self.answer < self.randomNum){
alert("UP");
} else if(self.answer > self.randomNum){
alert("DOWN");
}
}
} /* methods 끝 */
, created: function () {
var self = this;
self.fnGetNum();
}
});
</script>
728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [JavaScript] 회원 가입 스크립트 추가 (32일차) (0) | 2023.06.29 |
|---|---|
| [JavaScript] 현재 시간 팝업 띄우기 (32일차) (0) | 2023.06.29 |
| [JavaScript] 배열 내용을 테이블로 출력 (32일차) (0) | 2023.06.29 |
| [JavaScript] 텍스트 사라지게 만들기 (31일차) (0) | 2023.06.28 |
| [JavaScript] 자바스크립트 sum 함수 만들기 (31일차) (0) | 2023.06.28 |