Демо JavaScript:
<html> <head> </head> <body> <canvas id="canvas" width="500" height="500" style="border: 1px solid black" onclick="storeGuess(event)"></canvas> <script> let ctx = document.getElementById('canvas').getContext('2d') // отрисовка фона ctx.beginPath () ctx.fillStyle = "blue" ctx.fillRect (0, 0, 500, 500) ctx.fillStyle = "green" ctx.fillRect (0, 300, 500, 500) ctx.stroke() let score = 0; // переменная, хранящая количество попаданий мышью по "ракете" // функция проверки попадения точки с координатами (х, у) в многоугольник, координаты которого находятся в массивах рХ[], рУ[] function PIP(x, y) { let parity = 0; // флаг четности for (let i = 1; i < pX.length; i ++) { // цикл, перебирающий все ребра многоугольника if (pY[i] - pY[i - 1] == 0) continue; // проверка горизонтальности ребра if (Math.max (pX[i], pX[i - 1]) > x) { // проверка расположения ребра многоугольника (правее ли оно точки (х, у)) if (Math.max (pY[i], pY[i - 1]) != y) { // проверка непопадания сканируещего луча на нижний конец ребра многоугольника if (y - Math.max (pY[i], pY[i - 1]) < 0 && y - Math.min (pY[i], pY[i - 1]) >= 0) // проверка пересечения лучом ребра многоугольника parity = 1 - parity; } } } return parity } // функция обработки нажатия на холст function storeGuess(event) { let coordX = event.offsetX, coordY = event.offsetY if (PIP(coordX, coordY)) score ++; // добавление очков, если нажатие попадает внутрь многоугольника console.log ("coord x: " + coordX + " coord y: " + coordY, PIP(coordX, coordY)) } let x, y; x = -220; y = 220; // задание точек, относительно которых будем отрисовывать двигающиеся элементы let imgData = ctx.getImageData (0, 0, 500, 500); let pX = [], pY = []; // массивы, хранящие координаты вершин многоугольника // функция отрисовки function draw() { ctx.putImageData (imgData, 0, 0); ctx.beginPath(); // количество нажатий на ракету ctx.font = "20px Georgia"; ctx.fillText ("Попадания ", 320, 25); ctx.fillText (score, 460, 25); ctx.fillStyle = "yellow"; ctx.moveTo(x - 50, y + 30) ctx.lineTo(x - 100, y + 70) ctx.lineTo(x - 50, y + 50) ctx.fill() ctx.fillStyle = "red"; ctx.moveTo(x - 50, y + 20) ctx.lineTo(x - 50, y + 50) ctx.lineTo(x - 80, y) ctx.fill() ctx.fillStyle = "red"; ctx.strokeStyle = "black"; ctx.fillRect (x, y, 200, 80); ctx.strokeRect (x, y, 200, 80); ctx.beginPath(); ctx.moveTo(x, y + 10) ctx.lineTo(x - 50, y + 20) ctx.lineTo(x - 50, y + 50) ctx.lineTo(x, y + 70) ctx.moveTo(x + 200, y - 10) ctx.lineTo(x + 300, y + 40) ctx.lineTo(x + 200, y + 90) ctx.fillStyle = "grey" ctx.fill() // забивка массивов координат вершин многоугольника (координаты "хитбокса") pX[0] = x pY[0] = y pX[1] = x + 125 pY[1] = y pX[2] = x + 125 pY[2] = y - 35 pX[3] = x + 205 pY[3] = y - 35 pX[4] = x + 205 pY[4] = y + 45 pX[5] = x + 150 pY[5] = y + 45 pX[6] = x + 150 pY[6] = y + 100 ctx.stroke(); // смена направления движения if (x == -220) key = 1; if (x == 600) key = -1; x += key * 5; } setInterval(draw, 15); // создаем анимацию </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| lab5.zip | 1.7 кб |