I scratched the game source code I found on the Internet, modified only the image part and css part, and ran it, but Uncaught ReferenceError: $ is not defined and it does not run... What's wrong with you? If you select a // card here, $(document).on('click', '#cardTabletd', function(){ This part indicates an error.Help me(Crying) I don't know... I'm a design student. I have no idea.ㅠ<
https://dororongju.tistory.com/103 I brought the code here.
If you press start, the original image should appear. It's not coming up...
<!DOCTYPE html> Finding a picture that's like Crayon Shin-chan. Ta-da! 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>
// Game status
var gameState = '';
// Open card src
var openCardId = '';
var openCardId2 = '';
// Random number generation function
function generateRandom (min, max) {
var ranNum = Math.floor(Math.random()*(max-min+1)) + min;
return ranNum;
}
var cards; // List of cards
var score = 0; // Score
variableCtn = 0; // Number of matched cards
// Card Placement
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);
}
// Cover the entire card
function hiddenCards(){
$('#cardTable td img').hide();
$('#cardTable td span').show();
}
// The game starts
function startGame() {
var sec = 6;
$('#info').Hide(); // Covering the information phrase
scoreInit(); // Initialize score
setTable(); // Place Card
//Countdown
function setText(){
$('#countDown').text(--sec);
}
//Countdown
var intervalID = setInterval(setText, 1000);
setTimeout(function(){
clearInterval(intervalID);
$('#countDown').text('start');
hiddenCards();
gameState = '';
}, 6000);
}
// the choice of card.
$(document).on('click', '#cardTable td', function(){
If (! = '' gamestate) // then pressed when I'm on the countdown to Games ; return return.
If (2! = '' opencardid) // if two open press and return. ; return
if($(this).Hasclass return ('opened')) ; // open the cards pressed again.
$(this).Addclass for dividing that by opening ('opened') ; // class more.
if(openCardId == '') {
$(this).find('img').show();
$(this).find('span').hide();
openCardId = this.id;
}else {
If (openCardId == openCardId2) return; // If the same card is pressed, 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) { // match
openCardId = '';
openCardId2 = '';
scorePlus();
if(++openedCtn == 12){
alert("Success!"\n'+score+' dot!');
}
}else { // mismatch
setTimeout(back, 1000);
scoreMinus();
}
}
});
// Flip Two Cards Again
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 = '';
}
// Initialize Score
function scoreInit(){
score = 0;
openedCtn = 0;
$('#score').text(score);
}
// an increase in scores
function scorePlus(){
score += 20;
$('#score').text(score);
}
// a decrease in scores
function scoreMinus(){
score -= 5;
$('#score').text(score);
}
$(document).on('click', '#startBtn', function(){
if(gameState == '') {
startGame();
gameState = 'alreadyStart'
}
});
</script>
🤓 Find the same person 🤓 start score : 0 ready Press the start button
Full code.
html javascript error
jquery is required.
Also, I modified the image by referring to what was hanging on the link.
https://jsfiddle.net/da728zmb/2/
© 2024 OneMinuteCode. All rights reserved.