🤖 Cannot save fiddle

### Error code

ERRW:1.0k1.0:PU0.05:AS

### Were you logged in?

Yes

### Your username (if logged in)

_No response_

### Your HTML

```html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>لعبتي الأسطورية</title>
<style>
  body {
    margin: 0;
    font-family: 'Tahoma', sans-serif;
    background: #111;
    color: white;
    text-align: center;
  }

  /* خلفية متحركة */
  #start-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, #ff416c, #ff4b2b, #1fddff, #2bff88);
    background-size: 400% 400%;
    animation: gradientBG 8s ease infinite;
    z-index: 10;
  }
  @keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }

  /* عنوان اللعبة */
  #start-screen h1 {
    font-size: 60px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, #fff, #ffd700, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
  }
  @keyframes shine {
    0% {background-position: -200px;}
    100% {background-position: 200px;}
  }

  /* زر البداية */
  #start-btn {
    padding: 15px 40px;
    font-size: 24px;
    background: #222;
    color: white;
    border: 2px solid white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #fff;
  }
  #start-btn:hover {
    background: white;
    color: #222;
    box-shadow: 0 0 20px white;
  }

  /* صندوق اللعبة */
  #game-container {
    width: 600px;
    height: 400px;
    margin: 20px auto;
    border: 3px solid #fff;
    position: relative;
    background-color: #222;
    overflow: hidden;
    display: none;
  }

  /* العدو */
  #enemy {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px red;
    transition: all 0.2s ease;
  }
  .hit-effect {
    animation: flash 0.2s;
  }
  @keyframes flash {
    0% { transform: scale(1.2); background-color: yellow; }
    100% { transform: scale(1); background-color: red; }
  }
</style>
</head>
<body>


<div id="start-screen">
  <h1>🎯 اضرب العدو!</h1>
  <button id="start-btn">ابدأ اللعب</button>
</div>


<div id="game-container">
  <div id="enemy"></div>
</div>
<p id="score">النتيجة: 0</p>
<p id="level">المستوى: 1</p>


<audio id="hit-sound" src="hit.mp3" preload="auto"></audio>
<audio id="start-sound" src="start.mp3" preload="auto"></audio>
<audio id="levelup-sound" src="levelup.mp3" preload="auto"></audio>

<script>
  const enemy = document.getElementById("enemy");
  const scoreText = document.getElementById("score");
  const levelText = document.getElementById("level");
  const hitSound = document.getElementById("hit-sound");
  const startSound = document.getElementById("start-sound");
  const levelUpSound = document.getElementById("levelup-sound");
  const startScreen = document.getElementById("start-screen");
  const gameContainer = document.getElementById("game-container");

  let score = 0;
  let level = 1;
  let speed = 1000;

  function moveEnemy() {
    const x = Math.random() * 550;
    const y = Math.random() * 350;
    enemy.style.left = `${x}px`;
    enemy.style.top = `${y}px`;
  }

  function updateLevel() {
    let newLevel = Math.floor(score / 5) + 1;
    if (newLevel > level) {
      level = newLevel;
      levelText.textContent = `المستوى: ${level}`;
      levelUpSound.play();
    } else {
      level = newLevel;
      levelText.textContent = `المستوى: ${level}`;
    }
    speed = Math.max(300, 1000 - (level - 1) * 100);
  }

  enemy.addEventListener("click", () => {
    score++;
    scoreText.textContent = `النتيجة: ${score}`;
    updateLevel();
    hitSound.currentTime = 0;
    hitSound.play();
    enemy.classList.add("hit-effect");
    setTimeout(() => {
      enemy.classList.remove("hit-effect");
    }, 200);
    moveEnemy();
  });

  function gameLoop() {
    moveEnemy();
    setTimeout(gameLoop, speed);
  }

  document.getElementById("start-btn").addEventListener("click", () => {
    startScreen.style.display = "none";
    gameContainer.style.display = "block";
    startSound.play();
    gameLoop();
  });
</script>
</body>
</html>
```

### Your JavaScript

