input
This commit is contained in:
Baptiste
parent
5a751f44f5
commit
2b7bcf3c58
5 changed files with 303 additions and 3 deletions
|
|
@ -1,8 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="./class.js"></script>
|
||||
<script type="text/javascript" src="./render.js"></script>
|
||||
<script type="text/javascript" src="./game.js" defer></script>
|
||||
<script type="text/javascript" src="./js/class.js"></script>
|
||||
<script type="text/javascript" src="./js/render.js"></script>
|
||||
<script type="text/javascript" src="./js/input.js"></script>
|
||||
<script type="text/javascript" src="./js/game.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas width="800" height="800" id="canvas" style="border: 1px;"></canvas>
|
||||
|
|
|
|||
186
js/class.js
Normal file
186
js/class.js
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
let mapWidth = 210.;
|
||||
let mapHeith = 100.;
|
||||
const playerSize = 50.;
|
||||
const playerSpeed=2.;
|
||||
const halfSqrtTwo=0.70710678118;
|
||||
class Player
|
||||
{
|
||||
constructor (id,x,y,name)
|
||||
{
|
||||
this.name=name;
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.id=id;
|
||||
this.visibleDir=1;
|
||||
this.dir=0;//0=standStill
|
||||
//1=North
|
||||
//2=North-East
|
||||
//3=East
|
||||
//4=South-East
|
||||
//5=South
|
||||
//6=South-West
|
||||
//7=West
|
||||
//8=North-West
|
||||
this.ammo=10;
|
||||
this.health=10;
|
||||
}
|
||||
|
||||
takeDamage(amount)
|
||||
{
|
||||
this.health-=amount;
|
||||
if(this.health<=0)
|
||||
{
|
||||
//send death message to server
|
||||
//this.reset()
|
||||
}
|
||||
}
|
||||
|
||||
retrieveServerInfo(id,x,y,dir)
|
||||
{
|
||||
if(this.id==id)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.dir=dir;
|
||||
if(dir!=0)
|
||||
this.visibleDir=dir;
|
||||
}
|
||||
}
|
||||
|
||||
update(squares,circles)//update position
|
||||
{
|
||||
if(this.dir==0)
|
||||
return;
|
||||
|
||||
let dx,dy;
|
||||
switch(this.dir)
|
||||
{
|
||||
case 1: dx=0.;dy=-playerSpeed;break;
|
||||
case 2: dx=halfSqrtTwo*playerSpeed;dy=-halfSqrtTwo*playerSpeed;break;
|
||||
case 3: dx=playerSpeed;dy=0.;break;
|
||||
case 4: dx=halfSqrtTwo*playerSpeed;dy=halfSqrtTwo*playerSpeed;break;
|
||||
case 5: dx=0.;dy=playerSpeed;break;
|
||||
case 6: dx=-halfSqrtTwo*playerSpeed;dy=halfSqrtTwo*playerSpeed;break;
|
||||
case 7: dx=-playerSpeed;dy=0.;break;
|
||||
case 8: dx=-halfSqrtTwo*playerSpeed;dy=-halfSqrtTwo*playerSpeed;break;
|
||||
default:
|
||||
}
|
||||
this.x += dx;
|
||||
this.y += dy;
|
||||
|
||||
for(let square in squares)
|
||||
{
|
||||
if(square.collide(this))
|
||||
{
|
||||
this.x-=dx;
|
||||
this.y-=dy;
|
||||
this.dir=0;
|
||||
return;
|
||||
}
|
||||
}
|
||||
for(let circle in circles)
|
||||
{
|
||||
if(circle.collide(this))
|
||||
{
|
||||
this.x-=dx;
|
||||
this.y-=dy;
|
||||
this.dir=0;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get angle()
|
||||
{
|
||||
return (this.visibleDir-3)*3.1415926535/4.;
|
||||
}
|
||||
}
|
||||
|
||||
function dist(A,B)
|
||||
{
|
||||
return sqrt((A.x-B.x)**2+(A.y-B.y)**2);
|
||||
}
|
||||
|
||||
class Bullet
|
||||
{
|
||||
constructor (x,y,dx,dy)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.dx=dx;
|
||||
this.dy=dy;
|
||||
this.deleted=false;
|
||||
}
|
||||
|
||||
update()
|
||||
{
|
||||
if(!this.deleted)
|
||||
{
|
||||
this.x+=this.dx;
|
||||
this.y+=this.dy;
|
||||
}
|
||||
}
|
||||
|
||||
checkCollisions(player,squares,circles)//only the client's player /!\
|
||||
{
|
||||
if(!this.deleted)
|
||||
{
|
||||
if(dist(player,this)<playerSize/2)
|
||||
{
|
||||
player.takeDamage(1);
|
||||
this.deleted=true;
|
||||
return;
|
||||
}
|
||||
|
||||
for(let square in squares)
|
||||
{
|
||||
if(square.collide(this))
|
||||
{
|
||||
this.deleted=true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
for(let circle in circles)
|
||||
{
|
||||
if(circle.collide(this))
|
||||
{
|
||||
this.deleted=true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class Square
|
||||
{
|
||||
constructor(x,y,width,heigth)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.w=width;
|
||||
this.h=heigth;
|
||||
}
|
||||
|
||||
collide(point)
|
||||
{
|
||||
return (this.x<=point.x && point.x<=this.x+this.w && this.y<=point.y && point.y<=this.y+this.h);
|
||||
}
|
||||
}
|
||||
|
||||
class Circle
|
||||
{
|
||||
constructor(x,y,radius)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.r=radius;
|
||||
}
|
||||
|
||||
collide(point)
|
||||
{
|
||||
return ((point.x-this.x)**2+(point.y-this.y)**2<=r**2);
|
||||
}
|
||||
}
|
||||
30
js/game.js
Normal file
30
js/game.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
Renderer = new Render("canvas", "./assets/map/map7_recadr.png");
|
||||
Inp = new Input("canvas");
|
||||
|
||||
let players = [new Player(1, 100, 50, "rubiks"),
|
||||
new Player(2, 500, 70, "atsuyo"),
|
||||
new Player(3, 600, 70, "vincent"),
|
||||
new Player(4, 700, 70, "migliore"),
|
||||
new Player(5, 200, 30, "leroux"),
|
||||
new Player(6, 700, 700, "lele")];
|
||||
|
||||
players[0].retrieveServerInfo(1,100,50,3);
|
||||
players[1].dir=5;
|
||||
players[1].visibleDir=5;
|
||||
|
||||
Renderer.AddPlayer(players[0]);
|
||||
Renderer.AddPlayer(players[1]);
|
||||
Renderer.AddPlayer(players[2]);
|
||||
Renderer.AddPlayer(players[3]);
|
||||
Renderer.AddPlayer(players[4]);
|
||||
Renderer.AddPlayer(players[5]);
|
||||
|
||||
|
||||
setInterval(game);
|
||||
|
||||
function game() {
|
||||
players[0].update([],[]);
|
||||
players[1].update([],[]);
|
||||
//console.log(Inp.calculateAngle(500,500))
|
||||
Renderer.ReloadAff();
|
||||
}
|
||||
44
js/input.js
Normal file
44
js/input.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
class Input {
|
||||
constructor(id) {
|
||||
this.canvas = document.getElementById(id);
|
||||
|
||||
this.mouseX = 0
|
||||
this.mouseY = 0
|
||||
|
||||
// Event listener pour la position de la souris
|
||||
this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this))
|
||||
|
||||
this.canvas.addEventListener("click", function(event) {
|
||||
console.log("Clic de la souris");
|
||||
});
|
||||
|
||||
window.addEventListener("keydown", function(event) {
|
||||
switch(event.key) {
|
||||
case "ArrowUp":
|
||||
console.log("Flèche du haut");
|
||||
break;
|
||||
case "ArrowDown":
|
||||
console.log("Flèche du bas");
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
console.log("Flèche de gauche pressée");
|
||||
break;
|
||||
case "ArrowRight":
|
||||
console.log("Flèche de droite pressée");
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleMouseMove(event) {
|
||||
let mX = event.clientX - this.canvas.getBoundingClientRect().left;
|
||||
let mY = event.clientY - this.canvas.getBoundingClientRect().top;
|
||||
this.mouseX = mX
|
||||
this.mouseY = mY
|
||||
}
|
||||
|
||||
calculateAngle(playerX, playerY) {
|
||||
return Math.atan2(this.mouseY - playerY, this.mouseX - playerX) //Math.atan2(
|
||||
}
|
||||
}
|
||||
39
js/render.js
Normal file
39
js/render.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
class Render {
|
||||
constructor(id, mapsrc) {
|
||||
this.canvas = document.getElementById(id);
|
||||
this.ctx = canvas.getContext("2d");
|
||||
this.players = [];
|
||||
this.mapsrc=mapsrc
|
||||
this.ReloadAff();
|
||||
}
|
||||
|
||||
AddPlayer(player) {
|
||||
this.players[player.id] = player;
|
||||
}
|
||||
|
||||
RenderPlayer(player) {
|
||||
const img = new Image();
|
||||
img.src = "./assets/body.png";
|
||||
this.ctx.save();
|
||||
this.ctx.translate(player.x, player.y);
|
||||
this.ctx.rotate(player.angle);
|
||||
this.ctx.drawImage(img, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
ReloadAff() {
|
||||
/*this.ctx.fillStyle = "red";
|
||||
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
|
||||
*/
|
||||
const fond = new Image();
|
||||
fond.src = this.mapsrc;
|
||||
mapWidth = fond.width
|
||||
mapHeith = fond.height
|
||||
this.ctx.canvas.width = mapWidth
|
||||
this.ctx.canvas.height = mapHeith
|
||||
this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
|
||||
this.players.forEach((player) => {
|
||||
this.RenderPlayer(player);
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue