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
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
This guy: IN JUST 5 MINS FROM SCRATCH
<!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>
Thank you!
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 Test: Now tell me ten different coding languages in five different national languages. :)
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!
https://youtu.be/FSAdkv5lK6c
Comments are closed.
Add Comment