JavaScript is not working

Hosting Support
1

Website URL

H5

Error Message

ncaught SyntaxError: Identifier ‘playerState’ has already been declared (at script.js:1:1)

Other Information

The javascript can work well in the live server or the local host without error. But here, the Console gives me error. Here are my codes:

let playerState = "fall";
const dropdown = document.getElementById("animations");
dropdown.addEventListener("change", function(e) {
    playerState = e.target.value;
});

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const CANVAS_WIDTH = canvas.width = 600;
const CANVAS_HEIGHT = canvas.height = 600;
const playerImg = new Image();
playerImg.src = "项目1.png";
const scriptWidth = 575;
const scriptHeight = 523;
let gameFrame = 0;
const staggerframes = 5;
const scriptAnimations = [];
const animationStates = [ //添加每一行动画的属性
    {
        name: "idle",
        frames: 7 //每一行动画的帧数
    },
    {
        name: "jump",
        frames: 7
    },
    {
        name: "fall",
        frames: 9
    },
    {
        name: "run",
        frames: 9
    },
    {
        name: "dizzy",
        frames: 11
    },
    {
        name: "sit",
        frames: 5
    },
    {
        name: "roll",
        frames: 7
    },
    {
        name: "bite",
        frames: 7
    },
    {
        name: "ko",
        frames: 12
    },
    {
        name: "getHit",
        frames: 4
    }
];
animationStates.forEach((state, index) => {
    let frames = {
        loc: [],
    }
    for (let j = 0; j < state.frames; j++) {
        let positionX = j * scriptWidth;
        let positionY = index * scriptHeight;
        frames.loc.push({ x: positionX, y: positionY });
    } 
    scriptAnimations[state.name] = frames; 
});

function animate() {
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    //ctx.fillRect(50, 50, 100, 100); 
    // ctx.fillRect(100, 50, 100, 100);
    // ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); 

    let position = Math.floor(gameFrame / staggerframes) % scriptAnimations[playerState].loc.length; 
    let frameX = scriptWidth * position;
    let frameY = scriptAnimations[playerState].loc[position].y; 
    ctx.drawImage(playerImg, frameX, frameY, scriptWidth, scriptHeight, 0, 0, scriptWidth, scriptHeight);

    gameFrame++;
    requestAnimationFrame(animate);
};
animate();
2

If you look at the actual source of your web page, you will see it contains your HTML page not once, but three times. I’m guessing that this also causes the script.js code to be executed three times, which breaks because it’s trying to recreate the same playerState, which is not allowed.

The solution is to fix the HTML code so it only contains the right code once.

As for why the file contains the same code three times, I’ve seen this happen sometimes with the online file manager. It appears to be a bug somewhere in the file manager, but so far we’ve been unable to pin it down and fix it.

4 Likes
3

I check my HTML code, and find nothing wrong. And mentioned the file manager, I remember that I seem to resubmit files 3 or 4 times, but now there is only one folder and no files repeat. Will this matter?

4

Thanks. I check my HTML code, and find nothing wrong. And mentioned the file manager, I remember that I seem to resubmit files 3 or 4 times, but now there is only one folder and no files repeat. Will this matter?

5

Read again

2 Likes
6

Does this look like “nothing is wrong” to you?

image
image727×1339 160 KB

Because I see 3 HTML documents in the same file, which appears to be the same code duplicated 3 times.

If this is desired, then what I wrote before probably still applies:

And if this HTML code is correct according to you, you’ll probably need to adjust your Javascript code to account for this.

6 Likes
7

OH, I found that (I hadn’t check the console :no_mouth:,just checking my file), and I delete the original folder, then upload again. Everything is go back on the track. The chief culprit is repeating upload file many times in one folder, though it seems to be only one in that folder. Thank you for your helping :slight_smile:

8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.