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

:: Other Stuff ::

Рекомендации по теме

Комментарии

33:43 here all the tiles played the flipping animation when only one tile is clicked. What helped was to declare the anim variable in the tile function rather than as a global variable as done in the beginning of the video.

Beatboxerskills

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

JGunlimited

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

luizhteixeiram

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

jmonkey

Hey Max nice video, could you please explain line 75 and 85 @8:42 min.
What are Tile.BLANK and TILE.nought?
Variables or something else?Really didn't get these.
Hope you will help.Thanks.

ananyakeshari

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.

BravoDesign

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

lukehagerdon

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 =

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

samuelvaneck

what program do u use to absolute function?

khishgeeknown

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

najayeopardes

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

thatcoolguyusaw

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.

kalekip

This is not for beginners, it is more for intermediate programmers who know parts of javascript.

aseemlalfakawma

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

pebble

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

ms-ygeb