spieleprogrammierer.de - Forum und Wiki zur Spieleprogrammierung und Spieleentwicklung

Quellcode

/** surrounding ****************************************************************/
    var canvas = document.getElementById("GS");
    var context = canvas.getContext("2d");
    
     canvas.width = 1020;
     canvas.height = 700;
    
     var Uwidth = 200;
     var Uheight = 20;
     var UpositionX = canvas.width/2 - Uwidth/2;
     var UpositionY = canvas.height - Uheight - 10;
     var UmaxSpeed = 20;
     var Uspeed = 0;
     
     var Owidth = 200;
     var Oheight = 20;
     var OpositionX = canvas.width/2 - Uwidth/2;
     var OpositionY =  10;
     var OmaxSpeed = 20;
     var Ospeed = 0;

     
        function gameLoop() {
            
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            animate();
            update();
            ani();
            upd();
            changeBALL();
            drawBALL();
            requestAnimationFrame(gameLoop);
            
        }
     
            requestAnimationFrame(gameLoop);
            

/** paddleMOVE_unten ********************************************************************/  
    
    function animate() {
            
            requestAnimationFrame(animate);
            context.fillStyle = "black";
            context.fillRect( UpositionX, UpositionY, Uwidth, Uheight);
            
        }
    
    function update() {
        
        UpositionX += Uspeed;
        if (UpositionX <= 0) {UpositionX = 0}
        if (UpositionX >= canvas.width - Uwidth) {UpositionX = canvas.width - Uwidth}
        
    }
    
/** paddleMOVE_oben********************************************************************/    
    
        function ani() {
            
            requestAnimationFrame(animate);
            context.fillStyle = "black";
            context.fillRect( OpositionX, OpositionY, Owidth, Oheight);
            
        }
    
    function upd() {
        
        OpositionX += Ospeed;
        if (OpositionX <= 0) {OpositionX = 0}
        if (OpositionX >= canvas.width - Owidth) {OpositionX = canvas.width - Owidth}
        
    }
/** paddleSTEER_unten **************************************************************************/
    
    function UmoveLeft() {
        Uspeed = -UmaxSpeed;
        }
        
    function UmoveRight() {
        Uspeed = UmaxSpeed;
    }
    
    function Ustopp() {
        Uspeed = 0;
    }
    
    document.addEventListener("keydown", event => {
        
        if (event.isComposing || event.keyCode === 37) {
        
            UmoveLeft();
            
            }
            
        if (event.isComposing || event.keyCode === 39) {
            
            UmoveRight();
            
        }});

    document.addEventListener("keyup", event => {
        
        if (event.isComposing || event.keyCode === 37) {
                        Ustopp();   
            }
            
        if (event.isComposing || event.keyCode === 39) {
                            Ustopp();
        }});

/** paddleSTEER_oben **************************************************************************/

    function OmoveLeft() {
        Ospeed = -OmaxSpeed;
        }
        
    function OmoveRight() {
        Ospeed = OmaxSpeed;
    }
    
    function Ostopp() {
        Ospeed = 0;
    }
    
    document.addEventListener("keydown", event => {
        
        if (event.isComposing || event.keyCode === 65) {
        
            OmoveLeft();
        
            }
            
        if (event.isComposing || event.keyCode === 68) {
            
            OmoveRight();
            
        }});

    document.addEventListener("keyup", event => {
        
        if (event.isComposing || event.keyCode === 65) {
            
            
                Ostopp();   
            }
            
        if (event.isComposing || event.keyCode === 68) {
            
            
                Ostopp();   
        }});
/** ball & rectangle cooperation ************************************************************************************************/
    
    var x = 20 + (Math.round(Math.random() * 900) + 0.5);
    var y = 150 + (Math.round(Math.random() * 100) + 0.5) ;
    var vx = 8;
    var vy = 8;
    var radius = 20;
    
    function drawBALL() {
        
        x += vx;
        y += vy;

        context.fillStyle = "#FF0080";
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI*2, true);
        context.closePath();
        context.fill();
        
            } 
    
    function changeBALL() {
        
            var topofBALL = y - radius;
            var bottomofBALL = y + radius;
            var UtopofRECT = UpositionY;
            var ObottomofRECT = OpositionY + Oheight;
            
            var UleftRECT =  UpositionX;
            var UrightRECT = UpositionX + Uwidth;
            var OleftRECT = OpositionX;
            var OrightRECT = OpositionX + Owidth;
    
        
            if ((x + radius) >= canvas.width) {vx = -vx}
            if ((x - radius) <= 0) {vx = -vx}
            
            if ( y > canvas.height) {vy = 50}
            if (y < 0) {vy = -50}
        
            if (( bottomofBALL >= UtopofRECT ) && (x >= UleftRECT ) && (x  <= UrightRECT )){vy = -vy}
            if (( topofBALL <= ObottomofRECT) && (x >= OleftRECT) && (x  <= OrightRECT)){vy = -vy}
    
        }