|
JavaScript - Character Movement Script Advice.
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);
Similar TutorialsHi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hey, Im really new to Java and ideally i would love a java guru to have a quick look at this and help me. I am using this script i found he http://www.javascriptkit.com/script/...ownpanel.shtml It is a real good script and have set it up on my site fine. However, i am using it for a login portal. But when the user clicks on anything on the page that has been brought down, it pops back up and away. Obviously this is not good for a login box. So i need to limit the expand/contract feature to the button only. Rather than the whole box. Now im sure its just re-shifting code around or add/removing a few lines of code. Ive spent the past 2 hours trying to look at this and still no look, so im calling for an expert to have a look. This is in my jkpanel.js file: Code: //Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
var jkpanel={
controltext: 'Login',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext,+'</div></div>').prependTo('body')
kpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('../ajaxexamples/login.html', '210px', 300)
This in in my made .html page. Code: <script type="text/javascript" src="../ajaxexamples/jquery-1.2.2.pack.js"></script>
<style type="text/css">
#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}
#dropdownpanel .contentdiv{ /*Div containing Ajax content*/
background: url(../images/sitestructure/dropdownbackup.png);
background-repeat: repeat;
color: white;
padding: 20px;
}
#dropdownpanel .control{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: normal;
text-align: center;
background: transparent url("../ajaxexamples/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}
</style>
<script type="text/javascript" src="../ajaxexamples/jkpanel.js">
/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
Thanks, I want to insert "mu" character after "Output in <here i want to insert mu character> " in following JavaScript line Code: paper = new Raphael(document.getElementById('dialog2'), 500, 500);
var a= paper.text(345,384,"Output in <here i want to insert mu character> ").attr({'font-size':13});
I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.) The site is http://d-n-ddiner.com I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1). I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users. All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother? I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name. My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer. 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? 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?)
Hey 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. How could you say make a x move around a grid using the arrow keys?
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;
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 Hello all, I need assistance checking for valid characters in a username/password set up. I have been reading up on form validation but can't find exactly what I am looking for and need help deciphering what's going on. I have a list of accepted characters: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.-_@" a-z, A-Z, 0-9, dot, dash, underscore, and at. I want to then check an inputed string against that set and if a character is notin the accepted set, to send an alert. Here is what I have gathered so far: a for loop that increments through the values' .length - this is what checks each individual character. Then use of indexOf() can tell me which character is unacceptable. Now is where I am stuck and coming to you. Please help Hi all, I cant get this code to work because I do not know how to include the % character. Any help would be appreciated. My line break isnt working either Cheers, Adrian Code: rightButton.innerHTML = (rightOutcome1Prob+" chance of "+rightOutcome1+"\r\n else "+rightOutcome2); Hi Im new to javascript and need some help with a project I have, the task I have is: Create a page that can take a bloke of text and out put the following o How many times each letter occurs o How many spaces o How many words o How many times each word occurs o A list of things that are not words or special characters I think maybe use an array but im not sure, like I said im new to this so not too sure on how to do it. I know it would read into a file say a txt file and sort through it this way, possibly using some kind of loop to read through all of the text before sorting it and I know it might use variables. I know how to kind of work through the task I have, but to actually implement the mechanics of the javascript is something that I then struggle with Thanks to all that help. Specifically i was wondering if anyone had any ideas on how to select the specific character when hovering over a word? I have not been able to find any documentation on this however, there is a demo site i found for a plugin that allows character selection. http://labs.bitmeister.jp/moamoa/demo.html i dont need anything that large and elaborate... Edit I'm pretty wel experinced with jquery, I know it's possible with jquery Suppose I have the string 'ello'. I want to insert the letter 'h' in the beginning of that string. How do I do that without using a special function? I can only use the functions charAt and indexOf - anyone has any idea? Hi i need a little help on a JavaScript program it ask the user for a keyboard character and a number of rows and columns to look like this RRRRR R___R R___R R___R RRRRR and also this in another program rrrrrr rrrrrr rrrrrr rrrrrr I currently have <html><body> <script type="text/javascript"> // Declare variables and constants var userInputText; // user input to go var numRow; // number of the rows var NumCol; // number of the columns var ES = ""; // empty string userInputText = prompt("Enter a keyboard character",ES); numRow = prompt("Enter the number of rows",ES); NumCol = prompt("Enter the number of columns",ES); //need a nested loop to draw the character box </script> </body> </html> if any one can help me finish this program i would appreciate it |
|||||||