Демо JavaScript:
<html> <head> <meta charset="UTF-8"/> <title>lab 5</title> <script src="script2.js"></script> </head> <body> <canvas id="paint" width="500" height="500"></canvas> <br/> <input type="button" value="Старт" onclick="Start()"> <input type="button" value="Стоп" onclick="Stop()"> </body> </html> <style> body { background-color: #FDEAA8; } </style>
var ctx; var idA; var TracShapeX = [18, 52, 52, 63, 63, 83, 83, 138, 138, 153, 160, 153, 135, 112, 93, 89, 54, 56, 52, 41, 27, 16, 12, 16, 17]; //X координаты наружней границы трактора var TracShapeY = [53, 53, 29, 29, 53, 53, 15, 7, 67, 78, 100, 122, 135, 135, 122, 108, 108, 113, 126, 134, 134, 126, 113, 100, 99]; //Y координаты наружней границы трактора var TracX = [18, 52, 52, 63, 63, 83, 83, 138, 138, 17, 18, 89, 134, 134, 89, 89, 93, 130, 130, 93, 93, 83, 138, 138, 83, 54, 61, 61, 54, 54, 18, 25, 25, 17, 18, 27, 41, 52, 56, 52, 41, 27, 16, 12, 16, 27, 112, 134, 153, 160, 153, 135, 112, 93, 86, 93, 112, 32, 36, 40, 42, 40, 36, 32, 28, 26, 28, 32, 119, 127, 134, 136, 134, 127, 119, 113, 110, 113, 119]; //X координаты для отрисовки трактора var TracY = [53, 53, 29, 29, 53, 53, 15, 15, 108, 108, 53, 23, 23, 108, 108, 23, 26, 26, 53, 53, 26, 15, 7, 15, 15, 31, 31, 53, 53, 31, 53, 63, 108, 108, 53, 92, 92, 100, 113, 126, 134, 134, 126, 113, 100, 92, 65, 65, 78, 100, 122, 135, 135, 122, 100, 78, 65, 105, 105, 108, 113, 117, 120, 120, 117, 113, 108, 105, 87, 87, 92, 100, 107, 112, 112, 107, 100, 92, 87]; //Y координаты для отрисовки трактора var TractorX,TractorY,TractorDx; // X,Y координаты трактора в текущий момент, скорость трактора var TruckShapeX = [16, 119, 119, 154, 170, 178, 184, 181, 163, 164, 161, 151, 140, 130, 126, 127, 63, 64, 61, 51, 39, 30, 26, 27, 16]; //X координаты наружней границы грузовика var TruckShapeY = [11, 11, 20, 20, 54, 57, 83, 91, 91, 95, 106, 113, 113, 106, 95, 91, 91, 94, 106, 112, 112, 106, 94, 91, 91]; //Y координаты наружней границы грузовика var TrucX = [16, 119, 119, 16, 16, 16, 119, 119, 16, 16, 119, 154, 170, 178, 184, 181, 119, 119, 127, 150, 160, 127, 127, 181, 184, 175, 175, 181, 140, 151, 161, 164, 161, 151, 140, 130, 126, 130, 140, 40, 51, 61, 64, 61, 51, 40, 30, 26, 30, 40, 143, 148, 153, 154, 153, 148, 143, 138, 136, 138, 143, 43, 48, 53, 54, 53, 48, 43, 38, 36, 38, 43]; //X координаты для отрисовки грузовика var TrucY = [11, 11, 91, 91, 11, 75, 75, 91, 91, 75, 20, 20, 54, 57, 83, 91, 91, 20, 29, 29, 51, 51, 29, 68, 83, 79, 72, 68, 77, 77, 84, 95, 106, 113, 113, 106, 95, 84, 77, 77, 77, 84, 95, 106, 113, 113, 106, 95, 84, 77, 86, 86, 89, 95, 100, 103, 103, 100, 95, 89, 86, 86, 86, 89, 95, 100, 103, 103, 100, 95, 89, 86]; //Y координаты для отрисовки грузовика var TruckX,TruckY,TruckDx; // X,Y координаты грузовика в текущий момент, скорость грузовика var AirplaneShapeX = [11, 23, 39, 50, 65, 79, 74, 85, 98, 128, 153, 163, 163, 158, 128, 110, 68, 57, 51, 60, 50, 39, 28, 21, 15, 13, 17, 11]; //X координаты наружней границы самолета var AirplaneShapeY = [28, 25, 25, 28, 49, 46, 33, 19, 10, 46, 54, 68, 79, 89, 102, 102, 102, 133, 123, 106, 98, 94, 85, 65, 66, 64, 56, 45, 35]; //Y координаты наружней границы самолета var AirX = [79, 74, 85, 98, 128, 79, 11, 23, 39, 50, 65, 79, 128, 153, 163, 163, 158, 128, 79, 65, 50, 39, 11, 11, 17, 48, 43, 31, 21, 15, 13, 17, 79, 104, 133, 68, 57, 51, 79, 142, 153, 163, 163, 158, 140, 136, 135, 137, 142, 76, 82, 86, 88, 86, 82, 76, 71, 70, 71, 76, 98, 104, 108, 110, 108, 104, 98, 93, 92, 93, 98, 120, 126, 130, 132, 130, 126, 120, 115, 114, 115, 120]; //X координаты для отрисовки самолета var AirY = [46, 33, 19, 10, 46, 46, 28, 25, 25, 28, 49, 46, 46, 54, 68, 79, 89, 102, 102, 99, 94, 85, 35, 28, 45, 45, 56, 64, 66, 64, 56, 45, 79, 84, 84, 133, 123, 106, 79, 51, 54, 68, 79, 89, 97, 84, 74, 61, 51, 56, 56, 59, 64, 69, 73, 73, 69, 64, 59, 56, 56, 56, 59, 64, 69, 73, 73, 69, 64, 59, 56, 56, 56, 59, 64, 69, 73, 73, 69, 64, 59, 56]; //Y координаты для отрисовки самолета var AirplaneX,AirplaneY,AirplaneDx; // X,Y координаты самолета в текущий момент, скорость самолета var key; //Флаг идет анимация или нет window.onload=function(){ ctx = document.getElementById("paint").getContext('2d'); ctx.strokeStyle = "black"; TractorDx = 1; TruckDx = 3; AirplaneDx = 4; key = 1; Init(); document.getElementById('paint').addEventListener('click', (e) => { if(key){ if(inPoly(TracShapeX, TracShapeY, e.offsetX, e.offsetY, TractorX, TractorY) || inPoly(TruckShapeX, TruckShapeY, e.offsetX, e.offsetY, TruckX, TruckY) || inPoly(AirplaneShapeX, AirplaneShapeY, e.offsetX, e.offsetY, AirplaneX, AirplaneY)) // Проверка попадания в машину { key = 0; Stop(); ctx.fillStyle="red"; ctx.fillRect(e.offsetX - 3,e.offsetY - 3,6,6); //Рисуем красный квадрат, если точка попала в машину } else { key = 0; Stop(); ctx.fillStyle="black"; ctx.fillRect(e.offsetX - 3,e.offsetY - 3,6,6); //Рисуем черный квадрат, если точка не попала в машину } }else{ key = 1; Start(); //Если анимация не воспроизводится, возпроизвести ее } }); } function Init() { ctx.fillStyle="#FDEAA8"; ctx.fillRect(0,0,500,500); //Залить фон TractorX = 340; TractorY = 340; //Начальные координаты для трактора TruckX = 0; TruckY = 320; //Начальные координаты для грузовика AirplaneX = 100; AirplaneY = 50; //Начальные координаты для самолета Airplane(AirplaneX, AirplaneY); //Нарисовать самолет Tractor(TractorX,TractorY); //Нарисовать трактор Truck(TruckX,TruckY); //Нарисовать грузовик } function Tractor(srartX, srartY) //Размер 170*145 { let tmp = 0; //Счетчик для понимания какую из частей трактора мы рисуем let color = ["green","yellow","blue","red","blue","red","orange","orange","red","red"]; //Цвет для фигуры трактора, которую мы рисуем let oper = [10,4,4,3,4,4,10,10,10,10]; //Количество точек у конкретной фигуры for(let i = 0; i < 10; i++) //Последовательно рисуем части трактора { ctx.fillStyle = color[i]; ctx.beginPath(); ctx.moveTo(srartX + TracX[tmp], srartY + TracY[tmp++]); for(let j = 0; j < oper[i]; j++) ctx.lineTo(srartX + TracX[tmp], srartY + TracY[tmp++]); ctx.closePath(); ctx.fill(); ctx.stroke(); } } function Truck(srartX, srartY) //Размер 200*120 { let tmp = 0;//Счетчик для понимания какую из частей грузовика мы рисуем let color = ["yellow","red","green","blue","yellow","orange","orange","red","red"];//Цвет для фигуры грузовика, которую мы рисуем let oper = [4,4,7,4,4,10,10,10,10]; //Количество точек у конкретной фигуры for(let i = 0; i < 9; i++) //Последовательно рисуем части грузовика { ctx.fillStyle = color[i]; ctx.beginPath(); ctx.moveTo(srartX + TrucX[tmp], srartY + TrucY[tmp++]); for(let j = 0; j < oper[i]; j++) ctx.lineTo(srartX + TrucX[tmp], srartY + TrucY[tmp++]); ctx.closePath(); ctx.fill(); ctx.stroke(); } } function Airplane(srartX, srartY) //Размер 170*145 { let tmp = 0; //Счетчик для понимания какую из частей самолета мы рисуем let color = ["red","red","red","red","yellow","blue","blue","blue"]; //Цвет для фигуры самолета, которую мы рисуем let oper = [5,17,7,6,9,10,10,10]; //Количество точек у конкретной фигуры for(let i = 0; i < 8; i++) //Последовательно рисуем части самолета { ctx.fillStyle = color[i]; ctx.beginPath(); ctx.moveTo(srartX + AirX[tmp], srartY + AirY[tmp++]); for(let j = 0; j < oper[i]; j++) ctx.lineTo(srartX + AirX[tmp], srartY + AirY[tmp++]); ctx.closePath(); ctx.fill(); ctx.stroke(); } } function inPoly(xp, yp, x, y, moveX, moveY) { //Проверка попадания точки в многоугольник, где xp - массив X координат фигуры, yp - массив Y координат фигуры, x - X координата мыши, y - Y координата мыши, moveX - на сколько перенесена фигура по X в данный момент, moveY - на сколько перенесена фигура по Y в данный момент npol = xp.length; let j = npol - 1; let c = 0; for (let i = 0; i < npol; i++) { if ((((moveY + yp[i] <= y) && (y < moveY + yp[j])) || ((moveY + yp[j] <= y) && (y < moveY + yp[i]))) && (x > (moveX + xp[j] - moveX - xp[i]) * (y - moveY - yp[i]) / (moveY + yp[j] - moveY - yp[i]) + moveX + xp[i])) { c = !c } j = i; } return c; } function Draw() //Нарисовать машины { ctx.fillStyle="#FDEAA8"; ctx.fillRect(0,0,500,500); //Залить фон if(AirplaneX > 800) AirplaneX = -200; AirplaneX += AirplaneDx; Airplane(AirplaneX,AirplaneY); //Нарисовать самолет if(TruckX > 800) TruckX = -200; TruckX += TruckDx; Truck(TruckX,TruckY); //Нарисовать грузовик if(TractorX < -200) TractorX = 800; TractorX -= TractorDx; Tractor(TractorX,TractorY); //Нарисовать трактор idA = requestAnimationFrame(Draw); //Анимация } function Start() { idA = requestAnimationFrame(Draw); //Начать анимацию } function Stop() { cancelAnimationFrame(idA); //Остановить анимацию }