www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to load new background in Javascript

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    How to load new background in Javascript

    Hi, currently I'm a student learning the javascript. I want to modify the game file which is at this point fully functional puzzle game. Originally the coder programmed it to when you finish the level, it goes straight to the high score but I want it to go to the next level. Could you please explain how to do this? Thanks in advance.Sokoban Attempt.zip

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Hi, I just modified the game.js file a little. Look for the text Well Done! (line 300) if you want to see what I changed:
    Also, I changed the first level to be crazy easy for testing purposes, you can change it back.
    Attached Files Attached Files
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    My goal was to help Soliloquy but now I'm going to play a game )

    ... in Index.html file there were also unnecessary select element's options manually added. This options are created automatically from a script file and they messes up a "loadLevel()" function which is executed when the page is loaded so if you don't remove them you get another 16 levels which loads incorrectly.

    So index.html file should look like this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Sokoban Puzzle</title>
    	<script type="text/javascript" src="game.js"></script>
    	<style type="text/css">
    		html {
    			background: black; color: white;
    		}
    		a {
    			color: #fffeb2; background: inherit;
    		}
    		.center (
    			margin: 1em auto; text-align: center;
    		}
    		table {
    			border-collapse; border-spacing: 0; margin: 2em auto 2em auto;
    		}
    		img {
    			display: block;
    		}
    		td {
    			padding: 0em;
    		}
    		tr {
    			margin: 0em; padding: 0em;
    		}
    		input, select {
    			margin: 0.1em;
    		}
    		input {
    			border: none;
    		}
    	</style>
    </head>
    
    <body onload="init();">
    	<div id="header">
    	<a href="http://fornwall.net/">fornwall.net</a>
    	>> <a href="http://fornwall.net/games/">games</a>
    	>> sokoban puzzle
    	: <a href="http://fornwall.net/games/highscore/?game=sokoban">high scores</a></div>
    	<div class="center">
    	<h1>Sokoban Puzzle</h1>
    	<form action="sokoban.htm" method="post">
    	<h5>
    	<select id="newLevel" onchange="loadLevel()">
    	</select>
    	&nbsp;
    	<input type="button" value="Reload" onclick="loadLevel()">
    	&nbsp;
    	<input type="button" value="Decrease Size" onclick="changeSize(-2)">
    	&nbsp;
    	<input type="button" value="Increase Size" onclick="changeSize(2)">
    	&nbsp;
    	<input type="button" value="Help" onclick="help()">
    	</h5>
    	</form>
    	<table cellspacing="0">
    	<tbody id="tableBody"></tbody>
    </table>
    <p>Graphics and maps from the game KSokoban by Anders Widell</p>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Sep 2013
    Posts
    2
    For such quick responses, I want to really thank you both.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles