Compare commits
2 commits
07271d048d
...
5a751f44f5
| Author | SHA1 | Date | |
|---|---|---|---|
|
5a751f44f5 | ||
|
|
75140c3b07 |
BIN
assets/map/map.jpg
Normal file
|
After Width: | Height: | Size: 359 KiB |
BIN
assets/map/map2.png
Normal file
|
After Width: | Height: | Size: 460 KiB |
BIN
assets/map/map3.jpg
Normal file
|
After Width: | Height: | Size: 170 KiB |
BIN
assets/map/map4.png
Normal file
|
After Width: | Height: | Size: 776 KiB |
BIN
assets/map/map5.jpg
Normal file
|
After Width: | Height: | Size: 146 KiB |
BIN
assets/map/map6.png
Normal file
|
After Width: | Height: | Size: 733 KiB |
BIN
assets/map/map7.png
Normal file
|
After Width: | Height: | Size: 715 KiB |
BIN
assets/map/map7_recadr.png
Normal file
|
After Width: | Height: | Size: 520 KiB |
4
class.js
|
|
@ -1,5 +1,5 @@
|
|||
const mapWidth = 210.;
|
||||
const mapHeith = 100.;
|
||||
let mapWidth = 210.;
|
||||
let mapHeith = 100.;
|
||||
const playerSize = 50.;
|
||||
const playerSpeed=2.;
|
||||
const halfSqrtTwo=0.70710678118;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<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>
|
||||
|
|
|
|||
2
game.js
|
|
@ -1,4 +1,4 @@
|
|||
Renderer = new Render("canvas");
|
||||
Renderer = new Render("canvas", "./assets/map/map7_recadr.png");
|
||||
|
||||
let players = [new Player(1, 100, 50, "rubiks"),
|
||||
new Player(2, 500, 70, "atsuyo"),
|
||||
|
|
|
|||
15
render.js
|
|
@ -1,8 +1,9 @@
|
|||
class Render {
|
||||
constructor(id) {
|
||||
constructor(id, mapsrc) {
|
||||
this.canvas = document.getElementById(id);
|
||||
this.ctx = canvas.getContext("2d");
|
||||
this.players = [];
|
||||
this.mapsrc=mapsrc
|
||||
this.ReloadAff();
|
||||
}
|
||||
|
||||
|
|
@ -21,9 +22,17 @@ class Render {
|
|||
}
|
||||
|
||||
ReloadAff() {
|
||||
this.ctx.fillStyle = "red";
|
||||
/*this.ctx.fillStyle = "red";
|
||||
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
|
||||
|
||||
*/
|
||||
console.log(this.ctx.canvas.width)
|
||||
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);
|
||||
})
|
||||
|
|
|
|||