diff --git a/client/public/build/main.bundle.js b/client/public/build/main.bundle.js index ea9b2b3f27ac19fde2a242d9ceee658ecf5a255f..93eeb9b804da0b9a2432c09aef173ec0dedc4caa 100644 --- a/client/public/build/main.bundle.js +++ b/client/public/build/main.bundle.js @@ -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(); diff --git a/client/public/build/main.bundle.js.map b/client/public/build/main.bundle.js.map index 27904c2f41b80fb8faa494ce0d8e8c1e5402cb11..8104ec2d32e8028814d8f1caadbd85f1d2f555fd 100644 --- a/client/public/build/main.bundle.js.map +++ b/client/public/build/main.bundle.js.map @@ -1 +1 @@ -{"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":"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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, 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 diff --git a/client/public/css/style.css b/client/public/css/style.css index 1b3ce024225b27c7f667212c6350f52327cd5796..5a5c9495008edd58adce1a717a01ef6b5135248f 100644 --- a/client/public/css/style.css +++ b/client/public/css/style.css @@ -1,4 +1,11 @@ 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 diff --git a/client/public/images/goku.png b/client/public/images/goku.png new file mode 100644 index 0000000000000000000000000000000000000000..b213912db4d276f5fd2de457fbfae87450597283 Binary files /dev/null and b/client/public/images/goku.png differ diff --git a/client/public/images/map.jpg b/client/public/images/map.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c3ab6c057b9b5477e3ca6d6fdb99101da8855dc8 Binary files /dev/null and b/client/public/images/map.jpg differ diff --git a/client/public/images/map.png b/client/public/images/map.png deleted file mode 100644 index 6d75c1c8294246c8985177a6bbae6fdd91d6a2a7..0000000000000000000000000000000000000000 Binary files a/client/public/images/map.png and /dev/null differ diff --git a/client/public/index.html b/client/public/index.html index a9aa3cfd7fdd35df02ac4ae79bfbeccadffc7f17..de8363bb7b3bdce0f2a0bbf71f7f658b209189cb 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -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 diff --git a/client/src/Player.js b/client/src/Player.js index 35d196352c9408dd47b52ca17c93326c92981a51..293035fa3aa53b3c9a9844fe418e7933c44caa68 100644 --- a/client/src/Player.js +++ b/client/src/Player.js @@ -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; diff --git a/client/src/main.js b/client/src/main.js index 6edf065ecaa3c753d6a45ba7fb0c406bae87bd41..814c28034fda0a744f21b97551a82d034c4522bf 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -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); }