JavaScript - Console Game Jquery Problem
Hi, i'm having problems with my console game, when i type in help when testing it just doesn't do anything, it's probarly a stupid mistake but i can't find what i did wrong :s
index.html code Code: <html> <head> <script type="text/javascript" src="scripts/jquery.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Console Game Project</title> </head> <body> <div id="console"> <p id="message_startgame">Welcome to Nieli's game! To control the game you must type in commands</p> <p id="area_northcorridor">You are in the north door. There is a sword on the ground.</p> <p id="message_help" style="display: none;">Here is a list of commands</p> <!-- PLACEHOLDER: THIS IS WHERE EVERYTHING WILL BE INSERTED BEFORE --> <div id="placeholder"></div> <form onsubmit="return false;"> <input type="text" size="50" autofocus="autofocus" id="command_line" /> </form> </div> <script type="text/javascript" src="scripts/game.js"></script> </body> </html> game.js code Code: //been to variables beentonorthdoor = true; // //Item variable sword = false; // //Current room currentroom = "n_corridor"; // $(document).ready(function() { $("form").submit(function() { var input = $("#command_line").val(); if (input == "help") { $("#message_help").clone().insertBefore("#placeholder").fadeIn(1000); } $("#command_line").val(""); }}; }}; I have on my website ( www.nieeli.com/game/ ) the index.html, then a folder scripts with jquery.js and game.js in.. Could anyone help me Oh, just noticed there is a Jquery help section... Sorry Similar TutorialsHi, i made a game,where you controll a paddle to bounce back a ball and it hits the bricks on top. The problem is that my eventhandlers don't work after i've added delay function,to make a counter(counting from 3 to 1 before game starts). Any tips?Is it scope problem? Code: var ballx = 100; var bally = 100; //coord x and y,radius of a ball var ballr = 10; var recx; var recy; //coord x and y,width and height of a paddle var recw = 100; var rech = 15; var dx = 2; //x coord step for animated movement of ball var dy = 2; //y coord step for animated movement of ball var rx = 5; //x coord step for animated movement of paddle var WIDTH; //width of main canvas var HEIGHT; //height of main canvas var ctx; //drawn shape var leftDown = false; var rightDown = false; //keyboard arrow buttons var upDown = false; var downDown = false; var mouseXmin; var mouseXmax; var intervalId; var bricks; var NROWS; var NCOLS; var BRICKWIDTH; var BRICKHEIGHT; var PADDING; var y=4; window.addEventListener("load",init,false); //event for loading main func window.addEventListener("keydown",buttonpressed,false); //event for checking if button is pressed window.addEventListener("keyup",buttonreleased,false); //event to check if button is released window.addEventListener("mousemove",mousemoved,false); //event for controlling paddle with mouse movement function init_mouse(){ //initialize coord for mouse movement mouseXmin = document.getElementById('can').offsetLeft; mouseXmax = mouseXmin + (WIDTH-recw); //doesn't work that pretty...check? } function init_bricks(){ //initialize bricks NROWS = 5; NCOLS = 3; BRICKWIDTH = (WIDTH/NCOLS) - 1; BRICKHEIGHT = 15; PADDING = 1; bricks = new Array(NROWS); for(i=0; i<NROWS; i++){ bricks[i] = new Array(NCOLS); for(j=0; j<NCOLS; j++){ bricks[i][j] = 1; } } } function mousemoved(e){ //function that enables movement of paddle with mouse if(e.pageX > mouseXmin && e.pageX < mouseXmax) recx = e.pageX ;//- mouseXmin; <---why would you need that?Movement is bugyy! FIX:) } function buttonpressed(e){ //to check if any of keyboard arrow buttons are pressed if(e.which==37) { leftDown = true; } if(e.which==39) { rightDown = true; } if(e.which==40) { upDown = true; } if(e.which==38) { downDown = true; } } function buttonreleased(e){ //function to check if button up,down,left or right is released if(e.which==37) { leftDown = false; } if(e.which==39) { rightDown = false; } if(e.which==40) { upDown = false; } if(e.which==38) { downDown = false; } } function clear(){ //function to clear the stage ctx.clearRect(0,0,800,600); } function circle(x,y,r){ //function to draw circle shape ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } function rect(x,y,w,h){ //function to draw rectangle shape ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill(); } function checkforCoallision(){ //checks for borders of main canvas and if ball hits the paddle if(ballx + dx > WIDTH-ballr || ballx + dx < ballr) dx = -dx; if(bally + dy < ballr ) dy = -dy; else if (bally + dy > HEIGHT - ballr){ if(ballx + ballr > recx && ballx + ballr < recx + recw) dy = -dy; else {clearInterval(intervalId); alert('Game Over,Baby!');} bounce();} } function draw(){ //function that draws the desired shapes and animates them clear(); //clears the main canvas,so the animation would look smooth checkforCoallision(); //checks for borders of main canvas and if ball hits the paddle if(leftDown) recx -= rx; //enables movement of paddle right and left if(rightDown) recx += rx; for(i=0; i<NROWS; i++){ //drawing bricks for(j=0; j<NCOLS; j++){ if(bricks[i][j] == 1) { //checking if brick exists rect(j * (BRICKWIDTH+PADDING)+PADDING,i * (BRICKHEIGHT+PADDING) + PADDING, BRICKWIDTH, BRICKHEIGHT) } } } //have we hit a brick? rowheight = BRICKHEIGHT + PADDING; colwidth = BRICKWIDTH + PADDING; row = Math.floor(bally/rowheight); col = Math.floor(ballx/colwidth); //if so, reverse the ball and mark the brick as broken if (bally < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) { dy = -dy; bricks[row][col] = 0; } circle(ballx,bally,ballr); rect(recx,recy,recw,rech); ballx += dx; bally += dy; } /* function init(){ ctx = document.getElementById('can').getContext('2d'); WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto recx = WIDTH / 2; //setting the coord x of a paddle recy = HEIGHT - rech; //setting the coord y of a paddle init_mouse(); init_bricks(); intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it return intervalId; } */ function delay() { if(y<=0) { document.getElementById('content2').innerHTML = "<canvas id='can' width='300' height='300'>This text is displayed if your browser does not support HTML5 Canvas.</canvas>"; ctx = document.getElementById('can').getContext('2d'); WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto recx = WIDTH / 2; //setting the coord x of a paddle recy = HEIGHT - rech; //setting the coord y of a paddle init_mouse(); init_bricks(); intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it return intervalId; } else { Object = document.getElementById('content2'); y = y - 1; Object.innerHTML = "<div style='text-align:center;width:25em;margin: 0px auto;height:100px;position:absolute;top:50%;margin-top:-50px;'>"+y+"</div>"; setTimeout("delay()", 1000);} } I would like to have a button just like for firebug, for error console, and that it would open error console window like for firebug. Is there a setting for that in FF, or some kind of addin outthere ?
Okay I'm writing a JavaScript application that would prompt the user for a number between 0 and 2, generate a random number for the computer, then take that input and display two images (in this case two hands making rock, paper, or scissor symbols at each other) using an array, and displaying text indicating a win, draw, or loss. I'm having a lot of problems getting this to work as I am new to JavaScript and am wondering if anyone could help me fix this problem. I just want the input from the prompt AND the random number to translate to what in the array should be displayed and what text is then shown at the bottom. Any comments/advice/help is greatly appreciated! By the way for some reason it doesn't let the letters H T M L show up together so that is where the ellipses are showing up! Code: <script type = "text/javascript"> selection = prompt("Enter 0 for rock, 1 for paper, and 2 for scissors") userChoice = parseInt(selection) arrayHolder = new Array(); arrayHolder[0] = "rock.jpg"; arrayHolder[1] = "paper.jpg"; arrayHolder[2] = "scissors.jpg"; compchoice = Math.floor(Math.random()*arrayHolder.length) function playGame(idholder1) { document.images["userpic"].src = arrayHolder[userchoice]; document.images["comppic"].src = arrayHolder[compchoice]; if (userChoice == 0 && compchoice == 0) { document.getElementbyId(idholder1).innerHTML = "DRAW!" } else if (userChoice == 0 && compchoice == 1) { document.getElementbyId(idholder1).innerHTML = "Paper beats Rock, you lose!" } else if (userChoice == 0 && compchoice == 2) { document.getElementbyId(idholder1).innerHTML = "Rock beats Scissors, you win!" } else if (userChoice == 1 && compchoice == 0) { document.getElementbyId(idholder1).innerHTML = "Paper beats Rock, you win!" } else if (userChoice == 1 && compchoice == 1) { document.getElementbyId(idholder1).innerHTML = "Draw!" } else if (userChoice == 1 && compchoice == 2) { document.getElementbyId(idholder1).innerHTML = "Scissors beats Paper, you lose!" } else if (userChoice == 2 && compchoice == 0) { document.getElementbyId(idholder1).innerHTML = "Rock beats Scissors, you lose!" } else if (userChoice == 2 && compchoice == 1) { document.getElementbyId(idholder1).innerHTML = "Scissors beat Paper, you win!" } else if (userChoice == 2 && compchoice == 2) { document.getElementbyId(idholder1).innerHTML = "Draw!" } } </script> </head> <body> <p> <center><img src="rock.jpg" width="197" height="171" alt="rock" id="userpic" /><img src="paper.jpg" width="210" height="95" id="comppic" /><br /> <h1 id="gametext" onLoad="playGame('gametext')">ROCK PAPER SCISSORS SHOOT!</h1></center> </p> What can I do to find out what the errors in the error console mean?
Hello, Error Console tells me : exp is null Line 10 This does not make any sense to me. Could someone look at the short script below and tell me why I get this message? I know how to make this script work, but I just want to understand why function changePar cannot access the variable exp in the script below. Thank you very much. <code> <!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"> <head> <title> Exercise 2</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> exp=document.getElementById("experiment"); function changePar() { exp.getElementsByTagName("button")[0].onclick=function() { document.getElementById("changingParagraph").innerHTML="Hello World"; } } window.onload=changePar; </script> </head> <body> <div id="experiment"> <button>Click Here</button> </div> <p id="changingParagraph"></p> </body> </html> </code> I'm working with greasymonkey scripts. Firefox JS console would always display GM script errors, but all of the sudden it stopped doing that. Script just won't load and no errors are displayed. I didn't touch any settings, yesterday they were showing fine, today none are displayed. Would appreciate any help.
I use console.log to print the dom element info, but some results make me very confused.The code is below, you can paste it to a file and browse it. //********************** <html> <head> </head> <body> <script type="text/javascript"> function showObjInPage(obj) { document.write("=======================================<br/>"); document.write((typeof obj) + "<br/>"); document.write("length: " + obj.length + "<br/>"); ///!!! 0, may ok document.write(obj); //!!!!!write nothing for (var prop in obj) { document.write(prop + " = " + obj[prop] + "<br/>"); } document.write("=======================================<br/>"); } function consoleLog(obj) { console.log("=======================================<br/>"); console.log((typeof obj) + "<br/>"); console.log("length: " + obj.length + "<br/>"); //!!!!! this is the confuse, it is 0, but the code below show obj correct! console.log(obj); //!!! write all the p elements for (var prop in obj) { console.log(prop + " = " + obj[prop] + "<br/>"); } console.log("=======================================<br/>"); } var elems = document.getElementsByTagName('p'); //console.log(elems); //console.log(elems.length); showObjInPage(elems); consoleLog(elems); </script> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> </body> </html> I want to print the p elements info use console.log, it is ok to log the elems, but the elems's length is 0, so it is not consistent! Maybe my code need to write after the 'p' element, but the problem is very confused. Is it a chrome console.log bug or just I do something wrong? i'm working with a javascript on a drupal website, but the saving function seems to work only as soon as i click 2 times on the "save" button. the code that fires the function is: Code: var param ="&usuario="+usuario+"&nivel="+nivel+gano+porc_gano+gasto+porc_gasto+tengo+porc_tengo+debo+ porc_debo+plazo_debo; var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = server_direction +"setMisDatos?callback=respuestaGuardarMisDatos¶m="+encodeURIComponent(param); var h = document.getElementsByTagName("script")[0]; h.parentNode.insertBefore(s, h); //or h.appendChild(s); the chrome console tells me the error is in the last line i copied, but i don't undertand what kind of error it is. using chrome console (specifically the "network" one), i see that it's written in red, status/text "failed", type "undefined" size/content "13 B / 0 B"; when it works it's: status/text "200/OK", type "text/json", size/content "256 B/ 38B". i'm not an expert with this, is there some more information that could be useful? the code fires a netbeans function, that stores data to a postgresql database, so i have like 100 variables that has to be stored when i click on the "save button". Actually before i put parentNode.insertBefore, there used to be appendChild(s), but then i found out this algorithm from google analytics, which seems to be working better than the previous one. Having said that, i can tell you that the GET works after the first time i click perfectly, with some weird things happening, like if i browse another tab for a while, then go back to the page, and click on save, it won't work again (same error). The variables are written like this: Code: var plazo_debo_casa1 = (getValor("plazo_debo_casa1")); var plazo_debo_casa2 = (getValor("plazo_debo_casa2")); var plazo_debo_casa3 = (getValor("plazo_debo_casa3")); var plazo_debo_prestamo1 = (getValor("plazo_debo_prestamo1")); var plazo_debo_prestamo2 = (getValor("plazo_debo_prestamo2")); var plazo_debo_prestamo3 = (getValor("plazo_debo_prestamo3")); var plazo_debo ="&plazo_debo_casa1="+plazo_debo_casa1+"&plazo_debo_casa2="+plazo_debo_casa2+"&plazo_debo_casa3="+plazo_debo_casa3+"&plazo_debo_prestamo1="+plazo_debo_prestamo1+"&plazo_debo_prestamo2="+plazo_debo_prestamo2+"&plazo_debo_prestamo3="+plazo_debo_prestamo3; and then together in the "param" variable. Is it clearer now? i tried to copy document.head.appendChild(s); instead of parentNode.insertBefore(s,h), but it still behaves the same way. Still not any suggestions? This is part of the javascript file loading on my page, and since the function setMisDatos is in netbeans and it works correctly as soon as it's fired (at least, that's what i notice after the first click), i don't think it's worth copying part of it here, right? are there maybe too many variables for the GET method? is there a way to check GET errors? i'm sorry for not being an expert but i would really like some help here. Ok 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. Please take a look at oceangamer.com Press the login/Sign up in the header of the page. It slides down fine in IE but in mine it refuses to slide up if i click close. Every other browser, it works??? Whats the problem? Hi, I have a problem with a fade script using jquery, in firefox etc.. all is ok. But IE the fade does not fade it just comes in & out. If any one would be kind enough to have a quick look I would appreciate it. You can see the js in the main page, not an external file. The url is www.thecityspa.co.uk Hi, could someone please take a look at my page with a jQuery gallery that refuses to work, however, it works perfectly on my local computer. View Page What is the problem, and how do I fix it? I am trying to make a lightbox type plugin and I am running into a problem. I hope it is something simple that I am overlooking. Here is my code: jQuery.fn.overlay = function() { $(this).click(function() { $('body').append('<div id="over"></div>'); $('#over').fadeIn(); }); }; It (almost) does what it should. It draws the #over div to the screen just fine. The problem is when I try to access it. I try something like this and get no response: $(function() { $('#over').click(function() { alert('moo'); }); }); Its like the element is not getting the ID assigned to it. Does anyone have any ideas? Thanks in advance. Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({ source: function (request, callback) { var dataString = {username : request.username}; $.ajax({ url: url.root + 'email/', data: dataString, //cache: false, complete: function(xhr, result) { if(result != 'success') return; var response = xhr.responseText; var usernameList = []; $(response).filter('li').each (function() { usernameList.push($(this).text()); )}; callback(usernameList); } }); } }); Can you tell me what's the problem Thank you Hi, JPlayer supports playlists, but it keeps the playlist in the javascript: Code: var myPlayList = [ {name:"Tempered Song",mp3:"http://www.miaowmusic.com/mp3/Miaow-01-Tempered-song.mp3"}, {name:"Hidden",mp3:"http://www.miaowmusic.com/mp3/Miaow-02-Hidden.mp3"}, {name:"Lentement",mp3:"http://www.miaowmusic.com/mp3/Miaow-03-Lentement.mp3"}, {name:"Lismore",mp3:"http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-04-Lismore.ogg"}, {name:"The Separation",mp3:"http://www.miaowmusic.com/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-05-The-separation.ogg"}, {name:"Beside Me",mp3:"http://www.miaowmusic.com/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-06-Beside-me.ogg"}, {name:"Bubble",mp3:"http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg"}, {name:"Stirring of a Fool",mp3:"http://www.miaowmusic.com/mp3/Miaow-08-Stirring-of-a-fool.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-08-Stirring-of-a-fool.ogg"}, {name:"Partir",mp3:"http://www.miaowmusic.com/mp3/Miaow-09-Partir.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-09-Partir.ogg"}, {name:"Thin Ice",mp3:"http://www.miaowmusic.com/mp3/Miaow-10-Thin-ice.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-10-Thin-ice.ogg"} ]; I'm trying to read in an xml file into this "myPlayList" array so that I can have an easy way of updating it, but I'm having trouble understanding this array structure. In the JPlayer code they use "myPlayList[i].name" and "myPlayList[i].mp3" in a for loop to cycle through the playlist and display the links in a list. My idea was to get rid of the "myPlayList" var declaration and dynamically populate the array variable from my xml file: Code: var xmlDoc; var myPlayList = [] if (window.XMLHttpRequest) { xmlDoc=new window.XMLHttpRequest(); xmlDoc.open("GET","playlist.xml",false); xmlDoc.send(""); xmlDoc=xmlDoc.responseXML; } // IE 5 and IE 6 else if (ActiveXObject("Microsoft.XMLDOM")) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load("playlist.xml"); } x=xmlDoc.getElementsByTagName("track"); for (i=0;i<x.length;i++) { myPlayList[i].name = x[i].childNodes[0].nodeName; myPlayList[i].mp3 = x[i].childNodes[1].nodeName; } It didn't display any songs I'm not sure what I'm doing wrong. Please help. Also, I'm guessing this has been done before (although I did a google search and couldn't find anything), so If you could point me to some resources I'd appreciate it. If there is another simpler option (over xml) I'd like to know. Thanks. Hi, First of all, please excuse my ignorance of JQuery(and coding in general) - Although I hastily grab plugins and try to use them, I really do appreciate them, and also the help you may provide me with my problem! My problem is this - I was looking for a simple and effective slideshow to use in a website I was making. SimpleSli.de(http://www.simplesli.de/) was exactly what I was looking for. It works great when it works but sometimes when I load the page it kind of doesn't work. I don't know what is going on but only approximately 50 pixels of the slideshow is visible. This happens sporadically when you refresh the page multiple times, and seems to not work more often on Google Chrome. I've eliminated every possible wrong doing in my code and tried installing firebug to help me identify the problem but for now this is beyond my understanding. JS Lint also purged errors in the code but still the same intermittent problem. I tried to contact David Drew - the creator of SimpleSli.de but he has not responded to me. On top of this I was trying to Auto Play the slideshow on load but could not get this to work. The code for it is available on the SimpleSli.de website but I tried to implement it in every possible way but it did not work. This problem is secondary and not really a proper problem so no worries if you can't help me on this one. The website in question is http://www.argsecurityscotland.co.uk/ Thank you in advance for your time and expertise, I really appreciate it. I am aware that there are common problems with this and that the fix is probably this: Code: $(function() { var zIndexNumber = 1000; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; }); }); However I can't figure out how to make my menu get in front of my jquery banner in ie6 and 7!! Ive been literally trying all day. Then I found that site explaining that that code would fix it. however I cannot get it to work with my site! Here is the link to my page: http://bit.ly/5fwhPP I'm not sure if just plopping that javascript before my other scripts will do it but it sounded like it from the page I found the code on. I could really use some help here I am completely jammed up and cant focus on anything else until i fix this stupid issue! Any help is therefore greatly appreciated! I am being told that a snippet of JQuery code in a website that I have inherited is having problems with a $() JQuery Library Implementation. It seems to keep throwing a "tagName" error. An offered solution was to recode the JQuery into traditional JavaScript using getElementById(). I'm new to JavaScript and clueless to JQuery. I'm not exactly sure how to start. How would something like this be changeable to Javascript? Code: <script type="text/javascript"> $(document).ready(function() { $(".signin").click(function(e) { e.preventDefault(); $("fieldset#signin_menu").toggle(); $(".signin").toggleClass("menu-open"); document.forms["loginForm"].elements.loginUser.focus(); }); $("fieldset#signin_menu").mouseup(function() { return false }); $(document).mouseup(function(e) { if($(e.target).parent("a.signin").length==0) { $(".signin").removeClass("menu-open"); $("fieldset#signin_menu").hide(); } }); }); </script> Hi all, I was following this tutorial for a jquery based scroller but I am having some problems: http://www.webdesignbooth.com/create...carousel-lite/ When it loads the block starts out as I want it then suddenly squeezes down and chops the text? The area in question is 'Featured Employers' http://www.beta.educationvacancies.com/index.php Can anyone advise? many thanks, greens85 |