Jump to content

Desenhar e mover quadrados


thedoctorheavy

Recommended Posts

O Codigo a segir e soposto desnhar um quadrado que quando se carega nas setas se desloca nas varia direções mas não esta a funcionar e não sei como resolver o problema

Javascriptfile

;(function() {
    var Game = function(canvasId) {
        var canvas = document.getElementById(canvasId);
        var screen = canvas.getContext('2d');
        this.gameSize = {x: canvas.width, y: canvas.height};
        this.bodies=new Player(this,this.gameSize);
        var self = this;
        var tick = function () {
            requestAnimationFrame(drawRect);
        };
        tick(console.log());
    };
    Game.prototype = {
        update: function(){
            var bodies = this.bodies;
            var gameSize = this.gameSize;
        },
        draw: function(screen/*, gameSize*/) {
            screen.clearRect(0, 0, this.gameSize.x, this.gameSize.y);
            drawRect(this.bodies);
        },
        addBody: function(body){
            this.bodies.push(body);
        }
        
    };
    var Player = function (game, gameSize){
        this.game = game;
        this.size = {x: 15, y:15};
        this.gameSize = gameSize;
        this.center = {x: gameSize.x / 2, y: gameSize.y/ 2 };
        //this.keyboarder = new Keyboarder();

    };
    Player.prototype={
        update: function(){
            if (this.game.keyboarder.isDown (this.game.keyboarder.KEYS.LEFT)){
                if (this.center.x > this.size.x)
                    this.center.x -= 2;
            }
            else if (this.game.keyboarder.isDown (this.game.keyboarder.KEYS.RIGHT)){
                if ( this.center.x < ( this.gameSize.x - this.size.x / 2) )
                    this.center.x += 2;
            }
            else if (this.game.keyboarder.isDown (this.game.keyboarder.KEYS.UP)){
                if (this.center.y < this.size.y)
                    this.center.y -= 2;
            }
            else if (this.game.keyboarder.isDown (this.game.keyboarder.KEYS.DOWN)){
                if ( this.center.y > ( this.gameSize.y - this.size.y / 2) )
                    this.center.y += 2;
            }
        }
        
    };
    
    var drawRect = function(screen, body){
        screen.fillRect (body.center.x - body.size.x / 2, body.center.y - body.size.y / 2, body.size.x, body.size.y);
    };
    
    var Keyboarder = function(){
        var keyState = {};
        window.onkeydown = function (e){
            keyState[e.keyCode] = true;
        };

        window.onkeyup = function (e){
            keyState[e.keyCode] = false;
        };

        this.isDown = function (keyCode){
            return keyState[keyCode] === true;
        };

        this.isUp = function (keyCode){
            return keyState[keyCode] === false;
        };

        this.wasToggled = function (keyCode){


        };
        this.KEYS = { LEFT: 37, RIGHT: 39, UP:38, DOWN:40};

        //toggle state
        // 0 not on
        //1 on
        //2 toggled
        //this.STATE = {left = false}

    };
    
    window.onload = function(){
        new Game ("screen");
    };
})();

html file

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stilos.css">
<title>Untitled Document</title>
</head>
<body>
    <canvas id ="screen" width=310" height=310">
        <script src ="game.js"> </script>
    </canvas>
</body>
</html>

css file

@charset "utf-8";
/* CSS Document */
#screen{
    border: 5px solid #C026C9;
}
Link to comment
Share on other sites

  • 4 weeks later...

Olá outra vez obrigado por tudo até agora.

Eu agora adicionei outro objecto mas não consigo invocá-lo em conjunto com o player.

< self.bodies = new Player(self, self.gameSize) , new Objetos(self, self.gameSize)

var Objetos= function (game, gameSize){
        this.game = game;
        this.size = {x: 15, y: 15};
        this.gameSize = gameSize;
        this.center ={x:Math.random()*gameSize.x,y:Math.random()*gameSize.y};
        this.draw = function(screen) {
            screen.fillStyle = "#00FF00";
            screen.fillRect (this.center.x -this.size.x / 2, this.center.y - this.size.y / 2, this.size.x, this.size.y);
        };
        
        this.update=function(){
            
        }
    };

>

SA

Link to comment
Share on other sites

Quando faço o loop aparece este erro

self.bodies.update is not a function

for(var i = 0; i < self.bodies.length; i++){
        self.update = function(){
            console.log('x1');
            self.draw(); 
            requestAnimationFrame(self.update);
        },
        self.draw = function() {
            console.log('x2');
            self.screen.clearRect(0, 0, this.gameSize.x, this.gameSize.y);
            self.bodies.update();
            self.bodies.draw(self.screen);
        },
    
      
        self.addBody = function(body){
            self.bodies.push(body);
          }
    
          requestAnimationFrame(self.update);
        }
    };
Link to comment
Share on other sites

Não funciona também, o erro mantém-se o mesmo.

    self.bodies.forEach( function(bodies) {

            self.update = function(){
                console.log('x1');
                self.draw(); 
                requestAnimationFrame(self.update);
            },
            self.draw = function() {
                console.log('x2');
                self.screen.clearRect(0, 0, this.gameSize.x, this.gameSize.y);
                self.bodies.update();
                self.bodies.draw(self.screen);
            },


            self.addBody = function(body){
                self.bodies.push(body);
            }

            requestAnimationFrame(self.update);
        });
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.