Autor Thema: LiveStream 5: Snake im Browser  (Gelesen 738 mal)

Brotcrunsher

  • Administrator
  • Sr. Mitglied
  • *****
  • Beiträge: 356
  • Karma: 60
    • Profil anzeigen
LiveStream 5: Snake im Browser
« am: 21. November 2015, 19:40:16 »
var canvas = document.getElementById("mycan");
var gc = canvas.getContext("2d");
var lastDate = new Date();
var timeSinceLastTick = 0;
var TIMEBETWEENTICKS  = 0.1;

var x = 0;
var y = 0;

var CELLSIZE   = 10;
var GRIDWIDTH  = 40;
var GRIDHEIGHT = 40;

var LEFT  = 37;
var UP    = 38;
var RIGHT = 39;
var DOWN  = 40;

var dir = RIGHT;

var foodX = 0;
var foodY = 0;

var segments = [];

var gameOver = false;

function randomNumber(range){
    return Math.floor(Math.random() * range);
}

function placeFood(){
    while(true){
        foodX = randomNumber(GRIDWIDTH);
        foodY = randomNumber(GRIDHEIGHT);
       
        var isOnSnake = false;
       
        for(var i = 0; i<segments.length; i++){
            if(foodX === segments[i].x && foodY === segments[i].y){
                isOnSnake = true;
            }
        }
       
        if(!isOnSnake){
            break;
        }
    }
}

placeFood();

function Segment(x, y){
    this.x = x;
    this.y = y;
    segments.push(this);
}

for(var i = 0; i<30; i++){
    new Segment(-100, -100);
}


var controlQueue = [];

document.addEventListener("keydown", function(event){
    var kc = event.keyCode;
    if(controlQueue.length < 5 && (kc === LEFT || kc === RIGHT || kc === UP || kc === DOWN)){
        controlQueue.push(kc);
    }
});

function updateLoop(){
    var thisDate = new Date();
    var deltaTime = (thisDate.getTime() - lastDate.getTime()) / 1000;
    lastDate = thisDate;
   
    timeSinceLastTick += deltaTime;
   
    if(gameOver === false && timeSinceLastTick > TIMEBETWEENTICKS){
        timeSinceLastTick -= TIMEBETWEENTICKS;
        gc.fillStyle = "#000000";
        gc.fillRect(0, 0, canvas.width, canvas.height);
       
       
        if(controlQueue.length > 0){
            switch(controlQueue[0]){
            case(LEFT):
                    if(dir === UP || dir === DOWN){
                        dir = LEFT;
                    }
                    break;
            case(RIGHT):
                    if(dir === UP || dir === DOWN){
                        dir = RIGHT;
                    }
                    break;
            case(DOWN):
                    if(dir === LEFT || dir === RIGHT){
                        dir = DOWN;
                    }
                    break;
            case(UP):
                    if(dir === LEFT || dir === RIGHT){
                        dir = UP;
                    }
                    break;
            }
           
            controlQueue.splice(0, 1);
        }
       
       
       
        switch(dir){
        case(LEFT):
                x--;
                break;
        case(RIGHT):
                x++;
                break;
        case(UP):
                y--;
                break;
        case(DOWN):
                y++;
                break;
        }
       
        /*if(x < 0){
            x = GRIDWIDTH - 1;
        }
        if(x >= GRIDWIDTH){
            x = 0;
        }
        if(y < 0){
            y = GRIDHEIGHT - 1;
        }
        if(y >= GRIDHEIGHT){
            y = 0;
        }*/
       
        if(x < 0 || x >= GRIDWIDTH || y < 0 || y >= GRIDHEIGHT){
            gameOver = true;
        }
       
        for(var i = 0; i<segments.length; i++){
            if(segments[i].x === x && segments[i].y === y){
                gameOver = true;
            }
        }
       
       
        for(var i = segments.length - 1; i>0; i--){
            segments[i].x = segments[i-1].x;
            segments[i].y = segments[i-1].y;
        }
       
        segments[0].x = x;
        segments[0].y = y;
       
        if(x === foodX && y === foodY){
            placeFood();
            new Segment(-100, -100);
        }
       
       
       
        gc.fillStyle = "#00ff00";
        for(var i = 0; i<segments.length; i++){
            gc.fillRect(segments[i].x * CELLSIZE, segments[i].y * CELLSIZE, CELLSIZE, CELLSIZE);
        }
       
        gc.fillStyle = "#ff0000";
        gc.fillRect(foodX * CELLSIZE, foodY * CELLSIZE, CELLSIZE, CELLSIZE);
    }
   
}

window.setInterval(updateLoop, 1);


<html>
    <head>
    </head>
    <body>
        <canvas id="mycan" width="400" height="400"></canvas>
        <script src=app.js></script>
    </body>
</html>

Mercerry

  • Neuling
  • *
  • Beiträge: 2
  • Karma: -1
    • Profil anzeigen
Re: LiveStream 5: Snake im Browser
« Antwort #1 am: 11. April 2017, 12:17:51 »
Can I publish these details?