www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with Javascript / HTML programming !?

  1. #1
    Join Date
    Dec 2017
    Posts
    1

    Help with Javascript / HTML programming !?

    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:
    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:

    https://drive.google.com/drive/folde...qz?usp=sharing



    Whole code:

    (sory for all comments in the code)
    HTML Code:
    <!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. 10x10
    }
    
    č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>

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,145
    wrote this piece of code(almost 1 and half decade ago) for training purposes for learners, take a look. You will need to make very tiny change(instead of bringing the object back to start just stop)
    Move Object by arrow keys on keyboard
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    and <!doctype html> should be <!DOCTYPE html> as older browsers will recognise !DOCTYPE but not !doctype and can then enter a quirks mode that means the browser doesn't have to render to the rules and you could get unexpected results, its only current HTML5 browsers that understand !doctype and you will find that many examples of HTML5 use the uppercase !DOCTYPE for this reason.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Dec 2017
    Posts
    2
    Its Really good question. Nowadays JavaScript rolling the world. learning angularjs really helpful for web development. it has advanced features.

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    Quote Originally Posted by kokilajpa View Post
    Its Really good question. Nowadays JavaScript rolling the world. learning angularjs really helpful for web development. it has advanced features.
    Learning JavaScript (as in how to actually program) is more valuable as a skill than learning a library / framework tool, understanding actual JavaScript is more beneficial in the long run.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.25133 seconds
  • Memory Usage 2,904KB
  • Queries Executed 14 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_html
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates