|
JavaScript - Help With Memory Game.
Hi every1! Got a task in university to make a memory game (card matching game).
Thats what i've got so far: Code: var selected = 0;
var choiceOne;
var choiceTwo;
var matches = 0;
var numOfTries = 0;
var interval = 700;
var gamePlace = document.getElementById("wrap");
var backcard="img/memoryBg.png";
var timeStart;
var timeFinish;
var time;
function nameEnter(){
var name = prompt("Please enter your name");
if (name != null){
document.title =
"Welcome " + name + "!";
}
}
function game(){
var nOfPairs = document.getElementById("nPairs").value;
timeStart = new Date().getTime();
if (nOfPairs==1){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
}
if (nOfPairs==2){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==3){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==4){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==5){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==6){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards[10] = 'img/card6.png';
cards[11] = 'img/card6.png';
cards.sort(function shuffle() {
return Math.random() - 0.5;});
}
if (nOfPairs==7){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards[10] = 'img/card6.png';
cards[11] = 'img/card6.png';
cards[12] = 'img/card7.png';
cards[13] = 'img/card7.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==8){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards[10] = 'img/card6.png';
cards[11] = 'img/card6.png';
cards[12] = 'img/card7.png';
cards[13] = 'img/card7.png';
cards[14] = 'img/card8.png';
cards[15] = 'img/card8.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if(nOfPairs>8||nOfPairs<1){
alert("Please enter the number from 1 to 8");
}else{
for(i = 0; i<=nOfPairs*2-1; i++){
var cardDiv = document.createElement("div");
cardDiv.setAttribute("id",""+i+"");
cardDiv.style.height="65px";
cardDiv.style.width="65px";
cardDiv.style.float='left';
gamePlace.appendChild(cardDiv);
document.getElementById(""+i+"").innerHTML='<img src="img/memoryBg.png">';
cardDiv.onclick=function(){cardClick(this.id);};
}
}
function cardClick(card){
if (selected==2){
return ;
}
if (selected==0){
choiceOne=card;
document.images[card].src = cards[card];
selected = 1;
}else {
selected = 2;
choiceTwo = card;
document.images[card].src =cards[card];
var timer=setInterval(checking,interval);
}
function checking()
{
clearInterval(timer);
numOfTries++;
document.getElementById("tries").innerHTML = numOfTries;
if (cards[choiceTwo]==cards[choiceOne]){
matches++;
document.images[choiceOne].src = "img/memoryBgI.png";
document.images[choiceTwo].src = "img/memoryBgI.png";
//choiceTwo.onclick=null;
} else {
document.images[choiceOne].src = "img/memoryBg.png";
document.images[choiceTwo].src = "img/memoryBg.png";
selected = 0;
return ;
}
if (matches == nOfPairs){
timeFinish = new Date().getTime();
time = Math.round (((timeFinish - timeStart)/1000));
alert("Congrats! You needed " + numOfTries + " tries, and " + time + " seconds.");
}
selected = 0;
return ;
}
}
}
so the problem is, that I can just click 2 times on one card and it will look like a coincidence. My second problem is that when I have a real coincidence, I can still click on that card (by "real coincidence" i mean two same pics. so when i find them, they have to be not active, and when im clicking on them, they should just simply do nothing.). Can someone help me? Similar TutorialsOk so i want to work on an EASY basic game. As simple as Guess what number... But there are some twist... Ok So here is my example... (HTML, i know this.)I'm Guessing a number 1-99. What is it? (java) Lets say its 66 and they guess 53, have the text rusult be in a pop up window be: Too low! (java) Lets say they guess 78, have the text rusult be in a pop up window be: Too high! (java) Lets say they guess 100+, have the text rusult be in a pop up window be: Out of range! (java)But lets say they guess 66, have a text result be in a pop up window be: You've won! (java) I want a text field where you can enter your answer, and it will do the actions above. Can anyone code this? Thanks for reading! This is a simple basic game i want to make. Its a "What Am I" Riddle... The questions is (In HTML which i already know): I'm as light as a feather but no man can hold me for long. What am I? the answer is: Your Breath. (This is where the JAVASCRIPT comes in) Lets say they guess a rock, have a pop up say: Wrong Answer. Please try again. Lets say they guess Your breath -OR- Breath, have a pop up say: Correct! I want a text field where you can enter your answer, and if they choose ANYTHING but the 2 correct answers above, it will display please try again. Can anyone code this please? Thanks for reading. Hi everyone, Really hoping someone can help me with a javascript / memory problem I'm having. Environment is Win7, MSIE v8.0. I have a pretty simple test function for this problem: Code: function go() {
// create giant text string in variable 'bill' then set 'bill' to null - store inside variable called 'test' as text.
var test = "bill = 'blah blah blah blah blah (repeat blah about a thousand times or so for file size)'; bill = null;";
// execute text inside variable 'test' as code
var tester = new Function(test);
// destroy function used to execute string as code
tester = null;
}
now, when you trigger the function go() through a button (ie <button onclick='go();'>go</button>) you can watch the memory usage in taskmgr go up every time you click the button (for me it goes up about 3MB every time go() is called - but that will depend on how many blah's you have). I have tried replacing var tester = new Function(test); with the eval() command... Same problem. It would appear the function is creating (storing in memory) a new instance every time its called ... What am I doing wrong here?? How do I stop the memory increasing every time i try to execute the string 'test' as script? Checked this code in Chrome and Firefox - they don't seem to have any memory issues running this code - its only a IE issue (*sigh*). That doesnt help me as the problem relates to a client's HTA application (can't switch off IE engine). Huge thanks in advance! Okay, so I'm making something so IF the number is BETWEEN this number, and that number, I want it to display a certain number. Ex. Code: var Num1 = 100
var Num2 = 200
var Num3 = 1
If (Num1{THIS IS WHAT I DON'T KNOW}Num2)
{
alert(Num3)
}
Also, could somebody please tell me what those are called? The; == != || etc. Because I was having a TERRIBLE time trying to google that. AHH! I'm sorry for this. I know this is a stupid question. I've created a web application which uses just JS\Jquery\ajax, without any page reloads. The issue is, it starts working really slow after using it for a while since it probably has lots of memory leaks. No i'm reading about memory consumption and memory leaks and my first question is about the following scenario. I have an ajax request each second which checks for new messages. and when i get the response, the following loop is part of the code. Code: for (i=0; i<pm_length; i++) {
var content = data.pm[i].content;
var mood = data.pm[i].mood;
var time_added = data.pm[i].time_added;
var fb_id = data.pm[i].user_id;
var msg_id = data.pm[i].id;
var user_status = data.pm[i].user_status;
var full_name = data.pm[i].first_name + " " + data.pm[i].last_name;
if($("#pm"+fb_id).length == 0) {
var closetab = '<a class="close">x</a>'+full_name;
$(".tabs").append('<li class="bot_room" id="pm'+fb_id+'" type="pm" tab="#tabpm'+fb_id+'">'+closetab+'</li>');
$(".tab_container").append('<div id="tabpm'+fb_id+'" class="tab_content" style="display: none;"></div>');
}
create_message('pm'+fb_id, msg_id, fb_id, full_name, content, 'no', user_status, time_added, mood);
if($("#pm_alert").attr('checked')) {
soundManager.onready(function(){
var mySound = soundManager.createSound({
id:'mySound1',
url:'images/new_msg.mp3'
});
mySound.play();
mySound = null;
});
}
content = null;
mood = null;
time_added = null;
fb_id = null;
msg_id = null;
user_status = null;
full_name = null;
}
and my question is, is there a reason to actually null the variables if they will be redeclared any way on the following second? Hi: I was trying to post in flowplayer forum but... Anyway, the code below works fine when run with browser called from Coffee Cup HTML editor. Files are played as requested from button onClick events. All files called and all ref files are on hosting server. When I put this page on the server and click the first button, the files play fine. When I then click thge second button, the files called by the first button play again. If I then click the second button, the files called by button 2 play. If I then click button 5, the files called by button 2 play again. The previous config is somehow being stored somewhere and called. I have added this and that as you can see in the code to try to rid the old config but to no avail: playerConfig = null playerConfig.playlist =[]; should clear it. delete playerConfigplaylist[0]; Should clear it. and thinking it was bumped to [1] delete playerConfigplaylist[1]; Should clear that. So I think the old playerConfig.playlist should be gone but apparently not so. I have reviewed: jquery.min.js, flowplayer-3.2.6.min.js and flowplayer.playlist-3.0.8.js and cannot see any cause to this behavior though I am not a js ace. Any insight appreciated. Best regards <code> <script> var mediaPlayer = null; var playerConfig = null; function createPlayerConfig () { playerConfig = null; playerConfig = { log: { level: 'debug' } , play: null, plugins: { controls: { url: 'https://www.jala-mi.org/gmfiles/flowplayer.controls-3.2.5.swf', bottom: 0, height: 24, backgroundColor: "#2d3e46", backgroundGradient: "low", fontColor: '#ffffff', timeFontColor: '#333333', autoHide: 'never', play:true, volume:true, mute:true, time:true, stop:true, playlist:true, fullscreen:true, scrubber: true } } } }; function changePlaylist(newplaylist,no_of_items) { playerConfig.playlist = []; delete playerConfig.playlist[0]; for(i=0; i < no_of_items; i++) { playerConfig.playlist[i] = newplaylist; } delete playerConfig.playlist[1]; createPlayer(); // reload player with new playlist mediaPlayer.play(); // start the newly loaded clip sequence* } function createPlayer() { if(mediaPlayer != null) { if(mediaPlayer.isLoaded()) { mediaPlayer.unload(); mediaPlayer = null; } } $f("player", { src:"https://www.jala-mi.org/gmfiles/flowplayer-3.2.7.swf" }, playerConfig ); mediaPlayer = $f("player"); } function loadandplay(intro, movie) { var presentation = {url: movie , duration: 0, autoPlay: true, autoBuffering: false, fadeInSpeed: 8000, fadeOutSpeed: 5000, title: 'JPD 02/28/2011',playlist: [{url: intro , duration: 0, position: 0, fadeInSpeed: 5000, fadeOutSpeed: 8000, autoPlay: true, autoBuffering: true, }] }; createPlayerConfig(); changePlaylist(presentation, 1); }; </script> </code> html <code> <div id="side"> <br><br> <input type="button" class="plbtn" value="November 2010" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/Intro112210.flv', 'https://www.jala-mi.org/gmfiles/collections112210.flv')"> <br> <input type="button" class="plbtn" value="January 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/intronone.flv', 'https://www.jala-mi.org/gmfiles/')"> <br> <input type="button" class="plbtn" value="February 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/Intro22811.flv', 'https://www.jala-mi.org/gmfiles/jpd_3.flv')"> <br> <input type="button" class="plbtn" value="March 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/Intro32811.flv', 'https://www.jala-mi.org/gmfiles/assets32811.flv')"> <br> <input type="button" class="plbtn" value="April 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/intronone.flv', 'https://www.jala-mi.org/gmfiles/')"> <br> <input type="button" class="plbtn" value="May 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/intronone.flv', 'https://www.jala-mi.org/gmfiles/')"> <br> <input type="button" class="plbtn" value="September 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/intronone.flv', 'https://www.jala-mi.org/gmfiles/')"> <br> <input type="button" class="plbtn" value="October 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/intronone.flv', 'https://www.jala-mi.org/gmfiles/')"> <br> <input type="button" class="plbtn" value="November 2011" style="background-color:#0D4A80; color:#fff" onClick="javascript:loadandplay('https://www.jala-mi.org/gmfiles/intronone.flv', 'https://www.jala-mi.org/gmfiles/')"> <br> </div> </code> I am using firefox 8. Is there a way is seeing the details of its memory usage please? Many thanks for any help, S Greeting....! Does anyone know that how's the JavaScript memory model work? I mean as we know that a Stack stores primitive type variables and references, a Heap stores referenced type object, what about functions? Should functions are stored at a Memory or what I said is wrong. Is there any books or resources are talking about JavaScript Memory Model? Thanks a lot!!!! Dan Doing some RSA encryiption in java script Nothing big, strings like max 20 chars in lenght. After a couple (random, could be 10 or 50 or anything operations) of that, browser does not freeze, server does not freeze but wont work anymore on any string, i.e same result for any string. Restarting browser helps. What should I look for, are there any tools for FF to look for js memory leaks an such ? ok, i'm sure you all will laugh at this, but it seems really bizzario to me. i have two small routines worked out. routine G gets a value out of the db and brings it back to the browser script. routine P puts a value into the db from the browser script. they both run fine. but......... you have to turn the browser totally off and restart it after retrieving a value out of the db (?) why? is this some kind of "clear memory" i need to be doing. its like the last value i retrieved thru the server is stuck in memory and keeps coming up, and it won't flush out until i turn the browser off and restart it. is this a Javascript problem or a PHP problem? i dont' have a clue, maybe i need to somehow flush the memory in the PHP file after i echo() back the result.? is that normal? thanks, Paul I'm working on a Virtual Tabletop project and am running into issues where tons of memory is accumulated. I've set up a test where 502 pieces are on the board and every second the board randomly zooms in/out 5%. After 30 seconds, I clear the interval. http://ontodevelopment.com/boardtest/ When the board zooms, every game piece has has to be re-sized. Using Firefox, watch the memory go up but never come back down. In IE and Chrome the leak is no where near as bad. Any ideas or pointers would be appreciated. I'm designing a page to fade multiple images (three) in and out over a set period of time (one minute, say). The code I have works as follows: I define an array and fill it with the div objects I want to fade in and out. I have some simple tags (2 for opaque, 1 for fading in, -1 for fading out, etc.) that I set to show the state of the object. First I check if the object is opaque, and if so set it to fade along with a time; Or if it's transparent I give it a 1 in 10 chance of fading in during this iteration. If it's currently fading in or out I check to make sure it's on track and change the opacity of the div accordingly. Originally, I had the function call back to itself using setTimeout after the loop had gone through all the divs and changed their opacities appropriately. This caused an out of memory error (though, strangely, if I had any alerts in the function it didn't give me the error). So the version below has the code in a while loop to let it run for 20 seconds - this gives me the "a script...run slowly, do you want to continue the script?" message. So I have several questions: 1) First and foremost, why is my function causing out of memory/run slowly errors and what is the best way to fix that? 2) Is there a better way to code this effect (final result will be six lights fading in and out for a minute or so). 3)I'm not an experienced programmer, so any bad practices, ways to streamline, no no's, etc. that you see, please point out. I've only posted the script here - the page simple consists of three divs (id's grad0, grad1, grad2) and a call to the function copied here. Thanks in advance. Code:
function commencez(){ //parent function to store var's
var TimeToFade = 10000;
theArray = new Array(2);
var wrench = new Date().getTime();
for (var a=0; a<3; a++){ //fill the array with objects
theArray[a] = document.getElementById("grad" + a);
theArray[a].FadeState = -2; //start them transparent
}
function fader() {
var check = new Date().getTime(); //stops the function after 30 seconds
if( check <= wrench + 30000 )
{
return;
}
for(var i=0; i<3; i++){
if (theArray[i].FadeState !=1 && theArray[i].FadeState != -1)
{
if( theArray[i].FadeState == 2)
{
theArray[i].FadeState = -1;
theArray[i].FadeTimeLeft = TimeToFade;
theArray[i].FadeBegan = new Date().getTime();
}
if( theArray[i].FadeState == -2)
{
var rndm=Math.floor(Math.random()*11);
if( rndm == 1)
{
theArray[i].FadeState = 1;
theArray[i].FadeTimeLeft = TimeToFade;
theArray[i].FadeBegan = new Date().getTime();
}
}
}
if( theArray[i].FadeState == 1 || theArray[i].FadeState == -1)
{
var now = new Date().getTime();
since = now - theArray[i].FadeBegan;
if( theArray[i].FadeTimeLeft <= since )
{
theArray[i].style.opacity = theArray[i].FadeState == 1 ? '1' : '0.2';
theArray[i].style.filter = 'alpha(opacity = ' +
(theArray[i].FadeState == 1 ? '100' : '20') + ')';
theArray[i].FadeState = theArray[i].FadeState == 1 ? 2 : 2;
}
theArray[i].FadeTimeLeft -= since;
var howMuch = theArray[i].FadeTimeLeft / TimeToFade;
if( theArray[i].FadeState == 1)
{
howMuch = 1-howMuch;
theArray[i].style.opacity = howMuch;
theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
}
if( theArray[i].FadeState == -1)
{
theArray[i].style.opacity = howMuch;
theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
}
}
} //close the for loop
setTimeout( fader() , 500); //last thing fader does is recall itself after half a second
} //close the fader function
fader();
} //close parent function
</script>
I have a game page on my site and I am trying to protect direct access to it by .htaccess .htpasswd but is not accepting user name and password? .htaccess: AuthUserFile /home/vhosts/kandcoentertainment.freetzi.com/.htpasswd AuthType Basic AuthName "game1" <Files "cookietest.html"> Require valid-user </Files> .htpasswd test:8888 Any suggestions on why it is not working? What I would like to do is have apay and play once setup but as I am a novice and dont have a clue HELP PLEASE!!! What I have been told is - protect the files, add a client side cookie to game page then upon url payment return validate cookie giving single access and when played the user cannot replay by refresh or just typing in url because cookie expired ? I have tried to write the scripts up with no success. Hi! I am studying webdesign and we also go through a chapter of javascript-programming. Our first assignment is to create a dice game. I have written a code and in the beginning it worked, except that all the dices showed the same random number. I tried to fix that and now I do not know what I have done! In the game, you shall click on a link and the three dices will show random numbers. Here is my code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tärningsspel</title>
<script type="text/javascript" language="javascript">
function showDice(imgNr) {
if (imgNr == 1) var imgUrl = "1.gif";
else if (imgNr == 2) var imgUrl = "2.gif";
else if (imgNr == 3) var imgUrl = "3.gif";
else if (imgNr == 4) var imgUrl = "4.gif";
else if (imgNr == 5) var imgUrl = "5.gif";
else if (imgNr == 6) var imgUrl = "6.gif";
document.tarning1.src = imgUrl;
document.tarning2.src = imgUrl;
document.tarning3.src = imgUrl;
}
function randomInteger() {
var randNumber = Math.random();
var randNumber = Math.floor(5*randNumber)+2;
return randNumber;
}
function showRandomPict() {
var imgNr = randomInteger(6);
showDice(imgNr);
var imgName = "tarning1" + imgNr;
var imgName = "tarning2" + imgNr;
var imgName = "tarning3" + imgNr;
}
function PlayAll(){
diceSwitch('tarning1', 'text1');
diceSwitch('tarning2', 'text2');
diceSwitch('tarning3', 'text3');
}
function diceSwitch(randNumber,textRuta){
var randNumber = randomInteger();
}
</script>
</head>
<body>
<p><b>Tärning 1:</b><br /><span id="text1">1</span></p>
<p><b>Tärning 2:</b><br /><span id="text2">2</span></p>
<p><b>Tärning 3:</b><br /><span id="text3">3</span></p>
<img src="1.gif" name="tarning1" onclick="javascript:diceSwitch('tarning1', 'text1')" />
<img src="2.gif" name="tarning2" onclick="javascript:diceSwitch('tarning2', 'text2')" />
<img src="3.gif" name="tarning3" onclick="javascript:diceSwitch('tarning3', 'text3')" />
<p><a href="javascript:PlayAll()">Spela alla!</a></p>
</body>
</html>
Thank you! A newbie here can you please help me with my javascript game. I cant seem to make it work. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Play</title> <script type='text/javascript'> function win(x, z){ if(x == z) return "It's a draw"; draw.value++; { if(x == "Fire")&&(z == "Air") return "You Lose, Fire beats Air!"; loss.value++; else if(x == "Fire")&&(z == "Earth") return "It's a draw!"; draw.value++; else if(x == "Fire")&&(z == "Water") return "You Win, Fire is beaten by Water!"; win.value++; } { if(x == "Air")&&(z == "Earth") return "You win, Air beats Earth"; win.value++; else if(x == "Air")&&(z == "Water") return "It's a draw!"; draw.value++; else if(x == "Air")&&(z == "Fire") return "You lose, Air is beaten by Fire!") loss.value++ } { if(x == "Earth")&&(z == "Air") return "You Lose, Earth is beaten by Air" loss.value++; else if(x == "Earth")&&(z == "Water") return "You Win, Earth beats Water"; win.value++; else if(x == "Earth")&&(z == "Fire") return "It's a draw!"; draw.value++; } { if(x == "Water")&&(z == "Fire") return "You win, Water beats Fire"; win.value++; else if(x == "Water")&&(z == "Air") return "It's a draw!"; draw.value++; else if(x == "Water")&&(z == "Earth") return "You lose, Water is beaten by Earth" loss.value++; } } function ran(){ var gen = Math.random(); if(gen <= 0.25) var com = "Fire"; if((gen > 0.25)&&(gen<= 0.50)) var com = "Earth"; if(gen > 0.50)&&(gen<= 0.75)) var com = "Water"; if(gen > 0.75) var com = "Air"; if(document.c.game[0].checked) var use = "Fire"; if(document.c.game[1].checked) var use = "Earth"; if(document.c.game[2].checked) var use = "Water"; if(document.c.game[3].checked) var use = "Air"; alert ("The computer played: " + com +". You played: " + use + ". " + win(com,use)); } </script> <style type="text/css"> body {background-color:#7f9527;} .style1 { color: #FFFFFF; } .style2 { font-family: "After Disaster"; } .style3 { font-family: "After Disaster"; font-size: 30pt; color: #FFFFFF; margin-left: 160px; } .style4 { font-size: xx-large; } .style5 { color: #FFFFFF; font-size: large; } .style6 { color: #FFFFFF; font-family: "After Disaster"; font-size: large; } .style7 { margin-top: 0px; } .style8 { color: #FFFFFF; font-family: "After Disaster"; font-size: xx-large; margin-left: 280px; } .style9 { font-size: large; } .style10 { margin-top: 12px; } </style> </head> <body> <p class="style3" style="width: 581px">Avatar The Last Air bender: Element Fight</p> <p class="style8" style="width: 340px"> <img alt="" src="Avatar_Aang_by_Shira_chan.jpg" width="339" height="244" class="style7" /></p> <p class="style6">Select Your Attack</p> <form name="c" method="post" class="style2"> <span class="style4"><span class="style9"> <input name="game" type="radio" value="Fire" /></span></span><span class="style5">Fire</span><span class="style9"><br /> </span><span class="style4"><span class="style9"> <input name="game" type="radio" value="Earth" /></span></span><span class="style5">Earth</span><span class="style9"><br /> </span><span class="style4"><span class="style9"> <input name="game" type="radio" value="Water" /></span></span><span class="style1"><span class="style9">Water<br /> <span class="style4"> <input name="game" type="radio" value="Air" /></span>Air</span><br /></span> <tr> <td colspan="4" align=center> <span class="style2"> <input type="text" name= "win" readonly="readonly" value="0" size="2"> Wins </input> <input type="text" name= "loss" readonly="readonly" value="0" size="2"> Losses</input> <input type="text" name= "draw" readonly="readonly" value="0" size="2"> Draws</input> </span> </td> </tr> </form> <form method="post"> <br /> <input name="Play" type="button" value="Play" onClick="ran()" style="width: 189px; height: 39px" /> <a href="Instructions.htm"> <input name="Button1" type="button" value="Instructions" style="width: 189px; height: 39px" class="style10" /></a></form> </body> </html> Hello all, * I'm very new to javascript and working on a quiz game. Theres a set of code im working on but i need help, and greatly appreciate any help. * After every questions, there is a tick or wrong animation/image that should pop over the answer card. I created the gif file one for a tick and one for a wrong: http://www.freeimagehosting.net/cqn91 http://www.freeimagehosting.net/v74v6 *By right the user should not be able to click on the answer cards anymore after finishing the quiz. For now the score keeps going up although the quiz is done. And after the quiz is done, a button should direct the user to the DetailedResult page, instead of the popup. *How to change the popup into a Html(DetailedResult) page, and instead of a text eg.(resent.jpg), how can I make the real image show, and if the qn is correct, how can I place a tick and if the qn is wrong how can I place a wrong image. Ive created both images. tick image==>http://i1069.photobucket.com/albums/...ttica/tick.jpg wrong image==>http://i1069.photobucket.com/albums/...ca/wrong-1.jpg *Suppose at the bottom of the html page, should have a button for the user to retry only wrong answers. *And how do i keep updating the user score for each attempt he tries on the table. Below are a set of code i'm working on, and another set of Html layout(DetailedResult) which i intend to achieve. Code: <!DOCTYPE HTML>
<html>
<head>
<title> Card Test </title>
<style>
img { margin:7px; }
#Question {
text-align:left;
font-family:"Vladimir Script";
font-size:40px;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/private....pm&pmid=124136
var baseURL = 'http://s1069.photobucket.com/albums/u475/felettica/';
var questions = [
// format [pic,[image1,imag2,image3]],
['happy.jpg', ['*|delight.jpg','|sad.jpg','|confuse.jpg']], // 0
['angry.jpg', ['|sad.jpg','*|resent.jpg','|joyful.jpg']], // 1
['father.jpg',['|sister.jpg','|mum.jpg','*|dad.jpg']], // 2
['sports.jpg',['|crying.jpg','*|soccer.jpg','|sleep.jpg']], // 1
['fruit.jpg', ['*|apple.jpg','|meat.jpg','|bacon.jpg']], // 0
];
var qNo = 0;
var correct = [];
function $_(IDS) { return document.getElementById(IDS); }
function NextQuestion(IDS) {
var response;
switch (IDS) {
case 'image1' : response = 0; break;
case 'image2' : response = 1; break;
case 'image3' : response = 2; break;
}
if (response == currentQuestion[4]) {
correct[0]++;
alert('Well Done');
} else {
alert('Wrong Answer');
}
correct.push(currentQuestion.join('|')+'|'+response); // alert(correct.join('\n'));
qNo++;
if (qNo < questions.length) {
$_('score').innerHTML = 'Sco '+correct[0];
showImages(qNo);
$_('Question').innerHTML = 'Question: '+(qNo+1);
} else {
$_('score').innerHTML = 'You had '+correct[0]+' correct answers for '+questions.length+' questions';
DisplayQuizResults();
// alert('End of quizi\n\n'+correct.join('\n'));
return;
}
// I created a two .gif animation of a tick and a wrong
// but unsure how to place it so that it appears on the
// correct answer image instead of the alertbox.
// Tick animation Url==> http://www.freeimagehosting.net/cqn91
// Wrong animation Url==>http://www.freeimagehosting.net/v74v6
// I tried to add a button to direct to the DetailedResult page
// which shows the correct and wrong questions but it didnt appear.
// It should appear after the alert('End of quiz'); pops up.
}
var currentQuestion = [];
function showImages(ptr) {
var tarr = []; var tmp = '';
currentQuestion = [];
currentQuestion.push(questions[ptr][0]); // 0
temp_questions = questions[ptr][1].slice();
temp_questions.sort(randOrd);
for (var i=0; i<3; i++) {
tarr = temp_questions[i].split('|')
if (tarr[0] != '') { tmp = i; } // save correct answer
currentQuestion.push(tarr[1]); // 1,2,3 // save response order
}
currentQuestion.push(tmp); // 4
$_("Pic").src=baseURL+currentQuestion[0];
$_("image1").src=baseURL+currentQuestion[1];
$_("image2").src=baseURL+currentQuestion[2];
$_("image3").src=baseURL+currentQuestion[3];
}
function randOrd() { return (Math.round(Math.random())-0.5); }
window.onload = function() {
correct = []; correct.push(0);
questions = questions.sort(randOrd);
showImages(0);
}
// Following from: http://www.yourhtmlsource.com/javascript/popupwindows.html
function DisplayQuizResults() {
var generator=window.open('','name','height=400,width=500');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('<link rel="stylesheet" href="style.css">');
generator.document.write('</head><body>');
var str = '';
var tarr = [];
// correct array format: item +|+ question +|+ answer +|+ response
var str = '<h1> Your Results</h1>';
for (var i=1; i<correct.length; i++) {
tarr = correct[i].split('|'); // item|img1|img2|img3|ans|resp
str += 'Question #'+i;
str += ' was: '+tarr[0];
str += '<br>Correct answer was: '+tarr[4] +'('+tarr[tarr[4]*1+1]+')';
if (tarr[4] != tarr[5]) {
str += ' but your answer was: '+tarr[5] +'('+tarr[tarr[5]*1+1]+')';
}
str += '<p>';
}
generator.document.write('<p>'+str+'<p>');
generator.document.write('<p><a href="java_script:self.close()">Close</a> the popup.</p>');
generator.document.write('</body></html>');
generator.document.close();
}
</script>
</head>
<body>
<div id="Question">Question: 1</div>
<div align="center">
<img id="Pic" src="" height="220" width="321"> <p>
<img id="image1" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<img id="image2" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<img id="image3" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<p> <span id="score">Sco </span> <p></div>
</body>
</html>
================================================ Instead of the popup, instead i thought having it on a Html page (DetailedResult), the layout below ================================================ Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
Table{
position:absolute;
left:632px;
top:97px;
width: 408px;
border:1px solid black;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table width="472" border="0" cellspacing="0" cellpadding="0"> <!--In the table,the scores of the user should appear for the the current attempt and previous attempts so that the user can track his scores-->
<tr>
<th width="227" scope="row"><strong>My Attempts</strong></th>
<td width="181"> <div align="center">My sco </div></td>
</tr>
<tr>
<th height="19" scope="row">1st Attempt</th>
<td><div align="center">4/5</div></td>
</tr>
<tr>
<th scope="row">2nd Attempt</th>
<td> </td>
</tr>
<tr>
<th scope="row">3rd Attempt</th>
<td> </td>
</tr>
</table>
<h1> My Current Attempt </h1>
<p> </p>
<p>Question 1: "code to get Qn 1 image" "either tick image or wrong image" </p> <!-- For each qn, its picture will appear and either a tick or wrong image next to it. If the user answer it correctly, then a tick will appear or other wise. The image of the question would be smaller. -->
<p>Question 2: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p>Question 3: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p>Question 4: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p>Question 5: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p><button type="button">Retry Wrong Question</button><p> <!-- direct page to retry wrong qns once more -->
<!-- tick image URL:http://i1069.photobucket.com/albums/...ttica/tick.jpg
wrong image URL http://i1069.photobucket.com/albums/...ca/wrong-1.jpg
baseURL:http://s1069.photobucket.com/albums/u475/felettica/ -->
</body>
</html>
What I'm trying to achieve is it initialises a number between 1-2000 randomly. When the submit button is clicked it simply returns if the number that is in putted is higher or lower than the randomly initialised number. External JavaScript: Html Code: <html>
<head>
<script type="text/javascript" src="jsscri.js"></script>
</head>
<body onload="initialisation ()">
<form name="exampleform">
<h3>
Number: <input name="number" type="text"
onchange='checkNumber( this.value );'>
</h3>
<p>
<input name="submit" type="button" value="Guess"
onclick= 'checkValue()';/>
</p>
</body>
</html>
If you load this onto a webpage you'll see what i'm trying to do. I tried deleting the rest of the code to keep the size of the code down. sorry this post is duplicated, the original post:http://www.codingforums.com/showthread.php?t=261488
Hello, I am trying to create a clock for my video game. I need to begin the clock at zero and count while the game is going. I need to have the clock count in standard minutes and seconds but not be based on the actual time of day. I am coding in javascript for an applet.
How hard would it be to make a 2d game similar to super smash bros? Basically I want to have a scrolling position (instead of a static image, where the background is always the same) where when the user moves his character object, the area of vision moves with him. Also, will it work with using keyboard keys? I have to integrate it into a database and I know quite a bit of javascript so I am hoping it is possible. Thanks! Max |
|||||||