- 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>
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>