JavaScript - Image Left To Right And Back Movement

How could you say make a x move around a grid using the arrow keys?

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.

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);

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

Not sure how to explain this but......

Using a meta refresh to display a thankyou page for 5 seconds after a form submit, then return to form. If user clicks back to return to main page from form, returns to thankyou page instead, and has to go back to form again, then back to main page. I can have thankyou page return to main page, but would rather return to form.

This is what it should do:

main page -> form -> thankyou page -> form -> main page

This is what it does:

main -> form -> thankyou -> form -> thankyou -> form -> main


Is there any way to remove thankyou page from history?

i have the following code which i am trying to insert a 'back button' into to go back to the previous page. i can only seem to get the button to appear either at the very top or very bottom of the page, does anyone know how i can specify the location?

this script is generated from easypano tourweaver -

Code:

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>Virtual Tour Created By CAPITA SYMONDS</title> 
 </head> 
 <body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0"> 
 <script type="text/javascript" src="swfobject.js"></script> 
 <div id="flashcontent"> 
 To view virtual tour properly, Flash Player 9.0.28 or later version is needed. 
 Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer.
 </div> 
  
 <script type="text/javascript"> 
 // <![CDATA[ 
 var so = new SWFObject("twviewer.swf", "sotester", "1024", "768", "9.0.0", "#FFFFFF"); 
 so.addParam("allowNetworking", "all"); 
 so.addParam("allowScriptAccess", "always"); 
 so.addParam("allowFullScreen", "true"); 
 so.addParam("scale", "noscale"); 
 //<!-%% Share Mode %%->
 so.addVariable("lwImg", "resources/2_area_multipix_preloading image file.jpg"); 
 so.addVariable("lwBgColor", "255,255,255,255"); 
 so.addVariable("lwBarBgColor", "255,186,186,186"); 
 so.addVariable("lwBarColor", "255,153,0,0"); 
 so.addVariable("lwBarBounds", "-512,-384,1024,768"); 
 so.addVariable("lwlocation", "4"); 
 so.addVariable("lwShowLoadingPercent", "false"); 
 so.addVariable("lwTextColor", "255,0,0,0"); 
 so.addVariable("iniFile", "config_2_Area_Multipix.bin"); 
 so.addVariable("progressType", "1"); 
 so.addVariable("swfFile", "resources/2_area_multipix_1_animation for tourweaver.swf"); 
 so.addVariable("href", location.href); 
 so.write("flashcontent"); 
 // ]]> 
 </script> 
 </body> 
 </html>

here is the button code -

Code:

<span onclick="javascript:history.back()" style="text-decoration:underline; color:blue; cursor:hand">Back</span>

I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript.

When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page.

I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good.

Thank

Hi, I currently have a <div> with a <p> and have an edit button that when clicked will transform it into a textarea using jQuery's .html().

I also have a cancel button which allows the user to cancel the edit and return the textarea to the previous content, any ideas how I do this?

JavaScript
Code:

// JavaScript Document
jQuery(document).ready(function(e) {
    
	$('#edit_p').click(function(e){
		$('#cancel_p').show();
		$('#greeting').html("<textarea id='txt_greeting' cols='20'>" + $('#greeting p').text() + "</textarea>");
		$(this).hide();
	});
	
	$('#cancel_p').click(function(e){
		$('#edit_p').show();
		$(this).hide();
	});
	
});

HTML
Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Textarea/Button Change</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="txt_area_jquery.js"></script>
<link rel="stylesheet" type="text/css" href="txt_area_style.css" />
</head>

<body>
<div id="greeting"><p>Hello, today is a great day!</p></div>
<input type="button" name="edit_p" id="edit_p" value="Edit" />
<input type="button" name="cancel_p" id="cancel_p" value="Cancel" />

<?php

?>
</body>
</html>

I need a back to top link on the bottom of my page that stays there all the time while people are scrolling..

is this possible?

is this close to what i'm looking for?

http://javascript.internet.com/page-...ting-link.html

i've seen it on some other sites but I can't find any to reference now...

I'm totally new to this!

thanks for your help!

-B

Hello there,

I'm a 30yr old returning to school and I signed up for a CMIS102 class, thinking it be more explanatory as the syllabus let on. But I was wrong. While I do understand some of what the professor has been teaching us, like modular programming and IfElse statements, I can't wrap my head around things like While Loops.


My professor has saddled us with a couple assignments, requiring us to write in pseudocode and I was wondering if anyone could explain what he wants from this assignment or even help me with it, that maybe I can finally have a grasp of it, and will know what I'm doing on the final.

~Tia

P.S.
I've posted the assignment question below:

I need to write a pseudo-codepseudocode for the following question but don't know how:

Write a program to read a list of exam scores (in the range 0 to 100) and to output the total number of grades and the number of grades in each letter=grade category.

The end input is indicated by a negative score as a sentinel value. (The negative value is used only to end the loop, so do not use it in the calculations.

Example:
88
93
55
77
100
-1

(The output would be)
Total number of grades = 5
Number of A's =2
Number of B's = 1
Number of C's =1
Number of D's = 0
Number of F's =1
Must prompt user to run again

Hello kind folk of codingforums.com! I am pretty new to JS and have been racking my brain all week to find a solution for this. I have a javascript fading slideshow but it has no back or next button. I'm not sure if i need to add another function or go about it a different way. Here is the code if anyone can help. Thanks in advance!!!

<script type="text/javascript">
var slidespeed=5800
var slideimages=new Array("my_images/SBDCslide.gif","my_images/americanbuilding.gif","my_images/emerald.gif",
"my_images/nautical.gif", "my_images/rent.gif","my_images/allyn.gif","my_images/SBDCslide.gif","my_images/signs.gif","my_images/cobalt.gif","my_images/test.gif","my_images/federal.gif")
var slidelinks=new Array("#" ,"american.asp","emerald.asp","nautical.asp")

var whichlink=0
var whichimage=0
var imgobj, filtersupport, blenddelay
var imageholder=new Array()
for (i=0;i<slideimages.length;i++){ //preload images
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}

function slideit(){
if (filtersupport)
imgobj.filters[0].apply()
imgobj.src=imageholder[whichimage].src
if (filtersupport)
imgobj.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()", slidespeed+blenddelay)

}

window.onload=function(){
imgobj=document.getElementById("slideshow") //access img obj
filtersupport=imgobj.filters //check for support for filters
blenddelay=(filtersupport)? imgobj.filters[0].duration*1000 : 0
slideit()

}

</script>

I need an html page that when visited automatically redirects the browser to return to the previous page it was on. here is the current code I have:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
  function load()
{
	history.go(-1)
        alert("");
}
  
</script>
</head>

<body onload="load()">
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>

this works in firefox but in IE you have to press ok in the alert box before it returns. I admit I am a javascript novice. Any suggestions