Learn VBA & Macros in 1 Week!

JavaScript - How To Creat Puzzle Game

Full Excel VBA Course - Beginner to Expert

How To Creat Puzzle Game	View Content

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>

Full Excel VBA Course - Beginner to Expert

Sliding Puzzle Game

Similar Tutorials

View Content

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

15 Puzzle Game (image Swapping)

Similar Tutorials

View Content

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

No-animation Puzzle Game With Inventory And Rooms

Similar Tutorials

View Content

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

Trying To Creat A Function To Calculate Windchill

Similar Tutorials

View Content

I am trying to create a function to calculate windchill using the windchill equation.
Code:

35.74 + 0.6215T - 35.75V (**0.16) + 0.4275TV(**0.16)

I have already validated the fields and they are working but for the life of me I can not create a function to calculate the windchill using the above windchill equation. Here is what I do have Code:

function Calc(myform) {
	var tempAmount=document.Chill.OutdoorTemp.value
	var tempAmount=parseInt(tempAmount,10)
	if (isNaN(tempAmount) || (tempAmount<=0)) {
		alert ("The temperature is not a valid number!")
		document.Chill.OutdoorTemp.value=" "
		document.Chill.OutdoorTemp.focus()
		}
	else {
		var speed=document.Chill.windSpeed.value
		var speed=parseFloat(speed)
	if (isNaN(speed) || (speed<=0)) {
		alert("The wind speed is not a valid number!")
		document.Chill.windSpeed.value=" "
		document.Chill.windSpeed.focus()
		}
	
		}
		
	}

Any help would be greatly appreciated thanks.

15 Puzzle Scrambler

Similar Tutorials

View Content

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>

Help With Puzzle In Javascript

Similar Tutorials

View Content

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 &nbsp;
      <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'
				}
			}
		}	 		
	}

Puzzle Javascript Urgent

Similar Tutorials

View Content

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">

</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>

Javascript Puzzle -- Put The Numbers In Order To Win.

Similar Tutorials

View Content

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>

This Hanjie Puzzle Is Giving Me Fits!

Similar Tutorials

View Content

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 = " ";
	}
}

Javascript Game (game 2)

Similar Tutorials

View Content

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.

Javascript Game (game 1)

Similar Tutorials

View Content

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!

1 Pay 1 Game

Similar Tutorials

View Content

I have a game page on my site and I am trying to protect direct access to it by .htaccess .htpasswd but is not accepting user name and password?

.htaccess:

AuthUserFile /home/vhosts/kandcoentertainment.freetzi.com/.htpasswd
AuthType Basic
AuthName "game1"

<Files "cookietest.html">
Require valid-user
</Files>

.htpasswd

test:8888

Any suggestions on why it is not working?

What I would like to do is have apay and play once setup but as I am a novice and dont have a clue HELP PLEASE!!!

What I have been told is - protect the files, add a client side cookie to game page then upon url payment return validate cookie giving single access and when played the user cannot replay by refresh or just typing in url because cookie expired ? I have tried to write the scripts up with no success.

Need Help On Quiz Game

Similar Tutorials

View Content

Hello all,

* I'm very new to javascript and working on a quiz game. Theres a set of code im working on but i need help, and greatly appreciate any help.

* After every questions, there is a tick or wrong animation/image that should pop over the answer card.
I created the gif file one for a tick and one for a wrong:
http://www.freeimagehosting.net/cqn91
http://www.freeimagehosting.net/v74v6

*By right the user should not be able to click on the answer cards anymore after finishing the quiz. For now the score keeps going up although the quiz is done. And after the quiz is done, a button should direct the user to the DetailedResult page, instead of the popup.

*How to change the popup into a Html(DetailedResult) page, and instead of a text eg.(resent.jpg), how can I make the real image show, and if the qn is correct, how can I place a tick and if the qn is wrong how can I place a wrong image.
Ive created both images.
tick image==>http://i1069.photobucket.com/albums/...ttica/tick.jpg
wrong image==>http://i1069.photobucket.com/albums/...ca/wrong-1.jpg

*Suppose at the bottom of the html page, should have a button for the user to retry only wrong answers.
*And how do i keep updating the user score for each attempt he tries on the table.

Below are a set of code i'm working on, and another set of Html layout(DetailedResult) which i intend to achieve.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Card Test </title>
<style>
img { margin:7px; }
#Question {
text-align:left;
font-family:"Vladimir Script";
font-size:40px;
}
</style>

<script type="text/javascript">
// For: http://www.codingforums.com/private....pm&pmid=124136

