28m28misha10
@28m28misha10
Люблю кодить

Как соединить два скрипта?

У меня есть два скрипта:
var map;
var canvas;
var overlay;
//variables initiated at the bottom of the code...

var pi=Math.PI;

var total=0;

Number.prototype.range=function(){
	return (this+2*pi)%(2*pi);
}
Number.prototype.roundC=function(){
	return Math.round(this*100)/100;
}

var total=0;

var samples=200;


var arena=[];
arena[0]=[1,1,1,1,1,1,1,1,1,1]
arena[1]=[1,0,0,0,0,0,0,0,0,1]
arena[2]=[1,0,0,1,0,1,1,1,0,1]
arena[3]=[1,0,1,0,0,0,0,1,0,1]
arena[4]=[1,0,0,0,0,1,0,1,0,1]
arena[5]=[1,0,1,1,0,0,0,0,0,1]
arena[6]=[1,0,0,1,0,1,1,1,0,1]
arena[7]=[1,1,0,1,0,0,0,1,0,1]
arena[8]=[1,0,0,1,0,1,0,0,0,1]
arena[9]=[1,1,1,1,1,1,1,1,1,1]


var playerPos=[4,4]; // x,y (from top left)
var playerDir=0.4; // theta, facing right=0=2pi
var playerPosZ=1;
var key=[0,0,0,0,0]; // left, right, up, down

var playerVelY=0;


var face=[];

function wallDistance(theta){

	var data=[];
	face=[];

	var x = playerPos[0], y = playerPos[1];
	var deltaX, deltaY;
	var distX, distY;
	var stepX, stepY;
	var mapX, mapY
	
	var atX=Math.floor(x), atY=Math.floor(y);

	var thisRow=-1;
	var thisSide=-1;

	var lastHeight=0;

	for (var i=0; i<samples; i++) {
		theta+=pi/(3*samples)+2*pi;
		theta%=2*pi;

		mapX = atX, mapY = atY;

		deltaX=1/Math.cos(theta);
		deltaY=1/Math.sin(theta);

		if (deltaX>0) {
			stepX = 1;
			distX = (mapX + 1 - x) * deltaX;
		}
		else {
			stepX = -1;
			distX = (x - mapX) * (deltaX*=-1);		
		}
		if (deltaY>0) {
			stepY = 1;
			distY = (mapY + 1 - y) * deltaY;
		}
		else {
			stepY = -1;
			distY = (y - mapY) * (deltaY*=-1);
		}
		

		for (var j=0; j<20; j++) {
			if (distX < distY) {
				mapX += stepX;
				if (arena[mapX][mapY]) {
					if (thisRow!=mapX || thisSide!=0) {
						if (i>0) {
							data.push(i);
							data.push(lastHeight);
						}
						data.push(i);
						data.push(distX);
						thisSide=0;
						thisRow=mapX;
						face.push(1+stepX);
					}
					lastHeight=distX;
					break;
				}
				distX += deltaX;
			}
			else {
				mapY += stepY;
				if (arena[mapX][mapY]) {
					if (thisRow!=mapY || thisSide!=1) {
						if (i>0) {
							data.push(i);
							data.push(lastHeight);
						}	
						data.push(i);
						data.push(distY);
						thisSide=1;
						thisRow=mapY;
						face.push(2+stepY)
					}
					lastHeight=distY;
					break;
				}
				distY += deltaY;
			}
		}
	}
	data.push(i);
	data.push(lastHeight);
	
	return data;
}


