ajout
This commit is contained in:
girault
parent
f353be0098
commit
d41feeffe8
53
WIM4.1/tp/tp1/ex1/index.html
Normal file
53
WIM4.1/tp/tp1/ex1/index.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
|
||||
|
||||
<style>
|
||||
|
||||
.menu {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.cell {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
font-size: 10px;
|
||||
border: 1px solid black;
|
||||
margin-top:-1px;
|
||||
margin-left : -1px;
|
||||
/* border-style : solid;
|
||||
border-width : 0px 1px 1px 0px;
|
||||
border-color : black;*/
|
||||
/* display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<menu class="menu">
|
||||
<button id="next-move">Next</button>
|
||||
<button id="autoplay">Auto</button>
|
||||
<button id="plus-100">Next 100</button>
|
||||
<button id="restart">Restart</button>
|
||||
<button id="new_taille">Taille</button>
|
||||
<br><br>
|
||||
Nombre de mouvements : <span id="move-value"></span>
|
||||
</menu>
|
||||
<div id="container"></div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
319
WIM4.1/tp/tp1/ex1/script.js
Normal file
319
WIM4.1/tp/tp1/ex1/script.js
Normal file
@ -0,0 +1,319 @@
|
||||
const ANTUP = 0
|
||||
const ANTRIGHT = 1
|
||||
const ANTDOWN = 2
|
||||
const ANTLEFT = 3
|
||||
|
||||
class Ant {
|
||||
x = 0
|
||||
y = 0
|
||||
|
||||
direction = ANTRIGHT
|
||||
|
||||
moveForward(width, height) {
|
||||
|
||||
switch(this.direction) {
|
||||
|
||||
case ANTUP : {
|
||||
this.y = (this.y - 1 +height)%height
|
||||
break
|
||||
}
|
||||
|
||||
case ANTLEFT : {
|
||||
this.x = (this.x - 1 +width)%width
|
||||
break
|
||||
}
|
||||
|
||||
case ANTRIGHT : {
|
||||
this.x = (this.x + 1 +width)%width
|
||||
break
|
||||
}
|
||||
|
||||
case ANTDOWN : {
|
||||
this.y = (this.y + 1 +height)%height
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
rotateRight() {
|
||||
|
||||
switch(this.direction) {
|
||||
|
||||
case ANTUP : {
|
||||
this.direction = ANTRIGHT
|
||||
break
|
||||
}
|
||||
|
||||
case ANTLEFT : {
|
||||
this.direction = ANTUP
|
||||
break
|
||||
}
|
||||
|
||||
case ANTRIGHT : {
|
||||
this.direction = ANTDOWN
|
||||
break
|
||||
}
|
||||
|
||||
case ANTDOWN : {
|
||||
this.direction = ANTLEFT
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
rotateLeft() {
|
||||
switch(this.direction) {
|
||||
|
||||
case ANTUP : {
|
||||
this.direction = ANTLEFT
|
||||
break
|
||||
}
|
||||
|
||||
case ANTLEFT : {
|
||||
this.direction = ANTDOWN
|
||||
break
|
||||
}
|
||||
|
||||
case ANTRIGHT : {
|
||||
this.direction = ANTUP
|
||||
break
|
||||
}
|
||||
|
||||
case ANTDOWN : {
|
||||
this.direction = ANTRIGHT
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class GridManager {
|
||||
ACTIVE_COLOR = 'black';
|
||||
INACTIVE_COLOR = 'white';
|
||||
|
||||
gridContainerId;
|
||||
gridSize;
|
||||
grid = [];
|
||||
ant; // la fourmi
|
||||
|
||||
constructor(gridSize, gridContainerId,ant) {
|
||||
if (!gridSize || gridSize < 30) {
|
||||
throw new Error('The grid size must be at least 30');
|
||||
}
|
||||
|
||||
if (!gridContainerId) {
|
||||
throw new Error('gridContainerId must be set');
|
||||
}
|
||||
|
||||
this.gridSize = gridSize;
|
||||
this.gridContainerId = gridContainerId;
|
||||
this.ant = ant
|
||||
this.ant.x = this.ant.y = gridSize/2
|
||||
this.createGrid();
|
||||
}
|
||||
|
||||
createGrid() {
|
||||
const container = document.getElementById(this.gridContainerId);
|
||||
|
||||
for (let i = 0; i < this.gridSize; i++) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'row';
|
||||
|
||||
const gridRow = [];
|
||||
|
||||
for (let j = 0; j < this.gridSize; j++) {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'cell';
|
||||
cell.style.backgroundColor = this.INACTIVE_COLOR;
|
||||
row.appendChild(cell);
|
||||
|
||||
gridRow.push(cell);
|
||||
}
|
||||
|
||||
container.appendChild(row);
|
||||
this.grid.push(gridRow);
|
||||
}
|
||||
}
|
||||
|
||||
destroyGrid() {
|
||||
for (let x = 0; x < this.gridSize; x++) {
|
||||
for (let y = 0; y < this.gridSize; y++) {
|
||||
const node = this.grid[y][x];
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
const container = document.getElementById(this.gridContainerId);
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.lastChild);
|
||||
}
|
||||
|
||||
this.grid = [];
|
||||
}
|
||||
|
||||
setInitialState(initialState) {
|
||||
const coords = initialState.split(';').map(coord => coord.split(','));
|
||||
coords.forEach((coord) => this.activeCell(+coord[0], +coord[1]));
|
||||
}
|
||||
|
||||
isInGridRange(x, y) {
|
||||
return x >= 0 && x < this.gridSize && y >= 0 && y < this.gridSize;
|
||||
}
|
||||
|
||||
isActiveCell(x, y) {
|
||||
return this.isInGridRange(x, y) && this.grid[y][x].style.backgroundColor === this.ACTIVE_COLOR;
|
||||
}
|
||||
|
||||
activeCell(x, y) {
|
||||
if (!this.isInGridRange(x, y)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.grid[y][x].style.backgroundColor = this.ACTIVE_COLOR;
|
||||
}
|
||||
|
||||
deactiveCell(x, y) {
|
||||
if (!this.isInGridRange(x, y)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.grid[y][x].style.backgroundColor = this.INACTIVE_COLOR;
|
||||
}
|
||||
|
||||
logCurrentGridState() {
|
||||
const activeCells = [];
|
||||
|
||||
for (let x = 0; x < this.gridSize; x++) {
|
||||
for (let y = 0; y < this.gridSize; y++) {
|
||||
if (this.isActiveCell(x, y)) {
|
||||
activeCells.push(`${x},${y}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log(activeCells.join(';'));
|
||||
}
|
||||
}
|
||||
// -----------------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
const INITIAL_STATE = ''
|
||||
const STEP_INTERVAL = 5
|
||||
const DIV_CONTAINER_ID = 'container'
|
||||
const BTN_AUTOPLAY_ID = 'autoplay'
|
||||
const BTN_NEXT_MOVE_ID = 'next-move'
|
||||
const MOVE_VAL_ID = 'move-value'
|
||||
const GRID_SIZE_VAL_ID = 'grid-size-value'
|
||||
const BTN_PLUS_100_ID = 'plus-100'
|
||||
const BTN_RESTART = "restart"
|
||||
const BTN_NEW_TAILLE = "new_taille"
|
||||
|
||||
function computeNextPosition(gridManager)
|
||||
{
|
||||
// TODO
|
||||
|
||||
|
||||
|
||||
let ant = gridManager.ant // fourmi
|
||||
|
||||
ant.moveForward(gridManager.gridSize, gridManager.gridSize) // avance la fourmi
|
||||
|
||||
if(gridManager.isActiveCell(ant.x, ant.y)) { // si la case est noire
|
||||
|
||||
gridManager.deactiveCell(ant.x, ant.y) // met la case blanche
|
||||
|
||||
ant.rotateLeft() // tourne à gauche
|
||||
}
|
||||
else{
|
||||
|
||||
gridManager.activeCell(ant.x, ant.y) // met la case noir
|
||||
|
||||
ant.rotateRight() // tourne à droite
|
||||
}
|
||||
|
||||
document.getElementById(MOVE_VAL_ID).innerText++
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Fonction principale de la simulation
|
||||
function main() {
|
||||
let autoplayInterval
|
||||
let gridSize = 60
|
||||
let generation = 0
|
||||
let nbMove = 0
|
||||
let ant = new Ant()
|
||||
let gridManager = new GridManager(gridSize, DIV_CONTAINER_ID,ant)
|
||||
gridManager.setInitialState(INITIAL_STATE);
|
||||
|
||||
document.getElementById(MOVE_VAL_ID).innerText = 0
|
||||
|
||||
// Lorsqu'un utilisateur clique sur 'Auto Play'
|
||||
document.getElementById(BTN_AUTOPLAY_ID).addEventListener('click', () => {
|
||||
if (autoplayInterval) {
|
||||
clearInterval(autoplayInterval)
|
||||
autoplayInterval = false
|
||||
return
|
||||
}
|
||||
autoplayInterval = setInterval(() => {
|
||||
computeNextPosition(gridManager);
|
||||
}, STEP_INTERVAL);
|
||||
})
|
||||
|
||||
// Lorsqu'un utilisateur clique sur 'Next'
|
||||
document.getElementById(BTN_NEXT_MOVE_ID).addEventListener('click', () => {
|
||||
if (autoplayInterval) {
|
||||
clearInterval(autoplayInterval)
|
||||
autoplayInterval = false
|
||||
}
|
||||
computeNextPosition(gridManager)
|
||||
})
|
||||
|
||||
// Lorsqu'un utilisateur clique sur 'Next'
|
||||
document.getElementById(BTN_PLUS_100_ID).addEventListener('click', () => {
|
||||
if (autoplayInterval) {
|
||||
clearInterval(autoplayInterval)
|
||||
autoplayInterval = false
|
||||
}
|
||||
for(let i=0; i<100; i++) {
|
||||
computeNextPosition(gridManager)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// Lorsqu'un utilisateur clique sur 'Next'
|
||||
document.getElementById(BTN_RESTART).addEventListener('click', () => {
|
||||
if (autoplayInterval) {
|
||||
clearInterval(autoplayInterval)
|
||||
autoplayInterval = false
|
||||
}
|
||||
gridManager.destroyGrid()
|
||||
gridManager.createGrid()
|
||||
gridManager.setInitialState(INITIAL_STATE)
|
||||
document.getElementById(MOVE_VAL_ID).innerText = 0
|
||||
})
|
||||
|
||||
// Lorsqu'un utilisateur clique sur 'Next'
|
||||
document.getElementById(BTN_NEW_TAILLE).addEventListener('click', () => {
|
||||
if (autoplayInterval) {
|
||||
clearInterval(autoplayInterval)
|
||||
autoplayInterval = false
|
||||
}
|
||||
|
||||
let taille = prompt("Veuillez renseigner une nouvelle taille", gridManager.gridSize)
|
||||
gridManager.destroyGrid()
|
||||
gridManager.gridSize = taille
|
||||
gridManager.createGrid()
|
||||
gridManager.setInitialState(INITIAL_STATE)
|
||||
document.getElementById(MOVE_VAL_ID).innerText = 0
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// La simulation est démarrée ici
|
||||
main()
|
||||
Loading…
Reference in New Issue
Block a user