var baseURL = 'http://s1069.photobucket.com/albums/u475/felettica/';
var questions = [
// format [pic,[image1,imag2,image3]],
['happy.jpg', ['*|delight.jpg','|sad.jpg','|confuse.jpg']], // 0
['angry.jpg', ['|sad.jpg','*|resent.jpg','|joyful.jpg']], // 1
['father.jpg',['|sister.jpg','|mum.jpg','*|dad.jpg']], // 2
['sports.jpg',['|crying.jpg','*|soccer.jpg','|sleep.jpg']], // 1
['fruit.jpg', ['*|apple.jpg','|meat.jpg','|bacon.jpg']], // 0
];

var qNo = 0;
var correct = [];
function $_(IDS) { return document.getElementById(IDS); }

function NextQuestion(IDS) {
var response;
switch (IDS) {
case 'image1' : response = 0; break;
case 'image2' : response = 1; break;
case 'image3' : response = 2; break;
}
if (response == currentQuestion[4]) {
correct[0]++; 
alert('Well Done');
} else {
alert('Wrong Answer');
}
correct.push(currentQuestion.join('|')+'|'+response); // alert(correct.join('\n'));
qNo++;

if (qNo < questions.length) {
$_('score').innerHTML = 'Sco  '+correct[0];
showImages(qNo);
$_('Question').innerHTML = 'Question: '+(qNo+1);
} else {
$_('score').innerHTML = 'You had '+correct[0]+' correct answers for '+questions.length+' questions';
DisplayQuizResults();
// alert('End of quizi\n\n'+correct.join('\n'));
return;
}
// I created a two .gif animation of a tick and a wrong 
// but unsure how to place it so that it appears on the
// correct answer image instead of the alertbox.
// Tick animation Url==> http://www.freeimagehosting.net/cqn91
// Wrong animation Url==>http://www.freeimagehosting.net/v74v6
// I tried to add a button to direct to the DetailedResult page
// which shows the correct and wrong questions but it didnt appear.
// It should appear after the alert('End of quiz'); pops up.
}

var currentQuestion = [];
function showImages(ptr) { 
var tarr = []; var tmp = '';
currentQuestion = [];
currentQuestion.push(questions[ptr][0]); // 0 
temp_questions = questions[ptr][1].slice();
temp_questions.sort(randOrd);
for (var i=0; i<3; i++) {
tarr = temp_questions[i].split('|')
if (tarr[0] != '') { tmp = i; } // save correct answer
currentQuestion.push(tarr[1]); // 1,2,3 // save response order
}
currentQuestion.push(tmp); // 4 

$_("Pic").src=baseURL+currentQuestion[0];
$_("image1").src=baseURL+currentQuestion[1];
$_("image2").src=baseURL+currentQuestion[2];
$_("image3").src=baseURL+currentQuestion[3];
}

function randOrd() { return (Math.round(Math.random())-0.5); }
window.onload = function() {
correct = []; correct.push(0);
questions = questions.sort(randOrd);
showImages(0);
}

// Following from: http://www.yourhtmlsource.com/javascript/popupwindows.html
function DisplayQuizResults() {
var generator=window.open('','name','height=400,width=500');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('<link rel="stylesheet" href="style.css">');
generator.document.write('</head><body>');
var str = '';
var tarr = [];
// correct array format: item +|+ question +|+ answer +|+ response 

var str = '<h1> Your Results</h1>';
for (var i=1; i<correct.length; i++) {
tarr = correct[i].split('|'); // item|img1|img2|img3|ans|resp
str += 'Question #'+i;
str += ' was: '+tarr[0];
str += '<br>Correct answer was: '+tarr[4] +'('+tarr[tarr[4]*1+1]+')';
if (tarr[4] != tarr[5]) {
str += ' but your answer was: '+tarr[5] +'('+tarr[tarr[5]*1+1]+')';
}
str += '<p>';
}
generator.document.write('<p>'+str+'<p>');
generator.document.write('<p><a href="java_script:self.close()">Close</a> the popup.</p>');
generator.document.write('</body></html>');
generator.document.close();
}
</script>

</head>
<body>
<div id="Question">Question: 1</div>
<div align="center">
<img id="Pic" src="" height="220" width="321"> <p>
<img id="image1" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<img id="image2" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<img id="image3" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<p> <span id="score">Sco  </span> <p></div>
</body>
</html>

================================================
Instead of the popup, instead i thought having it on a Html page (DetailedResult), the layout below
================================================
Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