```javascript
const enemy = document.getElementById("enemy");
const scoreText = document.getElementById("score");
const levelText = document.getElementById("level");
const hitSound = document.getElementById("hit-sound");

let score = 0;
let level = 1;
let speed = 1000;

function moveEnemy() {
  const x = Math.random() * 550;
  const y = Math.random() * 350;
  enemy.style.left = `${x}px`;
  enemy.style.top = `${y}px`;
}

function updateLevel() {
  level = Math.floor(score / 5) + 1;
  levelText.textContent = `المستوى: ${level}`;
  speed = Math.max(300, 1000 - (level - 1) * 100);
}

enemy.addEventListener("click", () => {
  score++;
  scoreText.textContent = `النتيجة: ${score}`;
  updateLevel();
  hitSound.currentTime = 0;
  hitSound.play();

  enemy.classList.add("hit-effect");
  setTimeout(() => {
    enemy.classList.remove("hit-effect");
  }, 200);

  moveEnemy();
});

function gameLoop() {
  moveEnemy();
  setTimeout(gameLoop, speed);
}

gameLoop();

let score = 0;
let highScore = localStorage.getItem("highScore") || 0;
let level = 1;
let timer = 20;
let targetHits = 5;
let hits = 0;

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#1a1a1a',
  scene: [MainMenu, GameScene, GameOverScene],
};

const game = new Phaser.Game(config);

////////////////////////
// 🏠 المشهد: القائمة الرئيسية
////////////////////////
function MainMenu() {
  Phaser.Scene.call(this, { key: 'MainMenu' });
}
MainMenu.prototype = Object.create(Phaser.Scene.prototype);
MainMenu.prototype.constructor = MainMenu;

MainMenu.prototype.create = function () {
  this.add.text(300, 200, 'لعبتي الأسطورية', { fontSize: '32px', fill: '#fff' });
  this.add.text(280, 250, `أفضل نتيجة: ${highScore}`, { fontSize: '20px', fill: '#ccc' });

  const startText = this.add.text(320, 320, 'ابدأ اللعبة', {
    fontSize: '26px', fill: '#0f0'
  }).setInteractive();

  startText.on('pointerdown', () => {
    level = 1;
    score = 0;
    this.scene.start('GameScene');
  });
};

////////////////////////
// 🎮 المشهد: اللعبة
////////////////////////
function GameScene() {
  Phaser.Scene.call(this, { key: 'GameScene' });
}
GameScene.prototype = Object.create(Phaser.Scene.prototype);
GameScene.prototype.constructor = GameScene;

GameScene.prototype.preload = function () {
  this.load.image('enemy', 'https://i.ibb.co/QYyYXN1/enemy.png');
  this.load.audio('hit', 'https://cdn.pixabay.com/audio/2022/03/15/audio_91c3db440e.mp3');
  this.load.audio('success', 'https://cdn.pixabay.com/audio/2022/03/15/audio_bedecd4f5d.mp3');
  this.load.audio('fail', 'https://cdn.pixabay.com/audio/2022/03/15/audio_f6f9e74899.mp3');
};

GameScene.prototype.create = function () {
  hits = 0;
  timer = 15 + level * 3;
  targetHits = 5 + level * 2;

  this.hitSound = this.sound.add('hit');
  this.successSound = this.sound.add('success');
  this.failSound = this.sound.add('fail');

  this.enemy = this.add.sprite(400, 300, 'enemy').setInteractive().setScale(0.5);
  this.enemy.on('pointerdown', () => {
    this.hitSound.play();
    score++;
    hits++;
    this.scoreText.setText('النقاط: ' + score);
    moveEnemy(this.enemy);

    if (hits >= targetHits) {
      this.successSound.play();
      this.time.delayedCall(500, () => {
        level++;
        this.scene.start('GameScene'); // المرحلة التالية
      });
    }
  });

  this.scoreText = this.add.text(10, 10, 'النقاط: 0', { fontSize: '18px', fill: '#fff' });
  this.levelText = this.add.text(10, 35, 'المستوى: ' + level, { fontSize: '18px', fill: '#fff' });
  this.timerText = this.add.text(10, 60, 'الوقت: ' + timer, { fontSize: '18px', fill: '#fff' });

  // عداد الوقت
  this.timerEvent = this.time.addEvent({
    delay: 1000,
    callback: () => {
      timer--;
      this.timerText.setText('الوقت: ' + timer);
      if (timer <= 0) {
        this.failSound.play();
        if (score > highScore) {
          localStorage.setItem("highScore", score);
          highScore = score;
        }
        this.scene.start('GameOverScene');
      }
    },
    loop: true
  });

  moveEnemy(this.enemy);
};

function moveEnemy(enemy) {
  const x = Phaser.Math.Between(100, 700);
  const y = Phaser.Math.Between(100, 500);
  enemy.setPosition(x, y);
}

////////////////////////
// ☠️ المشهد: نهاية اللعبة
////////////////////////
function GameOverScene() {
  Phaser.Scene.call(this, { key: 'GameOverScene' });
}
GameOverScene.prototype = Object.create(Phaser.Scene.prototype);
GameOverScene.prototype.constructor = GameOverScene;

GameOverScene.prototype.create = function () {
  this.add.text(320, 220, 'انتهت اللعبة', { fontSize: '32px', fill: '#f00' });
  this.add.text(280, 270, `نتيجتك: ${score}`, { fontSize: '20px', fill: '#fff' });
  this.add.text(280, 300, `أفضل نتيجة: ${highScore}`, { fontSize: '20px', fill: '#ccc' });

  const restart = this.add.text(330, 360, 'القائمة الرئيسية', {
    fontSize: '24px', fill: '#0ff'
  }).setInteractive();

  restart.on('pointerdown', () => {
    this.scene.start('MainMenu');
  });
};const enemy = document.getElementById("enemy");
  const scoreText = document.getElementById("score");
  const levelText = document.getElementById("level");
  const hitSound = document.getElementById("hit-sound");
  const startSound = document.getElementById("start-sound");
  const levelUpSound = document.getElementById("levelup-sound");
  const startScreen = document.getElementById("start-screen");
  const gameContainer = document.getElementById("game-container");

  let score = 0;
  let level = 1;
  let speed = 1000;

  function moveEnemy() {
    const x = Math.random() * 550;
    const y = Math.random() * 350;
    enemy.style.left = `${x}px`;
    enemy.style.top = `${y}px`;
  }

  function updateLevel() {
    let newLevel = Math.floor(score / 5) + 1;
    if (newLevel > level) {
      level = newLevel;
      levelText.textContent = `المستوى: ${level}`;
      levelUpSound.play();
    } else {
      level = newLevel;
      levelText.textContent = `المستوى: ${level}`;
    }
    speed = Math.max(300, 1000 - (level - 1) * 100);
  }

  enemy.addEventListener("click", () => {
    score++;
    scoreText.textContent = `النتيجة: ${score}`;
    updateLevel();
    hitSound.currentTime = 0;
    hitSound.play();
    enemy.classList.add("hit-effect");
    setTimeout(() => {
      enemy.classList.remove("hit-effect");
    }, 200);
    moveEnemy();
  });

  function gameLoop() {
    moveEnemy();
    setTimeout(gameLoop, speed);
  }

  document.getElementById("start-btn").addEventListener("click", () => {
    startScreen.style.display = "none";
    gameContainer.style.display = "block";
    startSound.play();
    gameLoop();
  });
```

