1
No libraries, tools, or engines used, just JavaScript in a plain text editor for browser canvas. Follow along and learn full details in the free video course at http://code-your-first-game.com
source
46 comments
guy has only 29 liked videos 💀
For some reason my laptop suddenly slows and gets glitchy. Is there an infinite loop somewhere or is my laptop just trash
Very easy to follow great Job;
This was great, very helpful, thanks for doing it. I also watched the 12 video course, I will make a bunch of notes, and try to upgrade the tennis into a tennis with animations, and characters so I can learn and challenge myself to build more. Words can not describe how helpful this is to people who want to learn code, but might not have friends, and other ways to learn it. Thanks a lot.
وننن
If you try this code and you notice it's choppy, don't worry! That's because it's set to run at 30 frames per second. Just change the line with setInterval from 1000/30 to 1000/60 to get 60 frames per second.
just great, congratulations on the channel
Dude just speedran html
Brackeys: Making a game in 10minutes in unity
This guy: IN JUST 5 MINS FROM SCRATCH
Ive taken a semester including html and codecademys html course and ive never even heard of “canvas” ☹️
In thumbnail, it say that this game can make in 30 seconds. But in the video it took about 5 seconds. Super nice
NE
I wrote the code as you said but it is not displaying the game it showing only black one can anyone pls rectify my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pinball</title>
</head>
<body>
<canvas id="myCanvas" width="640" height="480"></canvas>
<script>
p1y=p2y=40;
pt=10;
ph=100;
bx=by=50;
bd=6;
xv=yv=4;
score1=score2=0;
ais=2;
window.onload=function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
setInterval(update,1000/30);
canvas.addEventListener('mousemove',function(e){
p1y=e.clientY-ph/2;
});
}
function reset(){
bx=canvas.width/2;
by=canvas.height/2;
xv=-xv;
yv=3;
}
function update(){
bx+=xv;
by+=yv;
if(by<0 && yv<0){
yv=-yv;
}
if(by>canvas.height && yv>0){
yv=-yv;
}
if(bx<0){
if(by>p1y && by<p1y+ph){
xv=-xv;
dy=by-(p1y+ph/2);
yv=dy*0.3;
}else{
score2++;
reset();
}
}
if(bx>canvas.width){
if(by>p2y && by<p2y+ph){
xv=-xv;
dy=by-(p2y+ph/2);
yv=dy*0.3;
}else{
score1++;
reset();
}
}
if(p2y+ph/2<by){
p2y+=ais;
} else{
p2y-=ais;
}
context.fillstyle="black";
context.fillRect(0,0,canvas.width,canvas.height);
context.fillstyle="white";
context.fillRect(0,p1y,pt,ph);
context.fillRect(canvas.width-pt,p2y,pt,ph);
context.fillRect(bx-bd/2,by-bd/2,bd,bd);
context.fillText(score1,100,100);
context.fillText(score2,canvas.width-100,100);
}
</script>
</body>
</html>
please provide the code
"OH yeah. A game is a great way to try something a little different from my basic html css js course that should be safe to try. This won't baffle me left and right, just teach me some thing clever!" – the me before I was baffled left and right.
Thank you!
♥️
Thanks
it started easy then became so hard like doom external
ok, i need to watch this video again
Th
you could've saved some time with shorter fn names. I mean update and reset takes too much time to type, compared to the other variables.
https://youtu.be/W8GLMY-OAj4
.Turn to United Brethren Church. Using the Lords name in vain is a sin and so is cursing upon your enemies. And so is saying anything hateful, premarital sex and lust are all sins..
L E G E N D. I just coded my first game w no knowledge of JavaScript (lmtd HTML + python before, never used canvas or graphics). This helped me so much. Chris Player 1: +1 subscriber, +1 book sale.
Which thing or which website you are using to write and make this game !!!!!???????
That's not Coding it's Typing. There's a HUGE difference.
Do one that fits into any screen type, whether its PC, Mac, Android or IOS
me who can code a javascript game in a minute : 😎
Sorry it was not helpful at all 😐
What can i do if its not working
Congratulations! You have now learned HTML! 🙂
Hear is the next tutorial: https://www.youtube.com/watch?v=pxo8t3yuRjU
Hear is the forbidden tutorial: https://www.youtube.com/watch?v=aFBvDXeMoSQ
The Teacher: Congratulations! You have now learned HTML! 🙂
The Test: Now tell me ten different coding languages in five different national languages. 🙂
Yo with this video I was able to make my pong game on itch.io!
Here is the link if you want to see it for yourself:
https://johnnys-games.itch.io/pong
Thanks for the video! Man JavaScript was a lot easier than I thought it was. You earned a subscriber!
i can code "Hello world in 5 minutes and 40 seconds C:
Me who started learning javascript yesterday: 😮
In that time i can only code a <script> function hey(){ alert("Hello World"); }</script> with a <button onclick="hey()">CLIC HERE</button> LOL hahah..
Which program this
2:59
Game Making Speedrun
INCREDIBLE advertising! I learnt a lot about how to get people to genuinely interested in your online course. Cool!
'setInterval' – okey.. my attention is gone xD
Hello!!!
my web page is not loading it's blank
how to tell you've done too much javascript… i could follow this tutorial pretty well
Medical billing system project in Java
https://youtu.be/FSAdkv5lK6c
How do I open the canvas
Comments are closed.