<style type="text/css">
Table{
	position:absolute;
	left:632px;
	top:97px;
	width: 408px;
	border:1px solid black;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>

</head>

<body>

<table width="472" border="0" cellspacing="0" cellpadding="0"> <!--In the table,the scores of the user should appear for the the current attempt and previous attempts so that the user can track his scores-->
  <tr>
    <th width="227" scope="row"><strong>My Attempts</strong></th>
    <td width="181"> <div align="center">My sco </div></td>
  </tr>
  <tr>
    <th height="19" scope="row">1st Attempt</th>
    <td><div align="center">4/5</div></td>
  </tr>
  <tr>
    <th scope="row">2nd Attempt</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">3rd Attempt</th>
    <td>&nbsp;</td>
  </tr>
</table>
<h1> My Current Attempt </h1>
<p>&nbsp;</p>
<p>Question 1: "code to get Qn 1 image"  "either tick image or wrong image" </p> <!-- For each qn, its picture will appear and either a tick or wrong image next to it. If the user answer it correctly, then a tick will appear or other wise. The image of the question would be smaller. -->
<p>Question 2: "code to get Qn 1 image"  "either tick image or wrong image"</p>
<p>Question 3: "code to get Qn 1 image"  "either tick image or wrong image"</p>
<p>Question 4: "code to get Qn 1 image"  "either tick image or wrong image"</p>
<p>Question 5: "code to get Qn 1 image"  "either tick image or wrong image"</p>

<p><button type="button">Retry Wrong Question</button><p> <!-- direct page to retry wrong qns once more -->

<!-- tick image URL:http://i1069.photobucket.com/albums/...ttica/tick.jpg 
 wrong image URL http://i1069.photobucket.com/albums/...ca/wrong-1.jpg 
 baseURL:http://s1069.photobucket.com/albums/u475/felettica/   -->

</body>
</html>

Need Help On Quiz Game

Similar Tutorials

View Content

sorry this post is duplicated, the original post:http://www.codingforums.com/showthread.php?t=261488

Guessing Game Help.

Similar Tutorials

View Content

What I'm trying to achieve is it initialises a number between 1-2000 randomly.
When the submit button is clicked it simply returns if the number that is in putted is higher or lower than the randomly initialised number.
External JavaScript:

Html
Code:

<html>
<head>
<script type="text/javascript" src="jsscri.js"></script>
</head>
<body onload="initialisation ()">

<form name="exampleform">
 <h3>
Number: <input name="number" type="text" 
            onchange='checkNumber( this.value );'>
</h3>
 <p>
	<input name="submit" type="button" value="Guess"
	onclick= 'checkValue()';/>  
 </p>
 

</body>
</html>

If you load this onto a webpage you'll see what i'm trying to do. I tried deleting the rest of the code to keep the size of the code down.

Javascript Game Help.

Similar Tutorials

View Content

A newbie here can you please help me with my javascript game. I cant seem to make it work.

Quote:
<!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>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Play</title>

<script type='text/javascript'>
function win(x, z){

if(x == z)
return "It's a draw";
draw.value++;
{
if(x == "Fire")&&(z == "Air")
return "You Lose, Fire beats Air!";
loss.value++;
else if(x == "Fire")&&(z == "Earth")
return "It's a draw!";
draw.value++;
else if(x == "Fire")&&(z == "Water")
return "You Win, Fire is beaten by Water!";
win.value++;
}
{
if(x == "Air")&&(z == "Earth")
return "You win, Air beats Earth";
win.value++;
else if(x == "Air")&&(z == "Water")
return "It's a draw!";
draw.value++;
else if(x == "Air")&&(z == "Fire")
return "You lose, Air is beaten by Fire!")
loss.value++
}
{
if(x == "Earth")&&(z == "Air")
return "You Lose, Earth is beaten by Air"
loss.value++;
else if(x == "Earth")&&(z == "Water")
return "You Win, Earth beats Water";
win.value++;
else if(x == "Earth")&&(z == "Fire")
return "It's a draw!";
draw.value++;
}
{
if(x == "Water")&&(z == "Fire")
return "You win, Water beats Fire";
win.value++;
else if(x == "Water")&&(z == "Air")
return "It's a draw!";
draw.value++;
else if(x == "Water")&&(z == "Earth")
return "You lose, Water is beaten by Earth"
loss.value++;
}
}

function ran(){
var gen = Math.random();
if(gen <= 0.25)
var com = "Fire";
if((gen > 0.25)&&(gen<= 0.50))
var com = "Earth";
if(gen > 0.50)&&(gen<= 0.75))
var com = "Water";
if(gen > 0.75)
var com = "Air";
if(document.c.game[0].checked)
var use = "Fire";
if(document.c.game[1].checked)
var use = "Earth";
if(document.c.game[2].checked)
var use = "Water";
if(document.c.game[3].checked)
var use = "Air";

