let animals=[
{name:'./media/elephant.png',value:"Elephant"},
{name:'./media/giraffe.png',value:"Giraffe"},
{name:'./media/zebra.png',value:"Zebra"},
{name:'./media/monkey.png',value:"Monkey"},
{name:'./media/African-Hyena.png',value:"African Hyena"},
{name:'./media/African-Wildcat.png',value:"African Wildcat"},
{name:'./media/African-WildDog.png',value:"African Wild Dog"},
{name:'./media/African-Grey-Parrot.png',value:"African Grey Parrot"},
{name:'./media/Cheetah.png',value:"Cheetah"},
{name:'./media/civet.png',value:"African Civet"},
{name:'./media/Great-White-Pelican.png',value:"Great White Pelican"},
{name:'./media/Hamerkop.png',value:"Hamerkop"},
{name:'./media/Hippopotamus.png',value:"Hippopotamus"},
{name:'./media/kudu.png',value:"Kudu"},
{name:'./media/Marabou-Stork.png',value:"Marabou Stork"},
{name:'./media/Southern-Ground-Hornbill.png',value:"Southern Ground Hornbill"},
{name:'./media/Weaver-Bird.png',value:"Weaver Bird"},
{name:'./media/Wildebeest.png',value:"Wildebeest"},
{name:'./media/Waterbuck.png',value:"Waterbuck"},
{name:'./media/Warthog.png',value:"Warthog"},
{name:'./media/Rhino.png',value:"Rhino"},
{name:'./media/Mandla from The Big Five Series.png',value:"Mandla"},
{name:'./media/Impala.png',value:"Impala"},
{name:'./media/African Buffalo.png',value:"African Buffalo"},
{name:'./media/Aardvark.png',value:"Aardvark"},
{name:'./media/Baboon.png',value:"Baboon"},
{name:'./media/Crocodile.png',value:"Crocodile"},
{name:'./media/Chimpanzee.png',value:"Chimpanzee"},
{name:'./media/Guinea Fowl.png',value:"Guinea Fowl"},
{name:'./media/Lion.png',value:"Lion"},
{name:'./media/Leopard tortoise.png',value:"Leopard tortoise"},
{name:'./media/Eland.png',value:"Eland"},
{name:'./media/Honeybadger.png',value:"Honey badger"},
{name:'./media/Leopard.png',value:"Leopard"},
{name:'./media/Okapi.png',value:"Okapi"},
{name:'./media/Oryx.png',value:"Oryx"},
{name:'./media/Ostrich.png',value:"Ostrich"},
{name:'./media/vervet-monkey.png',value:"Vervet monkey"},
{name:'./media/tortoise.png',value:"Tortoise"},
{name:'./media/thomsan-gazelle.png',value:"Thomsan gazelle"},
{name:'./media/springbok.png',value:"Springbok"},
{name:'./media/Saddle-billed-Stork.png',value:"Saddle-billed Stork"},
{name:'./media/rock-hyrax.png',value:"Rock Hyrax"},
{name:'./media/red-billed-oxpecker.png',value:"Red-billed Oxpecker"},
{name:'./media/nile-hippo.png',value:"Nile Hippopotamus"},
{name:'./media/nile-crocodile.png',value:"Nile Crocodile"},
{name:'./media/aardwolf.png',value:"Aardwolf"},
{name:'./media/african-bulldog.png',value:"African Bullfrog"},
{name:'./media/african-clawed-frog.png',value:"African Clawed Frog"},
{name:'./media/monitor-lizard.png',value:"Monitor Lizard"},
{name:'./media/meerkat.png',value:"Meerkat"},
{name:'./media/hadada-ibis.png',value:"Hadada Ibis"},
{name:'./media/mandrill.png',value:"Mandrill"},
{name:'./media/green-mamba.png',value:"Mamba"},
{name:'./media/Lilac-breasted-Roller.png',value:"Lilac Breasted Roller"},
{name:'./media/African-Harrier-Hawk.png',value:"African Harrier Hawk"},
{name:'./media/African-Crowned-Eagle1.png',value:"African Crowned Eagle"},
{name:'./media/African-Darter1.png',value:"African Darter"},
{name:'./media/African-Fish-Eagle (1).png',value:"African Fish Eagle"},
{name:'./media/african-golden-cat.png',value:"African Golden Cat"},
{name:'./media/African-Goshawk (1).png',value:"African Goshawk"},
{name:'./media/African-Green-Pigeon (1).png',value:"African Green Pigeon"},
{name:'./media/African-Hoopoe.png',value:"African Hoopoe"},
{name:'./media/African-Jacana (1).png',value:"African Jacana"},
{name:'./media/African-Palm-Swift.png',value:"African Palm Swift"},
{name:'./media/african-paradise-flycatcher.png',value:"African Paradise Flycatcher"},
{name:'./media/african-pygmy-goat.png',value:"African Pygmy Goat"},
{name:'./media/african-scops-owl.png',value:"African Scops Owl"},
{name:'./media/african-skimmer (1).png',value:"African Skimmer"},
{name:'./media/african-tree-toad.png',value:"African Tree Toad"},
{name:'./media/african-white-faced-owl.png',value:"African White-faced Owl"},
{name:'./media/african-pygmy-hedgehog.png',value:"African Pygmy Hedgehog"},
{name:'./media/bat-eared-fox.png',value:"Bat-eared Fox"},
{name:'./media/Bateleur-Eagle.png',value:"Bateleur Eagle"},
{name:'./media/Bonobo-Pygmy-Chimpanzee.png',value:"Pygmy Chimpanzee"},
{name:'./media/bushbaby.png',value:"Bushbaby"},
{name:'./media/cape-fox.png',value:"Cape Fox"},
{name:'./media/capped-wheatear.png',value:"Capped Wheatear"},
{name:'./media/caracal.png',value:"Caracal"},
{name:'./media/chameleon.png',value:"Chameleon"},
]
let paws=[
{name:'./media/elephantpaw.png',value:"Elephant"},
{name:'./media/giraffepaw.png',value:"Giraffe"},
{name:'./media/zebrapaw.png',value:"Zebra"},
{name:'./media/monkeypaw.png',value:"Monkey"},
{name:'./media/African-Hyena-footprints.png',value:"African Hyena"},
{name:'./media/African-Wildcat-footprints.png',value:"African Wildcat"},
{name:'./media/African-WildDog-footprints.png',value:"African Wild Dog"},
{name:'./media/African-Grey-Parrot-footprints.png',value:"African Grey Parrot"},
{name:'./media/Cheetah-footprints.png',value:"Cheetah"},
{name:'./media/civet-footprints.png',value:"African Civet"},
{name:'./media/Great-White-Pelican-footprints.png',value:"Great White Pelican"},
{name:'./media/Hamerkop-footprints.png',value:"Hamerkop"},
{name:'./media/Hippopotamus-prints.png',value:"Hippopotamus"},
{name:'./media/kudu-footprints.png',value:"Kudu"},
{name:'./media/Marabou-Stork-footprints.png',value:"Marabou Stork"},
{name:'./media/Southern-Ground-Hornbill-footprints.png',value:"Southern Ground Hornbill"},
{name:'./media/Weaver-Bird-footprints.png',value:"Weaver Bird"},
{name:'./media/Wildebeest prints.png',value:"Wildebeest"},
{name:'./media/Waterbuck prints.png',value:"Waterbuck"},
{name:'./media/Warthog prints.png',value:"Warthog"},
{name:'./media/Rhino prints.png',value:"Rhino"},
{name:'./media/Mandla footprints.png',value:"Mandla"},
{name:'./media/Impala prints.png',value:"Impala"},
{name:'./media/African Buffalo prints.png',value:"African Buffalo"},
{name:'./media/Aardvark prints.png',value:"Aardvark"},
{name:'./media/Baboon prints.png',value:"Baboon"},
{name:'./media/Crocodile print.png',value:"Crocodile"},
{name:'./media/Chimpanzee print.png',value:"Chimpanzee"},
{name:'./media/Guinea Fowl prints.png',value:"Guinea Fowl"},
{name:'./media/Lion prints.png',value:"Lion"},
{name:'./media/Leopard tortoise prints.png',value:"Leopard tortoise"},
{name:'./media/Eland prints.png',value:"Eland"},
{name:'./media/Honeybadger footprints.png',value:"Honey badger"},
{name:'./media/Leopard prints.png',value:"Leopard"},
{name:'./media/Okapi prints.png',value:"Okapi"},
{name:'./media/Oryx prints.png',value:"Oryx"},
{name:'./media/Ostrich prints.png',value:"Ostrich"},
{name:'./media/vervet-monkey prints.png',value:"Vervet monkey"},
{name:'./media/tortoise prints.png',value:"Tortoise"},
{name:'./media/thomsan-gazzele prints.png',value:"Thomsan gazelle"},
{name:'./media/springbok prints.png',value:"Springbok"},
{name:'./media/saddle-billed-stork prints.png',value:"Saddle-billed Stork"},
{name:'./media/rock-hyrax prints.png',value:"Rock Hyrax"},
{name:'./media/red-billed-oxpecker prints.png',value:"Red-billed Oxpecker"},
{name:'./media/nile-hippo prints.png',value:"Nile Hippopotamus"},
{name:'./media/nile crocodile prints.png',value:"Nile Crocodile"},
{name:'./media/aardwolf prints.png',value:"Aardwolf"},
{name:'./media/african-bullfrog prints.png',value:"African Bullfrog"},
{name:'./media/african-clawed-frog prints.png',value:"African Clawed Frog"},
{name:'./media/lizard prints.png',value:"Monitor Lizard"},
{name:'./media/meerkat prints.png',value:"Meerkat"},
{name:'./media/hadada-ibis prints.png',value:"Hadada Ibis"},
{name:'./media/mandrill prints.png',value:"Mandrill"},
{name:'./media/black-mamba.png',value:"Mamba"},
{name:'./media/lilac-breasted-roller prints.png',value:"Lilac Breasted Roller"},
{name:'./media/african-harrier-hawk prints.png',value:"African Harrier Hawk"},
{name:'./media/african-crowned-eagle.png',value:"African Crowned Eagle"},
{name:'./media/african-darter.png',value:"African Darter"},
{name:'./media/fish-eagle prints.png',value:"African Fish Eagle"},
{name:'./media/golden-cat prints.png',value:"African Golden Cat"},
{name:'./media/african-goshwak prints.png',value:"African Goshawk"},
{name:'./media/african-green-pigeon prints.png',value:"African Green Pigeon"},
{name:'./media/african-hoopoe prints.png',value:"African Hoopoe"},
{name:'./media/jacana prints.png',value:"African Jacana"},
{name:'./media/palm-swift.png',value:"African Palm Swift"},
{name:'./media/african-paradise-flycatcher prints.png',value:"African Paradise Flycatcher"},
{name:'./media/african-pygmy-goat prints.png',value:"African Pygmy Goat"},
{name:'./media/scops-owl.png',value:"African Scops Owl"},
{name:'./media/african-skimmer.png',value:"African Skimmer"},
{name:'./media/african-tree-toad (1).png',value:"African Tree Toad"},
{name:'./media/owl (5).png',value:"African White-faced Owl"},
{name:'./media/african-pygmy-hedgehog prints.png',value:"African Pygmy Hedgehog"},
{name:'./media/bat-eared-fox prints.png',value:"Bat-eared Fox"},
{name:'./media/bateleur-eagle prints.png',value:"Bateleur Eagle"},
{name:'./media/bonobo-pygymy-chimpanzee prints.png',value:"Pygmy Chimpanzee"},
{name:'./media/bushbaby prints.png',value:"Bushbaby"},
{name:'./media/cape-fox prints.png',value:"Cape Fox"},
{name:'./media/capped-wheatear prints.png',value:"Capped Wheatear"},
{name:'./media/caracal prints.png',value:"Caracal"},
{name:'./media/cameleon.png',value:"Chameleon"},
]
devhk.windowResize()
function strt() {
$('#int').css("display","flex")
$('.smiley').css("display","none")
}
function play1() {
$("#instructions").css("display","flex")
$('#int').css("display","none")
document.getElementById("full-area").style.background="url('./media/jungle1.jpg')"
document.getElementById("game-area").style.backgroundColor="transparent"
document.getElementById("full-area").style.backgroundSize="cover"
document.getElementById("full-area").style.animation="none"
$("#bg-audio")[0].play()
$("#bg-audio").prop("volume", 0.02);
setTimeout(() => {
$("#instructions").css("display","none")
$('#game').css("display","flex")
}, 8000);
//$('#full-area').css("background","black")
}
let currAnimal,currPaw,currAnimalId,currPawId
let randAnimals=[]
let randomPaws=[]
let score=0
function playAudio(audioElement) {
audioElement.pause();
audioElement.currentTime = 0;
audioElement.play();
audioElement.volume=0.05
}
function generaterandomanimal(animal,animal1,name) {
let rand1Animal=Math.floor(Math.random()*animals.length)
document.getElementById(animal).style.backgroundImage='url('+animals[rand1Animal].name+')'
let str=animals[rand1Animal].value.replace(/\s+/g, '');
document.getElementById(animal).classList.add(str);
document.getElementById(animal1).classList.add(str);
document.getElementById(name).innerHTML=animals[rand1Animal].value
randAnimals.push(animals[rand1Animal])
paws.forEach(paw=>{
if (paw.value==animals[rand1Animal].value) {
randomPaws.push(paw)
}
})
animals.splice(rand1Animal,1)
paws.splice(rand1Animal,1)
}
function handleClassList(elem) {
if (document.getElementById(elem).classList.length >= 1) {
document.getElementById(elem).classList.remove( document.getElementById(elem).classList.item(1));
}
}
function generaterandomanimalSecond(animal,animal1,random1,name) {
handleClassList(animal)
handleClassList(animal1)
let str=random1.value.replace(/\s+/g, '');
document.getElementById(animal).style.backgroundImage="url('"+random1.name+"')"
document.getElementById(animal).classList.add(str);
document.getElementById(animal1).classList.add(str);
document.getElementById(name).innerHTML=random1.value
}
function generaterandompaw(paw,random2) {
document.getElementById(paw).style.backgroundImage="url('"+random2.name+"')";
handleClassList(paw)
let str=random2.value.replace(/\s+/g, '');
document.getElementById(paw).classList.add(str);
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); // Generate a random index from 0 to i
[array[i], array[j]] = [array[j], array[i]]; // Swap elements at i and j
}
}
function GamePlay() {
for (let i = 0; i < 3; i++) {
generaterandomanimal("a"+(i+1),"animal"+(i+1),"animalname"+(i+1))
}
shuffleArray(randomPaws);
for (let i = 0; i < 3; i++) {
generaterandompaw("p"+(i+1),randomPaws[i])
}
}
function reset() {
if (animals.length>0 && randAnimals.length>0) {
let randomNewAnimal=Math.floor(Math.random()*animals.length)
randAnimals.push(animals[randomNewAnimal])
paws.forEach(paw=>{
if (paw.value==animals[randomNewAnimal].value) {
randomPaws.push(paw)
}
})
console.log(randAnimals)
console.log(randomPaws)
animals.splice(randomNewAnimal,1)
paws.splice(randomNewAnimal,1)
shuffleArray(randomPaws);
shuffleArray(randAnimals);
for (let i = 0; i < 3; i++) {
generaterandomanimalSecond("a"+(i+1),"animal"+(i+1),randAnimals[i],"animalname"+(i+1))
generaterandompaw("p"+(i+1),randomPaws[i])
}
}else if (randAnimals==0){
$("#bg-audio")[0].pause()
$("#win-audio")[0].play()
document.getElementById("winScreen").style.display="flex"
document.getElementById("game").style.display="none"
document.getElementById("full-area").style.background="url('./media/jungle1.jpg')"
document.getElementById("game-area").style.backgroundColor="transparent"
document.getElementById("full-area").style.backgroundSize="cover"
document.getElementById("full-area").style.animation="none"
}
}
GamePlay()
function handleClick(curr){
if (curr!="" && curr!=undefined) {
if (currAnimal==currPaw) {
console.log("correct")
score++
document.getElementById("nbPairs").innerHTML=score
randAnimals.forEach((animal,i)=>{
if (animal.value==currAnimal) {
randAnimals.splice(i,1)
}
})
randomPaws.forEach((animal,i)=>{
if (animal.value==currPaw) {
randomPaws.splice(i,1)
}
})
if (animals.length<=0) {
document.getElementById(currAnimalId).style.display="none"
document.getElementById(currPawId).style.display="none"
}
playAudio(document.getElementById("correct-audio"))
randAnimals.forEach((rand,i)=>{
if (rand.value.replace(/\s+/g, '')==currAnimal) {
randAnimals.splice(i,1)
}
})
randomPaws.forEach((rand,i)=>{
console.log(currPaw)
if (rand.value.replace(/\s+/g, '')==currPaw) {
randomPaws.splice(i,1)
}
})
reset()
}else{
console.log("wrong")
playAudio(document.getElementById("wrong-audio"))
}
document.querySelectorAll(".animal").forEach(a=>{
a.style.opacity="100%"
a.style.scale="1"
})
document.querySelectorAll(".p").forEach(a=>{
a.style.opacity="100%"
a.style.scale="1"
})
currPaw=""
currPawId=""
currAnimal=""
currAnimalId=""
}else{
playAudio(document.getElementById("click-audio"))
}
}
document.querySelectorAll('.animal').forEach(a=>{
a.addEventListener("click",function(){
document.querySelectorAll(".animal").forEach(a=>{
a.style.opacity="100%"
a.style.scale="1"
})
currAnimal=a.classList[1]
currAnimalId=a.id
a.style.opacity="60%"
a.style.scale="1.1"
handleClick(currPaw)
})
})
document.querySelectorAll('.p').forEach(a=>{
a.addEventListener("click",function(){
document.querySelectorAll(".p").forEach(a=>{
a.style.opacity="100%"
a.style.scale="1"
})
currPaw=a.classList[1]
currPawId=a.id
a.style.opacity="60%"
a.style.scale="1.1"
handleClick(currAnimal)
})
})
function playAgain() {
location.reload()
}
function Sound(elem) {
if (elem.id=="audioOn") {
$("#bg-audio")[0].pause()
document.getElementById("audioOn").style.display="none"
document.getElementById("audioOff").style.display="inline"
}else{
$("#bg-audio")[0].play()
document.getElementById("audioOn").style.display="inline"
document.getElementById("audioOff").style.display="none"
}
}
top of page
bottom of page