### Your CSS

```css
body {
  font-family: Tahoma, sans-serif;
  text-align: center;
  background-color: #111;
  color: white;
}

#game-container {
  width: 600px;
  height: 400px;
  margin: 20px auto;
  border: 3px solid #fff;
  position: relative;
  background-color: #222;
  overflow: hidden;
}

#enemy {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 15px red;
  transition: all 0.2s ease;
}

.hit-effect {
  animation: flash 0.2s;
}

@keyframes flash {
  0% { transform: scale(1.2); background-color: yellow; }
  100% { transform: scale(1); background-color: red; }
}
body {
      margin: 0;
    }
    canvas {
      display: block;
      margin: auto;
    }body {
    margin: 0;
    font-family: 'Tahoma', sans-serif;
    background: #111;
    color: white;
    text-align: center;
  }

  /* خلفية متحركة */
  #start-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, #ff416c, #ff4b2b, #1fddff, #2bff88);
    background-size: 400% 400%;
    animation: gradientBG 8s ease infinite;
    z-index: 10;
  }
  @keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }

  /* عنوان اللعبة */
  #start-screen h1 {
    font-size: 60px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, #fff, #ffd700, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
  }
  @keyframes shine {
    0% {background-position: -200px;}
    100% {background-position: 200px;}
  }

  /* زر البداية */
  #start-btn {
    padding: 15px 40px;
    font-size: 24px;
    background: #222;
    color: white;
    border: 2px solid white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #fff;
  }
  #start-btn:hover {
    background: white;
    color: #222;
    box-shadow: 0 0 20px white;
  }

  /* صندوق اللعبة */
  #game-container {
    width: 600px;
    height: 400px;
    margin: 20px auto;
    border: 3px solid #fff;
    position: relative;
    background-color: #222;
    overflow: hidden;
    display: none;
  }

  /* العدو */
  #enemy {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px red;
    transition: all 0.2s ease;
  }
  .hit-effect {
    animation: flash 0.2s;
  }
  @keyframes flash {
    0% { transform: scale(1.2); background-color: yellow; }
    100% { transform: scale(1); background-color: red; }
  }
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!