spieleprogrammierer.de - Forum und Wiki zur Spieleprogrammierung und Spieleentwicklung

Quellcode

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
var up = false;
var down = false;
var left = false;
var right = false;

var msdown = 2.0;
var msup = 2.0;
var msleft = 2.0;
var msright = 2.0;

var viewX = 0;
var viewY = 0;

var i = 0;

function keyDownHandler(e)
{
    if( e.keyCode == 37 )
        {
            left = true;
        }
    
    if( e.keyCode == 38 )
        {
            up = true;
        }
        
    if ( e.keyCode == 39 )
        {
            right = true;
        }
        
    if( e.keyCode == 40 )
        {
            down = true;
        }
}

function keyUpHandler(e)
{
    if( e.keyCode == 37 )
        {
            left = false;
        }
    
    if( e.keyCode == 38 )
        {
            up = false;
        }
        
    if ( e.keyCode == 39 )
        {
            right = false;
        }
        
    if( e.keyCode == 40 )
        {
            down = false;
        }
}

function Box( x, y, w, h, c )
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c = c;
    
    this.drawThePlayer = drawPlayer;
    this.createABox = drawBox;
    this.drawAFewBoxes = drawBoxes;
    this.movePlayer = Move;
    this.checkTheCollision = CD;
}

var Player = new Box( 400, 150, 50, 50, "red" );
var Wall = new Box( 0, 0, 50, 50, "blue" );

function drawPlayer()
{
    ctx.beginPath();
    ctx.rect( this.x = Player.x, this.y = Player.y, this.w = Player.w, this.h = Player.h );
    ctx.fillStyle = this.c = Player.c;
    ctx.fill();
    ctx.closePath();
}

function drawBox()
{
    ctx.beginPath();
    ctx.rect( this.x = Wall.x, this.y = Wall.y, this.w = Wall.w, this.h = Wall.h );
    ctx.fillStyle = this.c = Wall.c;
    ctx.fill();
    ctx.closePath();
}

function drawBoxes()
{
    for ( i = 0; i < 3; i++ )
        {
            Wall[i];
            Wall.x = i * 60;
            
            if ( Wall.x == 180 )
                {
                    Wall.x = 0;
                }
            
            drawBox();
        }
}

function CD( Pobj, Wobj )
{
    this.Pobj = Player;
    this.Wobj = Wall;
    
    if ( this.Pobj.y + this.Pobj.h <= this.Wobj.y )
        {
            return false;
        }
    
    if ( this.Pobj.y >= this.Wobj.y + this.Wobj.h )
        {
            return false;
        }
        
    if ( this.Pobj.x + this.Pobj.w <= this.Wobj.x )
        {
            return false;
        }
        
    if ( this.Pobj.x >= this.Wobj.x + this.Wobj.w )
        {
            return false;
        }
        
    else
        {
            return true;
        }
}

function Move()
{
    if ( down == true && up == false )
        {
            Player.y += msdown;
        } if ( CD( Player, Wall[i] ) == true )
                    {
                        Player.y -= msdown;
                    }
                    
    if ( up == true && down == false )
        {
            Player.y -= msup;
        } if ( CD( Player, Wall[i] ) == true )
                    {
                        Player.y += msup;
                    }
    
    if ( right == true && left == false )
        {
            Player.x += msright;
        } if ( CD( Player, Wall[i] ) == true )
                    {
                        Player.x -= msright;
                    }
    
    if ( left == true && right == false )
        {
            Player.x -= msleft;
        } if ( CD( Player, Wall[i] ) == true )
                    {
                        Player.x += msleft;
                    }
                    
    viewX = - Player.x + ( canvas.width / 2 ) - ( Player.w / 2 );
    viewY = - Player.y + ( canvas.height / 2 ) - ( Player.h / 2 );
}

function draw()
{
    ctx.clearRect( 0, 0, canvas.width, canvas.height );
    ctx.save();
    ctx.translate(viewX, viewY);
    
    drawPlayer();
    drawBoxes();
    Move();
    
    requestAnimationFrame( draw );
    ctx.restore();
}

draw();