forgot to pay your Internet bill again? cool, now you can play the dino game... welcome to another code jam where I show you how games work via semi-mediocre animation. in this one we cover google chrome's most famous: THE DINO GAME! all 100% designed, edited, and produced by...
forgot to pay your Internet bill again? cool, now you can play the dino game...
welcome to another code jam where I show you how games work via semi-mediocre animation. in this one we cover google chrome's most famous: THE DINO GAME!
all 100% designed, edited, and produced by hand (no AI), by yours truly...
read comments for channel updates - know it's been a while
The first 500 people to use my link https://skl.sh/chriscourses11241 will get a 1 month free trial of Skillshare premium! Figma File: https://www.figma.com/design/uFsk0a2s9SIOGaTU8o5MUy/NoteNest GitHub Source Code: https://github.com/chriscourses/notenest Node:...
The first 500 people to use my link https://skl.sh/chriscourses11241 will get a 1 month free trial of Skillshare premium!
Figma File: https://www.figma.com/design/uFsk0a2s9SIOGaTU8o5MUy/NoteNest
GitHub Source Code: https://github.com/chriscourses/notenest
Node: https://nodejs.org/en
MAMP: https://www.mamp.info/en/mac/
Table Plus: https://tableplus.com/
0:00 Project intro
1:31 Project setup / register page
51:57 MySQL + Prisma
1:10:35 Backend routes
1:33:08 Hashing passwords
1:45:39 Error handling
1:53:35 Backend validation
2:01:12 Auth with JSON web tokens
2:32:03 Login functionality
2:43:06 App frontend development
3:31:06 Pulling backend notes
4:07:05 Associate notes to users
4:19:48 Edit existing notes
4:44:22 Create new notes
4:59:19 Log out users
5:04:19 Finishing touches
This video is sponsored by Skillshare.
The first 500 people to use my link https://skl.sh/chriscourses10241 will get a 1 month free trial of Skillshare premium! GitHub Source Code: https://github.com/chriscourses/ninja-adventure MapperMate: https://mappermate.com/ Asset Pack by Pixel-Boy:...
The first 500 people to use my link https://skl.sh/chriscourses10241 will get a 1 month free trial of Skillshare premium!
GitHub Source Code: https://github.com/chriscourses/ninja-adventure
MapperMate: https://mappermate.com/
Asset Pack by Pixel-Boy: https://pixel-boy.itch.io/ninja-adventure-asset-pack
0:00 What we'll build
1:32 How to create a game map
33:57 Map scrolling
1:05:20 Sprite animation
1:41:07 Render layers on top of player
1:58:01 Create enemies with movement
2:43:40 Weapon attack animation
3:24:22 Attack interaction
3:59:05 Hearts and player / enemy interaction
4:21:19 Leaf particles
4:41:19 Finishing touches
4:46:39 The finished product
This video is sponsored by Skillshare.
Add flying enemies and roll attacks with Chris Courses premium. First 50 sign ups can get 30% off any https://chriscourses.com premium membership with the promo code: SUNNYLAND. MapperMate: https://mappermate.com/ Project Source Code:...
Add flying enemies and roll attacks with Chris Courses premium. First 50 sign ups can get 30% off any https://chriscourses.com premium membership with the promo code: SUNNYLAND.
MapperMate: https://mappermate.com/
Project Source Code: https://github.com/chriscourses/sunnyland-platformer
Sunnyland Assets: https://ansimuz.itch.io/sunny-land-pixel-game-art
Heart Asset: https://github.com/chriscourses/sunnyland-platformer/blob/main/images/hearts.png
0:00 Intro
1:11 Map Creation
24:27 Scroll Functionality
49:04 Sprites and Animation
1:25:43 Parallax Scrolling
1:36:10 Hitboxes and Collisions
1:48:39 Adding Enemies
2:07:23 Removing Enemies
2:32:36 Collision Directions
2:47:11 Hearts and Game Over
3:02:51 Collecting Gems
3:29:36 Map Expansion
3:47:11 Winning the Game
3:53:18 The Finished Product
Vue Teleport enables the relocation of components from their current nested structure to a specified element using the 'to' attribute. This feature is particularly beneficial for elements with conflicting z-indexes that overlap with the existing user interface (UI). For...
Vue Teleport enables the relocation of components from their current nested structure to a specified element using the 'to' attribute. This feature is particularly beneficial for elements with conflicting z-indexes that overlap with the existing user interface (UI). For example, instead of having a modal window that only partially overlaps the UI, you can make it overlap the entire UI by teleporting it to the body tag.
Learn more at: https://vuejs.org/guide/built-ins/teleport.html
Get $100 over 60 days to use towards your Linode / Akamai server with: https://www.linode.com/chriscourses In this tutorial, we'll dive into the creation of an online multiplayer video game using JavaScript, the HTML canvas, and Node.js. You'll gain insights into the...
Get $100 over 60 days to use towards your Linode / Akamai server with: https://www.linode.com/chriscourses
In this tutorial, we'll dive into the creation of an online multiplayer video game using JavaScript, the HTML canvas, and Node.js. You'll gain insights into the mechanics of multiplayer games, such as displaying and moving player objects on different screens, generating unique usernames, and everything in between.
Before crafting this course, I had no experience with programming multiplayer games. Yet, this video encapsulates countless hours of research, presenting you with a consolidated resource so you can avoid having to find everything on your own.
While there might be some inaccuracies, I'm confident that the knowledge you'll gain is substantial. Dive in and enjoy!
🏎 Starter source code: https://github.com/chriscourses/multiplayer-game-starter
🏁 Finished source code: https://github.com/chriscourses/multiplayer-game
🚀 More courses from me: https://chriscourses.com/courses
0:00 Game setup
10:13 Connect and disconnect players
53:27 Add unique attributes
1:18:25 Player movement
2:17:56 Projectiles and collision
3:35:49 Leaderboard
4:06:14 Unique usernames
4:25:29 Push live to Akamai
4:47:38 Domain name setup
5:02:06 Game polish
5:41:19 Enhanced interpolation
Ready to create amazing games? Join chriscourses.com to learn, grow and thrive from over 100 videos, quizzes and code challenges: https://chriscourses.com/ Project setup code snippet: https://chriscourses.com/courses/threejs-game/videos/project-setup GitHub source code:...
This course was made possible thanks to Hostinger (a really great hosting service). Save up to 91% of by using the discount code CHRISCOURSES on checkout at https://www.hostinger.com/chriscourses Demo: https://chriscourses.xyz/ Game assets:...
This course was made possible thanks to Hostinger (a really great hosting service). Save up to 91% of by using the discount code CHRISCOURSES on checkout at https://www.hostinger.com/chriscourses
Demo: https://chriscourses.xyz/
Game assets: https://drive.google.com/drive/folders/1hqYFTOvtzxQQuFZPJjzUOOGjzAfEFEio?usp=share_link
GitHub source code: https://github.com/chriscourses/vertical-platformer
Tiled map editor: https://www.mapeditor.org/
Warrior Art by Luiz Melo: https://luizmelo.itch.io/medieval-king-pack-2
Background Art by Trixie: https://trixelized.itch.io/starstring-fields
0:00 Project summary
0:58 Project setup
8:55 Domain setup
16:15 Gravity
33:35 Player movement
42:50 Background sprite
57:22 Collision blocks
1:29:54 Collision detection
1:51:31 Sprite animation
2:16:19 Hitbox implementation
2:32:09 Sprite swapping
2:56:33 Platform jumping
3:11:27 Horizontal camera panning
3:31:13 Vertical camera panning
3:41:06 Launch final product to Hostinger
PixelFrog's Awesome Asset Pack - https://pixelfrog-assets.itch.io/kings-and-pigs Thank you INTO THE AM for the tees! Get yours now and get 10% off site-wide when you click this link: https://intotheam.com/chriscourses Game Assets:...
PixelFrog's Awesome Asset Pack - https://pixelfrog-assets.itch.io/kings-and-pigs
Thank you INTO THE AM for the tees! Get yours now and get 10% off site-wide when you click this link: https://intotheam.com/chriscourses
Game Assets: https://drive.google.com/drive/u/0/folders/1xNk8cw47XQvSHclMRuC5VhxUoklBepr1
GitHub Source Code: https://github.com/chriscourses/kings-and-pigs
Get 76 more hours of tutorial content only at https://chriscourses.com/
0:00 What we're building
0:40 Sponsor: Into the AM
1:18 Project setup
9:49 Create a player
26:49 Gravity
32:27 Player movement
45:59 Background sprite
55:38 Collision blocks
1:18:52 Collision detection
1:39:28 Sprite animation
1:55:32 Hitbox implementation
2:08:17 Sprite swapping
2:20:43 Entering doors
2:38:41 Change levels
3:02:38 Finished product
3:02:59 Next steps
#intotheam
Start hosting your games with https://linode.com/chriscourses and receive a $100 60-day credit. Anything above $5 a month for hosting is too expensive. If you have two functioning hands and the will to sit down and learn the absolute basics of server management, you too can...
Start hosting your games with https://linode.com/chriscourses and receive a $100 60-day credit.
Anything above $5 a month for hosting is too expensive. If you have two functioning hands and the will to sit down and learn the absolute basics of server management, you too can have a $5 per month server to host every single game in your untouched side projects folder.
I've been hosting my games and sites like this since 2016, way before I even knew what Linode was. If you're serious about upping your development skills and want to be able to produce multiplayer games in the future, this is the absolute first step you should take.
0:00 Methods to host your games
1:34 How to create a server with Linode
3:34 Login to your new server
5:44 Install Nginx
7:25 Transfer game over to the server
13:16 Purchase and connect a domain name
16:32 Connect a second game to the same server
20:46 Create a new config file for Nginx
27:13 Next steps
Follow @devaslife for more code-in-nature content, and check out https://www.inkdrop.app/ for the ultimate markdown note taking experience. Get the code: https://github.com/chriscourses/programming-pong-in-the-park/blob/main/index.html 0:00 Intro and background 1:12 Canvas...
Follow @devaslife for more code-in-nature content, and check out https://www.inkdrop.app/ for the ultimate markdown note taking experience.
Get the code: https://github.com/chriscourses/programming-pong-in-the-park/blob/main/index.html
0:00 Intro and background
1:12 Canvas setup
2:07 Draw paddles
4:22 Respond to user input
7:31 Restrict paddle to boundaries
9:31 Create a ball
12:04 Randomized ball movement
13:02 Ball and paddle collision
20:11 The finished product
20:52 End screen
I was feeling pretty unmotivated the past three months, especially after the large success of my fighting game tutorial. Many people would think that such a successful video would provide tons of motivation, and rightfully so, but for me, I felt as if I were just coasting, rather than putting in consistent effort that makes impact. Although there are rewards to be reaped from passively owning a successful video, it just doesn't feel good as consistently working towards a goal.
During this period, I've been watching a ton of different tech YouTubers rather than producing, mainly because... well, its a lot easier to watch than build. One YouTuber who stuck out to me was @devaslife and for obvious reasons—he essentially pioneered a style of coding videos where the code takes place in aesthetic sceneries, and without any voiceover (all you hear are the sounds of nature and coding keystrokes).
If there are a few things that I've consistently been passionate about, it's getting outdoors, video production, and coding of course. @devaslife was able to merge all of those into one, and his style seemed like the perfect gateway to start producing more videos again, so here is my attempt.
Anyways, I'm glad to be back using my actual camera gear, and have some super helpful content coming out regarding career advice, code cleanliness, Three.js, and canvas.
I don't plan on doing this exact style in the future anytime soon, but thank you @devaslife for getting people out and being an inspiration to many!
Ready to create amazing games? Join chriscourses.com to learn, grow and thrive from over 100 videos, quizzes and code challenges: https://chriscourses.com/ Here you'll learn how to create your very first tower defense game with JavaScript and HTML canvas. We'll start by...
Ready to create amazing games? Join chriscourses.com to learn, grow and thrive from over 100 videos, quizzes and code challenges: https://chriscourses.com/
Here you'll learn how to create your very first tower defense game with JavaScript and HTML canvas. We'll start by creating a game map using a map editor called Tiled. Then we'll code the basics of a tower defense game using nothing but rudimentary shapes. Finally, we'll replace our shapes with sprites to give our game a professional look.
Google Drive Assets: https://drive.google.com/drive/folders/1-0sL78pmANRDhio3veKt-6Zg3X3aP1zp
Finished Demo: https://chriscourses.github.io/tower-defense/
Source Code: https://github.com/chriscourses/tower-defense
Tiled Map Editor Download: https://www.mapeditor.org/
Stone Tower Assets: https://free-game-assets.itch.io/free-stone-tower-defense-game-art?download
Desert Tileset: https://free-game-assets.itch.io/free-rpg-desert-tileset
Orc Sprite Assets: https://free-game-assets.itch.io/free-2d-orcs-sprite-sheets
Heroicons: https://heroicons.com/
Font Awesome: https://fontawesome.com/
0:00 Introduction
0:51 Game Assets and Downloads
5:40 Create a Path
23:53 Map Details
31:42 Project Setup
48:31 Pathfinding
1:28:55 Building Placement
2:12:03 Shooting Projectiles
2:50:40 Health Bars
3:02:46 Waves
3:09:43 Game Over
3:39:13 Resources
4:01:12 Sprites - Projectile
4:16:09 Sprites - Enemy
4:34:15 Sprites - Building
4:55:25 Sprites - Explosions
5:04:50 Launch
Music by Joe Gallagher: https://joegallagher.itch.io/free-orchestral-music-pack
My premium game dev courses: https://chriscourses.com/ Here you'll learn how to create your very first fighting game with JavaScript and HTML canvas. We'll start by coding some basic fighting game mechanics, then we'll take things to the next level by adding in professional...
My premium game dev courses: https://chriscourses.com/
Here you'll learn how to create your very first fighting game with JavaScript and HTML canvas. We'll start by coding some basic fighting game mechanics, then we'll take things to the next level by adding in professional sprite sheets and graphics.
Google Drive Assets: https://drive.google.com/drive/folders/1569Y7WYX-aQf6LKstJtpuWQD0ylWxZ4P
Finished Demo: https://chriscourses-fighting-game.netlify.app/
Source Code: https://github.com/chriscourses/fighting-game
Oak Woods Assets: https://brullov.itch.io/oak-woods
Fighter Asset #1: https://luizmelo.itch.io/martial-hero
Fighter Asset #2: https://luizmelo.itch.io/martial-hero-2
0:00 Introduction
0:43 Project Setup
8:07 Create Player and Enemy
28:00 Move Characters with Event Listeners
50:12 Attacks
1:11:31 Health Bar Interface
1:34:27 Game Timers and Game Over
1:51:27 Background Sprite
2:05:10 Shop Sprite with Animation
2:23:08 Player Sprite - Idle
2:36:24 Player Sprite - Run
2:43:39 Player Sprite - Jump
2:58:03 Player Sprite - Attack
3:01:53 Enemy Sprite - Kenji
3:07:04 React to Sprite Attacks
3:20:32 Receive Hit Animation
3:29:11 Death Animation
3:35:32 Interface Design and Animation
3:49:55 Push Live
3:55:57 End