Menu
Hi!
I’m pretty new in javascript and also in HTML, so for my college assigment i have to do some agent modell simulation in Javascript language.
I manage to create object, add picture to the canvas and also create that those objects are moving. I also managed that object are turning into black if ‘black object’ in in touch with them.
But I want to be this as some sort of simulation of the real child game:
[url]https://abcwellbeing.wordpress.com/2…the-black-man/
We choose a hunter – the Black man. He stands on one of the lines and the other pupils stand on the other line which is on the other side of the playground. All the players, including the Black man, can run only towards the other side of the playground. They’re not allowed to return to the start line. If they do, they have to join the Black man and become his assistants.
Could anyone please help me to create that object would be moving just from one side to another and when they come to the other side stopped there?
Files (picture and html file) are on this link:
[url]https://drive.google.com/drive/folde…qz?usp=sharing
Whole code:
(sory for all comments in the code)
[code=html]
<!doctype html>
<meta charset=”utf-8″>
<html>
<head>
<title> Kdo se boji črnega moža ?? </title>
<style>
body
{
background-image: url(“parket1.png”);
background-repeat: no-repeat;
}
</style>
</head>
<body onload=”load();”> <!– ko se spletna stran odpre poženemo najprej funkcijo load –>
Opazujemo ljudi (rdeča barva), ki se poskušajo izmakniti črnemu možu.
<br>
<canvas id=”cv1″ width=”400″ height=”350″ style=”border:2px solid #c36400″></canvas>
<script type=”text/javascript”>
“use strict”; // omogočimo delo z razredi (class)
var canvas, ctx; // ustvarimo dve novi spremenljivki za platno (canvas) in kontekst (ctx)
var agenti = []; // deklariramo polje, ki bo vsebovalo naše agente (Array je označen z [])
var čas; // uvedemo spremenljivko, ki predstavlja čas
var številoAgentov = 30; // določimo število agentov
var števecCrnih = 0; // števec Crnih agentov
var števecRdečih = 0; // števec rdečih agentov
class Agent {
constructor(x, y, xVel, yVel, barva) {
this.x = x; // določimo lastnost x pozicije agenta
this.y = y; // določimo lastnost y pozicije agenta
this.xVel = xVel; // določimo hitrost v smeri x
this.yVel = yVel; // določimo hitrost v smeri y
this.barva = barva; // določimo lastnost “barva”
}
update () { // članska funkcija – ta funkcija je za vse agente enaka
this.x += this.xVel; // pozicija x se spremeni glede na hitrost v smeri x, t.j. xVel
this.y += this.yVel; // pozicija y se spremeni glede na hitrost v smeri y, t.j. yVel
if(this.x > canvas.width – 10 || this.x < 0) { // v primeru, da smo izven platna po x koordinati
this.xVel = – this.xVel; // določimo, da je xVel = -xVel (odboj od stene)
}
if(this.y > canvas.height – 10 || this.y < 0) { // v primeru, da smo izven platna po y koordinati
this.yVel = – this.yVel; // določimo, da je yVel = -yVel (odboj od stene)
}
// če je x manjši od 0 ga postavimo na 0 (da se agent ne potopi v steno)
if (this.x < 0) {this.x =0};
// če je y manjši od 0 ga postavimo na 0 (da se agent ne potopi v steno)
if (this.y < 0) {this.y =0};
// podobno na drugem koncu platna
if (this.x > canvas.width – 10) {this.x = canvas.width – 10};
if (this.y > canvas.height – 10) {this.y = canvas.height – 10};
}
}
// funkcija, ki preveri razdaljo vsakega agenta z vsakim agentom
// v primeru trka izvedemo funkcijo trk
function preveriBližinoAgentov() {
for (var i=0; i<številoAgentov; i++) {
var A = agenti[i];
for (var j=i+1; j<številoAgentov; j++) {
var B = agenti[j];
// izračunamo razlike koordinat
var dx = B.x – A.x;
var dy = B.y – A.y;
var dist = Math.sqrt(dx*dx + dy*dy);
// če je razlika v razdalji med agentoma manjša od 10 izvedemo trk
if (dist < 10) { // če je pogoj, da sta agenta dovolj blizu (trk) izpolnjen
izvediTrk(i, j); // izvedemo trk med agentoma z indeksoma i in j
}
}
}
}
// funkcija, ki izvede trk med agentoma z indeksoma i in j
function izvediTrk(indeksPrvega, indeksDrugega) {
var x1 = agenti[indeksPrvega].x;
var y1 = agenti[indeksPrvega].y;
var x2 = agenti[indeksDrugega].x;
var y2 = agenti[indeksDrugega].y;
var dx = x2 – x1;
var dy = y2 – y1;
var dist = Math.sqrt(dx*dx + dy*dy);
var razdaljaOdboja = 8; // spr. določa za koliko se agenta ob trku odbijeta
// izračunamo normalo razdalje
var normalaX = dx/dist;
var normalaY = dy/dist;
// sredinske točke
var midpointX = (x1 + x2)/2;
var midpointY = (y1 + y2)/2;
// določimo nove pozicije
agenti[indeksPrvega].x = midpointX – normalaX * razdaljaOdboja;
agenti[indeksPrvega].y = midpointY – normalaY * razdaljaOdboja;
agenti[indeksDrugega].x = midpointX + normalaX * razdaljaOdboja;
agenti[indeksDrugega].y = midpointY + normalaY * razdaljaOdboja;
// zamenjamo hitrosti 1. in 2. agenta pri trku
var tempX = agenti[indeksPrvega].xVel;
var tempY = agenti[indeksPrvega].yVel;
agenti[indeksPrvega].xVel = agenti[indeksDrugega].xVel;
agenti[indeksPrvega].yVel = agenti[indeksDrugega].yVel;
agenti[indeksDrugega].xVel = tempX;
agenti[indeksDrugega].yVel = tempY;
// preverimo ali je kateri od agentov pri trku Crni, drugi rdeč in z Crnio barvo prebarvamo rdečega
// če je prvi rdeč (0) in drugi Crni (1)
if (agenti[indeksPrvega].barva == 0 && agenti[indeksDrugega].barva == 1) {
agenti[indeksPrvega].barva = 1; // prvega, ki je bil prej rdeč (0) prebarvamo na Crni (1)
}
// če je prvi Crni (1) in drugi rdeč (0)
if (agenti[indeksPrvega].barva == 1 && agenti[indeksDrugega].barva == 0) {
agenti[indeksDrugega].barva = 1; // drugega, ki je bil prej rdeč (0) prebarvamo na Crni (1)
}
}
function loop() {
števecRdečih = 0; // števec rdečih resetiramo
števecCrnih = 0; // števec Crnih resetiramo
ctx.clearRect(0, 0, canvas.width, canvas.height); // brišemo celotno platno
preveriBližinoAgentov (); // preverimo bližino agentov in izvedemo trk
for (var i=0; i<številoAgentov; i++) {
agenti[i].update(); // i-ti agent
if (agenti[i].barva == 1) {
ctx.fillStyle = “#000000”; // barvo nastavimo na Crnio
števecCrnih++; // povečamo števec Crnih za 1
}
else {
ctx.fillStyle = “#ff0000”; // sicer nastavimo rdečo barvo
števecRdečih++;
}
ctx.fillRect(agenti[i].x, agenti[i].y, 10, 10); // na platno postavimo agenta na koordinati x,100 dim. 10×10
}
čas++; // čas povečamo za 1
setTimeout(loop, 5); // na 5ms kličemo funkcijo loop
}
function load() {
canvas = document.getElementById(“cv1”);
ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#ff0000”; // določimo rdečo barvo
for (var i=0; i<številoAgentov; i++) {
// agentom določimo x in y pozicijo ter x in y hitrost (xVel, yVel (Velocity)) ter barvo (0=rdeča, 1=zel.)
agenti[i] = new Agent(Math.random() * (canvas.width -10), Math.random() * (canvas.height – 350), 1 * Math.random() – 0.5, 1 * Math.random() – 0.5, 0); // ustvarimo enega agenta, ki bo v polju “agenti” na mestu [0]
}
agenti[0].barva = 1; // le prvemu agentu, na mestu 0 v polju agentov “agenti” določim lastnost “barva” = Crnia
loop();
}
</script>
</body>
</html>