alert ("The computer played: " + com +". You played: " + use + ". " + win(com,use));
}

</script>

<style type="text/css">
body {background-color:#7f9527;}
.style1 {
color: #FFFFFF;
}
.style2 {
font-family: "After Disaster";
}
.style3 {
font-family: "After Disaster";
font-size: 30pt;
color: #FFFFFF;
margin-left: 160px;
}
.style4 {
font-size: xx-large;
}
.style5 {
color: #FFFFFF;
font-size: large;
}
.style6 {
color: #FFFFFF;
font-family: "After Disaster";
font-size: large;
}
.style7 {
margin-top: 0px;
}
.style8 {
color: #FFFFFF;
font-family: "After Disaster";
font-size: xx-large;
margin-left: 280px;
}
.style9 {
font-size: large;
}
.style10 {
margin-top: 12px;
}
</style>

</head>

<body>

<p class="style3" style="width: 581px">Avatar The Last Air bender: Element Fight</p>

<p class="style8" style="width: 340px">
<img alt="" src="Avatar_Aang_by_Shira_chan.jpg" width="339" height="244" class="style7" /></p>
<p class="style6">Select Your Attack</p>
<form name="c" method="post" class="style2">
<span class="style4"><span class="style9">
<input name="game" type="radio" value="Fire" /></span></span><span class="style5">Fire</span><span class="style9"><br />
</span><span class="style4"><span class="style9">
<input name="game" type="radio" value="Earth" /></span></span><span class="style5">Earth</span><span class="style9"><br />
</span><span class="style4"><span class="style9">
<input name="game" type="radio" value="Water" /></span></span><span class="style1"><span class="style9">Water<br />
<span class="style4">
<input name="game" type="radio" value="Air" /></span>Air</span><br /></span>
<tr>
<td colspan="4" align=center>
<span class="style2">
<input type="text" name= "win" readonly="readonly" value="0" size="2"> Wins </input>
<input type="text" name= "loss" readonly="readonly" value="0" size="2"> Losses</input>
<input type="text" name= "draw" readonly="readonly" value="0" size="2"> Draws</input>
</span>
</td>
</tr>
</form>

<form method="post">
<br />
<input name="Play" type="button" value="Play" onClick="ran()" style="width: 189px; height: 39px" />
<a href="Instructions.htm">
<input name="Button1" type="button" value="Instructions" style="width: 189px; height: 39px" class="style10" /></a></form>

</body>

</html>

Game Clock

Similar Tutorials

View Content

Hello, I am trying to create a clock for my video game. I need to begin the clock at zero and count while the game is going. I need to have the clock count in standard minutes and seconds but not be based on the actual time of day. I am coding in javascript for an applet.

Game Problem

Similar Tutorials

View Content

Hi,
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);}
}

Javascript Game?

Similar Tutorials

View Content

How hard would it be to make a 2d game similar to super smash bros?

Basically I want to have a scrolling position (instead of a static image, where the background is always the same) where when the user moves his character object, the area of vision moves with him.

Also, will it work with using keyboard keys?

I have to integrate it into a database and I know quite a bit of javascript so I am hoping it is possible.

Thanks!
Max

The Guessing Game

Similar Tutorials

View Content

Can someone guide me to what I am doing wrong. My book does not show how to do this. This is what I have to far.I am just getting more and more confused. I am suppose to have a button there asking write a timeout that asks users if they want to stop the game if they do not press the Guess button within 10 seconds. They are suppose to pick a number between 1-100.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Guessing Game</title>
<script type="text/javascript">
while (runAgain == 'y' || runAgain == 'Y')
{
guessedNumber = reader.readDouble("Please pick a number between 1 and 100: ");

while (guessedNumber != randomNumber)
{
if (guessedNumber < randomNumber)
System.out.println("Too low!\nGuess again!");

else if (guessedNumber > randomNumber)
System.out.println("Too high\nGuess again!");

else if (guessedNumber == randomNumber)
System.out.println("You got it!");
}
runAgain = reader.readChar("Play again (y/n)? ");
}
</script>
</head>
<body>
<div id="content">

<h2>JavaScript Guessing Game</h2>
<p>Enter a number between 1 and 100, then press the Guess button.</p>
<form action="myForm" method="post">
<p><input type="text" name="guessgame" />
<input type="hidden" name="eGame" value="1"/>
<input type="submit" value=" Guess" name="submit"/></p>
</form>
</body>
</html>