Jogo de ping-pong

vini_loock · Fevereiro 22, 2011

Olá.

A pouco tempo resolvi estudar de fato, javascript, antes entendia apenas o básico e um pouco de jquery.

Meu desafio hoje é criar um jogo de tenis de mesa, ele está todo criado, eu só preciso criar uma IA, se é que pode ser dita assim.

O que eu não consegui fazer é que o pc possa ganhar ou perder, seu eu deixar como está logo abaixo, ele sempre irá ganhar e seu ao invés das adições com '++' eu colocar '+2', por exemplo, o computador sempre vai perder. Quero achar uma for 'aleatória' para isso.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ping-Pong - Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

    *{margin: 0px; padding: 0px;}
    
    body{overflow-y: hidden; overflow-x: hidden;}
    
    #mesa{width: 100%; height: 100%;}
    
    #bola{width: 20px; height: 20px; left: 31px; position: absolute; background-color: #000;}
    
    .raquete{width: 20px; height: 100px; position: absolute; top: 0px; margin: 0 0 0 0; background-color: #000;}
    
    .raquete#Left{left: 30px;}
    .raquete#Right{right: 30px;}

</style>

<script type="text/javascript">

    window.onload = function(){
        var velocidade = 1;
        var width = document.getElementById('mesa').offsetWidth;
        var height = document.getElementById('mesa').offsetHeight;
        var bolaX = 31;
        var bolaY = 0;
        var diminuirX = false;
        var diminuirY = false;
        var pontosPlayer = 0;
        var pontosPc = 0;
        var mouseY;
        var LeftY = 0;
        
        window.onmousemove = function(){
            mouseY = parseInt(event.clientY)-parseInt(50);
            
            document.getElementById('Right').style.margin = mouseY + 'px 0 0 0';
        }
        
        window.setInterval(function(){
            if(parseInt(bolaY) - parseInt(50) > LeftY){
                LeftY++;
            }else{
                LeftY--;
            }
            document.getElementById('Left').style.top = LeftY + 'px';
        }, velocidade);
        
        window.setInterval(function(){
            if(diminuirX == false){
                if(bolaX < width){
                    bolaX++;
                    diminuirX = false;
                }else{
                    bolaX--;
                    diminuirX = true;
                }
            }else{
                if(bolaX > 0){
                    bolaX--;
                    diminuirX = true;
                }else{
                    bolaX++;
                    diminuirX = false;
                }
            }
            
            if(diminuirY == false){
                if(bolaY < height){
                    bolaY++;
                    diminuirY = false;
                }else{
                    bolaY--;
                    diminuirY = true;
                }
            }else{
                if(bolaY > 0){
                    bolaY--;
                    diminuirY = true;
                }else{
                    bolaY++;
                    diminuirY = false;
                }
            }
            
            if(bolaX < 30 || bolaX > parseInt(width)-parseInt(30)){
                if(bolaX > parseInt(width)-parseInt(30)){
                    pontosPc++;
                    msg = 'Ponto para o computador.\nSeus pontos : ' + pontosPlayer + '\nPontos da maquina : ' + pontosPc
                }else if(bolaX < 30){
                    pontosPlayer++;
                    msg = 'Ponto para o computador.\nSeus pontos : ' + pontosPlayer + '\nPontos da maquina : ' + pontosPc;
                }
                bolaX = 31;
                bolaY = 0;
                diminuirX = false;
                diminuirY = false;
                if(pontosPlayer > 14){
                    alert('Parabéns você ganhou!');
                    pontosPlayer = 0;
                    pontosPc = 0;
                    bolaX = 31;
                    bolaY = 0
                    diminuirX = false;
                    diminuirY = false;
                    if(confirm('Deseja continuar o jogo?')){
                        return true;
                    }else{
                        window.close();
                    }
                }else if(pontosPc > 14){
                    alert('Você perdeu!');
                    pontosPlayer = 0;
                    pontosPc = 0;
                    bolaX = 31;
                    bolaY = 0
                    diminuirX = false;
                    diminuirY = false;
                    if(confirm('Deseja continuar o jogo?')){
                        return true;
                    }else{
                        window.close();
                    }
                }else{
                    alert(msg);
                }
            }
            
            var raquetePlayer = document.getElementById('Right');
            var rpWidth = raquetePlayer.offsetWidht;
            var rpHeight = raquetePlayer.offsetHeight;
            
            if(bolaX > parseInt(width) - parseInt(50) && bolaX < parseInt(width) - parseInt(30)){
                if(bolaY > mouseY && bolaY < parseInt(mouseY) + parseInt(100)){
                    bolaX--;
                    diminuirX = true;
                }
            }
            
            if(bolaX < 50 && bolaX > 30){
                if(bolaY > LeftY && bolaY < parseInt(LeftY) + parseInt(100)){
                    bolaX++;
                    diminuirX = false;
                }
            }
            
            document.getElementById('bola').style.top = bolaY + 'px';
            document.getElementById('bola').style.left = bolaX + 'px';
        }, velocidade);
    }

</script>
</head>
<body>

    <div id="mesa">
    
        <div id="bola"></div>
        
        <div id="Left" class="raquete"></div>
        
        <div id="Right" class="raquete"></div>
        
    </div>

</body>
</html>

Qual seria a melhor forma de fazer isso?

Obrigado.

Vinicius

Editado Fevereiro 22, 2011 por vini_loock

Entrar

Jogo de ping-pong

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades