Scalenie plików js i dostosowanie pliku index.html do wprowadzonych zmian

This commit is contained in:
Tomek 2020-04-27 21:44:32 +02:00
parent 56e96947c1
commit 701ca39a18
6 changed files with 142 additions and 24 deletions

View File

@ -8,12 +8,11 @@
<script type="text/javascript" src="./js/main.js"></script> <script type="text/javascript" src="./js/main.js"></script>
</head> </head>
<body> <body onload="start()">
<div class="container"> <div class="container">
<div class="board" id="board"> <div class="board" id="board">
</div> </div>
</div> </div>
<script type="module" src="./js/main.js"></script>
</body> </body>
</html> </html>

View File

@ -1,27 +1,146 @@
import * as Board from './Board.js' //Klasy
import Agent from './Agent.js' class Agent{
constructor(positionX, positionY, turn){
this.positionX = positionX;
this.positionY = positionY;
this.turn = turn;
}
let board = Board.createBoard(10,10); getParams(){
Board.showBoard(board); let params = {};
positionX = this.positionX;
positionY = this.positionY;
turn = this.turn;
params = {positionX, positionY, turn};
return params;
}
goForward(){
if(this.turn == 'Up'){
this.positionY += 1;
}
else if(this.turn == 'Down'){
this.positionY -= 1;
}
else if(this.turn == 'Left'){
this.positionX -= 1;
}
else if(this.turn == 'Right'){
this.positionX += 1;
}
}
turnLeft(){
if(this.turn == 'Up'){
this.turn = 'Left';
}
else if(this.turn == 'Down'){
this.turn = 'Right';
}
else if(this.turn == 'Left'){
this.turn = 'Down';
}
else if(this.turn == 'Right'){
this.turn = 'Up'
}
}
turnRight(){
if(this.turn == 'Up'){
this.turn = 'Right';
}
else if(this.turn == 'Down'){
this.turn = 'Left';
}
else if(this.turn == 'Left'){
this.turn = 'Up';
}
else if(this.turn == 'Right'){
this.turn = 'Down'
}
}
showAgent(){
console.log(this.turn)
if(this.turn === "Up"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Up.png')";
}
else if(this.turn === "Down"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Down.png')";
}
else if(this.turn === "Right"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Right.png')";
}
else if(this.turn === "Left"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Left.png')";
}
}
hideAgent(){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "";
}
}
class Field{
constructor(x, y, isShelf, isOccupiedByAgent, costOfTravel){
this.xField = x;
this.yField = y;
this.isShelf = isShelf;
this.isOccupiedByAgent = isOccupiedByAgent;
this.costOfTravel = costOfTravel;
}
getParams(){
let params = {};
xField = this.xField;
yField = this.yField;
isShelf = this.isShelf;
isOccupiedByAgent = this.isOccupiedByAgent;
costOfTravel = this.costOfTravel;
params = {xField, yField, isShelf, isOccupiedByAgent, costOfTravel}
return params;
}
}
//funckcje
function createBoard(rangeX, rangeY){
const board = [];
for(let y = 0; y < rangeY; y++){
const row = [];
for(let x = 0; x < rangeX; x++){
let field = new Field(x, y, false, false, 1);
row.push(field)
}
board.push(row)
}
return board
}
function showBoard(board){
for(let y = board.length - 1; y >= 0 ; y--){
document.getElementById("board").innerHTML += "<div class='row' id='row-" + y + "'> </div>";
for(let x = 0; x < board[y].length; x++){
document.getElementById("row-" + y).innerHTML += "<div class='field' id=" + x + "-" + y + "> </div>"
}
}
}
let board = createBoard(10,10);
let agent = new Agent(0,0, 'Right'); let agent = new Agent(0,0, 'Right');
function start(){
showBoard(board);
agent.showAgent(); agent.showAgent();
}