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




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


26 responses to “Tic Tac Toe #1 – HTML5 Game Programming Tutorial [javascript]”

  1. 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;

  2. 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) =)

  3. 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

  4. 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.

  5. 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 Reply