|
JavaScript - Swapping A Solid Color Tile For An Image File In Game Map Background?
I'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>
Similar Tutorialshi 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
How does one go about swapping the Javascript Source file for another on when a checkbox is clicked, obviously the sources have to revert to their normal state on reload or unchecking the checkbox: this would be the original source: <script type="text/javascript" src="Includes/eng_chars.js"></script> it would be swapped for this souce file on checkbox checked: <script type="text/javascript" src="Includes/heb_chars.js"></script> and then returned to <script type="text/javascript" src="Includes/eng_chars.js"></script> when the checkbox is unchecked, page is reloaded or the the reset (clear form) button is pushed Thanks 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! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst 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.
Hey, been racking my brain for about an hour now, and cant seem to work this one out... I need to in javascript, get the HEX value (#FFFFFF) of a div's background color... Code: style.backgroundColor doesnt seem to work... But it seems to be different in every browser, and i cant seem to make it work... (it must work in IE, FF, Chrome, Safari) I have tried using a couple of examples, but nothing seems to work... Any ideas? Thanks Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. 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 Clearly I'm doing something wrong. Here's my external javascript: Code: document.getElementById('maincontent').style.backgroundColor = "#660000";
Here's my external CSS Code: #maincontent {
background-color: #999;
}
Here's my HTML: Code: <div id="container">
<div id="maincontent">
<p>blah blah blah</p>
</div>
</div>
Nothing happens. What am I doing wrong? Can this be done? Change background color a row of depending on cell data on that row. e.g Items <table border="1"> <tr> <td><b>Cost</b></td> <td><b>Item</b></td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>34</td> <td>socks</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>24</td> <td>gloves</td> </tr> </table> Any pointers in the right direction please I have a table row that I would like to have change color when onMouseOver, and revert back onMouseOut. That works fine. Now, I have added an onClick event, which when they click I want the color to stay. Here is what I have. It works, sort of, that is it changes only the first row and not the one I clicked. How do I refer to the row that is clicked? Thanks! Code: <script type="text/javascript">
function check(x)
{
document.getElementById("rowColor").bgColor=x
}
</script>
<tr id="rowColor" onClick="check('#99FF99');" onMouseOver="this.bgColor='#99FF99';" onMouseOut="this.bgColor='#FFFFFF';"><div>
I'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple...that it doesn't want to work, that is! The line the body is onmouseover: Code: <p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p>
The function is as follows Code: function switchElementColour(elementName){
var tryId = document.getElementById(elementName);
var yrf = tryId.style.backgroundColor;
alert(yrf);
}
I've tried a number of different variations, including: messing with the quotes 'hard coding' the id ("metallic") in the function (although I don't want to leave it there) changing the code around based on stuff found online ...but I keep coming back to the above. The result is a blank alert box (no errors, just blank). The element name is getting passed, because when I create an alert box in the function that looks like this: Code: alert(elementName); The result is an alert box that says metallic (no quotation marks). Au secours por favore? Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function. I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code:
function show_color()
{
var show_prompt = prompt("Please enter a color name");
var change_body = document.getElementById("body");;
show_prompt = change_body;
change_body = change(this.id);
}
function change(id)
{
switch (id)
{
case 'red':
document.body.bgColor = "red";
break;
case 'green':
document.body.bgColor = "green";
break;
case 'yellow':
document.body.bgColor = "yellow";
break;
case 'blue':
document.body.bgColor = "blue";
break;
case 'pink':
document.body.bgColor = "pink";
break;
}
}
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 i have a complete web site . now , how can do the work that all the textboxes in the page have the style that when the users click on it , the background of them geta color . i don't want to insert this code one by one onclick="this.style.backgroundColor='#eeeeee';" thanks I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like: <head> <title> Basics Exercise</title> <script type="text/javascript" src="js.js"></script> </head> <body> <form> <p> Click this button and the document's color will change again </p> <input name="button" type="button" value="Change the background color of the document"/> </form> js.js has function changecolor() { document.bgColor='#ea0d17'; } document.forms[0].button.onClick=changecolor(); I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working. |
|||||||