MediaWiki:Test.js: различия между версиями

Страница интерфейса MediaWiki
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
(function () {
var canvas = document.createElement("canvas");
    var container = document.querySelector('.timeline-container');
canvas.width = 300;
    if (!container) return;
canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");


    var events = document.querySelectorAll('.timeline-event');
var gridSize = 10;
    if (!events.length) return;
var snake = [{x: 50, y: 50}];
var direction = {x: gridSize, y: 0};
var food = {x: 100, y: 100};
var gameOver = false;


     var containerWidth = container.offsetWidth;
function draw() {
    var eventSpacing = 15;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
    var lineHeight = 50;
    var currentRow = 0;
    var maxEventsPerRow = Math.floor(containerWidth / (containerWidth * eventSpacing / 100));


     Array.prototype.forEach.call(events, function (event, index) {
     ctx.fillStyle = "#00FF00";
         var leftPercentage = (index % maxEventsPerRow) * eventSpacing;
    snake.forEach(function(segment) {
         if (index >= maxEventsPerRow) {
        ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
            currentRow = Math.floor(index / maxEventsPerRow);
    });
            event.style.top = (currentRow * lineHeight) + 'px'; // Перенос на новую строку
 
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(food.x, food.y, gridSize, gridSize);
 
    if (gameOver) {
         ctx.fillStyle = "#000000";
        ctx.fillText("Game Over!", canvas.width / 2 - 40, canvas.height / 2);
    }
}
 
function update() {
    if (gameOver) return;
 
    var newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
 
    if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height || collision(newHead)) {
        gameOver = true;
         return;
    }
 
    snake.unshift(newHead);
 
    if (newHead.x === food.x && newHead.y === food.y) {
        food = {x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize};
    } else {
        snake.pop();
    }
}
 
function collision(head) {
    for (var i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
         }
         }
         event.style.left = leftPercentage + '%';
    }
     });
    return false;
})();
}
 
function changeDirection(event) {
    if (event.keyCode === 37 && direction.x === 0) {
         direction = {x: -gridSize, y: 0};
    } else if (event.keyCode === 38 && direction.y === 0) {
        direction = {x: 0, y: -gridSize};
     } else if (event.keyCode === 39 && direction.x === 0) {
        direction = {x: gridSize, y: 0};
    } else if (event.keyCode === 40 && direction.y === 0) {
        direction = {x: 0, y: gridSize};
    }
}
 
document.addEventListener("keydown", changeDirection);
 
function gameLoop() {
    update();
    draw();
    if (!gameOver) {
        setTimeout(gameLoop, 100);
    }
}
 
gameLoop();

Версия от 06:28, 17 января 2025

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

var gridSize = 10;
var snake = [{x: 50, y: 50}];
var direction = {x: gridSize, y: 0};
var food = {x: 100, y: 100};
var gameOver = false;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#00FF00";
    snake.forEach(function(segment) {
        ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
    });

    ctx.fillStyle = "#FF0000";
    ctx.fillRect(food.x, food.y, gridSize, gridSize);

    if (gameOver) {
        ctx.fillStyle = "#000000";
        ctx.fillText("Game Over!", canvas.width / 2 - 40, canvas.height / 2);
    }
}

function update() {
    if (gameOver) return;

    var newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};

    if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height || collision(newHead)) {
        gameOver = true;
        return;
    }

    snake.unshift(newHead);

    if (newHead.x === food.x && newHead.y === food.y) {
        food = {x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize};
    } else {
        snake.pop();
    }
}

function collision(head) {
    for (var i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
        }
    }
    return false;
}

function changeDirection(event) {
    if (event.keyCode === 37 && direction.x === 0) {
        direction = {x: -gridSize, y: 0};
    } else if (event.keyCode === 38 && direction.y === 0) {
        direction = {x: 0, y: -gridSize};
    } else if (event.keyCode === 39 && direction.x === 0) {
        direction = {x: gridSize, y: 0};
    } else if (event.keyCode === 40 && direction.y === 0) {
        direction = {x: 0, y: gridSize};
    }
}

document.addEventListener("keydown", changeDirection);

function gameLoop() {
    update();
    draw();
    if (!gameOver) {
        setTimeout(gameLoop, 100);
    }
}

gameLoop();