찾아온 코드인데.. 게임 실행이 안되네요...ㅠㅠ 도와주세요!
조회수 709회
인터넷에서 찾은 게임소스코드를 긁어와서 이미지 부분하고 css부분만 수정하고 실행을 했는데, Uncaught ReferenceError: $ is not defined가 뜨면서 실행이 안됩니다... 어디가 잘못된 건가요...?? 여기서 //카드 선택시 밑에 있는 $(document).on('click', '#cardTable td', function(){ 이부분에서 에러가 났다고 뜹니다..ㅠㅠ 도와주세요ㅠㅠㅠㅠㅠ 코알못... 디자인과학생인데... 전혀 모르겠어요...ㅠㅠ
https://dororongju.tistory.com/103 여기 코드 가져와서 했습니다.
start를 누르면 원래 이미지가 떠야하는데.. 안뜨네요...
<!DOCTYPE html> 짱구 같은그림 찾기 빠밤 body{font-family: 'Jua', sans-serif;} .width500px{width: 450px; display: inline-block;} .center{text-align: center;} #menuTable{ font-size: 22px; } #startBtn{border: none; color: white; background-color: #84D3BD; width: 100px;padding: 7px; font-family: 'Jua', sans-serif; font-weight: bold; font-size: 22px; cursor: pointer;} #cardTable{border-collapse: collapse;} #cardTable td{border: 1px solid #84D3BD; width: 75px; height: 121px; text-align: center; cursor: pointer;} #cardTable td img{max-width: 70px;} #cardTable td span{font-size: 25pt; font-weight: bold; color: #84D3BD; display: none;} #countDown{background-color: #84D3BD; color: white; font-size: 20pt; padding: 5px;} #info{width: 450px; height: 250px; background-color: #DDDDDD; color: white; padding-top: 230px;}
</style>
<script>
// 게임 상태
var gameState = '';
// 열린 카드 src
var openCardId = '';
var openCardId2 = '';
// 난수 생성 함수
function generateRandom (min, max) {
var ranNum = Math.floor(Math.random()*(max-min+1)) + min;
return ranNum;
}
var cards; // 카드 목록
var score = 0; // 점수
var openedCtn = 0; // 맞춘 카드 갯수
// 카드 배치
function setTable(){
cards = [
'1.png','1.png', //
'2.png','2.png', //
'14.png','14.png', //
'4.png','4.png', //
'5.png','5.png', //
'6.png','6.png', //
'7.png','7.png', //
'8.png','8.png', //
'9.png','9.png', //
'10.png','10.png', //
'11.png','11.png', //
'16.png','16.png' //
];
var cardTableCode = '<tr>';
for(var i=0;i<24;i++) {
if(i>0 && i%6 == 0){
cardTableCode += '</tr><tr>';
}
var idx = generateRandom(0,23-i);
var img = cards.splice(idx,1);
cardTableCode += '<td id="card'+i+'"><img src="./'+img+'"><span>?</span></td>';
}
cardTableCode += '</tr>';
$('#cardTable').html(cardTableCode);
}
// 카드 전체 가리기
function hiddenCards(){
$('#cardTable td img').hide();
$('#cardTable td span').show();
}
// 게임 시작
function startGame() {
var sec = 6;
$('#info').hide(); // 안내 문구 가리기
scoreInit(); // 점수 초기화
setTable(); // 카드 배치
//카운트 다운
function setText(){
$('#countDown').text(--sec);
}
//카운트 다운
var intervalID = setInterval(setText, 1000);
setTimeout(function(){
clearInterval(intervalID);
$('#countDown').text('start');
hiddenCards();
gameState = '';
}, 6000);
}
// 카드 선택 시
$(document).on('click', '#cardTable td', function(){
if(gameState != '') return; // 게임 카운트 다운중일 때 누른 경우 return
if(openCardId2 != '') return; // 2개 열려있는데 또 누른 경우 return
if($(this).hasClass('opened')) return; // 열려있는 카드를 또 누른 경우
$(this).addClass('opened'); // 열여있다는 것을 구분하기 위한 class 추가
if(openCardId == '') {
$(this).find('img').show();
$(this).find('span').hide();
openCardId = this.id;
}else {
if(openCardId == openCardId2) return; //같은 카드 누른 경우 return
$(this).find('img').show();
$(this).find('span').hide();
var openCardSrc = $('#'+openCardId).find('img').attr('src');
var openCardSrc2 = $(this).find('img').attr('src');
openCardId2 = this.id;
if(openCardSrc == openCardSrc2) { // 일치
openCardId = '';
openCardId2 = '';
scorePlus();
if(++openedCtn == 12){
alert('성공!!\n'+score+'점 입니다!');
}
}else { // 불일치
setTimeout(back, 1000);
scoreMinus();
}
}
});
// 두개의 카드 다시 뒤집기
function back() {
$('#'+openCardId).find('img').hide();
$('#'+openCardId).find('span').show();
$('#'+openCardId2).find('img').hide();
$('#'+openCardId2).find('span').show();
$('#'+openCardId).removeClass('opened');
$('#'+openCardId2).removeClass('opened');
openCardId = '';
openCardId2 = '';
}
// 점수 초기화
function scoreInit(){
score = 0;
openedCtn = 0;
$('#score').text(score);
}
// 점수 증가
function scorePlus(){
score += 20;
$('#score').text(score);
}
// 점수 감소
function scoreMinus(){
score -= 5;
$('#score').text(score);
}
$(document).on('click', '#startBtn', function(){
if(gameState == '') {
startGame();
gameState = 'alreadyStart'
}
});
</script>
🤓 같은 인물 찾기 🤓 start score : 0 ready start 버튼을 눌러주세요
전체코드입니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
댓글 입력