Шахматная доска

@Clarity1 · Регистрация: 30.01.2018

Author24 — интернет-сервис помощи студентам

Привет всем! Прошу помочь сделать следующую задачу:

Создать функцию, генерирующую шахматную доску. Можно использовать любые
html-теги. Доска должна быть верно разлинована на черные и белые ячейки. Строки
должны нумероваться числами от 1 до 8, столбцы — латинскими буквами A, B, C, D,
E, F, G, H.

@svtslv · 19.02.2019, 17:54

Clarity1, Есть готовая библиотека. И доска и перемещение даже с компьютером можно поиграть chess

@8Observer8 · 21.02.2019, 03:56

Сообщение от Clarity1

Можно использовать любые
html-теги.

It is good, because you can use HTML5 tag <canvas>. I began and you can continue if you want of cause.

Sandbox

Название: chess-board-canvas-api-es5_start.png
Просмотров: 110

Размер: 3.1 Кб

Название: chess-board-canvas-api-es5_start.png
Просмотров: 110

Размер: 3.1 Кб

index.html

PHP/HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chess board. Canvas API, JS/ES5</title>
</head>
 
<body>
    <!-- https://jsfiddle.net/8Observer8/mfd0bwaz/8/ -->
    <canvas id="renderCanvas" width="250" height="250" style="border: solid grey 2px"></canvas>
 
    <script>
        var canvas = document.getElementById("renderCanvas");
        var ctx = canvas.getContext("2d");
        var offset = 25;
 
        ctx.font = "20px Arial";
        ctx.fillText("8", offset / 2 - 5, offset * 2 - 5);
        ctx.fillText("7", offset / 2 - 5, offset * 3 - 5);
        ctx.fillText("6", offset / 2 - 5, offset * 4 - 5);
        // Letters
        ctx.fillText("a", offset * 1 + 5, offset / 2 + 5);
        ctx.fillText("b", offset * 2 + 5, offset / 2 + 5);
        ctx.fillText("c", offset * 3 + 5, offset / 2 + 5);
 
        drawCell(offset, offset, "black");
        drawCell(offset * 2, offset, "rgb(220, 220, 220)");
        drawCell(offset * 3, offset, "black");
        drawCell(offset * 2, offset * 2, "black");
        // Borders
        drawLine(offset * 9, offset, offset * 9, offset * 9); // Right border
        drawLine(offset, offset, offset, offset * 9); // Left border
        drawLine(offset, offset, offset * 9, offset); // Top border
 
        function drawCell(x, y, color)
        {
            ctx.beginPath();
            ctx.rect(x, y, 25, 25);
            ctx.fillStyle = color;
            ctx.fill();
        }
 
        function drawLine(x0, y0, x1, y1)
        {
            ctx.beginPath();       // Start a new path
            ctx.strokeStyle = "green";
            ctx.moveTo(x0, y0);    // Move the pen to (x0, y0)
            ctx.lineTo(x1, y1);    // Draw a line to (x1, y1)
            ctx.stroke();          // Render the path
        }
    </script>
</body>
 
</html>

@Clarity1 · 24.02.2019, 10:06 **[ТС]**

8Observer8, Thanks!/Спасибо!

@Clarity1 3 / 6 / 1 Регистрация: 30.01.2018 Сообщений: 34
		1
	Шахматная доска 19.02.2019, 17:36. Показов 10534. Ответов 3 Метки нет (Все метки) Привет всем! Прошу помочь сделать следующую задачу: Создать функцию, генерирующую шахматную доску. Можно использовать любые html-теги. Доска должна быть верно разлинована на черные и белые ячейки. Строки должны нумероваться числами от 1 до 8, столбцы — латинскими буквами A, B, C, D, E, F, G, H. 0

@svtslv 308 / 160 / 66 Регистрация: 18.01.2019 Сообщений: 449
	19.02.2019, 17:54	2
	Clarity1, Есть готовая библиотека. И доска и перемещение даже с компьютером можно поиграть chess 1

@Clarity1 3 / 6 / 1 Регистрация: 30.01.2018 Сообщений: 34
	24.02.2019, 10:06 [ТС]	4
	8Observer8, Thanks!/Спасибо! 1

Шахматная доска

Решение