How do I shorten my JavaScript Code and Animations

[En929]

Hi, I'm new to this website and I'm pretty much a beginner programming. Thus, I hope to have help in learning how to program.

1. My question first questions is I'm trying to change the JavaScript game program below so that the function command is used much less. Below, the function command had been called about 20 times, and I'm trying to find out how to rearrange it and/or reduce it so that the function command be used maybe 5 times or as minimal times as possible (because too many function commands for me gets confusing and I'm just trying to simplify it more). Thus, I was wondering what to do.

2. I was wondering how do I do frame animations in Javascript using a sprite sheet if I only want my character to have the appearance of only walk to the left, walk to the right, walk down, and walk upwards after the left, right, down, or up arrow keys are pressed? I'm trying to find some simple tutorials on that too. I eventually plan to add those features to my the game program below too.

I hope that I can get help on the above things. Thanks.

Code: Select all

var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;

var fps = 10;
var drawInterval; 


var canvasBall = document.getElementById('canvasBall');
var ctxBall = canvasBall.getContext('2d');
var Ball1;  Ball1 = new Ball();


var imgSprite = new Image();
imgSprite.src = 'Sprites.png';
imgSprite.addEventListener('load',init,false);


function init() {

    document.addEventListener('keydown',checkKeyDown,false);
    document.addEventListener('keyup',checkKeyUp,false);

    startDrawing();

}



function startDrawing() {
    stopDrawing();
    drawInterval = setInterval(draw,fps);
}

function stopDrawing() {
    clearInterval(drawInterval);
}

function draw() {   
    Ball1.draw();
}


function Ball() {
    this.srcX = 115;
    this.srcY = 500;
    this.drawX = 220;
    this.drawY = 200;
    this.width = 40;
    this.height = 37;
    this.speed = 5;
    this.isUpKey = false;
    this.isRightKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
}


Ball.prototype.draw = function () {
    clearCtxBall();
    this.checkKeys();
    ctxBall.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
};



Ball.prototype.checkKeys = function () {
    if (this.isUpKey) {
        this.drawY -= this.speed;
    }
    if (this.isRightKey) {
        this.drawX += this.speed;
    }
    if (this.isDownKey) {
        this.drawY += this.speed;
    }
    if (this.isLeftKey) {
        this.drawX -= this.speed;
    }
};



function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        Ball1.isUpKey = true;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        Ball1.isRightKey = true;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        Ball1.isDownKey = true;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        Ball1.isLeftKey = true;
        e.preventDefault();
    }
}


function checkKeyUp(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        Ball1.isUpKey = false;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        Ball1.isRightKey = false;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        Ball1.isDownKey = false;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        Ball1.isLeftKey = false;
        e.preventDefault();
    }
}

function clearCtxBall() {
     ctxBall.clearRect(0,0,gameWidth,gameHeight);
}

[Chris]

1. "function" is part of the JavaScript structure, it is used when declaring new functions, you can't simplify it. It's as important as wrapping quotation marks around your strings.

2. There are more roads that lead to Rome. Could you give us an example sprite. This could be slightly more difficult to achieve for a beginner when using canvas over normal HTML.

[Jackolantern]

Yeah, I don't see much simplification. If you are writing procedural code, you are going to be using a lot of functions. That isn't a bad thing, and in fact, is probably a sign you are writing good procedural code.

[En929]

1. "function" is part of the JavaScript structure, it is used when declaring new functions, you can't simplify it. It's as important as wrapping quotation marks around your strings.

2. There are more roads that lead to Rome. Could you give us an example sprite. This could be slightly more difficult to achieve for a beginner when using canvas over normal HTML.

Below is a link to my SpriteSheet. It contains sprites made for the character to walk to the right and walk to the left. Also, it has Sprites for punching to the left and punch to the right. I just want to know how I would make those animations work and according to this sprite sheet. More info about the character I’m trying to animate is:

SpriteSourceX = 0
SpriteSourceY = 600
this.width = 60
this.height = 120
this.DrawManOnScreenX = 220;
this.DrawManOnScreenY = 200;

I hope the above info helps. Also, I slightly revised the original code below:

[img]
http://authorhenryemphrey.tripod.com/gallery/
[/img]

Code: Select all

var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;

var fps = 10;
var drawInterval; 


var canvasMan = document.getElementById('canvasMan');
var ctxMan = canvasMan.getContext('2d');
var Man1;  Man1 = new Man();


var imgSprite = new Image();
imgSprite.src = 'SpecSprites.png';
imgSprite.addEventListener('load',init,false);


function init() {

    document.addEventListener('keydown',checkKeyDown,false);
    document.addEventListener('keyup',checkKeyUp,false);

    startDrawing();

}



function startDrawing() {
    stopDrawing();
    drawInterval = setInterval(draw,fps);
}

function stopDrawing() {
    clearInterval(drawInterval);
}

function draw() {   
    Man1.draw();
}


function Man() {
    this.SpriteSourceX = 0;
    this.SpriteSourceY = 600;
    this.width = 60;
    this.height = 120;
    this.DrawManOnScreenX = 220;
    this.DrawManOnScreenY = 200;
    this.speed = 5;



    this.isUpKey = false;
    this.isRightKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
}


Man.prototype.draw = function () {
    clearCtxMan();
    this.checkKeys();
    ctxMan.drawImage(imgSprite,this.SpriteSourceX,this.SpriteSourceY,this.width,this.height,this.DrawManOnScreenX,this.DrawManOnScreenY,this.width,this.height);
};



Man.prototype.checkKeys = function () {
    if (this.isUpKey) {
        this.DrawManOnScreenY -= this.speed;
    }
    if (this.isRightKey) {
        this.DrawManOnScreenX += this.speed;
    }
    if (this.isDownKey) {
        this.DrawManOnScreenY += this.speed;
    }
    if (this.isLeftKey) {
        this.DrawManOnScreenX -= this.speed;
    }
};



function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        Man1.isUpKey = true;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        Man1.isRightKey = true;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        Man1.isDownKey = true;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        Man1.isLeftKey = true;
        e.preventDefault();
    }
}


function checkKeyUp(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        Man1.isUpKey = false;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        Man1.isRightKey = false;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        Man1.isDownKey = false;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        Man1.isLeftKey = false;
        e.preventDefault();
    }
}


function clearCtxMan() {
     ctxMan.clearRect(0,0,gameWidth,gameHeight);
}