Coding an HTML5 Canvas Game with JS in 5 min 30 sec

[volkinik]

I can code 'Hello World' in 5 minutes

[NoobieLandCity]

-Hey dude wanna play pong?
- But I don't have that game..
-Gim me 5min I'll code it
- What? :D

[Bloodyaugust]

Please please please, if you're just learning to code and/or make video games, listen to his parting words and don't expect to write anything even remotely complex in this manner or this quickly. It isn't maintainable, it isn't pretty, it won't sell, and ultimately even Pong has a fair amount more game mechanic polish to make it enjoyable to play, which this arguably would not be.

That said, writing video games is extremely fun and fulfilling, and I hope you(the watcher/reader) decide to learn more!

[mveronie]

Here is my updated code after playing around with this to add some colors, make the ball and paddles faster, make the AI more difficult, and get rid of the shakiness of the AI paddle. Thanks Chris! This was a lot of fun.

<canvas id="gc" width="640" height="480"></canvas>

<script type="text/javascript">

p1y = p2y = 40;
pthick = 10;
pheight = 100;
ballx = bally = 50;
bd = 6;
xvel = yvel = 10;
score1 = score2 = 0;
aiSpeed = 6;

window.onload = ()=> {
c =
cc = c.getContext('2d');
cc.font = '20px Arial';
setInterval(update, 1000/30);
c.addEventListener('mousemove', (e)=> {
p1y = e.clientY-pheight/2;
});
}

function reset() {
ballx = c.width/2;
ballyx = c.height/2;
xvel = -xvel;
yvel = 3;
}

function update() {
ballx += xvel;
bally += yvel;

if (bally < 0 && yvel < 0) {
yvel = -yvel;
}

if (bally > c.height && yvel > 0) {
yvel = -yvel;
}

// Ball bouncing off left side
if (ballx < 0) {
if (bally > p1y && bally < p1y + pheight) {
xvel = -xvel;
deltaY = bally - (p1y + pheight/2);
yvel = deltaY*0.3;
} else {
score2++;
reset();
}
}

// Ball bouncing off right side
if (ballx > c.width) {
if (bally > p2y && bally < p2y + pheight) {
xvel = -xvel;
deltaY = bally - (p2y + pheight/2);
yvel = deltaY*0.3;
} else {
score1++;
reset();
}
}

// AI movement
if (p2y+pheight/2 < bally || p2y+pheight/2 < bally+10) {
p2y += aiSpeed;
}
if (p2y+pheight/2 > bally || p2y+pheight/2 > bally-10) {
p2y -= aiSpeed;
}

// Background
cc.fillStyle = 'black';
cc.fillRect(0, 0, c.width, c.height);
// Ball
cc.fillStyle = 'firebrick';
cc.fillRect(ballx-bd/2, bally-bd/2, bd, bd);
// Paddle 1
cc.fillStyle = 'cyan';
cc.fillRect(0, p1y, pthick, pheight);
// Score 1
cc.fillText(score1, 100, 50);
// Paddle 2
cc.fillStyle = 'lime';
cc.fillRect(c.width-pthick, p2y, pthick, pheight);
// Score 2
cc.fillText(score2, c.width-100, 50);
}
</script>

[famoussaturn]

I took a coding class and I went in knowing nothing and left knowing nothing

[josephlouwerse]

damn you did it without reloading once!!

[MHowitzer]

Oh, love those self-explanatory variable names in your code

[sunilsandhu]

This dude's course on Udemy is fantastic! I watched this 5min vid and thought he was nuts. But then he directs you to his course and takes the time to explain everything in a simple and easy-to-digest way - highly recommended.

[PseudoSX]

I love the intro "I'm gonna write code *while* telling you a whole bunch of stuff that isn't the code I'm currently writing. Multitasking magic.

[AmRFuKYaH]

How to make 4k resolution first person shooter with online multiplayer?

[tomaszolszamowski]

How to make a game?
1. Plan for project, what is the game, rules games, scenario, using technology etc.
2. JUST DO IT.

[ArtwithAmarBrisco]

