|
JavaScript - Puzzle Javascript Urgent
This is a code I wrote about a javascript game which you should click on each picture so that the puzzle will be done. I have nine pictures with each picture named 1.jpg 2.jpg --- 9.jpg
I have three difficulties beginner intermediate hard . The code has logical errors I can't understand . can anybody help me <html> <head> <title> CAIS326 Assignment 3 </title> <script type="text/javascript"> <!-- var seconds = 0; var timerId; var time; var Click1 = 0,Click2 = 0,Click3 = 0,Click4 = 0,Click5 = 0,Click6 = 0,Click7 = 0,Click8 = 0,Click9 = 0; var Pictures = [1,2,3,4,5,6,7,8,9]; function SwapImages() { for(var q=0 ; q<9; q++) document.getElementById("image+q+").src = Pictures[Click+q+ -1]+".jpg"; } function RegisterClicks(Index) { if (Click1 == 0) Click1 = Index; else if (Click2 == 0) Click2 = Index; else if (Click3 == 0) Click3 = Index; else if (Click4 == 0) Click4 = Index; else if (Click5 == 0) Click5 = Index; else if (Click6 == 0) Click6 = Index; else if (Click7 == 0) Click7 = Index; else if (Click8 == 0) Click8 = Index; else if (Click9 == 0) Click9 = Index; for(var m=0; m<9; m++) { if (Click+m+ > 0 && Click+m + 1+ > 0){ SwapImages(); Click+m+ = 0; Click+m + 1+ = 0; } } } function startTimer() { if (document.form1.gamelevel[0].checked) time=60; else if (document.form1.gamelevel[1].checked) time=45; else time=30; // 1000 milliseconds = 1 second timerId = window.setInterval( "updateTime()", 1000 ); } function updateTime() { seconds++; soFar.innerText = seconds; if ( time == seconds) { seconds = 0; window.alert ("Game over Loser..."); clearTimeout(timerId); } } var array = new Array(9); for (var i=0; i<9; i++) { array[i] = i+1; } shuffle(); document.writeln("<table border=1>"); var b = 0; while (b < 9 ) { var num = array[b]; document.writeln("<tr><td><img src=\""+num+".jpg\" id =\"image"+num+" \" onClick=\"RegisterClicks("+num+")\" /></td>"); ++b; num = array[b]; document.writeln("<td><img src=\""+num+".jpg\" id =\"image"+num+" \" onClick=\"RegisterClicks("+num+")\" /></td>"); ++b; num = array[b]; document.writeln("<td><img src=\""+num+".jpg\" id =\"image"+num+" \" onClick=\"RegisterClicks("+num+")\" /></td></tr>"); ++b; } document.writeln("</table>"); function shuffle() { var k = 9; var RandNum; var Temp; for (var n=0; n<9; n++) { RandNum = Math.floor(Math.random()*k); Temp = array[k-1]; array[k-1] = array[RandNum]; array[RandNum] = Temp; k=k-1; } } //--> </script> </head> <body> <form name = "form1" action = ""> <input type="Radio" name = "gamelevel" Value = "Beginner" Checked = "true" /> <font color=#37448E>Beginner</font> <input type="Radio" name = "gamelevel" Value = "Intermediate" /> <font color=#37448E>Intermediate</font> <input type="Radio" name = "gamelevel" Value = "Advanced" /> <font color=#37448E>Advanced</font></div><br/><br/> <input type = "button" value = " start " onClick="startTimer()"/><br/> <p>Seconds you have spent viewing this page so far: <strong id = "soFar">0</strong></p> </form> </body> </html> Similar TutorialsHi guys i am trying to make a sliding 15 puzzle in javascript. I have tried the code and I am able to scramble my board, however when I try to solve it some of my pieces go off the board on click and some even start to disappear on click. If anyone could help me with my for loop in my move function I would really appreciate it. I have posted my index and my game.js file which is my javascript i need help with. index.html Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Sliding Tiles</title>
<style type="text/css">
h1 {position:absolute; left:100px; font-family:arial}
p {position:absolute; left:100px; top:60px; color:red; font-family:arial; font-weight:bold}
.board {position:absolute; left:100px; width:400px; top:100px; height:400px; background-color:black; border-style:none}
div {position:absolute; width:94px; height:94px; background-color:aqua; border-style:solid; border-width:3px;
text-align:center; font-family:century; font-weight:bold; font-size:60px}
button {position:absolute; left:150px; width:300px; top:550px; height:50px;
background-color:silver; font-family:arial; font-weight:bold; font-size:30px}
</style>
<script src="game.js" type="text/javascript"></script>
</head>
<body>
<h1>Sliding Tiles
<a href="http://validator.w3.org/check?uri=referer">
<img src="valid-xhtml10.gif" alt="Valid XHTML 1.0!" style="border:0;width:88px;height:31px" /></a></h1>
<p>After starting a game, just click on the tile you'd like to move...</p>
<div class="board" id="board"></div>
<div id="tile1" style="left:100px; top:100px" onclick="move(1)">
1
</div>
<div id="tile2" style="left:200px; top:100px" onclick="move(2)">
2
</div>
<div id="tile3" style="left:300px; top:100px" onclick="move(3)">
3
</div>
<div id="tile4" style="left:400px; top:100px" onclick="move(4)">
4
</div>
<div id="tile5" style="left:100px; top:200px" onclick="move(5)">
5
</div>
<div id="tile6" style="left:200px; top:200px" onclick="move(6)">
6
</div>
<div id="tile7" style="left:300px; top:200px" onclick="move(7)">
7
</div>
<div id="tile8" style="left:400px; top:200px" onclick="move(8)">
8
</div>
<div id="tile9" style="left:100px; top:300px" onclick="move(9)">
9
</div>
<div id="tile10" style="left:200px; top:300px" onclick="move(10)">
10
</div>
<div id="tile11" style="left:300px; top:300px" onclick="move(11)">
11
</div>
<div id="tile12" style="left:400px; top:300px" onclick="move(12)">
12
</div>
<div id="tile13" style="left:100px; top:400px" onclick="move(13)">
13
</div>
<div id="tile14" style="left:200px; top:400px" onclick="move(14)">
14
</div>
<div id="tile15" style="left:300px; top:400px" onclick="move(15)">
15
</div>
<form action="">
<button onclick="initialize(); return false">Start a New Game</button>
</form>
</body>
</html>
game.js Code:
var rows = new Array(4)
rows[0] = new Array (4)
rows[1] = new Array (4)
rows[2] = new Array (4)
rows[3] = new Array (4)
function checkWin() {
var winner = false
var checker = new Array(4)
checker[0] = new Array (1, 2, 3, 4)
checker[1] = new Array (5, 6, 7, 8)
checker[2] = new Array (9, 10, 11, 12)
checker[3] = new Array (13, 14, 15, 0)
for (i = 0; i < 4; i++){
for (j = 0; j < 4; j++){
if (rows[i][j] == checker[i][j]){
winner = false
}
}
}
if (winner){
alert("Congratulations! You've Won!")
return true
}
return false
}
function move(tile){
var obj = document.getElementById('tile' + tile)
var win = false
for (i = 0; i < 4; i++){
for (j = 0; j < 4; j++){
if (rows[i][j] == tile){
if (j > 0 && rows[i][j - 1] == 0){
obj.style.left = (j - 2) * 100 + 'px'
rows[i][j - 1] = tile
rows[i][j] = 0
}else if (j < 3 && rows[i][j + 1] == 0){
obj.style.left = (j + 2) * 100 + 'px'
rows[i][j + 1] = tile
rows[i][j] = 0
}else if (i > 0 && rows[i - 1][j] == 0){
obj.style.top = (i - 2) * 100 + 'px'
rows[i - 1][j] = tile
rows[i][j] = 0
}else if (i < 3 && rows[i + 1][j] == 0){
obj.style.top = (i + 2) * 100 + 'px'
rows[i + 1][j] = tile
rows[i][j] = 0
}
win = checkWin()
if (win){
break
}
return
}
}
}
}
function initialize(){
var check = new Array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)
for (i = 0; i < 4; i++) {
for (j = 0; j < 4; j++) {
if (i == 3 && j == 3){
rows[i][j] = 0
} else {
var n = Math.ceil(Math.random() * 15)
while (check[n - 1] == 0){
n = Math.ceil(Math.random() * 15)
}
rows[i][j] = n
check[n - 1] = 0
document.getElementById('tile' + n).style.left = (j + 1) * 100 + 'px'
document.getElementById('tile' + n).style.top = (i + 1) * 100 + 'px'
}
}
}
}
I need to make a --very-- simple version of this game: http://javascript.internet.com/games/magic-squares.html. You need to click on the buttons until they're in order, then you win. I'm having trouble with the function that trades the places of the two buttons. So, can anyone tell me how my "swap" function should be? It needs to test if the value of the button next to the button clicked on is blank, and then if it is, the two values trade places. This way, I will hopefully end up with 9 different functions, depending on which square I'm clicking on, because the "id" of the button stays the same, it just swaps the values. It shouldn't use any arrays or anything. Thanks, I appreciate the help! Here's what I have so far: Code:
<html>
<head>
<title>15 Puzzle</title>
<script type="text/javascript">
function swap(id){
if(document.getElementById(id+1).value="")
{
document.getElementById(id+1).value=document.getElementById(id).value;
document.getElementById(id).value="";
alert('It works!');
}
}
</script>
</head>
<p><h1 align="center">15 Puzzle</h1><p>
<p align="center"><input type="button" id="scramble" value="Scramble"></p>
<br>
<table border="3" bordercolor="black" width="300" bgcolor=""
cellpadding="50" align="center">
<tr>
<td ><input type="button" id="1" value="1" onclick=" swap(this.id);"></td>
<td > <input type="button" id="2" value="" onclick="swap(this.id)"></td>
<td> <input type="button" id="3" value="3" onclick="swap(this.id)"> </td>
<td> <input type="button" id="4" value="4" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="5" value="5" onclick="swap(this.id)"> </td>
<td> <input type="button" id="6" value="6" onclick="swap(this.id)"> </td>
<td> <input type="button" id="7" value="7" onclick="swap(this.id)"> </td>
<td> <input type="button" id="8" value="8" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="9" value="9" onclick="swap(this.id)"> </td>
<td> <input type="button" id="10" value="10" onclick="swap(this.id)"> </td>
<td> <input type="button" id="11" value="11" onclick="swap(this.id)"> </td>
<td> <input type="button" id="12" value="12" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="13" value="13" onclick="swap(this.id)"> </td>
<td> <input type="button" id="14" value="14" onclick="swap(this.id)"> </td>
<td> <input type="button" id="15" value="15" onclick="swap(this.id)"> </td>
<td> <input type="button" id="16" value="2" onclick="swap(this.id)"> </td>
</tr>
</table>
</html>
===================[ URGENT ]================= confirm_state is not working properly..as it uses sajax..it is supposed to get the value of the state ..but the state being a string not working...please help.. ........................urgent......... <? function search_states($str) { //print $str; //print "<br><pre>"; $number=explode('-',$str); //print_r($number); //print $number[0]; if(count($number)==1) { $table='states'; $data=array('*'=>''); $fldarray=array("state"=>$number[0]); $val=dataSelectSearch($table,$data,$fldarray,$extra,$orderArray,$orderType); // print "<pre>"; // print_r($val); for($i=0;$i<count($val);$i++) { $state_name=$state_name."##".$val[$i]['state']; } return $state_name; } else { $strt_val=ord($number[0]); // Ascii of first character $end_val=ord($number[1]); // Ascii of last character //print chr($end_val); for($j=$strt_val;$j<=$end_val;$j++) { $table='states'; $data=array('*'=>''); $fldarray=array("state"=>chr($j)); $val=dataSelectSearch($table,$data,$fldarray,$extra,$orderArray,$orderType); for($m=0;$m<count($val);$m++) { $state_name=$state_name."##".$val[$m]['state']; } } return $state_name; } } ?> <script> function confirm_state1(msg) { // =============================== [subcategory follows ] ========================= //alert(msg); var value=msg; var arr=Array(); arr=value.split("##"); for(i=1;i<=(arr.length-1);i++) { //var new_val; //alert(i); //var int=Integer.valueOf(arr[i]); document.getElementById('innercontent').innerHTML=document.getElementById('innercontent').innerHTML+ "<br> <a href='javascript:void(0);' onclick='document.getElementById(state_name).value="+arr[i]+";' class='small_link1'>"+arr[i]+"</a>"; //document.getElementById('all_state').innerHTML=''; //alert(document.getElementById('innercontent').innerHTML); } } function showname(val) { //alert(msg1); alert(val); document.getElementById('state_name').value=val; document.getElementById('all_state').style.display='none'; } function findstate(str) { //alert(str); document.getElementById('innercontent').innerHTML=''; document.getElementById('all_state').style.display='inline'; var str1=str; x_search_states(str1,confirm_state1); } </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Get personal details</title> <!-- meta tags --> <meta name="keywords" content=""> <meta name="description" content=""> <!-- stylesheets --> <link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/common.css" type="text/css"> <!-- javascript --> <script src="js/jquery-1.3.2.min.js"></script> <!--conditional comments --> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> <script language="javascript" type="text/javascript"> function validName(n,c,l,d) { if(n.length == 0) { window.alert('A name must not be empty!'); return false; } if(c.length == 0) { window.alert('A country must not be empty!'); return false; } j = -1; for(i = l.length-1;i > -1;i--) { if(l[i].checked) { j = i;i = -1; } } if(j == -1) { window.alert('A like must not be empty!'); return false; } t = -1; for(s = d.length-1;s > -1;s--) { if(d[s].checked) { t = s;s = -1; } } if(t == -1) { window.alert('A dislike must not be empty!'); return false; } return true; } </script> </head> <body class="home"> <article id="page-content"> <section> <hgroup> <h2>Get personal details</h2> </hgroup> <form method="get" action="show_details.php" onSubmit="return validName(this.name.value,this.country.value,this.likes,this["dislikes[]"]);"> <table class="bordered"> <caption>Personal details form</caption> <tr> <th class="col1"> Property </th> <th class="col2"> Value </th> </tr> <tr> <td class="col1"> Name </td> <td class="col2"> <input type="text" name="name" size=30> </td> </tr> <tr> <td class="col1"> Age </td> <td class="col2"> <select name="age"> <option> 0-10 </option> <option> 11-20 </option> <option> 21-30 </option> <option> 31-40 </option> <option> 41-50 </option> <option> Over 50 </option> </select> </td> </tr> <tr> <td class="col1"> Country </td> <td class="col2"> <input type="text" name="country" size=30> </td> </tr> <tr> <td class="col1"> Likes </td> <td class="col2"> <input type="radio" name="likes" value="swimming">Swimming<br> <input type="radio" name="likes" value="running">Running<br> <input type="radio" name="likes" value="dancing">Dancing<br> <input type="radio" name="likes" value="biking">Biking<br> <input type="radio" name="likes" value="surfing">Surfing<br> </td> </tr> <tr> <td class="col1"> Dislikes </td> <td class="col2"> <!-- The value of dislikes is an array of checked values --> <input type="checkbox" name="dislikes[]" value="dogs">Dogs<br> <input type="checkbox" name="dislikes[]" value="cats">Cats<br> <input type="checkbox" name="dislikes[]" value="birds">Birds<br> <input type="checkbox" name="dislikes[]" value="fish">Fish<br> <input type="checkbox" name="dislikes[]" value="plants">Plants<br> </td> </tr> <tr> <td class="col1"> Description </td> <td class="col2"> <textarea name="description" rows=6 cols=30></textarea> </td> </tr> <tr> <td colspan=2 style="text-align: center"> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> </td> </tr> </table> </form> </section> </article> </body> </html> I cant for the life of me find out why it wont display the javawindow anymore? suppose to pop up when you dont enter a name, country, check a radio or checkbox Hello everyone, I'm using both Lightbox 2 and PrettyPhoto in Wordpress. Is there any way I can run both simultanously? They second Lightbox is on PrettyPhoto stops working. This is for 313Coupons.com . If anyone can help me I can recreate the problem. Right now all the Javascripts are enabled so the Homepage isn't displaying the Javascript elements that are done through PrettyPhoto. However, if you go to http://313coupons.com/as/ for example and press the coupon on the bottom, it'll open up in Lightbox 2. I need this because of the Print Button feature of Lightbox 2 which I can't find in any other Lightbox plugin. Any ideas? Please this is urgent. I tried to write the variable my_var into a text file but it only shows null after executing the code. Can anybody help pls?? Below is my code <html> <head> <script language="javascript"> var my_var function WriteToFile() { my_var = 123; document.write(<?php $file="file.txt"; $fh = fopen($file, 'w') or die("can't open file"); ?>; document.write(<?php $stringData = my_var ?>; document.write(<?php fwrite($fh, $stringData); ?>; document.write(<?php fclose($fh); ?>; } </script> </head> <body onLoad="WriteToFile();"> <p>Hello World</p> </body> </html> Hi , I have 4 input form fields and when user enters data in any number of fields like he enter data in 2 fields and left 2 fields blank like(123, ,456, ,), i need to check on blur event so that it has to check for empty fields and once empty fields exits then it has to sort out all the data presented fields and then placed back to input fields like (456,123, , ,). i am new to java script and i have no idea how to implement this , please help me thanks. <input type="text" name="itemMod1_1" size="5" maxlength="5" class="mono" > <input type="text" name="itemMod2_1" size="5" maxlength="5" class="mono" > <input type="text" name="itemMod3_1" size="5" maxlength="5" class="mono" > <input type="text" name="itemMod4_1" size="5" maxlength="5" class="mono" > Greetings fellow coders, I am having an issue with my rollover images. The first image (when hovered over) is fine, however when I hover over the second image the mouseover effect replaces the first jpg. Any idea how I can seperate the behaviours so my 2nd image mouseover glow is in it's correct place? Thanks in advance, Zeme Andrews Code: <!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
if (document.images) {
var button1 = new Image();
var button2 = new Image();
var button3 = new Image();
var button4 = new Image();
var button5 = new Image();
var button6 = new Image();
button1.src= "images/thumb1.jpg" ;
button2.src= "images/thumb1_glow.jpg";
button3.src= "images/thumb2.jpg";
button4.src= "images/thumb2_glow.jpg";
button5.src= "images/thumb3.jpg";
button6.src= "images/thumb3_glow.jpg";
}
</script>
<script type="text/javascript" src="/nav/tb/jquery.js"></script>
<script type="text/javascript" src="/nav/tb/thickbox.js"></script>
</head>
<body>
<table width="530" border="5" cellspacing="0" cellpadding="0" align="left">
<tr><td align="justify">
<img src="images/thumb1.jpg" height="230" width="150" alt="" border="2" hspace="5" name="rollover" onmouseover="document.rollover.src=button2.src"
onmouseout="document.rollover.src=button1.src" />
<img src="images/thumb2.jpg" height="230" alt="" width="150" border="2" hspace="5" name="rollover_1" onmouseover="document.rollover.src=button4.src"
onmouseout="document.rollover.src=button3.src" />
<img src="images/thumb3.jpg" height="230" alt="" width="150" border="2" hspace="5" name="rollover_2" onmouseover="document.rollover.src=button6.src" onmouseout="document.rollover.src=button5.src" />
</td></tr>
</table>
</body>
</html>
I need some help for University cousework that has been sent and I hope someone here can help. I need to create a cookie (easy enough) and then populate that cookie with a word that is selected when you click a certain image. Imagine you have image1.jpg and image2.jpg when a user selects image1.jpg the cookie needs to store image1 and load page2.html If the user selects image2, then page2.html still needs to load but store the word image2 in the cookie. On the next page, the cookie is loaded and the page needs to load the css file associated with that word example: image1 = firstcss.css image2 = secondcss.css Is this possible? Thank you for all your help I have a sliding flyout menu on the facebook icon on my page: http://www.billboardfamily.com The problem is that it is dropping down, rather than sliding out to the left as it is supposed to. There are 3 .js files, and then the code that make this all happen. Tell me what you need to see and I will get it on here. This is the last item to fix on the site and it is done. You can see what it is supposed to do he http://i8ramin.github.com/jquery.smarttoggle/ Just hover over the "menu" button at the top-right of the white section. I'm having trouble with a Javascript pop up box not appearing on Internet Explorer. I have tested it with IE7 and IE8 with no success. It works on Firefox 3.6.3 and Opera. On internet explorer this yellow bar appears; However, once clicked and given temporary permission the page reloads not showing the pop up box and the yellow bar is still present. I have re-created the situation here; http://html.comuf.com/ problem.html is the page I need help on. The correct password is real which redirects you to real.html. I am open to using new scripts but this line/function is crucial; Code: location.href= password + ".html"; This problem is for a friend of mine who does design work, his client is having trouble with this. The pop up box must appear after allowed temp through IE, or even better no user allowance is required while keeping the password +.html code. P.S. I plan to stick around and learn after this gets answered! Hi I have been trying to create a form using Django for a very long time but have not been able to get it to look the way I want. Someone suggested to me that I should use Javascript (Jquery) to do this. Here's what I want to do. For the form I want, there are certain statuses at the bottom, like "Done", "Incomplete" and etc. When the form is filled in, the person will click on one of these statuses. What I want this button to do is to save the page/form and also to generate a few new links relating to the status selected. For example, if the person selects "Done" this should save the form and generate two new buttons. One that says "Close" which would take you to the home page, and one that says "Continue" which would take you to the next form. My problem is that I'm new to Django and have no experience with Javascript. So if anyone could help or give me hints that would be greatly appreciated. trying to make a very simple scrambler for a 15 puzzle, i just cant doanything to comlicated. here is my table. <table border="1" " cellpadding="50" align="center"> <tr> <td ><input type="button" id="1" value="1" onclick=" swap1(id);"></td> <td > <input type="button" id="2" value="2" onclick="swap2(id)"></td> <td> <input type="button" id="3" value="3" onclick="swap3(id)"> </td> <td> <input type="button" id="4" value="4" onclick="swap4(id)"> </td> </tr> <tr> <td> <input type="button" id="5" value="5" onclick="swap5(id)"> </td> <td> <input type="button" id="6" value="6" onclick="swap6(id)"> </td> <td> <input type="button" id="7" value="7" onclick="swap7(id)"> </td> <td> <input type="button" id="8" value="8" onclick="swap8(id)"> </td> </tr> <tr> <td> <input type="button" id="9" value="9" onclick="swap9(id)"> </td> <td> <input type="button" id="10" value="10" onclick="swap10(id)"> </td> <td> <input type="button" id="11" value="11" onclick="swap11(id)"> </td> <td> <input type="button" id="12" value="12" onclick="swap12(id)"> </td> </tr> <tr> <td> <input type="button" id="13" value="13" onclick="swap13(id)"> </td> <td> <input type="button" id="14" value="14" onclick="swap14(id)"> </td> <td> <input type="button" id="15" value="15" onclick="swap15(id)"> </td> <td> <input type="button" id="16" value="" onclick="swap16(id)"> </td> </tr> </table> <p align="center"><input type="button" id="scramble" value="Scramble" onclick="random(id)"></p> <br> Please can anyone help? hello I am novice when it comes to writing code and as i'm writing some code for a sliding puzzle game, i have managed to display the images. but now i need to write the functions to see if the image when clicked on is next to the blank one and then to move them if this is true. <Html> <Head> <Title> Sliding Puzzle Game</Title> <Script Language = "JavaScript"> var images = new Array(); //var initialise var id = 0; alert("starting"); window.onerror = handleError; function handleError(strMessage, strURL, intLine) //the above function catches any errors and display what and where. { document.write("<br/>The following Error occurred:"); document.write("<br/>Message: " + strMessage); document.write("<br/>Code: " + strURL); document.write("<br/>On line: " + intLine); } function Write2screen(){ var k=0; for (i=0; i< 4; i++) { for (j=0; j<4; j++) { id++; //give picture unique id after each iteration images[k] = "Images/" + k + ".jpg"; document.write(" <img src= '"+images[k]+"' id='"+id+"'/>"); k++; } document.write("<br/>"); } } function CanMoveTile() { // checks to see whether the cell at postion cellNum // is next to the black tile and returns true if and // only if this is the case } function moveTile(id) { // this function moves the tile that was clicked on (if the tile can actually be moved) } Write2screen(); </Script> </Head> <body onClick=moveTile(id)> </body> </Html> many thanks in advance how to empty one of the cells and identify the adjacent cells (the ones with which the empty cell could swap on the first move.) Code: <script type="text/javascript">
<!--
var img_name = new Array("vinnpt1.jpg","vinnpt2.jpg","vinnpt3.jpg","vinnpt4.jpg","vinnpt5.jpg","vinnpt6.jpg","vinnpt7.jpg","vinnpt8.jpg");
img_name.sort(function() {return 0.5 - Math.random()})
document.write('<table border="1"><tbody>');
document.write('<tr>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[0]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[1]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[2]+'/>');
document.write('</td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[3]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[4]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[5]+'/>');
document.write('</td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[6]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[7]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[8]+'/>');
document.write('</td>');
document.write('</tr>');
document.write('</tbody></table>');
document.write('<table border="2"><tbody><tr><td height="50" width="452">Moves Used Goes Here</td><td height="50" width="452">Last Move Goes Here</td></tr></tbody></table>');
//-->
</script>
hi everyone. i have to create the 15 puzzle game and im having a difficult time getting started. can anyone help? i need to create a table (4x4) that has one empty space. All the other spaces must have a random generated value between 1 and 15. All i got so far is a onclick image swapping function.... need help! thanks
Does anyone know how to make these things work? I have to make this hanjie puzzle and I have at least gotten the black squares to display. I have worked through all the directions three times and run it through the Firebug. I don't understand what it is asking for and don't know how to change the code to make this work, someone please help me! Code: window.onload = setPuzzle;
var allCells = new Array();
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = document.getElementsByTagName("td");
for (var i =0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor(){
this.style.backgroundColor = (this.style.backgroundColor == "black") ? "white" : "black";
}
function showSolution(){
for(var i=0;i<allCells.length; i++) {
if(allCells.className == "dark"){
allCells[i].style.backgroundColor = "black";
} else {
allCells[i].style.backgroundColor = "white";
}
}
checkCount = 0;
}
function hideSolution() {
for(var i=0;i<allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount = " ";
}
}
Hi there, I did a few basic tutorials etc, but I dont know if Im even on the right track I would like to make an image or "image button" based puzzle game, handling images and text but no animation, where you go to different Rooms to pick up pieces of the puzzle and put them in your inventory, or drop pieces of the puzzle from your inventory to the location you are in to achieve the puzzle objective. In a Nutshell: Display a grid of image buttons [2 x 3], pressing a button changes which buttons are displayed. The basic idea is to have buttons represent different places, where you can pickup or drop an item, and if you drop the right objects in the right place you win. Example: 2 top buttons [2 x 1] represent your inventory of 2 items (or empty slots), the 4 bottom buttons represent a 2x2 "map" with 4 "locations" buttons (to emulate locations on a map). You press a specific "location" and the 4 bottom buttons are replaced: the middle row is a "map" button to return to the map (with the 4 location buttons) and a "?" button to have a full screen text with info on the current location(which items to bring there) and an exit button to return. the bottom row are 2 items found in that location, and The 2 bottom items can be picked up, these items were randomly placed upon setup of the game, or dropped there by you, if you click on an item button at the bottom it highlights and you must click on a slot in your inventory at the top where the item (or nothingness) goes to replace what was there (item or empty slot). If you select an empty slot button at the bottom of a location and switch it with an item in your top inventory you effectively drop the item from your inventory to that specific location. Can this be done with javascript? Is it better to use HTML5? I would appreciate any help, advice, relevant tutorial link, or code snippet you can throw my way many thanks Ice I'm a newbie to php and javascript. I want some checkbox to hide some rows of my table so i did a search and i found a few javascript codes but yet I couldn't make it work the way I wanted it. When I uncheck a checkbox ONLY the first table rows get hidden, the other tables don't? can't I ID some rows? Please I need help :( My javascript code is: Quote: <script type="text/javascript"><!-- function showHideTR(idx,vis) { var tbl,row; if(document.getElementById && document.getElementsByTagName) { tbl = document.getElementById('tbl'); if(!tbl || (idx >= tbl.getElementsByTagName('tr').length)) return; row = tbl.getElementsByTagName('tr')[idx]; } else if(document.all && document.all.tags) { // IE4 support tbl = document.all.tbl; if(!tbl || (idx >= tbl.all.tags('tr').length)) return; row = tbl.all.tags('tr')[idx]; } if(row) { if(!vis) { row.style.display = 'none'; } else { // conditional compilation to hide the try-catch blocks from IE4 /*@cc_on @if(!@_jscript || (@_jscript_version >= 5)) @*/ try { row.style.display = 'table-row'; } catch(e) { row.style.display = 'block'; } /*@elif(@_jscript_version < 5) row.style.display = 'block'; // for IE4 @end @*/ } } } function getStyle(el,styleProp) { var x = (typeof(el)=='string')?document.getElementById(el):el; if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); return y; } window.onload = function() { if(!document.getElementsByTagName) return; var tds = document.getElementsByTagName('td'); for(var i=0;i<tds.length;i++) { tds[i].onclick = function() { alert(this.parentNode.tagName+' = display : '+getStyle(this.parentNode,'display')+ '\n'+this.tagName+' = display : '+getStyle(this,'display')); } } } // --> </script> <!-- <script type="text/javascript"> function showHideTR(idx,vis) { var tbl,val; val = (!vis)?'none':((document.defaultCharset && !window.home)?'block': 'table-row'); if(document.getElementById && document.getElementsByTagName) { tbl = document.getElementById('tbl'); if(idx >= tbl.getElementsByTagName('tr').length) return; tbl.getElementsByTagName('tr')[idx].style.display = val; } else if(document.all && document.all.tags) { // IE4 support tbl = document.all.tbl; if(idx >= tbl.all.tags('tr').length) return; tbl.all.tags('tr')[idx].style.display = val; } } </script> --> My option tags: Quote: <form action="#" onsubmit="return false;"> <ul> <li2><label for="cb0"><input type="checkbox" id="cb0" checked="checked" onclick="showHideTR(0,this.checked);"> Blah Blah</label></li> <li2><label for="cb1"><input type="checkbox" id="cb1" checked="checked" onclick="showHideTR(1,this.checked);"> Blah Blah2</label></li> <li2><label for="cb2"><input type="checkbox" id="cb2" checked="checked" onclick="showHideTR(2,this.checked);"> Blah Blah3</label></li> <li2><label for="cb3"><input type="checkbox" id="cb1" checked="checked" onclick="showHideTR(3,this.checked);"> Blah Blah4</label></li> </ul> </form> My php page: Quote: <?php $host = "localhost"; // your host name $username = "blah blah"; // your user name to access MySql $password = "blah blah"; // your password to access MySql $database = "blah blah"; // The name of the database $no = $_POST["sureno"]; //$link = mysql_connect($host,$username,$password); if (!$link = @mysql_connect($host,$username,$password,true)) {die('Could not connect:'. mysql_error()); } @mysql_query("SET NAMES 'latin5'"); @mysql_select_db($database) or die( "Unable to select database"); $sql="SELECT * FROM blah blah WHERE sure = '$no' ORDER BY 'id'"; $result = mysql_query($sql); if (!$result) { die('Invalid query: ' . mysql_error()); } while($row=mysql_fetch_assoc($result)){ $bgcolor="#f1f1f1"; echo "<TABLE width=50% align=center cellpadding=0 cellspacing=0 id='tbl' summary='demonstration'> <tr>"; echo "<td bgcolor='dfdfdf' ><font face='arial,verdana,helvetica' color='#000000' size='3'>blah blah</font></td>"; echo "<td bgcolor='C0C0C0' ><font face='arial,verdana,helvetica' color='#FF0000' size='4'>" . $row['AB'] ."</font></td></tr>"; echo "<tr><td bgcolor='dfdfdf' ><font face='arial,verdana,helvetica' color='#000000' size='3'>blah blah</font></td>"; echo "<td bgcolor='dfdfdf'> <font face='arial,verdana,helvetica' color='#0080C0' size='2'>". $row['TR'] ."</font></td></tr>"; echo "<tr><td bgcolor='dfdfdf' ><font face='arial,verdana,helvetica' color='#000000' size='3'>blah blah</font></td>"; echo "<td bgcolor='dfdfdf' id='cb0'> <font face='arial,verdana,helvetica' color='#000000' size='3'>". $row['ML'] ."</font></td></tr>"; } mysql_free_result($result); ?> Hi, i am new to javascript and i am giving a task to create a javascript page, i need a javascript that will calculate and generate a simple Quotation with total price of item selected and its quantity in a new page and in tabular form, i need this for 2 check-boxs that has the value, 2 dropdownlist and the price.
|
|||||||