|
JavaScript - 15 Puzzle Game (image Swapping)
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
Similar TutorialsI've created a javascript version of the classic game SOKOBAN. Basically what happens is you move the man around the "warehouse" and he must push the boxes into the target area. Copy the code and try it yourself to see what I have so far (note-he can't move the boxes yet). My question is: Right now, my map consists of solid color blocks. What I WANT them to be is image files (for example: box.png, wall.png, floor.png) to add a little versatility and life to the map. I am not sure how to make this switch though. I suspect I make the change somewhere in the tile array in the initialize function, but I am not sure what.. Also, how can I get the boxes to actually MOVE? I.e. when my man pushes them, they move around in the direction he pushes? Any help would be much appreciated. Thank you kindly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sokoban</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 48px;
}
#warehouse
{
width: 680px;
height: 400px;
position: relative;
}
.box
{
background-size: contain;
}
.box, #man
{
margin: 0;
padding: 0;
display: inline-block;
width: 40px;
height: 40px;
float: left;
}
</style>
<script type="text/javascript">
var map_width = 17;
var map_height = 10;
var grid;
var player_x;
var player_y;
var tile;
function initialize()
{
grid = new Array();
grid[0] = new Array(0,0,0,0,0,5,5,5,5,5);
grid[1] = new Array(0,0,0,0,0,5,2,5,2,5);
grid[2] = new Array(0,0,0,0,0,5,2,2,2,5);
grid[3] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[4] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[5] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[6] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[7] = new Array(0,0,0,0,0,5,5,1,5,5);
grid[8] = new Array(5,5,5,5,5,5,5,1,5,0);
grid[9] = new Array(5,1,1,1,5,1,1,1,5,0);
grid[10] = new Array(5,1,3,1,1,1,3,1,5,0);
grid[11] = new Array(5,1,5,1,1,1,3,1,5,0);
grid[12] = new Array(5,1,1,1,3,5,3,1,5,0);
grid[13] = new Array(5,1,1,1,1,1,1,1,5,0);
grid[14] = new Array(5,1,5,5,5,5,1,1,5,0);
grid[15] = new Array(5,5,5,0,0,5,1,1,5,0);
grid[16] = new Array(0,0,0,0,0,5,5,5,5,0);
player_x = 14;
player_y = 1;
tile = new Array(
'green', /* grass */
'#202020', /* interior floor */
'red', /* target */
'brown', /* crate */
'brown', /* crate sitting on target */
'orange' /* brick */
);
draw_background();
position_man();
}
function draw_background()
{
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.getElementById('box_' + x + '_' + y);
box.style.backgroundColor = tile[grid[x][y]];
}
}
}
function position_man()
{
var man = document.getElementById('man');
man.style.position = 'absolute';
man.style.left = 40 * player_x + 'px';
man.style.top = 40 * player_y + 'px';
}
function safe_check(x, y)
{
if (x >= 0 && x < map_width && y >= 0 && y < map_height)
return grid[x][y];
return -1;
}
function handle_key(e)
{
var move_x = 0;
var move_y = 0;
switch(String.fromCharCode(e.which).toLowerCase())
{
case 'w':
move_y = -1;
break;
case 'a':
move_x = -1;
break;
case 's':
move_y = 1;
break;
case 'd':
move_x = 1;
break;
default:
return false;
}
var s = safe_check(player_x + move_x, player_y + move_y);
if (s > 2)
{
return true;
}
player_x += move_x;
player_y += move_y;
position_man();
return true;
}
</script>
</head>
<body onkeypress="handle_key(event)">
<div id="warehouse">
<img src="man.png" id="man" />
</div>
<table>
<tr>
<th>up</th>
<th>left</th>
<th>down</th>
<th>right</th>
</tr>
<tr>
<th>W</th>
<th>A</th>
<th>S</th>
<th>D</th>
</tr>
</table>
<script type="text/javascript">
var warehouse = document.getElementById('warehouse');
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.createElement('div');
box.id = "box_" + x + "_" + y;
box.className = "box";
warehouse.appendChild(box);
}
}
initialize();
</script>
</body>
</html>
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>
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 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 have selection boxes that when you choose an option an associated picture is supposed to display.. the problem is that with IE i can use whatever attribute i want and i get the desired effect except with the label attribute which happens to be the only attribute (i know of) that firefox will work with... IE still swaps the picture but also changes the text in the selection box to the img url.. here are my codes: Code: function swapImage(){
var theImage2Display = document.comp.caseselect.options[document.comp.caseselect.selectedIndex].label;
var imagePlace = document.getElementById("caseimg");
imagePlace.src = theImage2Display;
}
and in the html Code: <img src="start.jpg" id="caseimg" /> <select name="caseselect" style="width:625px" onchange="Calculate(); swapImage();"> <option label="start.jpg" value="0" selected="true">Case</option> <option label="COOLER MASTER Elite 310red.jpg" value="50">COOLER MASTER Elite 310 Red ($50.00)</option> <option label="COOLER MASTER Elite 310blue.jpg" value="50">COOLER MASTER Elite 310 Blue ($50.00)</option> <option label="COOLER MASTER Elite 310orange.jpg" value="50">COOLER MASTER Elite 310 Orange ($50.00)</option> <option label="COOLER MASTER Elite 310silver.jpg" value="50">COOLER MASTER Elite 310 Silver ($50.00)</option> </select> Hi, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file: Code: function swapIt(id1,id2,id3)
{
var object1 = document.getElementById(id1);
var object2 = document.getElementById(id2);
var object3 = document.getElementById(id3);
var z1 = object1.style.zIndex;
var z2 = object2.style.zIndex;
var z3 = object3.style.zIndex;
object1.style.zIndex = z3;
object2.style.zIndex = z1;
object3.style.zIndex = z2;
}
Here's the code invoking this function in my html file: Code: function moveAvalon()
{
var x = xCoord("avalon");
if(x <= (W - 125))
{
shiftIt("avalon", 10, 0);
setInterval("moveAvalon()", 50);
}
else if(x > (W - 125))
{
swapImages();
}
}
function swapImages()
{
showIt("kids");
showIt("fiction");
showIt("nfiction");
setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
}
Basically, I have a Simon Says game with very simple functions but I added an image map with buttons that I now want to use, rather than a table with images as buttons. The problem is, now I can't get the game to work with the image map. Can anyone help me?
Hi everyone, I was wondering if anyone could help me figure out how to overlay a javascript game with buttons and such onto a background image? Let me know if that's too vague a description.
I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Hello everyone, well i have asked for alot of issues earlier but none completely got resolved i hope that i get answer for this one. I want something a script or anything that shows loading as we have seen .gif images, before the game loads. I went through google and tried alot of scripts but failed maybe i don't know the exact method how to implement it as i am weak in jquery or scripting. I would like some one to help me out as i don't know what to do thank you in advance. Hi 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'
}
}
}
}
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> 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> 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>
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 = " ";
}
}
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. 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! Hi everyone, I'm needing some help capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript Code: <html>
<head>
<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name
}
</script>
</head>
<body>
<form name="frmMain">
<input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
<br />
<input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
</form>
</body>
</html>
Hi everyone, I am looking for JS script to replace find all the href values on a page and replace those href values matching them with an array of values. my array, lets say is a = {'some.ex.com', 'abc.ex.com/tv', 'some.name.ex.com', 'bcd.ex.com/dir1/dir2/some.jsp' }; etc i want to find all the URLs on a given page, check if each found url matches with any of the values in the array, if match found, just replace only "ex.com" with "example.com" for every match. I am all new to JS and please please help Many thanks Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation. I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself. The images do have some classes built into them, but no IDs. Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image. Here is my code so far: Code: <div class="images" id="big-image"> <a href="dianaminiflash_shop0001-11.jpg"> <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a> <div class="thumbnails"> <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first"> <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_fern-green_front1.jpg" class="product-thumb "> <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last"> <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> </div> </div> One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is: Code: $(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});
Any suggestions on what I'm doing wrong here? I really appreciate the help in advance. |
|||||||