Raycast engine(short)(javascript/html)

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

Pakz	Created : 23 July 2022 Edited : 23 July 2022 System : Cross Platform Language : Javascript Raycast engine(short)(javascript/html) Raycast engine in javascript/html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> </head> <body bgcolor="black"> <div id="test"></div> <style>#myCanvas {touch-action: none;}</style> <canvas id="myCanvas" width="320" height="240" style="border:0px solid #d3d3d3;"> Use different browser. </canvas> <script> // // Thanks to 3dSage of youtube. // // todo : see tutorial of 3dsage. // var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var map = [ [1,1,1,1,1,1,1,1], [1,0,0,0,2,0,0,1], [1,0,0,0,2,0,0,1], [1,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,1], [1,0,0,0,0,2,0,1], [1,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1], ]; var px,py; px = 200; py = 200; pa = 0; var tw,th; gameloop=setInterval(doGameLoop,16); function doGameLoop(){ myCanvas.height = window.innerHeight-32; myCanvas.width = window.innerWidth-32; tw = (myCanvas.width/2)/map[0].length; th = (myCanvas.height)/map.length; ctx.fillStyle="rgb(0,0,0)"; ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle="rgb(255,255,255)"; ctx.fillText("Javascript Html canvas example.",10,10); pa+=0.01; drawmap(); drawplayer(); castline(); } // // This is the last line. It casts a line from the player(camera) // position. If the ray(or bullet?) hits a wall. You have a distance // and you draw a line at that point. The distance is a base for the // height of a wall there. // A camera view is done by casting lines from left(30 degrees) to right // (30 degrees). Multiple rays cast thus. L...eye...R // // Fish eye fix and tile number for different color. // Modify(parameter modify) and see what happens. // function castline(){ var anglestep = degrees_to_radians(1); var offs=0; for(var a=pa-degrees_to_radians(30);a<pa+degrees_to_radians(30);a+=anglestep){ var lx = px+4; var ly = py+4; //var a = pa; var ex,ey; for(var d=0;d<500;d++){ lx+=Math.cos(a); ly+=Math.sin(a); mx = Math.floor(lx/tw); my = Math.floor(ly/th); if(mx>=0 && mx<map[0].length && my>=0 && my<map.length){ if(map[my][mx]!=0){ ex = lx; ey = ly; var dist=Math.hypot(px+4-ex,py+4-ey); // fix fish eye effect! var ca = pa-a; dist=distMath.cos(ca); // size of your player view dist = (twmyCanvas.height)/(dist); // Draw raycast line here. if(map[my][mx]==1){ ctx.strokeStyle='yellow'; }else{ ctx.strokeStyle='red'; } ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo((myCanvas.width/2)+(offs10),myCanvas.height/2); ctx.lineTo((myCanvas.width/2)+(offs10),(myCanvas.height/2)-dist/2); ctx.stroke(); ctx.strokeStyle='grey'; ctx.beginPath(); ctx.moveTo((myCanvas.width/2)+(offs10),myCanvas.height/2); ctx.lineTo((myCanvas.width/2)+(offs10),myCanvas.height); ctx.stroke(); break; }} } offs++; ctx.strokeStyle='yellow'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(px+4,py+4); ctx.lineTo(ex,ey); ctx.stroke(); } } function drawplayer(){ ctx.fillStyle='red'; ctx.fillRect(px,py,8,8); } function drawmap(){ for(var y=0;y<map.length;y++){ for(var x=0;x<map[0].length;x++){ if(map[y][x] == 1){ ctx.fillStyle='yellow'; ctx.fillRect(xtw,yth,tw,th); } if(map[y][x] == 2){ ctx.fillStyle='red'; ctx.fillRect(xtw,yth,tw,th); } }} } function degrees_to_radians(degrees) { return degrees * (Math.PI / 180); } function radians_to_degrees(radians) { return radians * (180 / Math.PI); } function fixangle(a){ if(a>359){ a-=360; } if(a<0){ a+=360; } return a; } </script> </body> </html> --v
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.

