JavaScript の Unexpected end of input について

Question

JavaScript初心者です。
以下のコードが、Uncaught SyntaxError: Unexpected end of input をはいて動きません。(最終行の animate(); です)
色々試したのですが、原因が分からなくなりハマっています。初歩的な質問で申し訳ないのですが、どこに問題があるのかご指摘いただけないでしょうか。

以下にコードを載せます。
一応全コードを載せますが、おそらく問題がある個所は最後の数行だと思われます。

canvas 上で複数の円を動かして、カーソルが近い円を大きくするアニメーションを実装しようとしています。

const canvas = document.querySelector("canvas");
const mouse = {
	x : undefined,
	y : undefined,
};
const number = 30
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const c = canvas.getContext("2d");
const r = 8;

function cirlce(x, y, radius, dx_veloOFx, dy_veloOFy) {
	this.x = x;
	this.y = y;
	this.r = radius;
	this.dx = dx_veloOFx;
	this.dy = dy_veloOFy;

	this.draw = function(){
		c.beginPath();
		c.arc(this.x, this.y, r, 0, Math.PI*2, false);
		c.fill();
	};

	this.motion = function(){
	if (this.x + this.r >= innerWidth || this.x - this.r <= 0){
		this.dx = -this.dx; };
	if (this.y + this.r >= innerHeight || this.y - this.r <= 0){
		this.dy = -this.dy; };
	this.x += this.dx;
	this.y += this.dy;
	};

	this.judge = function(){
		if( (this.x - mouse.x)^2 + (this.y - mouse.y)^2 <= 1000){
			this.r = 40;
		};
		if( (this.x - mouse.x)^2 + (this.y - mouse.y)^2 > 1000){
			this.r = 8;
		};
};

function animate() {
	requestAnimationFrame(animate);
	c.clearRect(0, 0, innerWidth, innerHeight);

	for(let i = 0; i<number; i++){
		cirArray[i].draw();
		cirArray[i].motion();
		cirArray[i].judge();
	};
};

const cirArray = [];

for (let i = 0; i< number; i++){
	let x = Math.random()*innerWidth,
		y = Math.random()*innerHeight,
		dx = (Math.random()-0.5)*8,
		dy = (Math.random()-0.5)*8,

	hako = new cirlce(x, y, r, dx, dy);
	cirArray.push(hako);
};

window.addEevntLisnter('mousemove',
	function(event){
		mouse.x = event.x;
		mouse.y = event.y;
	})

animate();

Answer 1

どこからコードを写経したのかは知りませんが, アルゴリズムそのものに問題はなく, 単にあなたのコードの写し間違えのようです.

• {と}の対応に一箇所記述漏れがあります.
• メソッド名に間違いがあります. addEevntLisnterでなく正しくはaddEventListenerです.

これで一応アニメーションし始めますが、意図した動作となっているかはこちらでは確認のしようがありません（多分まだマウス位置の判定処理に問題があるはず）ので、今一度コードの内容を目を皿のようにして確認して下さい.

const canvas = document.querySelector("canvas");
const mouse = {
    x : undefined,
    y : undefined,
};
const number = 30
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const c = canvas.getContext("2d");
const r = 8;

function cirlce(x, y, radius, dx_veloOFx, dy_veloOFy) {
    this.x = x;
    this.y = y;
    this.r = radius;
    this.dx = dx_veloOFx;
    this.dy = dy_veloOFy;

    this.draw = function(){
        c.beginPath();
        c.arc(this.x, this.y, r, 0, Math.PI*2, false);
        c.fill();
    };

    this.motion = function(){
    if (this.x + this.r >= innerWidth || this.x - this.r <= 0){
        this.dx = -this.dx; };
    if (this.y + this.r >= innerHeight || this.y - this.r <= 0){
        this.dy = -this.dy; };
    this.x += this.dx;
    this.y += this.dy;
    };

    this.judge = function(){
        if( (this.x - mouse.x)^2 + (this.y - mouse.y)^2 <= 1000){
            this.r = 40;
        };
        if( (this.x - mouse.x)^2 + (this.y - mouse.y)^2 > 1000){
            this.r = 8;
        };
 }//←ここにカッコが足りない！
};

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);

    for(let i = 0; i<number; i++){
        cirArray[i].draw();
        cirArray[i].motion();
        cirArray[i].judge();
    };
};

const cirArray = [];

for (let i = 0; i< number; i++){
    let x = Math.random()*innerWidth,
        y = Math.random()*innerHeight,
        dx = (Math.random()-0.5)*8,
        dy = (Math.random()-0.5)*8,

    hako = new cirlce(x, y, r, dx, dy);
    cirArray.push(hako);
};

//window.addEevntLisnter('mousemove',
window.addEventListener('mousemove',
    function(event){
        mouse.x = event.x;
        mouse.y = event.y;
    })

animate();

Comments

[退会済みユーザー]

ありがとうございます。解決しました。
まさに指摘していただいた箇所の "}"漏れと、メソッド名のタイポでした。

動かしてみたのですが意図した挙動ではないので改善が必要ですね…
もう少し取り組んでみます。

このような質問に答えてくださりありがとうございました！

Answer 2

addEevntLisnterではなくaddEventListenerです。

あと、this.judge = function(){ の閉じかっこがないですね。

Comments

[退会済みユーザー]

ありがとうございます。
一つの名前で二か所もタイポしてますね…