I am reposting this for those interested.
here is the update code with fixes and relative names(FYI you do need to place the canvas element in an html file and attach the game.js to the html file) and you will be go to go:

// Load game
window.onload = function () {
canvasObj = document.getElementById('gc'),
canvasArea = canvasObj.getContext("2d");
setInterval(update, 1000/30);
canvasObj.addEventListener("mousemove", function(e) {
paddle1y = e.clientY - paddleHeight/2;
});
}
// define vars
var paddle1y = 40,
paddle2y = 40,
paddleThickness = 10,
paddleHeight = 100,
ballXvelocity = 50,
ballVvelocity = 50,
ballDimension = 6,
xVelocity = 4,
yVelocity = 4,
score1 = 0,
score2 = 0,
aiPaddle = 2,
canvasObj = document.getElementById('gc'),
canvasArea = canvasObj.getContext("2d");

// Reset game
function reset() {
ballXvelocity = canvasObj.width/2;
ballVvelocity = canvasObj.height/2;
xVelocity = -xVelocity;
yVelocity = 3;
}
// Updates game
function update() {
// moving ball
ballXvelocity += xVelocity;
ballVvelocity += yVelocity;
// Checks
//left side
if(ballVvelocity < 0 && yVelocity < 0) {
yVelocity = -yVelocity;
}

if(ballVvelocity > canvasObj.height && yVelocity > 0) {
yVelocity = -yVelocity;
}

if(ballXvelocity < 0) {
if(ballVvelocity > paddle1y && ballVvelocity < paddle1y + paddleHeight) {
xVelocity = -xVelocity
deltaY = ballVvelocity - (paddle1y + paddleHeight/2);
yVelocity = deltaY * 0.3;
} else {
score2++;
reset();
}
}
// right side
if(ballXvelocity > canvasObj.width) {
if(ballVvelocity > paddle2y && ballVvelocity < paddle2y + paddleHeight) {
xVelocity = -xVelocity
deltaY = ballVvelocity - (paddle2y + paddleHeight/2);
yVelocity = deltaY * 0.3;
} else {
score1++;
reset();
}
}
// AI actions
if(paddle2y + paddleHeight/2 < ballVvelocity) {
paddle2y += aiPaddle;
} else {
paddle2y -= aiPaddle;
}
// draw everything
canvasArea.fillStyle = "black";
canvasArea.fillRect(0, 0, canvasObj.width, canvasObj.height);
canvasArea.fillStyle = "white";
canvasArea.fillRect(0, paddle1y, paddleThickness, paddleHeight);
- paddleThickness, paddle2y, paddleThickness, paddleHeight);
- ballDimension/2, ballVvelocity - ballDimension/2, ballDimension, ballDimension);
canvasArea.fillText(score1, 100, 100);
canvasArea.fillText(score2, canvasObj.width - 100, 100);
}

[GeeksTutorial]

You are a genius, I know it's a little thing to you or comparing to some big programs, but for me its cool as hot! ( I know it doesn't make any sense, but it is the only way, that I can express myself) Firstly I've seen someone writing a game or program this much fast without a mistake. I know you can do better! but I loved what you just did there! excellent!

[jonmayer]

I love the notepad, first try load and work. Congrats on zero typos at all!

[gkiokan]

This is what I call a pro. good job dude, keep up the skill.

[geekybench]

You should rename the video to "Copying a page of code into a text editor in 5 min and 30 sec".

[ubeven]

I've actually had this course in my Udemy course library for months now and never bothered to check it out because I've been doing lots of the CyberSec stuff to make my own. I'm really impressed with this - will be taking a look for sure!

[pylon]

New speedrun idea! Instead of speedrunning videogames, how about speedrunning CODING videogames!

[hirunsb]

In thumbnail, it say that this game can make in 30 seconds. But in the video it took about 5 seconds. Super nice

[gfargo]

Loved the video, quick and dirty overview of the subject.. Just enough to spark the fire :)

One thing i'd note on the TexdEditor front; Syntax highlighting can be key to demystifying the structure of the code for beginners. Considering how easy to get up and running with Sublime or Atom, I think everyone could benefit from using industry standard tools.