如何将独立的js代码组合成相关的代码？

如何解决如何将独立的js代码组合成相关的代码？

我试图合并两个开源代码，但是当我完成合并并开始在本地计算机上运行时，服务器始终显示意外的令牌。我正在使用canvas元素制作诸如skribbl / drawize之类的绘制和访客.io游戏，这是有错误的代码：

import { debounce } from 'throttle-debounce';
import { getAsset } from './assets';
import { getCurrentState } from './state';

// Replaces main menu rendering with game rendering.
export function startRendering() {
  clearInterval(renderInterval);
  renderInterval = setInterval(render,1000 / 60);
}

// Replaces game rendering with main menu rendering.
export function stopRendering() {
  clearInterval(renderInterval);
  renderInterval = setInterval(renderMainMenu,1000 / 60);
}

const Constants = require('../shared/constants');

const { PEN_RADIUS,PEN_SIZE,MAP_SIZE } = Constants;

// Get the canvas graphics context
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');
setCanvasDimensions();

function setCanvasDimensions() {
  // On small screens (e.g. phones),we want to "zoom out" so players can still see at least
  // 800 in-game units of width.
  const scaleRatio = Math.max(1,800 / window.innerWidth);
  canvas.width = scaleRatio * window.innerWidth;
  canvas.height = scaleRatio * window.innerHeight;
}

window.addEventListener('resize',debounce(40,setCanvasDimensions));

function render() {
  const { pen } = getCurrentState();
  if (!pen) {
    return;
  }

  // Draw background
  renderBackground(me.x,me.y);
  
  function renderBackground(x,y) {
  const backgroundX = MAP_SIZE / 2 - x + canvas.width / 2;
  const backgroundY = MAP_SIZE / 2 - y + canvas.height / 2;
  const backgroundGradient = context.createradialGradient(
    backgroundX,backgroundY,MAP_SIZE / 10,backgroundX,MAP_SIZE / 2,);
  backgroundGradient.addColorStop(0,'black');
  backgroundGradient.addColorStop(1,'gray');
  context.fillStyle = backgroundGradient;
  context.fillRect(0,canvas.width,canvas.height);
}

  // Draw boundaries
  context.strokeStyle = 'black';
  context.linewidth = 1;
  context.strokeRect(canvas.width / 2 - me.x,canvas.height / 2 - me.y,MAP_SIZE,MAP_SIZE);

function renderdraw() {
        ctx.beginPath();
        ctx.moveto(prevX,prevY);
        ctx.lineto(currX,currY);
        ctx.strokeStyle = x;
        ctx.linewidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function rendererase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0,w,h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function findxy(res,e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX,currY,2,2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }

function renderMainMenu() {
  const t = Date.Now() / 7500;
  const x = MAP_SIZE / 2 + 800 * Math.cos(t);
  const y = MAP_SIZE / 2 + 800 * Math.sin(t);
  renderBackground(x,y);
}

let renderInterval = setInterval(renderMainMenu,1000 / 60);

此外，我是stackoverflow的新手，如果我做错了任何事情，对此表示抱歉。查看Github

上的孔文件

解决方法

您缺少两个括号：）一个用于 findxy（），另一个用于 render（）

import { debounce } from 'throttle-debounce';
import { getAsset } from './assets';
import { getCurrentState } from './state';

// Replaces main menu rendering with game rendering.
export function startRendering () {
  clearInterval(renderInterval);
  renderInterval = setInterval(render,1000 / 60);
}

// Replaces game rendering with main menu rendering.
export function stopRendering () {
  clearInterval(renderInterval);
  renderInterval = setInterval(renderMainMenu,1000 / 60);
}

const Constants = require('../shared/constants');

const { PEN_RADIUS,PEN_SIZE,MAP_SIZE } = Constants;

// Get the canvas graphics context
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');
setCanvasDimensions();

function setCanvasDimensions () {
  // On small screens (e.g. phones),we want to "zoom out" so players can still see at least
  // 800 in-game units of width.
  const scaleRatio = Math.max(1,800 / window.innerWidth);
  canvas.width = scaleRatio * window.innerWidth;
  canvas.height = scaleRatio * window.innerHeight;
}

window.addEventListener('resize',debounce(40,setCanvasDimensions));

function render () {
  const { pen } = getCurrentState();
  if (!pen) {
    return;
  }

  // Draw background
  renderBackground(me.x,me.y);
}

function renderBackground (x,y) {
  const backgroundX = MAP_SIZE / 2 - x + canvas.width / 2;
  const backgroundY = MAP_SIZE / 2 - y + canvas.height / 2;
  const backgroundGradient = context.createRadialGradient(
    backgroundX,backgroundY,MAP_SIZE / 10,backgroundX,MAP_SIZE / 2,);
  backgroundGradient.addColorStop(0,'black');
  backgroundGradient.addColorStop(1,'gray');
  context.fillStyle = backgroundGradient;
  context.fillRect(0,canvas.width,canvas.height);
}

// Draw boundaries
context.strokeStyle = 'black';
context.lineWidth = 1;
context.strokeRect(canvas.width / 2 - me.x,canvas.height / 2 - me.y,MAP_SIZE,MAP_SIZE);

function renderdraw () {
  ctx.beginPath();
  ctx.moveTo(prevX,prevY);
  ctx.lineTo(currX,currY);
  ctx.strokeStyle = x;
  ctx.lineWidth = y;
  ctx.stroke();
  ctx.closePath();
}

function rendererase () {
  var m = confirm("Want to clear");
  if (m) {
    ctx.clearRect(0,w,h);
    document.getElementById("canvasimg").style.display = "none";
  }
}

function findxy (res,e) {
  if (res == 'down') {
    prevX = currX;
    prevY = currY;
    currX = e.clientX - canvas.offsetLeft;
    currY = e.clientY - canvas.offsetTop;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.beginPath();
      ctx.fillStyle = x;
      ctx.fillRect(currX,currY,2,2);
      ctx.closePath();
      dot_flag = false;
    }
  }
  if (res == 'up' || res == "out") {
    flag = false;
  }
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - canvas.offsetLeft;
      currY = e.clientY - canvas.offsetTop;
      draw();
    }
  }
}

function renderMainMenu () {
  const t = Date.now() / 7500;
  const x = MAP_SIZE / 2 + 800 * Math.cos(t);
  const y = MAP_SIZE / 2 + 800 * Math.sin(t);
  renderBackground(x,y);
}

let renderInterval = setInterval(renderMainMenu,1000 / 60);

注意：如果您刚刚开始编码，可以复制并查看其他代码，但是我个人认为您应该编写所有内容，而不是复制/粘贴（ctrl-c，ctrl-v）。您还应尝试理解每个功能以及缓慢复制它们的目的。不要试图复制和粘贴块并将所有内容组合在一起，以希望它能起作用。无论如何，祝你好运，继续保持好奇心，尝试一些有趣的事情。