|
JavaScript - Basic Game Movement
How could you say make a x move around a grid using the arrow keys?
Similar TutorialsHey guys, I just started to create my first Javascript game. It is a platformer and i just cant figure out how to do the movement. ATM my "character" is just a black rectangle. Here is my code. I have not been able to find the bug. var c = document.getElementById("mainCanvas"); var ctx = c.getContext("2d"); var level1 = new Image(); level1.src = "Textures/level1.png" level1.addEventListener("load", function() {ctx.drawImage(level1, 0,0,1024,1024) ctx.fillRect(playerX, playerY, 55, 118)}) //Charecter Position var playerX = 512 var playerY = 512 //Render function playerRender() {ctx.fillRect(playerX, playerY, 55, 118)} window.addEventListener("keydown", function(evt){ if (evt.keycode == 87) {playerY-=10} }) var RenderPlayerInterval = setInterval(playerRender() ,10) Reply With Quote 01-25-2015, 12:34 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Code: ctx.fillRect(playerX, playerY, 55, 118)}) //Charecter Position var playerX = 512 var playerY = 512 When you *CALL* that fillRect, neither playerX nor playerY has yet been defined! SO you are essentially doing Code: ctx.fillRect( null, null, 55, 118) And where are the semicolons on the end of EACH LINE. Yes, I know they aren't required. But put them in. It will save you from grief someday. Hi there, basically i have created a simple card game, i have one html page with 6 decks of cards. The decks are just images that when clicked display 6 other cards on another html page. What i want to do is that when i click a card on the second page i want the card to be removed, so that when i go back the first page and select the same deck again, the second page opens and the card i had selected before is still removed? Is this possible with javascript please i am totally new to it. Please could someone give me some direction? Thanks
Anyone know of a good tutorial for making an object move repeatedly while a key is held down (ie move right 1px every second while right arrow key is held?)
Hi to all, I am newbie in JS, and I hope that you can help with one javascript I am trying to use my function for move of image on menu the function JS function is Code: var start0l = document.getElementById('arrow1').offsetLeft, maxPoz0, timer0;
function StartPosun(imgId, maxPoz) {
clearTimeout(timer0);
maxPoz0 = maxPoz;
document.getElementById(imgId).style.left = start0l + 'px';
timer0 = setTimeout("posun0()", 1);
}
function ReturnPosun(imgId) {
clearTimeout(timer0);
timer0 = setTimeout("ret0()", 1);
}
function ret0() {
if ((document.getElementById('arrow1').offsetLeft - start0l) > 0) {
document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) - 1) + 'px';
timer0 = setTimeout("ret0()", 3);
}
}
function posun0() {
if ((document.getElementById('arrow1').offsetLeft - start0l) <= maxPoz0) {
document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) + 1) + 'px';
timer0 = setTimeout("posun0()", 3);
}
}
and the html is Code: <ul><li class="l1">
<a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="Aktuality" href="?cz_aktuality,22">
Aktuality
<img style="position: absolute; left: 306px;" alt="Aktuality" src="templates/img/menu_arrow.png" id="arrow1">
</a><ul class="sub1"><li class="l1">
<a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="AKCE: Bike Music Fest 2011" href="?cz_akce-bike-music-fest-2011,34">
AKCE: Bike Music Fest 2011
<img style="position:absolute;" alt="AKCE: Bike Music Fest 2011" src="templates/img/menu_arrow.png" id="arrow1">
</a>
</li><li class="l2">
<a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="AdventureMenu v prodejně TOURATECH CZ" href="?cz_adventuremenu-v-prodejne-touratech-cz,33">
AdventureMenu v prodejně TOURATECH CZ
<img style="position: absolute; left: 306px;" alt="AdventureMenu v prodejně TOURATECH CZ" src="templates/img/menu_arrow.png" id="arrow2">
</a>
</li><li class="lL">
<a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="TOURATECH TravelEvent 2011" href="?cz_touratech-travelevent-2011,32">
TOURATECH TravelEvent 2011
<img style="position: absolute; left: 306px;" alt="TOURATECH TravelEvent 2011" src="templates/img/menu_arrow.png" id="arrowL">
</a>
</li></ul>
</li><li class="l2">
<a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="O produktu" href="?cz_o-produktu,31">
O produktu
<img style="position:absolute;" alt="O produktu" src="templates/img/menu_arrow.png" id="arrow2">
</a>
</li><li id="selected" class="l3">
<a onmouseout="ReturnPosun('arrow3')" onmouseover="StartPosun('arrow3',15)" title="E-shop" href="?cz_e-shop,25">
E-shop
<img style="position: absolute; left: 306px;" alt="E-shop" src="templates/img/menu_arrow.png" id="arrow3">
</a>
</li><li class="l4">
<a onmouseout="ReturnPosun('arrow4')" onmouseover="StartPosun('arrow4',15)" title="Samoohřev" href="?cz_samoohrev,23">
Samoohřev
<img style="position: absolute; left: 306px;" alt="Samoohřev" src="templates/img/menu_arrow.png" id="arrow4">
</a>
</li><li class="l5">
<a onmouseout="ReturnPosun('arrow5')" onmouseover="StartPosun('arrow5',15)" title="Partneři" href="?cz_partneri,21">
Partneři
<img style="position: absolute; left: 306px;" alt="Partneři" src="templates/img/menu_arrow.png" id="arrow5">
</a>
</li><li class="lL">
<a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="Kontakty" href="?cz_kontakty,24">
Kontakty
<img style="position:absolute;" alt="Kontakty" src="templates/img/menu_arrow.png" id="arrowL">
</a>
</li></ul>
and the problem is, that I can move with the first one, but I don't how I can move with the others like alone function I thought that I can use somethink like if (onmouseover == true) .... but I failed can someone hellp with this problem pls? Heres what I did Created 4 variables 1 - to get which direction the person is pressing (leftright) 2 - if the person is pressing up 3 - to set a direction when a person is pressing any buttons 4 - for images I made every .05 seconds there should be a check on the conditions for buttons pressed and where the picture is. Aptana didn't find any errors and personally, I don't like using the program anyway because it makes me feel overwhelmed If someone could help me pick out the peice that is wrong, that would be nice should I use the preload as my image source, or keep it as imgs? Code: var yvel, i, imgs, updown, ground, reft, leftright, MAX_X, MAX_Y, MIN_X;
MAX_X = 500 /* parseInt(game.style.width) + parseInt(game.style.left); */
MIN_X = 300 /* parseInt(game.style.left); */
MAX_Y = 900 /* parseInt(game.style.height) + parseInt(game.style.top); */
updown = 0;
leftright = 0;
ground = 0;
reft = 1;
yvel = 0;
function init(){
var guy = document.getElementById("guy");
imgs=["stand.png", "standleft.png", "jump.png", "jumpleft.png", "walk.png", "walkleft.png", "finishjump.png", "finishleft.png"];
var preload = new Array();
for(i=0; i<imgs.length; i++) {
preload[i]= new Image();
preload[i].src = imgs[i];
}
i = 0;
document.onkeydown=keyDown;
document.onkeyup=keyUp;
movesprite();
}
function movesprite(hori, vert){
var game = document.getElementById("game");
x = parseInt(guy.style.left);
y = parseInt(guy.style.top);
if (ground = 0) {
yvel += 3;
if (hori == 1) { x += 1; right(1); reft = 1; }
if (hori == -1) { x += -1; left(1); reft = 0; }
if (hori == 0) { stand(1); }
}else {
if (hori == 1) { x += 3; right(0); reft = 1; }
if (hori == -1) { x += -3; left(0); reft = 0; }
if (hori == 0) { stand(0); }
if (vert == 1) { yvel += -15; jump(); }
}
checkBounds();
guy.style.left = x + "px";
guy.style.top = y + "px";
setTimeout("movesprite(updown,leftright)", 50);
}
function checkBounds(){
if (x >= MAX_X)
{x = MAX_X;}
if (x <= MIN_X)
{x = MIN_X}
if (y + yvel >= MAX_Y)
{y = MAX_Y; ground = 1;}
else {ground = 0; y += yvel;}
}
function jump(){
if (reft == 1) {guy.src = imgs[2];}
else {guy.src = imgs[3];}
}
function left(ground){
if (ground == 1) {
if (guy.src == imgs[1]) {guy.src = imgs[5];}
else {guy.src = imgs[1];}
}else {guy.src = imgs[7];}
}
function right(ground){
if (ground == 1) {
if (guy.src == imgs[0]) {guy.src = imgs[4];}
else {guy.src = imgs[0];}
}else {guy.src = imgs[6];}
}
function stand(ground){
if (ground == 1) {
if (reft == 1) {guy.src = imgs[0];}
else {guy.src = imgs[1];}
}else {
if (reft == 1) {guy.src = imgs[6];}
else {guy.src = imgs[7];}
}
}
function keyDown(e){
if (e.keyCode == 37) {leftright = -1;} /*left*/
if (e.keyCode == 38) {updown = 1;} /*up*/
if (e.keyCode == 39) {leftright = 1;} /*right*/
/* if(e.keyCode == 40) is down */
}
function keyUp(e){
if (e.keyCode == 37) {leftright = 0;}
if (e.keyCode == 38) {updown = 0;}
if (e.keyCode == 39) {leftright = 0;}
}
onload=init;
Hello everyone,im new to programming and have been learning a little bit of JavaScript.Im mostly learning it for a program called unity 3d,Its a game engine.And well,im stuck and can't figure this part out.i was wondering if anyone could help me. the script is to make the character move forward and shoot.but the character jumps instead of moving forward. any advice? Code: var speed = 3.0;
var rotateSpeed = 3.0;
var bullitPrefab:Transform;
function Update ()
{
var controller : CharacterController = GetComponent(CharacterController);
// Rotate around y - axis
transform.Rotate(0, Input.GetAxis ("Horizontal") * rotateSpeed, 0);
// Move Forward / backward
var forward = transform.TransformDirection(Vector3.forward);
var curSpeed = speed * Input.GetAxis ("Vertical");
controller.SimpleMove(forward * curSpeed);
if(Input.GetButtonDown("Jump"))
{
var bullit = Instantiate(bullitPrefab, GameObject.Find("spawnPoint").transform.position,
Quaternion.identity);
}
}
@script RequireComponent(CharacterController);
Hi, I want the image in the header of my website to move from left to right and back in an endless loop. The image width is larger than the width of the div which contains the image, so when the image moves to the right, the right end of the image has to disappear. When the image moves back to the left, the left end has to disappear. Now I know I can use the overflow: hidden; element in the CSS file to hide a part of the image. I found already several javascript scripts to move an image over the screen, but these scripts move the image only in 1 direction. I need it to go in the 2 directions in loop. Also these scripts require a position: relative; element to the image, so the hidden overflow of the div doesn't work. An example of this kind of script: Code: <body onload="moveRight()">
<div id="header" style="width: 1010px;height: 170px;overflow: hidden;">
<img src="images/header.jpg" id="header" style="position:relative;top:0px;left:0px; ">
</div>
<script type="text/javascript">
var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("header");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",100); // 100 controls the speed
lft = lft+3; // move by 3 pixels
pp.style.left = lft+"px";
if (lft > 50) { // left edge of image past the right edge of screen
pp.style.left = 0; // back to the left
}
}
</script>
</body>
Is there any way to improve this script to my requirements, or am I completely looking in the wrong direction? Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code:
THE HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>
<div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
<div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>
THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}
THE .JS FILE
function intr()
{
var x, xi;
x=0;
xi=document.getElementById('img_intrare').style.left;
if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}
}
ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... Hello, I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2 from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2. I am new to HTML/javascript programming I really appreciate your help 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! 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. 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. 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> 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);}
}
Hi! I am studying webdesign and we also go through a chapter of javascript-programming. Our first assignment is to create a dice game. I have written a code and in the beginning it worked, except that all the dices showed the same random number. I tried to fix that and now I do not know what I have done! In the game, you shall click on a link and the three dices will show random numbers. Here is my code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tärningsspel</title>
<script type="text/javascript" language="javascript">
function showDice(imgNr) {
if (imgNr == 1) var imgUrl = "1.gif";
else if (imgNr == 2) var imgUrl = "2.gif";
else if (imgNr == 3) var imgUrl = "3.gif";
else if (imgNr == 4) var imgUrl = "4.gif";
else if (imgNr == 5) var imgUrl = "5.gif";
else if (imgNr == 6) var imgUrl = "6.gif";
document.tarning1.src = imgUrl;
document.tarning2.src = imgUrl;
document.tarning3.src = imgUrl;
}
function randomInteger() {
var randNumber = Math.random();
var randNumber = Math.floor(5*randNumber)+2;
return randNumber;
}
function showRandomPict() {
var imgNr = randomInteger(6);
showDice(imgNr);
var imgName = "tarning1" + imgNr;
var imgName = "tarning2" + imgNr;
var imgName = "tarning3" + imgNr;
}
function PlayAll(){
diceSwitch('tarning1', 'text1');
diceSwitch('tarning2', 'text2');
diceSwitch('tarning3', 'text3');
}
function diceSwitch(randNumber,textRuta){
var randNumber = randomInteger();
}
</script>
</head>
<body>
<p><b>Tärning 1:</b><br /><span id="text1">1</span></p>
<p><b>Tärning 2:</b><br /><span id="text2">2</span></p>
<p><b>Tärning 3:</b><br /><span id="text3">3</span></p>
<img src="1.gif" name="tarning1" onclick="javascript:diceSwitch('tarning1', 'text1')" />
<img src="2.gif" name="tarning2" onclick="javascript:diceSwitch('tarning2', 'text2')" />
<img src="3.gif" name="tarning3" onclick="javascript:diceSwitch('tarning3', 'text3')" />
<p><a href="javascript:PlayAll()">Spela alla!</a></p>
</body>
</html>
Thank you! 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> </td>
</tr>
<tr>
<th scope="row">3rd Attempt</th>
<td> </td>
</tr>
</table>
<h1> My Current Attempt </h1>
<p> </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>
sorry this post is duplicated, the original post:http://www.codingforums.com/showthread.php?t=261488
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.
|
|||||||