Intro to Game Development with JavaScript - Full Tutorial
Why Stack Overflow recommends it
Stack Overflow users link it as the tutorial they were following when they hit setup problems such as ES module import/export errors and running the code outside CodeSandbox.
Recommended by 0 people across 0 different months, 2019 to 2021.
What it is
A 76-minute freeCodeCamp tutorial by Chris Perko that builds a complete brick-breaker game using vanilla JavaScript and the HTML5 canvas. It covers the game loop, keyboard input, collision detection, levels, pause and start menus, and organizing code into classes and modules.
What people said
Cites CarmiteStars · 2019-07 · Stack Overflow · on “Uncaught SyntaxError: Unexpected identifier | Trying to import a module but I get this error”
I am currently learning how to make a javascript game. I am using the video: [this video] When I try to import the paddle.js file, the console outputs game.js:1 Uncaught SyntaxError: Unexpected identifier Note that I am a beginner in JavaScript. I changed the file path to "paddle" and the full file path "Desktop/JS-Game/paddle.js". I also double checked all my code in paddle.js. game.js import Paddle from 'paddle'; let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); const GAME_WIDTH = 800; const GAME_HEIGHT = 600; ctx.clearRect(0 ,0 , 800, 600); let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT); paddle.draw(ctx); paddle.js export default class Paddle { constructor(ga
Cites hatinacat2000 · 2019-08 · Stack Overflow · on “Difficulty using import/export for two javascript files in same directory, not using react or node”
I am following a simple online tutorial. Nothing fancy is going on and I am not using Node or React. The guy is using Sandbox but I am just using Brackets and a folder on my desktop to contain my files. Everything is fine until I have to export a class from one script ( paddle.js ) to the main script ( index.js ). Prior to changing the first lines, I just have a blank canvas in the browser, as expected. After changing the first lines (by inserting export/import commands, respectively) I get the following errors in Chrome: Uncaught SyntaxError: Unexpected identifier index.js:1 Uncaught SyntaxError: Unexpected token export paddle.js:1 here is my script paddle.js: export default class Paddle {
Cites RainbowHell · 2021-07 · Stack Overflow · on “How do I use Document Object Model (DOM) in VScode?”
I was following this tutorial to make a game in JavaScript that runs on a browser. This tutorial was working in CodeSandBox but I want to try it in VScode. Link: [this video] A line of code is shown in 2:40 and it only works in CodeSandBox, but not VScode. // index.js let canvas = document.getElementById("gameScreen"); It pops out "ReferenceError: document is not defined" and it seems I need some extensions to make JS DOM works in VScode. What extensions should I install to make it work? The HTML file is just a plain file with a JS script being called. //index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="
Cites BreaQ1 · 2021-10 · Stack Overflow · on “Difficulty using import/export for two javascript files. getting the: Failed to load resource: the server responded with a status of 404 (Not Found)”
I get the: Failed to load resource: the server responded with a status of 404 (Not Found) when I try to import/export "class Hero". Im pretty new in js, and would like to code a game. Im using this: [this video] as a foundation. I wanted to change it as I need, but got stoped at. the beginning. Tried to find solutions, but anything I found lead me into other problems. Its started from: SyntaxError: Unexpected identifier 'Hero'. import call expects exactly one argument. After I fount a solution, it went into "Failed to load resource: the server responded with a status of 404 (Not Found)" and... now I don't really know what to do to move on. Here is the code: 1)hero.js export default class Hero { c