• Wednesday , 22 November 2017

Tic Tac Toe #1 – HTML5 Game Programming Tutorial [javascript]

Code Canyon



Have been working on introduction html5 videos for some time which sadly turned out quite bad, hence the lack of content lately :(. So I decided to create a new game tutorial which don’t require as much work from my part. Bare with me though, will make the introduction videos some time in the future (probably after my finals) ^^.

Info about the video; In part one do we get the basic interface and graphics done, the second video will cover how to write a “Minmax” search optimizing AI opponent, and the third will cover things as adding tweening animation and adding a menu system to the game. You can of course look at the source at github as usual.

:: Source ::
https://github.com/maxwihlborg/youtube-tutorials/tree/master/tic-toe

:: Other Stuff ::
https://github.com/maxwihlborg
http://maxwihlborg.com/


Original source

3d Ocean

Related Posts

26 Comments

  1. Іван Пилипко
    June 30, 2017 at 17:43

    damn man not the canvaaaassssss

  2. Sharif Aly
    June 30, 2017 at 17:43

    Really? you call this a tutorial? slow down and explain your code…….

  3. Hansara Media
    June 30, 2017 at 17:43

    what does Tile.BLANK mean?

  4. toongurl
    June 30, 2017 at 17:43

    What font are you using?

  5. khishgee known
    June 30, 2017 at 17:43

    what program do u use to absolute function?

  6. norman konja
    June 30, 2017 at 17:43

    just a question, why did you type var x = x, y = y; in the Tile function?

  7. pebble 225
    June 30, 2017 at 17:43

    putting a script tag in the head disallows you from accessing the document.body object. It is better to put it in the body.

  8. Samuel van Eck
    June 30, 2017 at 17:43

    Thank you for sharing the tutorial. I had an issue with finding the index of the tile when the page was scrolled. I fixed it by changing some code and use getBoundingClientRect() to find the coordinates in the canvas:

    var BB = canvas.getBoundingClientRect()

    // find the coordinates in the canvas
    var px = evt.clientX – BB.left;
    var py = evt.clientY – BB.top;

  9. Sam Akella
    June 30, 2017 at 17:43

    which color scheme is this?

  10. Nazim Turdiyev
    June 30, 2017 at 17:43

    Hey guys! What does the line var t = anim>0.5(Tile.Blank:tile; mean?

  11. theodore braden
    June 30, 2017 at 17:43

    I appreciate the effort but A) too fast B) not enough description

  12. armaan bikram
    June 30, 2017 at 17:43

    Dude slow it down plz and could plz explain ur code a little bit !!

  13. J Monkey
    June 30, 2017 at 17:43

    do you actully have the intention of teaching people this stuff or is this just speed coding ?

  14. Danilo Vesovic
    June 30, 2017 at 17:43

    Great…i wish i write code fast as you…instant sub from me…i teach my people js as well so i suport you …. tnx..

  15. sagiksp
    June 30, 2017 at 17:43

    How do you autocomplete? Like, what button?

  16. Ron Agard
    June 30, 2017 at 17:43

    this is literally just for someone to copy for a homework assignment… you explain nothing. Take off the "tutorial" from your title. You're not teaching anything.

  17. Fabian Naibaf
    June 30, 2017 at 17:43

    HI, I really like your videos they are really informative, What program did you use to play around with functions on a X and Y graph, 19:01 seconds into the video? thanks.

  18. kungjohn9
    June 30, 2017 at 17:43

    visit my website and ask if i did good please. I made it in html5. it took me 2 Days btw im just 10 years old

  19. Shanaka WickramaArachchi
    June 30, 2017 at 17:43

    hey can we use editors like ms visual studio for this???

  20. Luiz Henrique Teixeira
    June 30, 2017 at 17:43

    Wow, that was harder than I expected. Your code looks very clean, thank you for posting this video.

  21. Arda
    June 30, 2017 at 17:43

    What program do u use to write this

  22. JG
    June 30, 2017 at 17:43

    Thanks for going through the nitty gritty details of animation. Learning a lot from watching your vids on how to create animations from scratch (vs. using prebuilt functions) =)

  23. Luke Hagerdon
    June 30, 2017 at 17:43

    Hey! I really like your tutorials and enjoy making your game but I have a question. 
    1) Where did you learn JavaScript
    2) What material would you recommend to learn Javascript
    3) How do you download stuff from github

    Thanks ~ L&LProductions

  24. Kale
    June 30, 2017 at 17:43

    I tried to change the canvas width and height in CSS, but it didn't work. It turns out that CSS stretches the canvas, which is not what we want. You really have to change the width and height using JavaScript.

  25. Jorge Janer
    June 30, 2017 at 17:43

    Hi there, I suggest using your knowledge of games and apply it to maps libraries like Leaflet and create an App with a raster Base Map from Esri rest service and a drawable layer on top to draw and save a vector layer representing features of insterest, like buildings, then create another App that will recieve this leayer with those freature and when click on top of one of the bring a form to fill and collect data about that feature and sync it back to the main App. Also that can save the Map and the forms locally so it can run offline. Thanks 

Leave A Comment

You must be logged in to post a comment.