How do I fix this problem with my game

Question

0.00/5 (No votes)

See more:

I am making a game, and really the point is to swing a simple sword, or really to jab it. If you press the key "d" on the keyboard, the sword should move a in a way that it looks like a jab or stab or whatever. Here is my code:

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">

<script>
var myGamePiece, sword;

  
function startGame() {
  
    sword = new component(29, 5, "orange", 225, 225);
    myGamePiece = new component(30, 30, "blue", 225, 225);
    
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    stop : function() {
        clearInterval(this.interval);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}


function component(width, height, color, x, y, type) {

    this.type = type;
    this.width = width;
    this.height = height;
    this.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.x -=2; sword.x -=2 ;}
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.x += 2; sword.x += 2;}
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.y -= 1; sword.y -= 1;}
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.y += 1; sword.y += 1}
    if (myGameArea.keys && myGameArea.keys[83]) {jumping()}
    if (myGameArea.keys && myGameArea.keys[68]) {swingForth()}
    sword.newPos();
    sword.update();
    myGamePiece.newPos();
    myGamePiece.update();
} 

var swingForth = function(){
  sword.x + = 3}
  setTimeout(swordReturn, 100)
}
 
var swordReturn = function(){
  sword.x = myGamePiece.x
  sword.y = myGamePiece.y
}  
  


var jumping = function(){
  myGamePiece.y -=3
  sword.y -=3
  setTimeout(falling, 100)
}

var falling = function(){
  myGamePiece.y += 3
  sword.y +=3
}



</script>

<p></p>

</body>
</html>

When I run the code, that sword movement is not working (I named the function swingForth). Can someone explain why?

What I have tried:

I have tried to look for any mistakes, but I can not find any.

Posted 28-Jun-16 15:58pm

Member 12609013

Updated 28-Jun-16 16:38pm

Sergey Alexandrovich Kryukov

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-06-28T16:38:00

Oh… the problems of this code are so bad that I don't know what to talk about. First problem is HTML. There are only two elements, children of body: script and p. Nothing is rendered. The element p is empty and code does nothing.

Strictly speaking, HTML content of body is not always necessary. You can add all the HTML DOM elements in JavaScript; and you even try to do so. But then you need some working JavaScript code which actually does it. Your code just creates several function objects. None of those functions are called. So, the code does what is should do according to what you write: nothing.

So I answered your question in full; you did not ask to write working code for your, and this is fair. Not only this would not be the goal of Quick Questions & Answers forum, but it would not be even possible, because you did not even explain what the game should do. This is also fair, because you only wanted to know why some movement does not happen. I answered.

But I would like to be not so formal and give you some non-formal advise: what should be the basis of any game? This should be the main event cycle. You already made one step, setTimeout call, but the calling function is never called. But really correct approach is using window.requestAnimationFrame. The idea of the the cycle is: you pass a function to this function, and that function performs the game cycle and then calls window.requestAnimationFrame. Please see:
window.requestAnimationFrame() — Web APIs.

Moreover, this function, if it is not implemented in some relict browsers, can be added as a fallback, and implemented as the call to window.setTimeout. I'm not quite sure that is should always be done in practice, just to support something very obsolete. You can look at a sample of a fully functional game shown in my article (derived work) Tetris on Canvas.

So, what can you do? Well, sit down and actually write the code of the game. :-)
The problems "why some function is not called" or "does not work" are solved using the debugger.

—SA