Comments
Saturday, 23 July 2022, 11:42
Jayenkai	Nice! 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
Pakz	Noted 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
Pakz	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. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> </head> <body bgcolor="black"> <div id="test"></div> <style>#myCanvas {touch-action: none; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }</style> <canvas id="myCanvas" width="320" height="240" style="border:0px solid #d3d3d3;"> Use different browser. </canvas> <script> // Doom Javascript HTML5 - Part 1. // From a tutorial from 3DSage (youtube) // // var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); window.addEventListener("keydown",kd,true); window.addEventListener("keyup",ku,true); window.addEventListener("touchstart", touchHandler); window.addEventListener("touchmove", touchHandler); window.addEventListener("touchend", touchHandler); window.addEventListener("mousedown",md,true); window.addEventListener("mouseup",mu,true); window.addEventListener('mousemove', mm); var touch=false; var touchx=touchy=0; var debug = 0; var sw = 160; var sh = 120; var sw2 = sw/2; var sh2 = sh/2; var loadSectors = [ // wall start, wall end, z2 height, z2 height // bottom color, top color // 0,4,0,40, // sector 1 // 4,8,0,40, // sector 2 // 8,12,0,40, // sector 3 // 12,16,0,40, // sector 4 0,4,0,40,9,9, // sector 1 4,8,0,40,9,9, // sector 2 8,12,0,40,9,9, // sector 3 12,16,0,40,9,9 // sector 4 ]; var loadWalls = [ // x1,y1,x2,y2 0,0,32,0,0, 32,0,32,32,1, 32,32,0,32,0, 0,32,0,0,1, 64,0,96,0,2, 96,0,96,32,3, 96,32,64,32,2, 64,32,64,0,3, 64,64,96,64,4, 96,64,96,96,5, 96,96,64,96,4, 64,96,64,64,5, 0,64,32,64,6, 32,64,32,96,7, 32,96,0,96,6, 0,96,0,64,7 ]; var numSect = 4; // number of sectors var numWall = 16; // number of walls; var cos = []; var sin = []; //populate cos and sin arrays. for(var x=0;x<360;x++){ cos[x] = Math.cos(x/180.0Math.PI); sin[x] = Math.sin(x/180.0Math.PI); } var px=py=pz=0; var pa,pl; // initiate player px = 70; py = -110; pz = 20; pa = 0; pl = 0; // w/s/a/d strafe left/right and m=forward. var kw=ks=ka=kd=ksl=ksr=km=0; class wall { constructor(){ this.x1=0; // bottom line point 1 this.y1=0; this.x2=0;// bottom line point 2 this.y2=0; this.c=0; // wall color } } walls = []; for(var i=0;i<130;i++){ walls.push(new wall()); //var tmp = Object.create(wall); //walls.push(tmp); } class sector { constructor(){ this.ws=0; // wall number start and end this.we=0; this.z1=0; // height of bottom and top this.z2=0; this.d=0; // add y distance to sort drawing order this.c1=0; //bottom and top color; this.c2=0; this.surf = []; // to hold points for surface for(var i=0;i<sw;i++){ this.surf.push(0); } this.surface = 0; // is there a surface to draw } } sectors = []; for(var i=0;i<130;i++){ //var tmp = Object.create(sector) sectors.push(new sector()); //var tmp = Object.create(sector); //sectors.push(tmp); } // load sectors var v1=0; var v2=0; for(var s=0;s<numSect;s++){ sectors[s].ws=loadSectors[v1+0];// wall start number sectors[s].we=loadSectors[v1+1];// wall end number sectors[s].z1=loadSectors[v1+2];// sector bottom height sectors[s].z2=loadSectors[v1+3]-loadSectors[v1+2];// sector top height sectors[s].c1=loadSectors[v1+4]; // sector top color sectors[s].c2=loadSectors[v1+5]; // sector bottom color v1+=6; for(var w=sectors[s].ws;w<sectors[s].we;w++){ walls[w].x1 = loadWalls[v2+0]; walls[w].y1 = loadWalls[v2+1]; walls[w].x2 = loadWalls[v2+2]; walls[w].y2 = loadWalls[v2+3]; walls[w].c = loadWalls[v2+4]; v2+=5; } } scw =0; sch=0; gameloop=setInterval(doGameLoop,16); function doGameLoop(){ myCanvas.height = window.innerHeight.96; myCanvas.width = window.innerWidth.96; scw=myCanvas.width/sw; sch=myCanvas.height/sh; ctx.scale(scw,sch); ctx.fillStyle="rgb(120,120,120)"; ctx.fillRect(0,0,sw,sw); ctx.fillStyle="rgb(255,255,255)"; //ctx.fillText("W/A/S/D m+ , . "+debug,10,10); moveplayer(); draw3d(); touchUI(); } // clip line function clipBehindPlayer(x1,y1,z1,x2,y2,z2){ var da = y1; // distance plane --> point a var db = y2; // distance plane -> point b var d = da-db; if(d==0)d=1; var s = da/(da-db); // intersectiokn factor(between 0 and 1) x1 = x1+s(x2-(x1)); y1 = y1+s(y2-(y1)); if(y1==0)y1=1; // prevent divide by zero z1 = z1+s(z2-(z1)); return [ x1, y1, z1 ]; } function drawWall(x1,x2,b1,b2,t1,t2,c,s){ var x,y; // hold difference in distance. var dyb = b2-b1; // y distance of bottom line var dyt = t2-t1; // y distance of top line var dx = x2-x1; // x distance if(dx==0)dx=1; var xs=x1; // hold initial x1 start position //clip x (change =1 to 0 for non visible if(x1<1)x1=1; //clip left if(x2<1)x2=1; //clip left if(x1>sw-1)x1=sw-1; // clip right if(x2>sw-1)x2=sw-1; //clip right // draw x verticle lines for(x=x1;x<x2;x++){ var y1 = dyb(x-xs+0.5)/dx+b1; // y bottom point; var y2 = dyt(x-xs+0.5)/dx+t1; // y bottom point; //pixel(x,y1,0);//bottom //pixel(x,y2,0);//top //clip y (change =1 to 0 for non visible if(y1<1)y1=1; //clip left if(y2<1)y2=1; //clip left if(y1>sh-1)y1=sh-1; // clip right if(y2>sh-1)y2=sh-1; //clip right //surface if(sectors[s].surface==1){// save bottom points sectors[s].surf[Math.floor(x)]=Math.floor(y1); continue; } if(sectors[s].surface==2){ // save top points sectors[s].surf[Math.floor(x)]=Math.floor(y2); continue; } if(sectors[s].surface==-1){// bottom for(y=sectors[s].surf[Math.floor(x)];y<y1;y++){ pixel(x,y,sectors[s].c1); } } if(sectors[s].surface==-2){// top for(y=y2;y<sectors[s].surf[Math.floor(x)];y++){ pixel(x,y,sectors[s].c2); } } for(y=y1;y<y2;y++){ pixel(x,y,c); } } } function draw3d() { var s=0; var w=0; var wx = []; var wy = []; var wz = []; //var cs = Math.cos(degrees_to_radians(pa)); //var sn = Math.sin(degrees_to_radians(pa)); var cs = cos[pa]; var sn = sin[pa]; // order sectors by distance for(s=0;s<numSect-1;s++){ for(w=0;w<numSect-s-1;w++){ if(sectors[w].d<sectors[w+1].d){ //var st=sectors[w]; //sectors[w]=sectors[w+1]; //sectors[w+1]=st; [sectors[w+1],sectors[w]] = [sectors[w],sectors[w+1]]; } }} // draw sectors for(s=0;s<numSect;s++) { sectors[s].d=0; // clear distance if(pz<sectors[s].z1){ sectors[s].surface=1;// bottom surface } else if(pz>sectors[s].z2){ sectors[s].surface=2;// top surface }else{ sectors[s].surface=0;// no surfaces } for(var loop=0;loop<2;loop++) { for(w=sectors[s].ws;w<sectors[s].we;w++) { // offset bottom 2 points by player var x1 = walls[w].x1-px; var y1 = walls[w].y1-py; var x2 = walls[w].x2-px; var y2 = walls[w].y2-py; //swap for surface if(loop==0){ var swp=x1; x1=x2; x2=swp; swp=y1; y1=y2; y2=swp; } // world x position wx[0] = x1cs-y1sn; wx[1] = x2cs-y2sn; wx[2] = wx[0]; wx[3] = wx[1]; // world y position (depth) wy[0] = y1cs+x1sn; wy[1] = y2cs+x2sn; wy[2] = wy[0]; wy[3] = wy[1]; // world z height; wz[0] = sectors[s].z1-pz+((plwy[0])/32.0); wz[1] = sectors[s].z1-pz+((plwy[1])/32.0); wz[2] = wz[0]+sectors[s].z2; wz[3] = wz[1]+sectors[s].z2; // store this walls distance sectors[s].d+=dist(0,0,(wx[0]+wx[1])/2,(wy[0]+wy[1])/2); // dont draw if behind player if(wy[0]<0 && wy[1]<1)continue; // wall behind player, dont draw // point behind player clip if(wy[0]<1){ [wx[0],wy[0],wz[0]] = clipBehindPlayer(wx[0],wy[0],wz[0],wx[1],wy[1],wz[1]);//bottom line [wx[2],wy[2],wz[2]] = clipBehindPlayer(wx[2],wy[2],wz[2],wx[3],wy[3],wz[3]);//top line } if(wy[1]<1){ [wx[1],wy[1],wz[1]] = clipBehindPlayer(wx[1],wy[1],wz[1],wx[0],wy[0],wz[0]);//bottom line [wx[3],wy[3],wz[3]] = clipBehindPlayer(wx[3],wy[3],wz[3],wx[2],wy[2],wz[2]);//top line } // screen x, screen y position wx[0] = wx[0]200/wy[0]+sw2;wy[0] = wz[0]200/wy[0]+sh2; wx[1] = wx[1]200/wy[1]+sw2;wy[1] = wz[1]200/wy[1]+sh2; wx[2] = wx[2]200/wy[2]+sw2;wy[2] = wz[2]200/wy[2]+sh2; wx[3] = wx[3]200/wy[3]+sw2;wy[3] = wz[3]200/wy[3]+sh2; drawWall( Math.floor(wx[0]), Math.floor(wx[1]), Math.floor(wy[0]), Math.floor(wy[1]), Math.floor(wy[2]), Math.floor(wy[3]), walls[w].c,s); } sectors[s].d/=(sectors[s].we-sectors[s].ws);// find avarage sector distance sectors[s].surface=-1; // flip to negative draw surface } } } function moveplayer(){ // move up down left right if(ka==1 && km==0){ pa-=2; if(pa<0)pa+=360; } if(kd==1 && km==0){ pa+=2; if(pa>359)pa-=360; } var dx=sin[pa]10.0; var dy=cos[pa]10.0; var dx = Math.sin(degrees_to_radians(pa)); var dy = Math.cos(degrees_to_radians(pa)); if(kw==1 && km==0){ px+=dx; py+=dy; } if(ks==1 && km==0){ px-=dx; py-=dy; } // strafe left, right if(ksr==1){ px+=dy; py-=dx; } if(ksl==1){ px-=dy; py+=dx; } //move up, down , look up down if(ka==1 && km==1){ pl-=1; } if(kd==1 && km==1){ pl+=1; } if(kw==1 && km==1){ pz-=4; } if(ks==1 && km==1){ pz+=4; } } function pixel(x,y,p){ c='blue'; if(p==0) c = 'rgb(255,255,0)'; if(p==1) c = 'rgb(160,160,0)'; if(p==2) c = 'rgb(0,255,0)'; if(p==3) c = 'rgb(0,160,0)'; if(p==4) c = 'rgb(0,255,0)'; if(p==5) c = 'rgb(0,160,255)'; if(p==6) c = 'rgb(160,100,0)'; if(p==7) c = 'rgb(110,50,0)'; if(p==8) c = 'rgb(0,60,130)'; if(p==9) c = 'rgb(255,0,0)'; ctx.fillStyle=c; ctx.fillRect(x,y,1,1); } function degrees_to_radians(degrees) { return degrees * (Math.PI / 180); } function radians_to_degrees(radians) { return radians * (180 / Math.PI); } function kd(evt){ //debug=evt.keyCode; if(evt.keyCode==87)kw = 1; if(evt.keyCode==65)ka = 1; if(evt.keyCode==83)ks = 1; if(evt.keyCode==68)kd = 1; if(evt.keyCode==77)km = 1; if(evt.keyCode==188)ksl = 1; if(evt.keyCode==190)ksr = 1; } function ku(evt){ if(evt.keyCode==87)kw = 0; if(evt.keyCode==65)ka = 0; if(evt.keyCode==83)ks = 0; if(evt.keyCode==68)kd = 0; if(evt.keyCode==77)km = 0; if(evt.keyCode==188)ksl = 0; if(evt.keyCode==190)ksr = 0; } function dist(x1,y1,x2,y2){ return Math.hypot(y2-y1,x2-x1); } function touchUI(){ var t=["w","a","s","d","m",".",","]; var bw=sw/7; var bh=sh/7; var top=sh-(bh1); ctx.fillStyle='black'; //ctx.fillRect(0,0,40,40); ctx.strokeStyle='white'; var c=0; for(var y1=top;y1<top+(1bh);y1+=bh){ for(var x1=0;x1<(7bw);x1+=bw){ //ctx.fillRect(x1,y1,bw,bh); if(touch){ if(rectsoverlap(touchx/scw, touchy/sch, 1, 1, x1, y1, bw, bh)==true){ execKeys(c); } } ctx.rect(x1,y1,bw,bh); ctx.fillStyle='black'; ctx.fill(); ctx.stroke(); c++; }} c=0; for(var y1=top;y1<top+(1bh);y1+=bh){ for(var x1=0;x1<(7*bw);x1+=bw){ if(t[c].length>0){ ctx.fillStyle='white'; ctx.fillText(t[c],x1+bw/4,y1+(bh/1.5)); } c++; } } } function execKeys(c){ if(c==0)kw=1; if(c==1)ka = 1; if(c==2)ks = 1; if(c==3)kd = 1; if(c==4)km = 1; if(c==5)ksl = 1; if(c==6)ksr = 1; } function deexecKeys(c){ kw = 0; ka = 0; ks = 0; kd = 0; km = 0; ksl = 0; ksr = 0; } function rectsoverlap(r1x1,r1y1,r1w,r1h,r2x1,r2y1,r2w,r2h){ var r1x2 = r1x1+r1w; var r1y2 = r1y1+r1h; var r2x2 = r2x1+r2w; var r2y2 = r2y1+r2h; return (r1x1 < r2x2 && r1x2 > r2x1 && r1y1 < r2y2 && r1y2 > r2y1); } function touchHandler(e) { if(e.type=="touchstart" && e.touches) { //m="touch"; const touches = e.changedTouches; touch = true; touchx = touches[0].pageX; touchy = touches[0].pageY; e.preventDefault(); } if(e.type=="touchend" && e.touches) { touch=false; deexecKeys(); //m="no touch.."; e.preventDefault(); } if(e.type=="touchmove" && e.touches) { const touches = e.changedTouches; touchx = touches[0].pageX; touchy = touches[0].pageY; e.preventDefault(); } } function mm(evt){ touchx = evt.pageX;//clientX touchy = evt.pageY;//clientY } function md(evt){ if(evt.which==1){ //m="left mouse is being pressed."; touch = true; } } function mu(evt){ if(evt.which==1){ //m="No mouse is pressed."; touch=false; deexecKeys(); } } </script> </body> </html> --v
Friday, 29 July 2022, 17:13
Jayenkai	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
Pakz	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.

Raycast engine(short)(javascript/html)

Latest Update

Comments