Jump to content
thedoctorheavy

Desenhar e mover quadrados

Recommended Posts

thedoctorheavy

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

 

Share this post


Link to post
Share on other sites
thedoctorheavy

eu sei que é pedir um bocado de mais mas poderas me enviar um esplicação do que alteraste eu apenas tenho 6 meses de esperiencia com java script e o codigo que apresentei foi reaproveitado das aulas que tivemos.  ficaria agradecido

Share this post


Link to post
Share on other sites
JakeBass

removi a parte do "prototype". A função requestAnimationFrame() é chamada recursivamente e inclui o render do screen e do player. A variável keyboarder faz parte da classe Player.

  • Vote 2

Share this post


Link to post
Share on other sites
thedoctorheavy

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

Share this post


Link to post
Share on other sites
JakeBass

então o self.bodies tem de ser um array tipo:

self.bodies = [new Player(self, self.gameSize), new Objetos(self, self.gameSize)];

e depois nas funções update e draw é preciso fazer um loop.

  • Vote 1

Share this post


Link to post
Share on other sites
thedoctorheavy

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

 

Share this post


Link to post
Share on other sites
HappyHippyHippo

self.bodies é um array, terás de iterar pelo array e efectuar a chamada a cada elemento do array

  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
thedoctorheavy

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

 

Share this post


Link to post
Share on other sites
HappyHippyHippo

porque não fizeste o que te disse

onde está a iteração do array no código que apresentaste ?


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
thedoctorheavy

Como assim iterar o array ja pesquisei e não encontro solção para o problema.

Edited by thedoctorheavy

Share this post


Link to post
Share on other sites
JakeBass

pesquisa por "javascript object oriented", "javascript foreach"

Share this post


Link to post
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.