изучат основы html Canvas API и создадут игру в пинг-понг, используя концепции, которые мы изучим в этой статье.
Котельная плита для статьи
CSS
html, * { box-sizing: border-box; margin: 0; padding: 0; } body { text-align: center; } .grid { background: lightgreen; margin: auto; } p:nth-child(1) { padding: 10px 20px; text-align: center; font-family: ubuntu; font-weight: bolder; font-size: 25px; text-transform: uppercase; color: gray; }
HTML
<canvas class='grid' width="1000" height="500"> </canvas>
ЯВАСКРИПТ
let ctx = document.querySelector("canvas").getContext("2d");
Примечание. В этой статье мы будем работать только с файлом сценария Java.
Основы HTML Canvas API
1. Создание линии
function createLine(x1, y1, x2, y2) { ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath(); } createLine(0, 0, 10, 10);
lineWidth: этот параметр определяет толщину линии.
strokeStyle: этот параметр задает пользовательский цвет линии.
moveTo(): когда мы хотим переместиться в точку, не рисуя линию на холсте, мы используем команду перемещения.
lineTo(): когда мы хотим нарисовать линию от текущей позиции до желаемой позиции, мы используем эту функцию.
stroke(): когда мы используем командную строку lineTo(), она не будет отображаться на видимом до тех пор, пока мы не используем команду stroke() в конце.
2. Создание прямоугольника
function createRect(x1, y1, width, height) { ctx.fillStyle = "red"; ctx.fillRect(x1, y1, width, height); } createLine(0, 0, 10, 10);
fillStyle: используется для придания пользовательского цвета создаваемому прямоугольнику.
fillRect(): эта команда используется для создания прямоугольника.
3. Создание круга
function createCircle(cx, cy, radius) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.closePath(); } createCircle(20, 20, 10);
arc():команда Arc используется для создания дуги, которая принимает координату центра x, координату центра y, радиус, начальный угол и конечный угол в качестве параметра.
🕙 Создадим игру ПИНГ-ПОНГ 🕟
let circle = { x: 100, y: 100, radius: 10, dx: 2, dy: 2 } let rect = { x: 488, y: 0, width: 10, height: 50, } let line = { init_x: 100, init_y: 100, fin_x: 0, fin_y: 0 } let ctx = document.querySelector("canvas").getContext("2d"); function draw_circle() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) ctx.beginPath(); ctx.arc(circle.x , circle.y, circle.radius, 0, Math.PI * 2); ctx.fillStyle = 'red'; ctx.fill(); ctx.fillStyle = 'blue'; ctx.fillRect(rect.x,rect.y,rect.width,rect.height); } function draw_animated_circle() { draw_circle(circle); circle.x += circle.dx; circle.y += circle.dy; line.init_x = line.fin_x line.init_y = line.fin_y line.fin_x = circle.x; line.fin_y = circle.y; if(circle.x + circle.radius ==rect.x && ( circle.y + circle.radius >rect.y && circle.y + circle.radius <rect.y + rect.height + 2 * circle.radius) ) { circle.dx *= -1; } if(circle.x + circle.radius >= ctx.canvas.width || circle.x <= circle.radius ) { if(circle.x + circle.radius >= ctx.canvas.width){ alert("gameover"); window.location.reload(); } circle.dx *= -1; } if(circle.y + circle.radius >= ctx.canvas.height || circle.y <= circle.radius ) { circle.dy *= -1; } requestAnimationFrame(draw_animated_circle); } function init() { document.querySelector("body").addEventListener("keydown", (e) => { if(e.keyCode == 38 &&rect.y >= 2) { rect.y -= 10 } if(e.keyCode == 40 && rect.y +rect.height < ctx.canvas.height - 7 ) { rect.y += 10 } }) draw_animated_circle(); } init();
requestAnimationFrame : метод сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию для обновления анимации перед следующей перерисовкой. Метод принимает обратный вызов в качестве аргумента, который должен быть вызван перед перерисовкой.
CodePen Ссылка на созданную нами игру в пинг-понг.
Примечание. Используя эти базовые концепции, вы можете создать множество красивых анимаций и многое другое.
Чтобы узнать больше о canvas, вы можете обратиться к документации MDN.