The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Memory Game
crazy010517
post Jul 14 2014, 01:59 PM
Post #1





Group: Members
Posts: 6
Joined: 14-July 14
Member No.: 21,252
I am making a matching game. There seems to be a problem with it: if I flip two cards and they are wrong, I can't flip those cards again.
Here is my code below and there is an attachment. You also need the images blue.jpg, pig.jpg, cow.jpg, bird.jpg, dog.jpg, cat.jpg, panda,jpg, lion.jpg, tiger.jpg and smile.jpg Please help!


<html>
<head>
<script>
//Matching game
//variables
var onecard = false;
var cardplace = 0
var cardplace2 = 0
var vpig = false;
var vcow = false;
var vbird = false;
var vdog = false;
var vcat = false;
var vpanda = false;
var vlion = false;
var vtiger = false;



function resetboard(number,number2){
document.getElementById("myTable").rows[cardplace].cells.item(cardplace2).innerHTML = ("<IMG SRC = 'blue.jpg' WIDTH = 100 Height = 100>")
document.getElementById("myTable").rows[number].cells.item(number2).innerHTML = ("<IMG SRC = 'blue.jpg' WIDTH = 100 Height = 100>")
onecard = false
vpig = false
vcow = false
vbird = false
vdog = false
vcat = false
vpanda = false
vlion = false
vtiger = false
}

function pig(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'pig.jpg' WIDTH = 100 Height = 100>");
if (vpig == true) {
document.getElementById("myTable").rows[2].cells.item(1).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[0].cells.item(0).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vpig = true
onecard = true
}
}



function cow(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'cow.jpg' WIDTH = 100 Height = 100>");
if (vcow == true) {
document.getElementById("myTable").rows[1].cells.item(0).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[0].cells.item(1).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vcow = true
onecard = true
}
}


function bird(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'bird.jpg' WIDTH = 100 Height = 100>");
if (vbird == true) {
document.getElementById("myTable").rows[3].cells.item(3).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[0].cells.item(2).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vbird = true
onecard = true
}
}


function dog(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'dog.jpg' WIDTH = 100 Height = 100>");
if (vdog == true) {
document.getElementById("myTable").rows[1].cells.item(1).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[3].cells.item(0).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vdog = true
onecard = true
}
}


function cat(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'cat.jpg' WIDTH = 100 Height = 100>");
if (vcat == true) {
document.getElementById("myTable").rows[2].cells.item(0).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[3].cells.item(1).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vcat = true
onecard = true
}
}


function panda(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'panda.jpg' WIDTH = 100 Height = 100>");
if (vpanda == true) {
document.getElementById("myTable").rows[1].cells.item(2).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[0].cells.item(3).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vpanda = true
onecard = true
}
}


function lion(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'lion.jpg' WIDTH = 100 Height = 100>");
if (vlion == true) {
document.getElementById("myTable").rows[2].cells.item(3).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[3].cells.item(2).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vlion = true
onecard = true
}
}


function tiger(x,y){
document.getElementById("myTable").rows[x].cells.item(y).innerHTML = ("<IMG SRC = 'tiger.jpg' WIDTH = 100 Height = 100>");
if (vtiger == true) {
document.getElementById("myTable").rows[2].cells.item(2).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
document.getElementById("myTable").rows[1].cells.item(3).innerHTML = ("<IMG SRC = 'Smile.jpg' WIDTH = 100 Height = 100>");
onecard = false
}else if (onecard == true) {
resetboard(x,y)
}else{
cardplace = x
cardplace2 = y
vtiger = true
onecard = true
}
}


function blank(){

}

</script>
</head>






<style>
table, td{
border:30px solid blue;
}
</style>
<body>
<table id="myTable">
<tr>
<td><IMG onmouseover="pig(0,0)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="cow(0,1)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="bird(0,2)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="panda(0,3)" SRC = "blue.jpg" Width = 100 Height = 100></td>
</tr>
<tr>
<td><IMG onmouseover="cow(1,0)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="dog(1,1)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="panda(1,2)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="tiger(1,3)" SRC = "blue.jpg" Width = 100 Height = 100></td>
</tr>
<tr>
<td><IMG onmouseover="cat(2,0)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="pig(2,1)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="tiger(2,2)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="lion(2,3)" SRC = "blue.jpg" Width = 100 Height = 100></td>
</tr>
<tr>
<td><IMG onmouseover="dog(3,0)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="cat(3,1)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="lion(3,2)" SRC = "blue.jpg" Width = 100 Height = 100></td>
<td><IMG onmouseover="bird(3,3)" SRC = "blue.jpg" Width = 100 Height = 100></td>
</tr>
</body>

</html>


Attached File(s)
Attached File  Matching_Game.html ( 6.55k ) Number of downloads: 142
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 16 2014, 10:22 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Well, I looked at your code but I thought I might as well write my own version. The attached version works on the 'onclick' event and does not allow the 2nd image to be selected if it is on the same row or column as the 1st selected image. You have to be sure to setup your picture array with this rule in mind.

Attached File  match.htm ( 5.27k ) Number of downloads: 369


This post has been edited by CharlesEF: Jul 16 2014, 10:24 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 16 2014, 12:54 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
The complete zip (with jpg's) was too big to attach so I have it available here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 06:06 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC