Xogo de memoria
Pasa o cursor sobre as circunferencias. Intenta memorizar a posición dos diferentes números.
Logo preme no interior de cada unha das circunferencias para amosalos en orde ascendente.
Copio o código por se alguén ten interese en saber como está construido:
<script>
var fondo="fondo.jpg"
var im1n3="p1_3.jpg"
var im2n6="p2_6.jpg"
var im3n9="p3_9.jpg"
var im4n5="p4_5.jpg"
var im5n8="p5_8.jpg"
var im6n2="p6_2.jpg"
var im7n4="p7_4.jpg"
var im8n1="p8_1.jpg"
var im9n7="p9_7.jpg"
var aim1n3="3.jpg"
var aim2n6="6.jpg"
var aim3n9="9.jpg"
var aim4n5="5.jpg"
var aim5n8="8.jpg"
var aim6n2="2.jpg"
var aim7n4="4.jpg"
var aim8n1="1.jpg"
var aim9n7="7.jpg"
var amosar="1"
var actual="0"
function sobre_1 () {
if (amosar==1){
document.getElementById('imaxe').src =im1n3 ;
}
}
function sobre_2 () {
if (amosar==1){
document.getElementById('imaxe').src =im2n6 ;
}
}
function sobre_3 () {
if (amosar==1){
document.getElementById('imaxe').src =im3n9 ;
}
}
function sobre_4 () {
if (amosar==1){
document.getElementById('imaxe').src =im4n5 ;
}
}
function sobre_5 () {
if (amosar==1){
document.getElementById('imaxe').src =im5n8 ;
}
}
function sobre_6 () {
if (amosar==1){
document.getElementById('imaxe').src =im6n2 ;
}
}
function sobre_7 () {
if (amosar==1){
document.getElementById('imaxe').src =im7n4 ;
}
}
function sobre_8 () {
if (amosar==1){
document.getElementById('imaxe').src =im8n1 ;
}
}
function sobre_9 () {
if (amosar==1){
document.getElementById('imaxe').src =im9n7 ;
}
}
function preme_1 () {
if (actual==2){
document.getElementById('imaxe').src =aim1n3 ;
actual=3
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_2 () {
if (actual==5){
document.getElementById('imaxe').src =aim2n6 ;
actual=6
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_3 () {
if (actual==8){
document.getElementById('imaxe').src =aim3n9 ;
actual=9
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_4 () {
if (actual==4){
document.getElementById('imaxe').src =aim4n5 ;
actual=5
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_5 () {
if (actual==7){
document.getElementById('imaxe').src =aim5n8 ;
actual=8
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_6 () {
if (actual==1){
document.getElementById('imaxe').src =aim6n2 ;
actual=2
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_7 () {
if (actual==3){
document.getElementById('imaxe').src =aim7n4 ;
actual=4
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_8 () {
if (actual==0){
document.getElementById('imaxe').src =aim8n1 ;
actual=1
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
function preme_9 () {
if (actual==6){
document.getElementById('imaxe').src =aim9n7 ;
actual=7
amosar=0
}
else {
document.getElementById('imaxe').src =fondo ;
actual=0
amosar=1
}
}
</script>
<map name="map">
<area shape="circle" coords="50,50,35" onclick="preme_1 ();" onmouseover="sobre_1 ();" />
<area shape="circle" coords="150,50,35" onclick="preme_2 ();" onmouseover="sobre_2 ();" />
<area shape="circle" coords="250,50,35" onclick="preme_3 ();" onmouseover="sobre_3 ();" />
<area shape="circle" coords="50,150,35" onclick="preme_4 ();" onmouseover="sobre_4 ();" />
<area shape="circle" coords="150,150,35" onclick="preme_5 ();" onmouseover="sobre_5 ();" />
<area shape="circle" coords="250,150,35" onclick="preme_6 ();" onmouseover="sobre_6 ();" />
<area shape="circle" coords="50,250,35" onclick="preme_7 ();" onmouseover="sobre_7 ();" />
<area shape="circle" coords="150,250,35" onclick="preme_8 ();" onmouseover="sobre_8 ();" />
<area shape="circle" coords="250,250,35" onclick="preme_9 ();" onmouseover="sobre_9 ();" />
</map>
<img src="fondo.jpg" width="300" height="300" border="0" usemap="#map" id="imaxe" />