I just made a simple game on visual studio code, where a player has to chase the square. But im not sure why its not running on the live sever ? I am very new to JavaScript and programming in general so please teach me like im a 5 year old thank you.

link to code
<https://code.sololearn.com/Wb0dJ50Kto9d>

```js
var canvas = document.querySelector('canvas')
canvas.height = 300
canvas.width = 300
var ctx = canvas.getContext('2d')

let player_x = 20
let player_y = 20
let base_x = Math.floor(Math.random() * 250)
let base_y = Math.floor(Math.random() * 250)

function step() {
  ctx.clearRect(0, 0, 300, 300)
  ctx.fillStyle = 'red'
  ctx.fillRect(player_x, player_y, 10, 10)
  ctx.strokeRect(base_x, base_y, 50, 50)

  if (player_x >= base_x && player_y >= base_y && player _x <= base_x + 50 && player_y <= base_y + 50)
    console.log('YOU WON') {
      let base_x = Math.floor(Math.random() * 250)
      let base_y = Math.floor(Math.random() * 250)
    }

  requestAnimationFrame(step)
}
requestAnimationFrame(step)

function handleInput(event) {
  var key = event.key
  if (key === 'a') {
    player_x -= 5
  } else if (key === 'w') {
    player_y -= 5
  } else if (key === 'd') {
    player_x += 5
  } else if (key === 's') {
    player_y += 5
  }

  document.addEventListener('keypress')
```

```css
canvas {
  border: 5px solid black
}
```

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <h1>Epic Square Game MK 1</h1>
  <main>
    <canvas></canvas>
  </main>
  <section>Score: <span>0</span></section>

</body>

</html>
```

I followed a youtube video to do this as im new and just wanted to get stuck in.

<https://www.youtube.com/watch?v=Z3OnwkPOfY4>