function drawCanvas(){

	canvas.clearRect(0,0,400, 300);

	var theta = playerDir-pi/6;

	var wall=wallDistance(theta);

	map.beginPath();
	map.clearRect(0,0,80,80);
	map.fillStyle="#3366CC";
	map.arc(playerPos[0]*8, playerPos[1]*8, 3, 0, 2*pi, true);
	map.fill();
	map.beginPath();
	map.moveTo(8*playerPos[0], 8*playerPos[1]);


	var linGrad;
	
	var tl,tr,bl,br;
	
	var theta1,theta2,fix1,fix2;
	
	for (var i=0; i<wall.length; i+=4) {

		theta1=playerDir-pi/6 + pi*wall[i]/(3*samples);
		theta2=playerDir-pi/6 + pi*wall[i+2]/(3*samples);
		
		fix1 = Math.cos(theta1-playerDir);
		fix2 = Math.cos(theta2-playerDir);

		var h=2-playerPosZ;

		var wallH1=100/(wall[i+1]*fix1);
		var wallH2=100/(wall[i+3]*fix2);

		tl=[wall[i]*2, 150-wallH1*h];
		tr=[wall[i+2]*2, 150-wallH2*h]
		br=[wall[i+2]*2, tr[1]+wallH2*2];
		bl=[wall[i]*2, tl[1]+wallH1*2]

		var shade1=Math.floor(wallH1*2+20); if (shade1>255) shade1=255;
		var shade2=Math.floor(wallH2*2+20); if (shade2>255) shade2=255;

		linGrad = canvas.createLinearGradient(tl[0],0,tr[0],0);
		linGrad.addColorStop(0, 'rgba('+(face[i/4]%2==0 ? shade1 : 0)+','+(face[i/4]==1 ? shade1 : 0)+','+(face[i/4]==2 ? 0 : shade1)+',1.0)');
		linGrad.addColorStop(1, 'rgba('+(face[i/4]%2==0 ? shade2 : 0)+','+(face[i/4]==1 ? shade2 : 0)+','+(face[i/4]==2 ? 0 : shade2)+',1.0)');

		canvas.beginPath();
		canvas.moveTo(tl[0], tl[1]);
		canvas.lineTo(tr[0], tr[1]);
		canvas.lineTo(br[0], br[1]);
		canvas.lineTo(bl[0], bl[1]);
		canvas.fillStyle = linGrad;
		canvas.fill();

	
		map.lineTo(playerPos[0]*8+Math.cos(theta1)*(wall[i+1])*8, playerPos[1]*8+Math.sin(theta1)*(wall[i+1])*8);
		map.lineTo(playerPos[0]*8+Math.cos(theta2)*(wall[i+3])*8, playerPos[1]*8+Math.sin(theta2)*(wall[i+3])*8);

		
	}
	map.fillStyle="#FF0000"
	map.fill();
	
}

function nearWall(x,y){
	var xx,yy;
	if (isNaN(x)) x=playerPos[0];
	if (isNaN(y)) y=playerPos[1];
	for (var i=-0.1; i<=0.1; i+=0.2) {
		xx=Math.floor(x+i)
		for (var j=-0.1; j<=0.1; j+=0.2) {
			yy=Math.floor(y+j);
			if (arena[xx][yy]) return true;
		}
	}
	return false;
}

var xOff = 0;
var yOff = 0;
function wobbleGun(){
	var mag=playerVelY;
    xOff = (10+Math.cos(total/6.23)*mag*90)
    yOff = (10+Math.cos(total/5)*mag*90)
	overlay.style.backgroundPosition = xOff + "px " + yOff + "px";
}


var jumpCycle=0;

var audio = window.Audio && new Audio("/img/canvascape/shoot.wav");

function shoot()
{
	audio && audio.play();
	canvas.save();
	canvas.strokeStyle = "#FFFF00";
	canvas.beginPath();
    
	canvas.moveTo(190+xOff, 140+yOff);
	canvas.lineTo(250+xOff, 200+yOff);
	canvas.closePath();
	canvas.stroke();
	canvas.restore();
	setTimeout('drawCanvas()',100);
}


function update(){

	total++;

	var change=false;

	if (jumpCycle) {
		jumpCycle--;
		change=true;
		playerPosZ = 1 + jumpCycle*(20-jumpCycle)/110;
	}
	else if (key[4]) jumpCycle=20;
	
	if (key[0]) {
		if (!key[1]) {
			playerDir-=0.07; //left
			change=true;
		}
	}
	else if (key[1]) {
		playerDir+=0.07; //right
		change=true;
	}

	if (change) {
		playerDir+=2*pi;
		playerDir%=2*pi;
		document.getElementById("sky").style.backgroundPosition=Math.floor(1-playerDir/(2*pi)*2400)+"px 0";
	}

	if (key[2] && !key[3]) {
		if (playerVelY<0.1) playerVelY += 0.02;
	}
	else if (key[3] && !key[2]) {
		if (playerVelY>-0.1) playerVelY -= 0.02;
	}
	else {
		if (playerVelY<-0.02) playerVelY += 0.015;
		else if (playerVelY>0.02) playerVelY -= 0.015;
		else playerVelY=0;
	}
	
	
	if (playerVelY!=0) {

		var oldX=playerPos[0];;
		var oldY=playerPos[1];		
		var newX=oldX+Math.cos(playerDir)*playerVelY;
		var newY=oldY+Math.sin(playerDir)*playerVelY;

		if (!nearWall(newX, oldY)) {
			playerPos[0]=newX;
			oldX=newX;
			change=true;
		}
		if (!nearWall(oldX, newY)) {
			playerPos[1]=newY;
			change=true;
		}

	}
	
	if (playerVelY) wobbleGun();
	if (change) drawCanvas();

}


