-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|368|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> Misc

Created : 23 July 2022
Edited : 23 July 2022
System : Cross Platform
Language : Javascript

Raycast engine(short)(javascript/html)

Raycast engine in javascript/html

Latest Update

From a tutorial on youtube by 3dsage. I finally heard the line that explained how to do a raycaster.

You just shoot a bullet. The bullet hits a wall. You have the distance traveled of the bullet. Draw a wall part there based on that distance. Bullet being the ray.

The code is short. Not optimized. Is can be pasted into a file. Save as html and open with browser.

No player movement controls. It just rotates.



Saturday, 23 July 2022, 11:42
The floor could do with being a bit lower, mind.
When I tried it, I took the "Y Top of the Wall" height and added it to the bottom of the wall.
If not full height, then maybe *0.75 or something.
Currently it looks like your head's flat on the floor! ... .. Which might be a fun game
Saturday, 23 July 2022, 13:18

I hacked it together after watching the video. Trying to create as little lines as possible.

There was a part on how to create the ray per gird cell. I do it per pixel here.

I did peek a bit at the original source. Mainly the fish eye correction part.

I'm going to watch the second video. There is going to be explained how to texture it all.

View on YouTube

View on YouTube
Friday, 29 July 2022, 14:30
Two days of concentrated work I spend trying to get the Doom tutorial part 1 code working in javascript/html.

I hacked in some mouse controls for the buttons. No idea if that works. The touch and keyboard controls do work.

Friday, 29 July 2022, 17:13
That's working really well. And smooth, too!
A couple of freakouts when you walk "into" the blocks, but once you've stopped the player from doing that, it'll be grand!
Friday, 29 July 2022, 17:16
The tutorial maker asked me to send the link to the code. He mentioned he wanted to show peoples work in the next video's. So I think there wil be another one. And hopefully with the codez to texture the things and add collisions.
I think I might be able to base it of the raycasting tutorials. But this might take me days, or burn me out on bugs.