Code a Stick Hero game with JavaScript and HTML Canvas

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ม.ค. 2025

ความคิดเห็น •

  • @HunorMartonBorbely
    @HunorMartonBorbely  4 ปีที่แล้ว +5

    What game would you like me to cover next? Minimalistic game suggestions are welcomed!

    • @HunorMartonBorbely
      @HunorMartonBorbely  4 ปีที่แล้ว

      @T3Trends That's how forks go, they rarely make things worse :) I just laughed a lot on your dating video, pre-internet things are gold

    • @sertansantos3032
      @sertansantos3032 3 ปีที่แล้ว

      Is it possible to make a stick game (can be any game) with projectile detection + a health bar above the player?

    • @basiccomponents
      @basiccomponents 3 ปีที่แล้ว

      it would be great to see a 3d endless runner ! I haven't found much about it online

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว +1

      @@basiccomponents Thanks for the tip, a basic endless runner doesn't sound like a very complex thing to do. Have you tried my Three.js tutorials?

    • @basiccomponents
      @basiccomponents 3 ปีที่แล้ว

      @@HunorMartonBorbely yes and I found them very helpful, but I still haven't managed to create what I have in mind. Thanks for the answer!

  • @Frankslaboratory
    @Frankslaboratory 4 ปีที่แล้ว +9

    Hi Hunor, I'm really impressed with your tutorials. Do you mind if I share it with my viewers? I think they will find your projects interesting.

  • @amirmohamadnoghani8369
    @amirmohamadnoghani8369 3 ปีที่แล้ว +1

    Thanks Hunor , I am looking forward to your next videos

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว +1

      Thank you! I slowed down a bit, but another Three.js video is coming up this week or the next :)

  • @amirmohamadnoghani8369
    @amirmohamadnoghani8369 4 ปีที่แล้ว +1

    Nice job Hunor, thanks.

  • @Radu
    @Radu 4 ปีที่แล้ว +2

    A really nice game idea :-) Subscribed!

  • @TheBorninmotion
    @TheBorninmotion 3 ปีที่แล้ว +1

    Thank you Hunor , please make more game js tuts , subscribed !

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว

      Thank you! I might take a bit of a break, but check out all the other ones in the meanwhile :)

    • @TheBorninmotion
      @TheBorninmotion 3 ปีที่แล้ว

      @@HunorMartonBorbely your explanations are very clear, thanks ! Do you have your own game project ?

    • @TheBorninmotion
      @TheBorninmotion 3 ปีที่แล้ว

      @@HunorMartonBorbely what do you think about the market of browser games ? Will they be more available\accessible (as PWA) than as apps in app stores ?

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว

      @@TheBorninmotion I don't think web games will overtake apps, but you can use web technologies to create apps. This game for instance was written in JavaScript and was features in the App Store: apps.apple.com/de/app/ghost-jump-go/id1553246521?mt=8&ign-mpt=uo%3D4

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว

      @@TheBorninmotion Learning web games are also a good and easy way of getting into game development because once you are familiar with coding and the concepts I believe it's not that different. Though I haven't done native development so I can't really tell. And no, at the moment I don't really have original game ideas. Developing your own game takes a lot of time

  • @mirceachirita6673
    @mirceachirita6673 4 ปีที่แล้ว

    hey man, really nice explained and a really good project. i'm looking into creating a canvas project on my own, thanks for the inspiration!

  • @unboxingmachan3289
    @unboxingmachan3289 2 หลายเดือนก่อน

    hi bro, in your source code you only uploaded some lines of the html code can you please share the full code of this project

    • @HunorMartonBorbely
      @HunorMartonBorbely  2 หลายเดือนก่อน

      The HTML code is only a few lines of code indeed. Switch to the JavaScript tab to see the logic.

  • @SohamMondal-m5i
    @SohamMondal-m5i 15 วันที่ผ่านมา

    can u tell me how u got the canvas and the fdynamic figure

    • @HunorMartonBorbely
      @HunorMartonBorbely  6 วันที่ผ่านมา

      I'm not sure if I understand the question

  • @maskman4821
    @maskman4821 4 ปีที่แล้ว +1

    I would like to see a simple shooting game like us (jet plane) shooting enemy planes in cosmos with background scrolling !!!

    • @HunorMartonBorbely
      @HunorMartonBorbely  4 ปีที่แล้ว +1

      Like Space Invaders or something? I was thinking of that, it shouldn't be too hard to do it :)

    • @maskman4821
      @maskman4821 4 ปีที่แล้ว

      @@HunorMartonBorbely yeah, like space invader !!!

  • @심심한개발자-v4v
    @심심한개발자-v4v 2 หลายเดือนก่อน

    I saw this minigame on Codepen. I'm making a CMS and I'd like to insert a minigame into the CMS. Can I use it? I would like to insert this mini-game into the administrator page so that bored administrators can use it when they are bored.

    • @HunorMartonBorbely
      @HunorMartonBorbely  2 หลายเดือนก่อน

      Hey there. I'm not sure that would be legal as this is a remake of an existing game that I have no rights for. Making educational content like this is okay, but using the game clone on its own might not.

  • @xiaowawaxiansheng
    @xiaowawaxiansheng 4 ปีที่แล้ว

    Hello, is there any document, because my English is not good, I want to read the document to understand the idea, thank you

    • @HunorMartonBorbely
      @HunorMartonBorbely  4 ปีที่แล้ว

      Hey there. There is no document, but you can turn on the subtitles if that helps. Also, you can read the comments in the source code and see if that helps: codepen.io/HunorMarton/pen/xxOMQKg

  • @watermelonice4487
    @watermelonice4487 4 ปีที่แล้ว

    Wow!! Super dude.. will make this project

    • @HunorMartonBorbely
      @HunorMartonBorbely  4 ปีที่แล้ว

      Have fun! You can even copy my version with the fork button on CodePen then change it to your design

  • @shnaruto3863
    @shnaruto3863 ปีที่แล้ว

    hey I was wondering if you could provide me with a copy of the presentation really appreciate it

  • @dhrubakawatson
    @dhrubakawatson 10 หลายเดือนก่อน

    Mouseup and mouse down can be changed to touch start and touch end.. For touch screen devices.. But getting some glitches.. Can you please help?

    • @HunorMartonBorbely
      @HunorMartonBorbely  10 หลายเดือนก่อน

      My guess is that some devices detect both mouse and touch events and that gets mixed up. What’s the glitch?

    • @dhrubakawatson
      @dhrubakawatson 10 หลายเดือนก่อน

      @@HunorMartonBorbely like on touchscreen device, i changed the event listeners to touch start and touch end.. When the user touches the screen, the stick will be drawn and user stops touching the screen, the stick will fall down but the glitch is that.... Sometimes, When I'm touching the screen and removing the touch the stick goes on extending until i tap on it again.. On tapping again it falls down...

    • @dhrubakawatson
      @dhrubakawatson 10 หลายเดือนก่อน

      @@HunorMartonBorbely should i share my codes with you?

    • @HunorMartonBorbely
      @HunorMartonBorbely  10 หลายเดือนก่อน +1

      I don’t have a laptop at the moment as I’m away for the weekend, but you can try the touchcancel event as well

    • @dhrubakawatson
      @dhrubakawatson 10 หลายเดือนก่อน

      @@HunorMartonBorbely umm.. Can you please explain? 🙂

  • @moneyknowledge1892
    @moneyknowledge1892 ปีที่แล้ว

    I have a question. How i can increse the size of grid

    • @HunorMartonBorbely
      @HunorMartonBorbely  ปีที่แล้ว

      You mean the gaps? Or I'm not sure what grid you mean

  • @maskman4821
    @maskman4821 4 ปีที่แล้ว

    I like this tutorial, it should be very awesome !!!

  • @rosimah11
    @rosimah11 2 ปีที่แล้ว

    How to add sound on stick hero?

    • @HunorMartonBorbely
      @HunorMartonBorbely  ปีที่แล้ว

      Sound is a completely different story, that I haven't dug in either yet

  • @fl4281
    @fl4281 ปีที่แล้ว

    Dose this game has a sound?

    • @HunorMartonBorbely
      @HunorMartonBorbely  ปีที่แล้ว

      No, it doesn't. Sound would be a whole other topic

    • @fl4281
      @fl4281 ปีที่แล้ว

      how can i add a sound to the game?@@HunorMartonBorbely

    • @HunorMartonBorbely
      @HunorMartonBorbely  ปีที่แล้ว

      @@fl4281 Honestly I haven't looked into sound editing that much. I don't know

  • @mostafasaad781
    @mostafasaad781 3 ปีที่แล้ว

    It's awesome game bro
    Can u explain for me cause I'm a beginner how to run this game on pc

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว

      Just go to the link in the description and you are able to play it in the browser.

    • @mostafasaad781
      @mostafasaad781 3 ปีที่แล้ว

      @@HunorMartonBorbely I don't want to play it
      I want to run it on my pc cause I need to change it for my project

    • @HunorMartonBorbely
      @HunorMartonBorbely  3 ปีที่แล้ว

      @@mostafasaad781 Ah. The easiest is if you make a copy for yourself on CodePen (there's a Fork button in the bottom left corner) and then you can edit that as you like.
      If you want to run it outside of CodePen locally, then you need to create an HTML, CSS and Javascript file then copy the content from CodePen. The trick here is that on CodePen the CSS and JavaScript files are automatically loaded and if you want to run it locally then you have to make sure that the files are loaded (with a style and script tag in your HTML)

  • @osseyejoseph1161
    @osseyejoseph1161 8 หลายเดือนก่อน

    I know it sounds impossible, but i would like you to make a simulation game

    • @HunorMartonBorbely
      @HunorMartonBorbely  6 หลายเดือนก่อน

      What do you mean by simulation game?

  • @joysardar6109
    @joysardar6109 6 หลายเดือนก่อน

    img link???

    • @HunorMartonBorbely
      @HunorMartonBorbely  6 หลายเดือนก่อน

      Eh?

    • @prasenjitnayak_
      @prasenjitnayak_ 2 หลายเดือนก่อน

      @@HunorMartonBorbely he is talking about the assets, those images stick man pictures etc, 😢😭😭

    • @HunorMartonBorbely
      @HunorMartonBorbely  2 หลายเดือนก่อน

      There are no assets in this project. Everything is code

  • @lqlqcafe3323
    @lqlqcafe3323 2 ปีที่แล้ว

    can you make it work for mobile devices as well the same game??

    • @HunorMartonBorbely
      @HunorMartonBorbely  ปีที่แล้ว

      Sorry for the late reply. I think the main difference would be replacing mouse events with touch events: developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

  • @S-Lomar
    @S-Lomar ปีที่แล้ว

    🤩🤩🤩😍😍😍🥰🥰🥰🥰🥰🥰🥰😍