function changeKey(which, to){
	switch (which){
		case 65:case 37: key[0]=to; break; // left
		case 87: case 38: key[2]=to; break; // up
		case 68: case 39: key[1]=to; break; // right
		case 83: case 40: key[3]=to; break;// down
		case 32: key[4]=to; break; // space bar;
		case 17: key[5]=to; break; // ctrl
		case 66: if (to) { shoot() } break; // b
	}
}
document.onkeydown=function(e){changeKey((e||window.event).keyCode, 1);}
document.onkeyup=function(e){changeKey((e||window.event).keyCode, 0);}


function initUnderMap(){
	var underMap=document.getElementById("underMap").getContext("2d");
	underMap.fillStyle="#FFF";
	underMap.fillRect(0,0, 200, 200);
	underMap.fillStyle="#444";
	for (var i=0; i<arena.length; i++) {
		for (var j=0; j<arena[i].length; j++) {
			if (arena[i][j]) underMap.fillRect(i*8, j*8, 8, 8);
		}	
	}
}


window.onload=function(){
	var ele = document.getElementById("map");
	if (!ele.getContext)
	{
	  alert('An error occured creating a Canvas 2D context. This may be because you are using an old browser, if not please contact me and I\'ll see if I can fix the error.');
	  return;
	}
	map=ele.getContext("2d");
	canvas=document.getElementById("canvas").getContext("2d");
	overlay=document.getElementById("overlay");
	document.getElementById("sky").style.backgroundPosition=Math.floor(-playerDir/(2*pi)*2400)+"px 0";
	drawCanvas();
	initUnderMap();
	setInterval(update, 35);
}

и
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>

  </script>
 </body>
</html>
</spoiler>

Вопрос: как их соединить?
пробовал разными способами не получается
код взят здесь
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 2
sharomet
@sharomet
Front-End
Ну судя по вашему js коду у вас в html отсутствуют такие элементы как #map, #sky, #underMap и файл /img/canvascape/shoot.wav

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <canvas id="map"></canvas>
  <canvas id="sky"></canvas>
  <canvas id="underMap"></canvas>
  <script>
	var map;
var canvas;
var overlay;
//variables initiated at the bottom of the code...

var pi=Math.PI;

var total=0;

Number.prototype.range=function(){
  return (this+2*pi)%(2*pi);
}
Number.prototype.roundC=function(){
  return Math.round(this*100)/100;
}

var total=0;

var samples=200;


var arena=[];
arena[0]=[1,1,1,1,1,1,1,1,1,1]
arena[1]=[1,0,0,0,0,0,0,0,0,1]
arena[2]=[1,0,0,1,0,1,1,1,0,1]
arena[3]=[1,0,1,0,0,0,0,1,0,1]
arena[4]=[1,0,0,0,0,1,0,1,0,1]
arena[5]=[1,0,1,1,0,0,0,0,0,1]
arena[6]=[1,0,0,1,0,1,1,1,0,1]
arena[7]=[1,1,0,1,0,0,0,1,0,1]
arena[8]=[1,0,0,1,0,1,0,0,0,1]
arena[9]=[1,1,1,1,1,1,1,1,1,1]


var playerPos=[4,4]; // x,y (from top left)
var playerDir=0.4; // theta, facing right=0=2pi
var playerPosZ=1;
var key=[0,0,0,0,0]; // left, right, up, down

var playerVelY=0;


var face=[];

function wallDistance(theta){

  var data=[];
  face=[];

  var x = playerPos[0], y = playerPos[1];
  var deltaX, deltaY;
  var distX, distY;
  var stepX, stepY;
  var mapX, mapY
  
  var atX=Math.floor(x), atY=Math.floor(y);

  var thisRow=-1;
  var thisSide=-1;

  var lastHeight=0;

  for (var i=0; i<samples; i++) {
    theta+=pi/(3*samples)+2*pi;
    theta%=2*pi;

    mapX = atX, mapY = atY;

    deltaX=1/Math.cos(theta);
    deltaY=1/Math.sin(theta);

    if (deltaX>0) {
      stepX = 1;
      distX = (mapX + 1 - x) * deltaX;
    }
    else {
      stepX = -1;
      distX = (x - mapX) * (deltaX*=-1);		
    }
    if (deltaY>0) {
      stepY = 1;
      distY = (mapY + 1 - y) * deltaY;
    }
    else {
      stepY = -1;
      distY = (y - mapY) * (deltaY*=-1);
    }
    

    for (var j=0; j<20; j++) {
      if (distX < distY) {
        mapX += stepX;
        if (arena[mapX][mapY]) {
          if (thisRow!=mapX || thisSide!=0) {
            if (i>0) {
              data.push(i);
              data.push(lastHeight);
            }
            data.push(i);
            data.push(distX);
            thisSide=0;
            thisRow=mapX;
            face.push(1+stepX);
          }
          lastHeight=distX;
          break;
        }
        distX += deltaX;
      }
      else {
        mapY += stepY;
        if (arena[mapX][mapY]) {
          if (thisRow!=mapY || thisSide!=1) {
            if (i>0) {
              data.push(i);
              data.push(lastHeight);
            }	
            data.push(i);
            data.push(distY);
            thisSide=1;
            thisRow=mapY;
            face.push(2+stepY)
          }
          lastHeight=distY;
          break;
        }
        distY += deltaY;
      }
    }
  }
  data.push(i);
  data.push(lastHeight);
  
  return data;
}


function drawCanvas(){

  canvas.clearRect(0,0,400, 300);

  var theta = playerDir-pi/6;

  var wall=wallDistance(theta);

  map.beginPath();
  map.clearRect(0,0,80,80);
  map.fillStyle="#3366CC";
  map.arc(playerPos[0]*8, playerPos[1]*8, 3, 0, 2*pi, true);
  map.fill();
  map.beginPath();
  map.moveTo(8*playerPos[0], 8*playerPos[1]);


  var linGrad;
  
  var tl,tr,bl,br;
  
  var theta1,theta2,fix1,fix2;
  
  for (var i=0; i<wall.length; i+=4) {

    theta1=playerDir-pi/6 + pi*wall[i]/(3*samples);
    theta2=playerDir-pi/6 + pi*wall[i+2]/(3*samples);
    
    fix1 = Math.cos(theta1-playerDir);
    fix2 = Math.cos(theta2-playerDir);

    var h=2-playerPosZ;

    var wallH1=100/(wall[i+1]*fix1);
    var wallH2=100/(wall[i+3]*fix2);

    tl=[wall[i]*2, 150-wallH1*h];
    tr=[wall[i+2]*2, 150-wallH2*h]
    br=[wall[i+2]*2, tr[1]+wallH2*2];
    bl=[wall[i]*2, tl[1]+wallH1*2]

    var shade1=Math.floor(wallH1*2+20); if (shade1>255) shade1=255;
    var shade2=Math.floor(wallH2*2+20); if (shade2>255) shade2=255;

    linGrad = canvas.createLinearGradient(tl[0],0,tr[0],0);
    linGrad.addColorStop(0, 'rgba('+(face[i/4]%2==0 ? shade1 : 0)+','+(face[i/4]==1 ? shade1 : 0)+','+(face[i/4]==2 ? 0 : shade1)+',1.0)');
    linGrad.addColorStop(1, 'rgba('+(face[i/4]%2==0 ? shade2 : 0)+','+(face[i/4]==1 ? shade2 : 0)+','+(face[i/4]==2 ? 0 : shade2)+',1.0)');

    canvas.beginPath();
    canvas.moveTo(tl[0], tl[1]);
    canvas.lineTo(tr[0], tr[1]);
    canvas.lineTo(br[0], br[1]);
    canvas.lineTo(bl[0], bl[1]);
    canvas.fillStyle = linGrad;
    canvas.fill();

  
    map.lineTo(playerPos[0]*8+Math.cos(theta1)*(wall[i+1])*8, playerPos[1]*8+Math.sin(theta1)*(wall[i+1])*8);
    map.lineTo(playerPos[0]*8+Math.cos(theta2)*(wall[i+3])*8, playerPos[1]*8+Math.sin(theta2)*(wall[i+3])*8);

    
  }
  map.fillStyle="#FF0000"
  map.fill();
  
}

function nearWall(x,y){
  var xx,yy;
  if (isNaN(x)) x=playerPos[0];
  if (isNaN(y)) y=playerPos[1];
  for (var i=-0.1; i<=0.1; i+=0.2) {
    xx=Math.floor(x+i)
    for (var j=-0.1; j<=0.1; j+=0.2) {
      yy=Math.floor(y+j);
      if (arena[xx][yy]) return true;
    }
  }
  return false;
}

var xOff = 0;
var yOff = 0;
function wobbleGun(){
  var mag=playerVelY;
    xOff = (10+Math.cos(total/6.23)*mag*90)
    yOff = (10+Math.cos(total/5)*mag*90)
  overlay.style.backgroundPosition = xOff + "px " + yOff + "px";
}


