Ir ao conteúdo
  • Cadastre-se
Luuuizmb

Jogo em javascript

Recommended Posts

Olá,

 

Achei esse código do jogo da cobrinha em JavaScript:

// as variáveis de "saída"var canvas;var context;// as variáveis do jogovar state = 0; // estado do jogovar TILESIZE; // tamanho dos "tiles", apenas para desenhar na telavar pieces; // a cobravar apple; // a maçãvar keyUp, keyRight, keyDown, keyLeft; // teclas pressionadas ou soltasvar UP, DOWN, LEFT, RIGHT; // direção da cobravar velX, velY; // velocidade nos eixosvar collision; // indica colisão da cabeça com alguma parte da cobravar mapWidth, mapHeight; // dimensão do "mapa"// as imagensvar imgApple;var imgPiece;var imgHead;function loadImage ( imgUrl ){    var img = new Image();    img.src = imgUrl;    return img;}function Piece ( x, y, dir ){    this.id = -1;    this.x = x || 0;    this.y = y || 0;    this.dir = dir || 0;}Piece.prototype ={    setPos: function (x, y)    {        this.x = x;        this.y = y;    },    randomPos: function (  )    {        var repeat;        var newPos = {x:0, y:0};        do        {            repeat = false;            newPos.x = Math.floor(Math.random() * mapWidth);            newPos.y = Math.floor(Math.random() * mapHeight);            for (var i = 0; i < pieces.length; i++)                if (pieces[i].id == this.id || (pieces[i].x == newPos.x && pieces[i].y == newPos.y))                    repeat = true;        } while (repeat);        this.x = newPos.x;        this.y = newPos.y;    },    draw: function ( img )    {        context.drawImage(img, this.x * TILESIZE, this.y * TILESIZE);    }}function keyboardDown ( event ){    var ev = event || window.event;    switch (ev.keyCode)    {        case 37: // seta esquerda            keyLeft = true;            break;        case 38: // seta para cima            keyUp = true;            break;        case 39: // seta direita            keyRight = true;            break;        case 40: // seta para baixo            keyDown = true;            break;        case 80: // tecla p = pause game            velX = velY = 0;            break;        default:            break;    }}function keyboardUp ( event ){    var ev = event || window.event;    switch (ev.keyCode)    {        case 37: // seta esquerda            keyLeft = false;            break;        case 38: // seta para cima            keyUp = false;            break;        case 39: // seta direita            keyRight = false;            break;        case 40: // seta para baixo            keyDown = false;            break;        default:            break;    }}function gameInit (  ){    TILESIZE = 32;    mapWidth = 20;    mapHeight = 15;    canvas = document.getElementById("canvas");    context = canvas.getContext("2d");    canvas.width = mapWidth * TILESIZE;    canvas.height = mapHeight * TILESIZE;    imgPiece = loadImage("piece.png");    imgApple = loadImage("apple.png");    imgHead = loadImage("head.png");    pieces = new Array(new Piece(), new Piece(), new Piece());    apple = new Piece();    apple.id = -10;    velX = velY = 0;    collision = false;    // direções a seguir    UP = 0;    RIGHT = 1;    DOWN = 2;    LEFT = 3;    // inicializando a parte A - a cabeça    pieces[2].id = 2;    pieces[2].x = 3;    pieces[2].y = 3;    pieces[2].dir = RIGHT;    // inicializando a parte B    pieces[1].id = 1;    pieces[1].x = 2;    pieces[1].y = 3;    pieces[1].dir = RIGHT;    // inicializando a parte C - o rabo    pieces[0].id = 0;    pieces[0].x = 1;    pieces[0].y = 3;    pieces[0].dir = RIGHT;    // escolhe as coordenadas da maçã    apple.randomPos();    // por fim seta o estado para 1    state = 1;        // atualiza o tamnho atual na pagina html    document.getElementById("currSize").innerHTML = pieces.length;    // atualiza o tamanho anterior na pagina html    document.getElementById("lastSize").innerHTML = 0;}function gameReset (  ){    // atualiza o tamanho anterior na pagina html    document.getElementById("lastSize").innerHTML = pieces.length;    // retira o excesso de elementos deixa só 3 pra reiniciar    while (pieces.length > 3)        pieces.pop();    velX = velY = 0;    collision = false;    // reinicializando as peças    // inicializando a parte A - a cabeça    pieces[2].id = 2;    pieces[2].x = 3;    pieces[2].y = 3;    pieces[2].dir = RIGHT;    // inicializando a parte B    pieces[1].id = 1;    pieces[1].x = 2;    pieces[1].y = 3;    pieces[1].dir = RIGHT;    // inicializando a parte C - o rabo    pieces[0].id = 0;    pieces[0].x = 1;    pieces[0].y = 3;    pieces[0].dir = RIGHT;    apple.randomPos();    // atualiza o tamnho atual na pagina html    document.getElementById("currSize").innerHTML = pieces.length;}function gameLoop (  ){    if (keyLeft)    {        if (pieces[pieces.length - 1].dir != RIGHT)        {            velX = -1;            velY = 0;            pieces[pieces.length - 1].dir = LEFT;        }    }    else if (keyUp)    {        if (pieces[pieces.length - 1].dir != DOWN)        {            velX = 0;            velY = -1;            pieces[pieces.length - 1].dir = UP;        }    }    else if (keyRight)    {        if (pieces[pieces.length - 1].dir != LEFT)        {            velX = 1;            velY = 0;            pieces[pieces.length - 1].dir = RIGHT;        }    }    else if (keyDown)    {        if (pieces[pieces.length - 1].dir != UP)        {            velX = 0;            velY = 1;            pieces[pieces.length - 1].dir = DOWN;        }    }    // atualiza as posições das pieces se estiver movendo    if (velX != 0 || velY != 0)    {        for (var i=0; i < pieces.length - 1; i++)        {            pieces[i].x = pieces[i + 1].x;            pieces[i].y = pieces[i + 1].y;            pieces[i].dir = pieces[i + 1].dir;        }    }    if (pieces[pieces.length - 1].x == apple.x && pieces[pieces.length - 1].y == apple.y)    {        pieces.push(new Piece());        pieces[pieces.length - 1].x = apple.x;        pieces[pieces.length - 1].y = apple.y;        pieces[pieces.length - 1].dir = pieces[pieces.length - 2].dir;        pieces[pieces.length - 1].id = pieces.length - 1;        apple.randomPos();                // atualiza o tamanho atual na pagina html        document.getElementById("currSize").innerHTML = pieces.length;    }    // agora move a cabeça    pieces[pieces.length - 1].x += velX;    pieces[pieces.length - 1].y += velY;    // depois de mover a cabeça limita o movimento no canvas    // Para o eixo X    if (pieces[pieces.length - 1].x >= mapWidth)    {        pieces[pieces.length - 1].x = 0;    }    else if (pieces[pieces.length - 1].x < 0)    {        pieces[pieces.length - 1].x = mapWidth - 1;    }        // Para o eixo Y    if (pieces[pieces.length - 1].y >= mapHeight)    {        pieces[pieces.length - 1].y = 0;    }    else if (pieces[pieces.length - 1].y < 0)    {        pieces[pieces.length - 1].y = mapHeight - 1;    }    // se colidiu com alguma parte da cobra    if (collision)    {        gameReset();    }    // verifica se colidiu com alguma parte da cobra    for (var i=0; i < pieces.length - 2 && !collision; i++)        if (pieces[pieces.length - 1].x == pieces[i].x && pieces[pieces.length - 1].y == pieces[i].y)            collision = true;    context.fillStyle = "#FFFFFF";    context.fillRect(0,0,canvas.width,canvas.height);        // desenha o corpo da cobra (sem a cabeça)    for (var i=0; i < pieces.length - 1; i++)        pieces[i].draw(imgPiece);    // desenha a maçã    apple.draw(imgApple);    // desenha a cabeça    pieces[pieces.length - 1].draw(imgHead);}function gameMain (  ){    switch (state)    {        case 0:            gameInit();            break;        case 1:            gameLoop();            break;        default:            state = 0;            break;    }} 

 

Ele está perfeito! Só gostaria de que ao sair da página e voltar novamente, e jogar novamente, acumulasse os pontos.

 

Até mais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×