Skip to content
Snippets Groups Projects
Commit d285ac0e authored by Sofiane Lasoa's avatar Sofiane Lasoa :grin:
Browse files

Implement mouse move

parent 24f67253
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 100 additions and 54 deletions
client/public/build/main.bundle.js
+ 41
− 25
View file @ d285ac0e
......@@ -29,34 +29,38 @@ var Player = /*#__PURE__*/function () {
}
_createClass(Player, [{
key: "draw",
value: function draw(ctx) {
value: function draw(ctx, image) {
// Dessiner le cercle
ctx.beginPath();
ctx.drawImage(image, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
}
}, {
key: "move",
value: function move(canvas) {
value: function move(ctx) {
// Déplacer le cercle en fonction de la direction
this.x += this.direction.x * this.speed;
this.y += this.direction.y * this.speed;
if (this.x < this.radius) {
this.x = this.radius;
if (this.x < this.radius) this.x = this.radius;
if (this.y < this.radius) this.y = this.radius;
if (this.x > ctx.width - this.radius) {
this.x = ctx.width - this.radius;
}
if (this.y < this.radius) {
this.y = this.radius;
}
if (this.x > canvas.width - this.radius) {
this.x = canvas.width - this.radius;
}
if (this.y > canvas.height - this.radius) {
this.y = canvas.height - this.radius;
if (this.y > ctx.height - this.radius) {
this.y = ctx.height - this.radius;
}
}
}, {
key: "moveTo",
value: function moveTo(x, y) {
var directionX = x - this.x;
var directionY = y - this.y;
var distance = Math.sqrt(Math.pow(directionX, 2) + Math.pow(directionY, 2));
this.direction.x = directionX / distance;
this.direction.y = directionY / distance;
}
}]);
return Player;
}();
......@@ -114,14 +118,22 @@ __webpack_require__.r(__webpack_exports__);
var canvas = document.querySelector(".map");
var ctx = canvas.getContext("2d");
var backgroundImage = new Image();
backgroundImage.src = "/images/map.png";
backgroundImage.addEventListener("load", function (event) {
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
canvas.width = 500;
canvas.height = 500;
/*
window.addEventListener("resize", (e) => {
e.preventDefault();
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
});
var player = new _Player_js__WEBPACK_IMPORTED_MODULE_0__["default"](0, 0, 60);
player.draw(ctx);
console.log(player);
*/
ctx.width = canvas.width;
ctx.height = canvas.height;
var player = new _Player_js__WEBPACK_IMPORTED_MODULE_0__["default"](canvas.width / 2, canvas.height / 2, 100);
var image = new Image();
image.src = "/images/goku.png";
document.addEventListener("keydown", function (event) {
event.preventDefault();
// Mettre à jour la direction en fonction des touches enfoncées
......@@ -174,13 +186,17 @@ document.addEventListener("keyup", function (event) {
break;
}
});
canvas.addEventListener("mousemove", function (event) {
var mouseX = event.offsetX;
var mouseY = event.offsetY;
player.moveTo(mouseX, mouseY);
});
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Déplacer le joueur en fonction de la direction
player.move(canvas);
player.move(ctx);
// Dessiner le joueur et les autres éléments du jeu
ctx.clearRect(0, 0, canvas.width, canvas.height);
player.draw(ctx);
player.draw(ctx, image);
requestAnimationFrame(update);
}
update();
......
client/public/build/main.bundle.js.map
+ 1
− 1
View file @ d285ac0e
{"version":3,"file":"main.bundle.js","mappings":"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","sources":["webpack://sae-2023-groupei-lasoa-gomis/./client/src/Player.js","webpack://sae-2023-groupei-lasoa-gomis/webpack/bootstrap","webpack://sae-2023-groupei-lasoa-gomis/webpack/runtime/make namespace object","webpack://sae-2023-groupei-lasoa-gomis/./client/src/main.js"],"sourcesContent":["class Player {\r\n constructor(x, y, radius) {\r\n this.x = x;\r\n this.y = y;\r\n this.radius = radius;\r\n this.speed = 4;\r\n this.direction = {\r\n x: 0,\r\n y: 0,\r\n };\r\n }\r\n\r\n draw(ctx) {\r\n // Dessiner le cercle\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\r\n ctx.fillStyle = \"blue\";\r\n ctx.fill();\r\n ctx.strokeStyle = \"black\";\r\n ctx.stroke();\r\n }\r\n\r\n move(canvas) {\r\n // Déplacer le cercle en fonction de la direction\r\n this.x += this.direction.x * this.speed;\r\n this.y += this.direction.y * this.speed;\r\n if (this.x < this.radius) {\r\n this.x = this.radius;\r\n }\r\n if (this.y < this.radius) {\r\n this.y = this.radius;\r\n }\r\n if (this.x > canvas.width - this.radius) {\r\n this.x = canvas.width - this.radius;\r\n }\r\n if (this.y > canvas.height - this.radius) {\r\n this.y = canvas.height - this.radius;\r\n }\r\n }\r\n}\r\n\r\nexport default Player;\r\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Player from \"./Player.js\";\r\n\r\nconst canvas = document.querySelector(\".map\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\nconst backgroundImage = new Image();\r\nbackgroundImage.src = \"/images/map.png\";\r\nbackgroundImage.addEventListener(\"load\", (event) => {\r\n ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);\r\n});\r\n\r\nconst player = new Player(0, 0, 60);\r\nplayer.draw(ctx);\r\n\r\nconsole.log(player);\r\n\r\ndocument.addEventListener(\"keydown\", (event) => {\r\n event.preventDefault();\r\n // Mettre à jour la direction en fonction des touches enfoncées\r\n switch (event.keyCode) {\r\n case 37: // Gauche\r\n player.direction.x = -1;\r\n break;\r\n case 38: // Haut\r\n player.direction.y = -1;\r\n break;\r\n case 39: // Droite\r\n player.direction.x = 1;\r\n break;\r\n case 40: // Bas\r\n player.direction.y = 1;\r\n break;\r\n }\r\n});\r\n\r\ndocument.addEventListener(\"keyup\", (event) => {\r\n event.preventDefault();\r\n // Mettre à jour la direction en fonction des touches relâchées\r\n switch (event.keyCode) {\r\n case 37: // Gauche\r\n if (player.direction.x < 0) {\r\n player.direction.x = 0;\r\n }\r\n break;\r\n case 38: // Haut\r\n if (player.direction.y < 0) {\r\n player.direction.y = 0;\r\n }\r\n break;\r\n case 39: // Droite\r\n if (player.direction.x > 0) {\r\n player.direction.x = 0;\r\n }\r\n break;\r\n case 40: // Bas\r\n if (player.direction.y > 0) {\r\n player.direction.y = 0;\r\n }\r\n break;\r\n }\r\n});\r\n\r\nfunction update() {\r\n // Déplacer le joueur en fonction de la direction\r\n player.move(canvas);\r\n\r\n // Dessiner le joueur et les autres éléments du jeu\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n player.draw(ctx);\r\n\r\n requestAnimationFrame(update);\r\n}\r\n\r\nupdate();\r\n"],"names":["Player","x","y","radius","_classCallCheck","speed","direction","_createClass","key","value","draw","ctx","beginPath","arc","Math","PI","fillStyle","fill","strokeStyle","stroke","move","canvas","width","height","document","querySelector","getContext","backgroundImage","Image","src","addEventListener","event","drawImage","player","console","log","preventDefault","keyCode","update","clearRect","requestAnimationFrame"],"sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"main.bundle.js","mappings":";;;;;;;;;;;;;;;;;IAAMA,MAAM;EACV,SAAAA,OAAYC,CAAC,EAAEC,CAAC,EAAEC,MAAM,EAAE;IAAAC,eAAA,OAAAJ,MAAA;IACxB,IAAI,CAACC,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACE,KAAK,GAAG,CAAC;IACd,IAAI,CAACC,SAAS,GAAG;MACfL,CAAC,EAAE,CAAC;MACJC,CAAC,EAAE;IACL,CAAC;EACH;EAACK,YAAA,CAAAP,MAAA;IAAAQ,GAAA;IAAAC,KAAA,EAED,SAAAC,KAAKC,GAAG,EAAEC,KAAK,EAAE;MACf;MACAD,GAAG,CAACE,SAAS,EAAE;MACfF,GAAG,CAACG,SAAS,CACXF,KAAK,EACL,IAAI,CAACX,CAAC,GAAG,IAAI,CAACE,MAAM,EACpB,IAAI,CAACD,CAAC,GAAG,IAAI,CAACC,MAAM,EACpB,IAAI,CAACA,MAAM,GAAG,CAAC,EACf,IAAI,CAACA,MAAM,GAAG,CAAC,CAChB;MACDQ,GAAG,CAACI,GAAG,CAAC,IAAI,CAACd,CAAC,EAAE,IAAI,CAACC,CAAC,EAAE,IAAI,CAACC,MAAM,EAAE,CAAC,EAAE,CAAC,GAAGa,IAAI,CAACC,EAAE,CAAC;MACpDN,GAAG,CAACO,WAAW,GAAG,OAAO;MACzBP,GAAG,CAACQ,MAAM,EAAE;IACd;EAAC;IAAAX,GAAA;IAAAC,KAAA,EAED,SAAAW,KAAKT,GAAG,EAAE;MACR;MACA,IAAI,CAACV,CAAC,IAAI,IAAI,CAACK,SAAS,CAACL,CAAC,GAAG,IAAI,CAACI,KAAK;MACvC,IAAI,CAACH,CAAC,IAAI,IAAI,CAACI,SAAS,CAACJ,CAAC,GAAG,IAAI,CAACG,KAAK;MACvC,IAAI,IAAI,CAACJ,CAAC,GAAG,IAAI,CAACE,MAAM,EAAE,IAAI,CAACF,CAAC,GAAG,IAAI,CAACE,MAAM;MAC9C,IAAI,IAAI,CAACD,CAAC,GAAG,IAAI,CAACC,MAAM,EAAE,IAAI,CAACD,CAAC,GAAG,IAAI,CAACC,MAAM;MAC9C,IAAI,IAAI,CAACF,CAAC,GAAGU,GAAG,CAACU,KAAK,GAAG,IAAI,CAAClB,MAAM,EAAE;QACpC,IAAI,CAACF,CAAC,GAAGU,GAAG,CAACU,KAAK,GAAG,IAAI,CAAClB,MAAM;MAClC;MACA,IAAI,IAAI,CAACD,CAAC,GAAGS,GAAG,CAACW,MAAM,GAAG,IAAI,CAACnB,MAAM,EAAE;QACrC,IAAI,CAACD,CAAC,GAAGS,GAAG,CAACW,MAAM,GAAG,IAAI,CAACnB,MAAM;MACnC;IACF;EAAC;IAAAK,GAAA;IAAAC,KAAA,EACD,SAAAc,OAAOtB,CAAC,EAAEC,CAAC,EAAE;MACX,IAAMsB,UAAU,GAAGvB,CAAC,GAAG,IAAI,CAACA,CAAC;MAC7B,IAAMwB,UAAU,GAAGvB,CAAC,GAAG,IAAI,CAACA,CAAC;MAE7B,IAAMwB,QAAQ,GAAGV,IAAI,CAACW,IAAI,CAACX,IAAA,CAAAY,GAAA,CAAAJ,UAAU,EAAI,CAAC,IAAAR,IAAA,CAAAY,GAAA,CAAGH,UAAU,EAAI,CAAC,EAAC;MAE7D,IAAI,CAACnB,SAAS,CAACL,CAAC,GAAGuB,UAAU,GAAGE,QAAQ;MACxC,IAAI,CAACpB,SAAS,CAACJ,CAAC,GAAGuB,UAAU,GAAGC,QAAQ;IAC1C;EAAC;EAAA,OAAA1B,MAAA;AAAA;AAGH,+DAAeA,MAAM;;;;;;UCnDrB;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;;;;ACNiC;AAEjC,IAAM6B,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;AAC7C,IAAMpB,GAAG,GAAGkB,MAAM,CAACG,UAAU,CAAC,IAAI,CAAC;AAEnCH,MAAM,CAACR,KAAK,GAAG,GAAG;AAClBQ,MAAM,CAACP,MAAM,GAAG,GAAG;;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;;AAEAX,GAAG,CAACU,KAAK,GAAGQ,MAAM,CAACR,KAAK;AACxBV,GAAG,CAACW,MAAM,GAAGO,MAAM,CAACP,MAAM;AAE1B,IAAMW,MAAM,GAAG,IAAIjC,kDAAM,CAAC6B,MAAM,CAACR,KAAK,GAAG,CAAC,EAAEQ,MAAM,CAACP,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC;AAEnE,IAAMV,KAAK,GAAG,IAAIsB,KAAK,EAAE;AACzBtB,KAAK,CAACuB,GAAG,GAAG,kBAAkB;AAE9BL,QAAQ,CAACM,gBAAgB,CAAC,SAAS,EAAE,UAACC,KAAK,EAAK;EAC9CA,KAAK,CAACC,cAAc,EAAE;EACtB;EACA,QAAQD,KAAK,CAACE,OAAO;IACnB,KAAK,EAAE;MAAE;MACPN,MAAM,CAAC3B,SAAS,CAACL,CAAC,GAAG,CAAC,CAAC;MACvB;IACF,KAAK,EAAE;MAAE;MACPgC,MAAM,CAAC3B,SAAS,CAACJ,CAAC,GAAG,CAAC,CAAC;MACvB;IACF,KAAK,EAAE;MAAE;MACP+B,MAAM,CAAC3B,SAAS,CAACL,CAAC,GAAG,CAAC;MACtB;IACF,KAAK,EAAE;MAAE;MACPgC,MAAM,CAAC3B,SAAS,CAACJ,CAAC,GAAG,CAAC;MACtB;EAAM;AAEZ,CAAC,CAAC;AAEF4B,QAAQ,CAACM,gBAAgB,CAAC,OAAO,EAAE,UAACC,KAAK,EAAK;EAC5CA,KAAK,CAACC,cAAc,EAAE;EACtB;EACA,QAAQD,KAAK,CAACE,OAAO;IACnB,KAAK,EAAE;MAAE;MACP,IAAIN,MAAM,CAAC3B,SAAS,CAACL,CAAC,GAAG,CAAC,EAAE;QAC1BgC,MAAM,CAAC3B,SAAS,CAACL,CAAC,GAAG,CAAC;MACxB;MACA;IACF,KAAK,EAAE;MAAE;MACP,IAAIgC,MAAM,CAAC3B,SAAS,CAACJ,CAAC,GAAG,CAAC,EAAE;QAC1B+B,MAAM,CAAC3B,SAAS,CAACJ,CAAC,GAAG,CAAC;MACxB;MACA;IACF,KAAK,EAAE;MAAE;MACP,IAAI+B,MAAM,CAAC3B,SAAS,CAACL,CAAC,GAAG,CAAC,EAAE;QAC1BgC,MAAM,CAAC3B,SAAS,CAACL,CAAC,GAAG,CAAC;MACxB;MACA;IACF,KAAK,EAAE;MAAE;MACP,IAAIgC,MAAM,CAAC3B,SAAS,CAACJ,CAAC,GAAG,CAAC,EAAE;QAC1B+B,MAAM,CAAC3B,SAAS,CAACJ,CAAC,GAAG,CAAC;MACxB;MACA;EAAM;AAEZ,CAAC,CAAC;AAEF2B,MAAM,CAACO,gBAAgB,CAAC,WAAW,EAAE,UAACC,KAAK,EAAK;EAC9C,IAAMG,MAAM,GAAGH,KAAK,CAACI,OAAO;EAC5B,IAAMC,MAAM,GAAGL,KAAK,CAACM,OAAO;EAE5BV,MAAM,CAACV,MAAM,CAACiB,MAAM,EAAEE,MAAM,CAAC;AAC/B,CAAC,CAAC;AAEF,SAASE,MAAMA,CAAA,EAAG;EAChBjC,GAAG,CAACkC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAEhB,MAAM,CAACR,KAAK,EAAEQ,MAAM,CAACP,MAAM,CAAC;EAChD;EACAW,MAAM,CAACb,IAAI,CAACT,GAAG,CAAC;EAChB;EACAsB,MAAM,CAACvB,IAAI,CAACC,GAAG,EAAEC,KAAK,CAAC;EACvBkC,qBAAqB,CAACF,MAAM,CAAC;AAC/B;AAEAA,MAAM,EAAE,C","sources":["webpack://sae-2023-groupei-lasoa-gomis/./client/src/Player.js","webpack://sae-2023-groupei-lasoa-gomis/webpack/bootstrap","webpack://sae-2023-groupei-lasoa-gomis/webpack/runtime/make namespace object","webpack://sae-2023-groupei-lasoa-gomis/./client/src/main.js"],"sourcesContent":["class Player {\r\n constructor(x, y, radius) {\r\n this.x = x;\r\n this.y = y;\r\n this.radius = radius;\r\n this.speed = 4;\r\n this.direction = {\r\n x: 0,\r\n y: 0,\r\n };\r\n }\r\n\r\n draw(ctx, image) {\r\n // Dessiner le cercle\r\n ctx.beginPath();\r\n ctx.drawImage(\r\n image,\r\n this.x - this.radius,\r\n this.y - this.radius,\r\n this.radius * 2,\r\n this.radius * 2\r\n );\r\n ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\r\n ctx.strokeStyle = \"black\";\r\n ctx.stroke();\r\n }\r\n\r\n move(ctx) {\r\n // Déplacer le cercle en fonction de la direction\r\n this.x += this.direction.x * this.speed;\r\n this.y += this.direction.y * this.speed;\r\n if (this.x < this.radius) this.x = this.radius;\r\n if (this.y < this.radius) this.y = this.radius;\r\n if (this.x > ctx.width - this.radius) {\r\n this.x = ctx.width - this.radius;\r\n }\r\n if (this.y > ctx.height - this.radius) {\r\n this.y = ctx.height - this.radius;\r\n }\r\n }\r\n moveTo(x, y) {\r\n const directionX = x - this.x;\r\n const directionY = y - this.y;\r\n \r\n const distance = Math.sqrt(directionX ** 2 + directionY ** 2);\r\n \r\n this.direction.x = directionX / distance;\r\n this.direction.y = directionY / distance;\r\n }\r\n}\r\n\r\nexport default Player;\r\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Player from \"./Player.js\";\r\n\r\nconst canvas = document.querySelector(\".map\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\ncanvas.width = 500;\r\ncanvas.height = 500;\r\n\r\n/*\r\nwindow.addEventListener(\"resize\", (e) => {\r\n e.preventDefault();\r\n canvas.width = document.documentElement.clientWidth;\r\n canvas.height = document.documentElement.clientHeight;\r\n});\r\n*/\r\n\r\nctx.width = canvas.width;\r\nctx.height = canvas.height;\r\n\r\nconst player = new Player(canvas.width / 2, canvas.height / 2, 100);\r\n\r\nconst image = new Image();\r\nimage.src = \"/images/goku.png\";\r\n\r\ndocument.addEventListener(\"keydown\", (event) => {\r\n event.preventDefault();\r\n // Mettre à jour la direction en fonction des touches enfoncées\r\n switch (event.keyCode) {\r\n case 37: // Gauche\r\n player.direction.x = -1;\r\n break;\r\n case 38: // Haut\r\n player.direction.y = -1;\r\n break;\r\n case 39: // Droite\r\n player.direction.x = 1;\r\n break;\r\n case 40: // Bas\r\n player.direction.y = 1;\r\n break;\r\n }\r\n});\r\n\r\ndocument.addEventListener(\"keyup\", (event) => {\r\n event.preventDefault();\r\n // Mettre à jour la direction en fonction des touches relâchées\r\n switch (event.keyCode) {\r\n case 37: // Gauche\r\n if (player.direction.x < 0) {\r\n player.direction.x = 0;\r\n }\r\n break;\r\n case 38: // Haut\r\n if (player.direction.y < 0) {\r\n player.direction.y = 0;\r\n }\r\n break;\r\n case 39: // Droite\r\n if (player.direction.x > 0) {\r\n player.direction.x = 0;\r\n }\r\n break;\r\n case 40: // Bas\r\n if (player.direction.y > 0) {\r\n player.direction.y = 0;\r\n }\r\n break;\r\n }\r\n});\r\n\r\ncanvas.addEventListener(\"mousemove\", (event) => {\r\n const mouseX = event.offsetX;\r\n const mouseY = event.offsetY;\r\n\r\n player.moveTo(mouseX, mouseY);\r\n});\r\n\r\nfunction update() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n // Déplacer le joueur en fonction de la direction\r\n player.move(ctx);\r\n // Dessiner le joueur et les autres éléments du jeu\r\n player.draw(ctx, image);\r\n requestAnimationFrame(update);\r\n}\r\n\r\nupdate();\r\n"],"names":["Player","x","y","radius","_classCallCheck","speed","direction","_createClass","key","value","draw","ctx","image","beginPath","drawImage","arc","Math","PI","strokeStyle","stroke","move","width","height","moveTo","directionX","directionY","distance","sqrt","pow","canvas","document","querySelector","getContext","player","Image","src","addEventListener","event","preventDefault","keyCode","mouseX","offsetX","mouseY","offsetY","update","clearRect","requestAnimationFrame"],"sourceRoot":""}
\ No newline at end of file
client/public/css/style.css
+ 7
− 0
View file @ d285ac0e
body{
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
.map{
box-sizing: border-box;
border: 5px solid #eb5619;
background-size: cover;
}
\ No newline at end of file
client/public/images/goku.png 0 → 100644
+ 0
− 0
View file @ d285ac0e
client/public/images/goku.png

138 KiB

client/public/images/map.jpg 0 → 100644
+ 0
− 0
View file @ d285ac0e
client/public/images/map.jpg

579 KiB

client/public/images/map.png deleted 100644 → 0
+ 0
− 0
View file @ 24f67253
client/public/images/map.png

3.21 MiB

client/public/index.html
+ 2
− 2
View file @ d285ac0e
......@@ -4,11 +4,11 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre</title>
<title>Dragon.io</title>
<script src="./build/main.bundle.js" defer></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas class="map" height="1400" width="2200"></canvas>
<canvas class="map"></canvas>
</body>
</html>
\ No newline at end of file
client/src/Player.js
+ 24
− 14
View file @ d285ac0e
......@@ -10,33 +10,43 @@ class Player {
};
}
draw(ctx) {
draw(ctx, image) {
// Dessiner le cercle
ctx.beginPath();
ctx.drawImage(
image,
this.x - this.radius,
this.y - this.radius,
this.radius * 2,
this.radius * 2
);
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
}
move(canvas) {
move(ctx) {
// Déplacer le cercle en fonction de la direction
this.x += this.direction.x * this.speed;
this.y += this.direction.y * this.speed;
if (this.x < this.radius) {
this.x = this.radius;
if (this.x < this.radius) this.x = this.radius;
if (this.y < this.radius) this.y = this.radius;
if (this.x > ctx.width - this.radius) {
this.x = ctx.width - this.radius;
}
if (this.y < this.radius) {
this.y = this.radius;
}
if (this.x > canvas.width - this.radius) {
this.x = canvas.width - this.radius;
}
if (this.y > canvas.height - this.radius) {
this.y = canvas.height - this.radius;
if (this.y > ctx.height - this.radius) {
this.y = ctx.height - this.radius;
}
}
moveTo(x, y) {
const directionX = x - this.x;
const directionY = y - this.y;
const distance = Math.sqrt(directionX ** 2 + directionY ** 2);
this.direction.x = directionX / distance;
this.direction.y = directionY / distance;
}
}
export default Player;
client/src/main.js
+ 25
− 12
View file @ d285ac0e
......@@ -3,16 +3,24 @@ import Player from "./Player.js";
const canvas = document.querySelector(".map");
const ctx = canvas.getContext("2d");
const backgroundImage = new Image();
backgroundImage.src = "/images/map.png";
backgroundImage.addEventListener("load", (event) => {
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
canvas.width = 500;
canvas.height = 500;
/*
window.addEventListener("resize", (e) => {
e.preventDefault();
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
});
*/
ctx.width = canvas.width;
ctx.height = canvas.height;
const player = new Player(0, 0, 60);
player.draw(ctx);
const player = new Player(canvas.width / 2, canvas.height / 2, 100);
console.log(player);
const image = new Image();
image.src = "/images/goku.png";
document.addEventListener("keydown", (event) => {
event.preventDefault();
......@@ -60,14 +68,19 @@ document.addEventListener("keyup", (event) => {
}
});
canvas.addEventListener("mousemove", (event) => {
const mouseX = event.offsetX;
const mouseY = event.offsetY;
player.moveTo(mouseX, mouseY);
});
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Déplacer le joueur en fonction de la direction
player.move(canvas);
player.move(ctx);
// Dessiner le joueur et les autres éléments du jeu
ctx.clearRect(0, 0, canvas.width, canvas.height);
player.draw(ctx);
player.draw(ctx, image);
requestAnimationFrame(update);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment