@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 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]

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.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);
}
}
}

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>
<meta charset="utf-8">
<title>1</title>
<body>
<canvas id="canvas"></canvas>
<script>

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

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

``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>1</title>
<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 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]

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.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);
}
}
}

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
Front-end week-junior developer
Или же можно отдельными файлами первый будет index.html и в нём будет такой код:
``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>1</title>
<body>
<canvas id="canvas"></canvas>
<script src="script"></script">
</body>
</html>``````

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

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

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

Похожие вопросы
от 150 000 до 180 000 ₽
RUVOD Москва
от 150 000 до 200 000 ₽
от 110 000 ₽
15 авг. 2020, в 01:45
95000 руб./за проект
14 авг. 2020, в 22:47
15000 руб./за проект
14 авг. 2020, в 22:40
15000 руб./за проект