Click here to Skip to main content
13,901,044 members
Rate this:
 
Please Sign up or sign in to vote.
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:
<!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
Updated 28-Jun-16 16:38pm
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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
   

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01 | 2.8.190306.1 | Last Updated 28 Jun 2016
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100