var jumpCycle=0;

var audio = window.Audio && new Audio("/img/canvascape/shoot.wav");

function shoot()
{
  audio && audio.play();
  canvas.save();
  canvas.strokeStyle = "#FFFF00";
  canvas.beginPath();
    
  canvas.moveTo(190+xOff, 140+yOff);
  canvas.lineTo(250+xOff, 200+yOff);
  canvas.closePath();
  canvas.stroke();
  canvas.restore();
  setTimeout('drawCanvas()',100);
}


function update(){

  total++;

  var change=false;

  if (jumpCycle) {
    jumpCycle--;
    change=true;
    playerPosZ = 1 + jumpCycle*(20-jumpCycle)/110;
  }
  else if (key[4]) jumpCycle=20;
  
  if (key[0]) {
    if (!key[1]) {
      playerDir-=0.07; //left
      change=true;
    }
  }
  else if (key[1]) {
    playerDir+=0.07; //right
    change=true;
  }

  if (change) {
    playerDir+=2*pi;
    playerDir%=2*pi;
    document.getElementById("sky").style.backgroundPosition=Math.floor(1-playerDir/(2*pi)*2400)+"px 0";
  }

  if (key[2] && !key[3]) {
    if (playerVelY<0.1) playerVelY += 0.02;
  }
  else if (key[3] && !key[2]) {
    if (playerVelY>-0.1) playerVelY -= 0.02;
  }
  else {
    if (playerVelY<-0.02) playerVelY += 0.015;
    else if (playerVelY>0.02) playerVelY -= 0.015;
    else playerVelY=0;
  }
  
  
  if (playerVelY!=0) {

    var oldX=playerPos[0];;
    var oldY=playerPos[1];		
    var newX=oldX+Math.cos(playerDir)*playerVelY;
    var newY=oldY+Math.sin(playerDir)*playerVelY;

    if (!nearWall(newX, oldY)) {
      playerPos[0]=newX;
      oldX=newX;
      change=true;
    }
    if (!nearWall(oldX, newY)) {
      playerPos[1]=newY;
      change=true;
    }

  }
  
  if (playerVelY) wobbleGun();
  if (change) drawCanvas();

}


function changeKey(which, to){
  switch (which){
    case 65:case 37: key[0]=to; break; // left
    case 87: case 38: key[2]=to; break; // up
    case 68: case 39: key[1]=to; break; // right
    case 83: case 40: key[3]=to; break;// down
    case 32: key[4]=to; break; // space bar;
    case 17: key[5]=to; break; // ctrl
    case 66: if (to) { shoot() } break; // b
  }
}
document.onkeydown=function(e){changeKey((e||window.event).keyCode, 1);}
document.onkeyup=function(e){changeKey((e||window.event).keyCode, 0);}


function initUnderMap(){
  var underMap=document.getElementById("underMap").getContext("2d");
  underMap.fillStyle="#FFF";
  underMap.fillRect(0,0, 200, 200);
  underMap.fillStyle="#444";
  for (var i=0; i<arena.length; i++) {
    for (var j=0; j<arena[i].length; j++) {
      if (arena[i][j]) underMap.fillRect(i*8, j*8, 8, 8);
    }	
  }
}


window.onload=function(){
  var ele = document.getElementById("map");
  if (!ele.getContext)
  {
    alert('An error occured creating a Canvas 2D context. This may be because you are using an old browser, if not please contact me and I\'ll see if I can fix the error.');
    return;
  }
  map=ele.getContext("2d");
  canvas=document.getElementById("canvas").getContext("2d");
  overlay=document.getElementById("overlay");
  document.getElementById("sky").style.backgroundPosition=Math.floor(-playerDir/(2*pi)*2400)+"px 0";
  drawCanvas();
  initUnderMap();
  setInterval(update, 35);
}
  </script>
 </body>
</html>
Ответ написан
Belartale
@Belartale
Front-end week-junior developer
Или же можно отдельными файлами первый будет index.html и в нём будет такой код:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="script"></script">
 </body>
</html>

Вот это не нужно </spoiler> оно используется для скрытия текста и внутри тэга body, а за пределами html никак нельзя выводить!

А вот второй код (тот что самый большой) для него нужно создать файл script.js и туда скопировать в этот файл. Ну и как выше указал Alexander, нужны теги canvas с id.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 авг. 2020, в 12:03
15000 руб./за проект
08 авг. 2020, в 11:31
500 руб./за проект
08 авг. 2020, в 09:16
1000 руб./за проект