How to make the game show only vertical walls?

A

Afafks1231321321652020-12-26 12:55:59

JavaScript

Afafks123132132165, 2020-12-26 12:55:59

Here I am writing raycasting and I want to make the game show only vertical walls. I made this code but it is crooked. How can I achieve the correct result? The code is below.

<!DOCTYPE html>
<html>
<head>
  <title>Raycast</title>
</head>
<body>
  <canvas id = "canvas" width = "640" height = "480"></canvas>
  <style>#canvas{border:1px solid black;}</style>
  <script type="text/javascript">
  	document.getElementById("canvas");
  	var ctx = canvas.getContext("2d");
    
    x = 160;
    y = 240;
    bx = 0;
    by = 0;
    move = 0;
    left = 0;
    right = 0;
    down = 0;
    angle = 10;
    step = 0;
    working = 0;
    length = 0;
    drawline = [];
    raydalnostis = [];
    rays = [];
    blocks = [];
    map = [1,1,1,1,1,1,1,1,1,1,
           1,0,0,1,0,0,0,0,0,1,
           1,0,0,1,0,0,0,0,0,1,
           1,0,0,1,0,0,0,0,0,1,
           1,0,0,0,1,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,1,
           1,1,1,1,1,1,1,1,1,1];
    for(i = 0;i < 20;i++){
      rays.push(i);
    }
    for(i = 0;i < map.length;i++){
      if(map[i] == 1){
        blocks.push({x:bx,y:by});
      }
      bx+=32;
      if(bx > 288){
        by +=32;
        bx = 0;
      }
    }
    for(i = 0;i < 20;i++){
      raydalnostis.push(0);
    }
    for(i = 0;i < 20;i++){
      drawline.push(0);
    }
    document.addEventListener("keydown",function(e){
      if(e.keyCode == 38){
      	move = 1;
      }
      if(e.keyCode == 39){
      	right = 1;
      }
      if(e.keyCode == 40){
      	down = 1;
      }
      if(e.keyCode == 37){
      	left = 1;
      }
    });
    document.addEventListener("keyup",function(e){
      if(e.keyCode == 38){
      	move = 0;
      }
      if(e.keyCode == 39){
      	right = 0;
      }
      if(e.keyCode == 40){
      	down = 0;
      }
      if(e.keyCode == 37){
      	left = 0;
      }
    });
    ctx.strokeStyle = "red";
  	function game(){
      ctx.clearRect(0,0,640,480);
      ctx.fillStyle = "black";
      for(i in blocks){
        ctx.fillRect(blocks[i].x,blocks[i].y,32,32);
      }
      ctx.fillRect(x,y,1,1);
      for(i = 0;i < rays.length;i++){
        working = 0;
        length = 300;
        for(j = 0;j < 300;j++){
          var rayx = Math.cos(rays[i]/180*Math.PI)*j+x;
          var rayy = Math.sin(rays[i]/180*Math.PI)*j+y;
          length-=1;
          for(q in blocks){
            if(rayx >= blocks[q].x && rayx <= blocks[q].x+32 && y <= blocks[q].y+32 && y >= blocks[q].y){
              drawline[i] = 1;
              raydalnostis[i] = length;
              working = 1;
              break;
            }else{
              drawline[i] = 0;
            }
          }
          if(working == 1){
            break;
          }
        }
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(rayx,rayy);
        ctx.stroke();
        ctx.closePath();
        if(left == 1){
          rays[i]-=2;
        }
        if(right == 1){
          rays[i]+=2;
        }
      }
      if(left == 1){
        angle-=2;
      }
      if(right == 1){
        angle+=2;
      }
      var rayx = Math.cos(angle/180*Math.PI)*100+x;
      var rayy = Math.sin(angle/180*Math.PI)*100+y;
      if(move == 1){
        x+=(rayx - x)/100;
        y+=(rayy - y)/100;
      }
      if(down == 1){
        x+=-(rayx - x)/100;
        y+=-(rayy - y)/100;
      }
      step = 0;
      for(i = 0;i < 20;i++){
        if(drawline[i] == 1){
          ctx.fillStyle = "rgb("+raydalnostis[i]/2+",0,0)";
          ctx.fillRect(320+step,240-raydalnostis[i]/2,16,raydalnostis[i]);
        }
        step+=16;
      }
  	} 

  	setInterval(game,20);
  </script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

mayton2019, 2020-12-26
@mayton2019

Here you are weirdo. You say - I write raycasting. And the code is crooked. So either you do not make a curve. Or tell me honestly what you copied in such and such an Internet resource.
This will probably help the questionnaire to figure out where the desired function is.