...

View Full Version : Javascript buttons help (I'm a noob at javascript)



drew_uk
03-01-2012, 10:20 AM
Hey,
I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it,

Here is my form with the two textboxes and submit button:
<form>
x: <input type="text" name="x" /><br />
y: <input type="text" name:"y" /><br />
<input type="submit" value="Submit"/><br />
</form>

And i need it so that they change the values of these:

//this shows where my sprite will start on the canvas
var block_x;
var block_y;
searched the internet for hours and cant really find anything i understand or works.
any help is much appreciated

webdev1958
03-01-2012, 10:26 AM
You don't need a form for this. Forms are used to send user input data to a server side script for processing.

What you need here is just a simple button. Attach an onclick event handler to the button which takes the user inputed x and y values from the input boxes and assigns them to wherever you need them.

drew_uk
03-01-2012, 10:29 AM
Thank you, I'll try it now

drew_uk
03-01-2012, 11:02 AM
Cant really find what to put under the function once i made it an onclick event

Philip M
03-01-2012, 11:46 AM
Here you are:-


x: <input type="text" id = "xval" /><br />
y: <input type="text" id = "yval" /><br />
<input type="button" value="Submit" onclick = "doIt()"><br />

<script type = "text/javascript">
function doIt() {
//this shows where my sprite will start on the canvas
var block_x = Number(document.getElementById("xval").value) || 0; // trap non-numeric entries
var block_y = Number(document.getElementById("yval").value) || 0;
alert (block_x + " " + block_y); // for testing
}
</script>

drew_uk
03-01-2012, 11:56 AM
Thankyou very much!
only problem is the sprite doesnt move, is it possible to move the sprite or cant it be done?

webdev1958
03-01-2012, 06:55 PM
Thankyou very much!
only problem is the sprite doesnt move, is it possible to move the sprite or cant it be done?

Yes the sptite can be moved. After all, that is the whole point of a sprite. Post your code. It sounds like you just need to do some debugging to get your code to work.

drew_uk
03-01-2012, 06:58 PM
look below

MancunianMacca
03-01-2012, 09:31 PM
Drew... Please put your script inside tags like this [code] Your Script [/ code] (without the space)

drew_uk
03-01-2012, 09:38 PM
okay sorry about that didnt know

drew_uk
03-01-2012, 09:39 PM
<!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> My canvas </title>
<style>
canvas{
display:block;
margin:auto;
border:1px double black;
}
p.instructions {text-align:center}
h1{text-align:center}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">


var context;

//this shows where my sprite will start on the canvas
var block_x;
var block_y;
//this shows how big my sprite will be
var block_w = 20;
var block_h = 40;

var canvasWidth;
var canvasHeight;
//Flags
var xKey = false;
var cKey = false;

var img=new Image();

// This function initialises various parameters used.
function init() {
context = $('canvas')[0].getContext('2d');
canvasWidth = $('#canvas').width();
canvasHeight = $('#canvas').height();




//positions the sprite

block_x = 290;
block_y = 70;

//this creates the interval function
window.setInterval(function(){
draw();
// this function goes from the bottom left to top right of the canvas
context.moveTo(0, canvasHeight);
context.lineTo(canvasWidth, 0);
context.stroke();

}, 100);
}
//this function clears the canvas
function draw() {
//this function draws a line from one corner to the opposite corner
context.moveTo(0,0);
context.lineTo(canvasWidth, canvasHeight);
context.stroke();0
context.clearRect(0,0,canvasWidth,canvasHeight);
//this draws a red circle inside my canvas
context.fillStyle="#FF0000";
context.beginPath();
context.arc(200,100,50,0,Math.PI*2,true);
context.closePath();
context.fill();

//this determines any positional changes of the sprite going left
if (xKey) {
block_x -= 10;
}
//to move the sprite to the left
if (cKey) {
block_x += 10;
}



//this makes my sprite and displays it as an image
img.onload = function(){
context.drawImage(img,block_x, block_y, block_w, block_h);
};
img.src="Sprite.jpg";


//shows co ordinates of the sprite and refreshes them at 100ms

var pageCoords = "( x " + block_x + ", y " + block_y + " )";

$("span:first").text( pageCoords);
}


$(document).ready(function() {

init();
//moves the sprite to the left when the x kay is held down
$(document).on("keydown", function(evt) {
if (evt.which == 88) xKey = true;
});

$(document).on("keyup", function(evt) {
if (evt.which == 88) xKey = false;
});
//moves the sprite to the right when the c key is held down
$(document).on("keydown", function(evt) {
if (evt.which == 67) cKey = true;
});

$(document).on("keyup", function(evt) {
if (evt.which == 67) cKey = false;
});
//shows the co ordinates for when the mouse is moved
$("div").mousemove(function(e){
var clientCoords = "( x " + e.clientX + ", y " + e.clientY + " )";
$("span:last").text( clientCoords);
});


});

//positional changes going right
x




</script>
</head>
<body>
<h1>S11725832</h1>
<script>
//opens an alert box for my insturctions
function show_alert()

{
alert("Welcome to my canvas, to move the sprite use the x key to move left and the c key to move right. The co-ordinates for the sprite will be found on the left hand side of the screen along with the co-ordinates of the mouse cursor.");
}

</script>
<p class="instructions">
<input type="button" onClick="show_alert()" value="Instructions">
</p>
</p>
<p>
Co-ordinates of sprite
<span>Move the mouse over the div.</span>
Co-ordinates of mouse
<span>&nbsp;</span>
</p>
<p>
x: <input type="text" id = "xval" /><br />
y: <input type="text" id = "yval" /><br />
<input type="button" value="Submit" onclick = "doIt()"><br />
<script>
function doIt() {
//this shows where my sprite will start on the canvas
var block_x = Number(document.getElementById("xval").value) || 0; // trap non-numeric entries
var block_y = Number(document.getElementById("yval").value) || 0;
alert (block_x + " " + block_y); // for testing
}
</script>
</p>

<p>
<!--on a button click it makes the page refresh thus returning the sprite to its original position.!-->
<input type="button" value="Return Sprite" onclick="javascript:history.go(0);"/>
</p>


<div>
<canvas id="canvas" width="420" height="330"></canvas>
</div>
<script>






</script>
</script>
</body>
</html>

drew_uk
03-02-2012, 12:57 PM
Anybody?

webdev1958
03-02-2012, 09:12 PM
Anybody?

If you wrote that code, it shouldn't take long to debug it. You can use a debugger, the error console in your browser or simply alert() statements throughout your code to check varibale values and program logic.

Which line is giving you an error and what is the error message?

drew_uk
03-03-2012, 07:47 PM
its not giving me any error, it jsut doesnt move the sprite when i type in co-ordinates, thats why i wondered if it was possible or not?

webdev1958
03-04-2012, 12:14 AM
ok, then we have 2 options now.

1) I or someone else spends some time going through your code to debug it for you.

or

2) You debug your code.

If I was debugging your code, I would go to the line(s) which are supposed to move the sprite and check the values of all the variables in that line(s) using an alert(), or some sort of debugger (like Firebug). If any values are incorect, then back track through your code using alert()'s or a debugger to find the root source of the problem and then fix it.

drew_uk
03-04-2012, 10:33 AM
I have looked through my code and put an alert() on where it should move my sprite, the alert box shows what co-ordinates should be used to move the sprite, but when i remove the alert it doesnt seem to move the sprite, i dont really know where else i should check

webdev1958
03-04-2012, 10:46 AM
post the line of code and the values displayed in the alert() so we can see what is happening.

drew_uk
03-04-2012, 12:07 PM
its okay now ive sorted it all out, quick question, can i add some sort of wall around the edge of a canvas to stop the sprite leaving it?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum