I want to learn More Advanced Javascript for Game Development, but can't seem to be able to progress in my coding ability

Joined
Aug 27, 2024
Messages
1
Reaction score
0
I learned Beginner Javascript from a lot of different places, some including freeCodeCamp and Codecademy. I've wanted to learn game development in Javascript, but can't seem to progress any in my ability. I feel that I am trapped in "tutorial hell" as some people call it, watching tutorial after tutorial but I'm not improving just copying the tutorial and not learning anything. Does anyone have any good resources for learning Javascript for Game Development and ways to get out of tutorial hell?

The Best I Can Currently Do (While Copying Code Snippets From Similar Games Made From Tutorials) Is This:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Canvas Thing</title>
<style>
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
background-color: black;
}
img {
display:none;
}
</style>
</head>
<body>
<img src="Mario.png" id="marioImage"/>
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
const canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');

let y = 100;
let x = 100;
let speed = 7;
let downPressed = false;
let upPressed = false;
let leftPressed = false;
let rightPressed = false;
const marioImage = document.getElementById('marioImage');

function gameLoop() {
clearScreen();
drawPlayer();
checkInputs();
requestAnimationFrame(gameLoop);

}

document.body.addEventListener('keydown', keyDown)
document.body.addEventListener('keyup', keyUp)

function clearScreen() {
ctx.fillStyle = "black";
ctx.fillRect(0,0,400,400);
}

function checkInputs() {
if(downPressed) {
y += speed;
}
if(upPressed) {
y -= speed;
}
if(leftPressed) {
x -= speed;
}
if(rightPressed) {
x += speed;
}
}

function keyDown(event) {
//down arrow
if (event.keyCode == 40) {
downPressed = true;
}
//up arrow
if (event.keyCode == 38) {
upPressed = true;
}
//left arrow
if (event.keyCode == 37) {
leftPressed = true;
}
//right arrow
if (event.keyCode == 39) {
rightPressed = true;
}
}

function keyUp(event) {
//down arrow
if (event.keyCode == 40) {
downPressed = false;
}
//up arrow
if (event.keyCode == 38) {
upPressed = false;
}
//left arrow
if (event.keyCode == 37) {
leftPressed = false;
}
//right arrow
if (event.keyCode == 39) {
rightPressed = false;
}
}



function drawPlayer() {
ctx.drawImage(marioImage, x, y, 50, 50);
}

requestAnimationFrame(gameLoop);
</script>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,039
Messages
2,570,376
Members
47,032
Latest member
OdellBerg4

Latest Threads

Top