Website URL
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();
