Beginner Javascript Game made with HTML, CSS & JS
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Learn how to code an arcade game using web development technologies HTML, CSS and Javascript!
LINK TO THE GAME: shawnbeaton.kn...
Follow me below and reach out if you need any help!
Twitter: / shawnjbeaton
Instagram: / shawnjbeaton
My t-shirt is from: www.intotheam....
![[Live] : ONE 168 วันนี้!! "โจนาธาน vs ซุปเปอร์เล็ก"](http://i.ytimg.com/vi/0jIN65KgJsI/mqdefault.jpg)
These videos are awesome! I know you are trying to condense these videos, but one suggestion I would make is to stop at certain intervals and show us what should be happening at different points in the code. That way I can check my progress throughout to know I'm on the right path rather than coding the whole thing and getting to the end and realizing something went wrong. Which definitely happened to me haha. Again, just a suggestion! These videos are awesome and I'm really learning a lot :)
Did you manage to fix any of the errors in the code ?
Can you put out the source code to this, did everything you did but the code isn't running right, maybe you changed some stuff we didn't see
You're tutorials are great!
You should make a special where you briefly discuss your thought process on choosing and then building a game.
Oakley is SOOOO Cute (sorry if I spelled wrong)
You spelled it right
What version of brackets are you using? This doesn’t work for me.
Been watching u since your very first Christmas morning vlog
Your channel is a goldmine! Thank you for all the fun game ideas for beginner’s they’re awesome and super helpful!
Thanks! I had no idea how people draw things in JavaScript. I was setting size attributes for divs using timers 😂
Plot twist: hey your dog isn't ugly
Omg your puppy is SO CUTE 😍😍 Also, I absolutely love your tutorials!!! They have helped me so much!
I was searching for it a lot.... THNX
Hey man, your videos are really awesome, and I would like to see your new projects; it has been a long time since you don't share anything
Your puppy got us! 😎
your profile just looks cool
Welcome back KnifeCircus!
That's a pretty adorable distraction there.
wtf happend on 7:25 ?
IK im confused
Hey is learning QBASIC necessary before learning javascript?
I never learned qbasic so no
what did u put after the plus on the document.documentElement.style.setProperty('--width', slideWidth, + ) part?
Can we make a Chess game using JS .Please answer me .I really want to know.
Btw your YT future career is bright😊😊
Kushagra Its definetly possible, anything is! it would be complicated though! thank you!
KnifeCircus can u plz make a Video on it.it will be really helpful .thanks.
This is SO Epic
Waveclaw 18 Very appreciated
@@KnifeCircus nice video
Dear Shawn, your code changed at 4:30 seconds
var sliderCurrent = document.getElementById("slider".concat(slider));
var sliderAbove = document.getElementById("slider".concat(slider+1));
To
var sliderCurrent = document.getElementById("slider"+slider);
var sliderAbove = document.getElementById("slider"+slider+1));
If you change your code show it with explanations instead of spending hours editing your video?
If you do not want to share, don't post?
If you do, just post a link as the code in your website is different from the code you posted here..?
I wanted to use your code in my lessons but I wasted my time trying to figure out our messy coding?
Just a thought....?
I need a software can you help me I need to hack a game online or its times five seconds before the code show
Love your videos Knife Circus
hello there, i am wondering what part of the video that you cut off as i am preatty new to programming and my second slider wont slide at all, its like the animation is stopped or something
if you remember, did you fix it? i have the same
the js is a bit frightening, other than that, great tutorial!
Wow!It's very interesting.Pls can you help me with Js code I want to make game but I can't make touch when palyer touch block I tried to use css and Js for this bu nothing happened if you can help me pls write to comments!!!!(sorry for my English now I learning English)
Thank you for this tutorial 🙂
Biggggg fannnn
Do American Web Developers make good amount of money?
Love your vids
Carlo vlogz Thanks so much!!
Hey buddy can you make video on how you added backend in your website
Not working. Also, your edit is wrong, in different parts of the video the code differs without explanation. Also no Git, very frustrating.
Super bro ❤
But.... Can it be a 3d one
You should do a java script tutorial for beginners series. BTW love your videos :)
I love your tutorials can you give us more tutorial for other games!!thank you love from India!
Super bro☺☺☺
hey! you are definitely my favorite 'coder' youtuber, and i was wondering if you could make pong. i think it's not that hard (compared to your Fall Game), good luck and keep it up!
Can I get code in github?
It is don't move.
It wont work
nice
not working please give source code
Thank you
So cute !
Source code?
what IDE are you using?
brackets
Welcome back!
Awesome explanation.... Just subscribed
Your writing Icannot see
great,,,
Amazing idea!
Following the tutorial step by step wont give a working version though! I guess there is just something small missing in the video. Would appreciate if you could upload the full code to github (even though the video is nearly a year old)!
did u manage to solve the issue??????
@@sealandland3959 I managed to modify the code so that the game works, yes 👍🏻
I dont remember what exactly I changed, if you want I could send you the working version.
@@sealandland3959 what was the issue please tell me
@@schmusekai Hi! Can you share the code with me? Thanks!
@@007ajit1 Hey! Sorry for the late reply, I must have overlooked the notification. I dont know what exactly I changed, since I modified the whole thing afterwards to fit my own needs. If you still need it, I can send you my modified version
i can see the fuckin script pan into view idk wtf to write down because a parent of the code is off screen
code is linked in the description
@@KnifeCircus its not a safe link
3:28
good puppy
Very funny 😊
hay ummmmmm let me tell you real fast that your twitter and instagram links dont work because you dont have next to the www.
Purpetuall that is correct... fixed it lol
KnifeCircus also thanks for the tutorial. just started coding
i fucking give up.... IVE DONE EVERTHING RIGHT. I EVEN MAIN 2 REPLICASE AND TYPED ONE LETTER AT A TIME
5:13
just a small suggession, if you would stop at points and explain briefly it would be helpful in understanding what you did here because at the end, the javascript file looked like a bunch of crap
worst code ever he does not showing what he do in the last
way too damn fast
i cant get it to work .. I'm doing something wrong on my have script but I've typeded the have scripted 3 different times and all had 35 lines please help me
for(var i=25;i>0;i--){
let slider = document.createElement("div");
slider.setAttribute("class","slider" animate");
slider.setAttribute("id", "slider"+1);
document.getElementById("game").append(slider);
}
function stopSliding(slider){
var sliderCurrent = document.getElementById("slider"+slider));
var sliderAbove = document.getElementById("slider"+(slider+1));
if(slider==1){
var sliderBelow = sliderCurrent;
}else{
var sliderBelow = document.getElementbyID("slider"-(slider-1));
var leftBelow = window.getComputedStyle(sliderCurrent).getPropertyValue("left");
sliderCurrent.classLst.remove("animate");
sliderCurrent.style.left= left;
var width = parseInt(window.getComputedStyle(sliderCurrent).getPropertyValue("width");
var width = parseInt(window.getComputedStyle(sliderBelow).getPropertyValue("left"));
left = parsInt(left);
var difference = left - leftBelow;
var absDifferene = Math.abs(difference);
if(difference>0){
left = left +absDifference;
}else{
left = left - difference;
sliderCurrent.style.left= left.toString().concat("px");
}
var offset = (width - absDifference).toString().concat("px");
sliderCurrent.style.width= offset;
sliderAbove.style.width= offset;
sliderAbove.style.visibility = "visible";
var onclick = "stopSliding"
}
for(var i=25;i>0;i--){
let slider = document.createElement("div");
slider.setAttribute("class","slider" animate");
slider.setAttribute("id", "slider"+1);
document.getElementById("game").append(slider);
}
function stopSliding(slider){
var sliderCurrent = document.getElementById("slider"+slider));
var sliderAbove = document.getElementById("slider"+(slider+1));
if(slider==1){
var sliderBelow = sliderCurrent;
}else{
var sliderBelow = document.getElementbyID("slider"-(slider-1));
var leftBelow = window.getComputedStyle(sliderCurrent).getPropertyValue("left");
sliderCurrent.classLst.remove("animate");
sliderCurrent.style.left= left;
var width = parseInt(window.getComputedStyle(sliderCurrent).getPropertyValue("width");
var width = parseInt(window.getComputedStyle(sliderBelow).getPropertyValue("left"));
left = parsInt(left);
var difference = left - leftBelow;
var absDifferene = Math.abs(difference);
if(difference>0){
left = left +absDifference;
}else{
left = left - difference;
sliderCurrent.style.left= left.toString().concat("px");
}
var offset = (width - absDifference).toString().concat("px");
sliderCurrent.style.width= offset;
sliderAbove.style.width= offset;
sliderAbove.style.visibility = "visible";
var onclick = "stopSliding"
}