JavaScript
1// Cardsクラス宣言2export class Cards 3{4 // コンストラクタ5 constructor() 6 {7 this.strokes = [];8 }9 10 // 更新処理11 // 引数 : 無し12 // 返り値 : 無し13 update() 14 {15 cards.drow();16 }17 18 // 描画処理19 // 引数 : 無し20 // 返り値 : 無し21 drow()22 {23 ctx.clearRect(0, 0, canvas.width, canvas.height);24 25 for (const stroke of this.strokes) 26 {27 ctx.strokeRect(stroke.x, stroke.y, stroke.width, stroke.height);28 }29 }30 31 // 追加処理32 // 引数 : x座標, y座標, 幅, 高さ, 番号33 // 返り値 : 無し34 add(x, y, width = 63, height = 88, number = this.strokes.length +1, dragging = false) 35 {36 this.strokes.push37 ({38 x,39 y,40 width,41 height,42 number,43 dragging,44 });45 46 cards.create(x, y, width, height);47 }48 49 // Cardsオブジェクトとの当たり判定50 // 引数 : 座標51 // 返り値 : 接触しているCardsオブジェクト番号 or null52 colison(posX, posY)53 {54 let number, difficultX, difficultY = null;55 56 for (const stroke of this.strokes)57 {58 if (originalMath.JudgeInto(stroke.x, stroke.y, stroke.width, stroke.height,59 posX, posY, 0, 0))60 {61 number = stroke.number;62 difficultX = posX -stroke.x;63 difficultY = posY -stroke.y;64 }65 }66 67 return [number, difficultX, difficultY];68 }69 70 // 生成処理71 // 引数 : x座標, y座標, 幅, 高さ72 // 返り値 : 無し73 create(x, y, width, height)74 {75 ctx.strokeRect(x, y, width, height);76 }77 78 // ゲッター(移動可能判定)79 // 引数 : 無し80 // 返り値 : 移動可能オブジェクトの番号 or null81 getCardsDragging()82 {83 for (const stroke of this.strokes)84 {85 if (stroke.dragging == true) { return stroke.number; }86 }87 88 return null;89 }90 91 // ゲッター(座標)92 // 引数 : 番号93 // 返り値 : 座標(x, y)94 getCardsPos(number)95 {96 for (const stroke of this.strokes)97 {98 if (stroke.number == number)99 {100 return [stroke.x, stroke.y];101 }102 }103 104 return null;105 }106 107 // セッター108 // 引数 : 番号, x座標, y座標, 幅, 高さ109 // 返り値 : 無し110 setCards(number, x, y, width = 63, height = 88)111 {112 for (const stroke of this.strokes)113 {114 if (stroke.number == number)115 {116 stroke.x = x;117 stroke.y = y;118 stroke.width = width;119 stroke.height = height;120 121 break;122 }123 }124 125 cards.drow();126 }127 128 // セッター(移動判定)129 // 引数 : 番号, 判定(true or flase)130 // 返り値 : 無し131 setCardsDragging(number, judgeDragging)132 {133 for (const stroke of this.strokes)134 {135 if (stroke.number == number)136 {137 stroke.dragging = judgeDragging;138 139 break;140 }141 }142 }143}144 145const init = () =>146{147 cards.add(canvas.width /2, canvas.height /2);148 cards.add(canvas.width /3, canvas.height /3);149 cards.add(canvas.width /4, canvas.height /4);150}151 152const loop = () =>153{154 cards.update();155}156 157// インポート158import { Mouse } from "./Lib/MouseEvent";159import { OriginalMath } from "./Lib/OriginalMath";160 161// 書式の初期化162const canvas = document.createElement("canvas");163const ctx = canvas.getContext("2d");164canvas.width = 1920;165canvas.height = 1280;166document.body.appendChild(canvas);167 168// クラス変数宣言169const cards = new Cards();170const mouse = new Mouse();171const originalMath = new OriginalMath();172 173init();174// ループ関数の指定175window.requestAnimationFrame(loop);176 177// クリック処理178canvas.addEventListener("mousedown", (event) => 179{180 console.log("mousedown Event");181 const rect = canvas.getBoundingClientRect();182 let number = null;183 let difficultPosX, difficultPosY = null;184 185 mouse.mousePos(event.clientX, event.clientY, rect);186 const [mousePosX, mousePosY] = mouse.getMousePos();187 188 [number, difficultPosX, difficultPosY] = cards.colison(mousePosX, mousePosY)189 if (number != null)190 {191 cards.setCardsDragging(number, true);192 193 mouse.setDifferencePos(difficultPosX, difficultPosY);194 }195});196 197// 移動処理198canvas.addEventListener("mousemove", (event) =>199{200 console.log("mousemove Event");201 const rect = canvas.getBoundingClientRect();202 let number = cards.getCardsDragging();203 204 if (number == null) { return; }205 206 let [cardsX, cardsY] = cards.getCardsPos(number);207 let [differenceX, differenceY] = mouse.getDifferencePos();208 209 mouse.mousePos(event.clientX, event.clientY, rect);210 const [mousePosX, mousePosY] = mouse.getMousePos();211 212 const draggingX = mousePosX - cardsX;213 const draggingY = mousePosY - cardsY;214 215 cardsX += draggingX - differenceX;216 cardsY += draggingY - differenceY;217 218 cards.setCards(number, cardsX, cardsY);219});220 221// 離脱処理222canvas.addEventListener("mouseup", () =>223{224 console.log("mouseup Event");225 let number = cards.getCardsDragging();226 227 cards.setCardsDragging(number, false);228})
0 コメント