├── .gitignore ├── audio ├── backgroundMusic.mp3 ├── endGame.mp3 ├── enemyEliminated.mp3 ├── enemyHit.mp3 ├── obtainPowerUp.mp3 ├── shoot.mp3 └── startGame.mp3 ├── favicon.svg ├── img └── lightning.png ├── index.html ├── main.js ├── package-lock.json ├── package.json └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /audio/backgroundMusic.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/backgroundMusic.mp3 -------------------------------------------------------------------------------- /audio/endGame.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/endGame.mp3 -------------------------------------------------------------------------------- /audio/enemyEliminated.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/enemyEliminated.mp3 -------------------------------------------------------------------------------- /audio/enemyHit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/enemyHit.mp3 -------------------------------------------------------------------------------- /audio/obtainPowerUp.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/obtainPowerUp.mp3 -------------------------------------------------------------------------------- /audio/shoot.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/shoot.mp3 -------------------------------------------------------------------------------- /audio/startGame.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/audio/startGame.mp3 -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /img/lightning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chriscourses/HTML5-Canvas-and-JavaScript-Games-for-Beginners/5e1b6f29c170092f4b274133a6bd75afca682cae/img/lightning.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 12 | 16 | 23 | 24 | 25 | 38 | 39 | 52 | 53 |

54 | Score: 0 55 |

56 | 57 |

58 |

59 |

0

60 |

Points

61 |

62 | 68 |

69 |

70 |

71 | 72 |

73 | 74 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | import { Howl } from 'howler' 2 | 3 | const canvas = document.querySelector('canvas') 4 | const c = canvas.getContext('2d') 5 | 6 | canvas.width = innerWidth 7 | canvas.height = innerHeight 8 | 9 | const scoreEl = document.querySelector('#scoreEl') 10 | const startGameBtn = document.querySelector('#startGameBtn') 11 | const modalEl = document.querySelector('#modalEl') 12 | const bigScoreEl = document.querySelector('#bigScoreEl') 13 | const soundOffEl = document.querySelector('#soundOffEl') 14 | const soundOnEl = document.querySelector('#soundOnEl') 15 | 16 | const startGameAudio = new Audio('./audio/startGame.mp3') 17 | const endGameAudio = new Audio('./audio/endGame.mp3') 18 | const shootAudio = new Howl({ src: ['./audio/shoot.mp3'] }) 19 | const enemyHitAudio = new Howl({ src: ['./audio/enemyHit.mp3'] }) 20 | const enemyEliminatedAudio = new Howl({ src: ['./audio/enemyEliminated.mp3'] }) 21 | const obtainPowerUpAudio = new Howl({ src: ['./audio/obtainPowerUp.mp3'] }) 22 | const backgroundMusicAudio = new Audio('./audio/backgroundMusic.mp3') 23 | backgroundMusicAudio.loop = true 24 | 25 | const scene = { 26 | active: false 27 | } 28 | 29 | class Player { 30 | constructor(x, y, radius, color) { 31 | this.x = x 32 | this.y = y 33 | this.radius = radius 34 | this.color = color 35 | this.velocity = { 36 | x: 0, 37 | y: 0 38 | } 39 | this.friction = 0.99 40 | this.powerUp = '' 41 | } 42 | 43 | draw() { 44 | c.beginPath() 45 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 46 | c.fillStyle = this.color 47 | c.fill() 48 | } 49 | 50 | update() { 51 | this.draw() 52 | this.velocity.x *= this.friction 53 | this.velocity.y *= this.friction 54 | 55 | if ( 56 | this.x - this.radius + this.velocity.x > 0 && 57 | this.x + this.radius + this.velocity.x < canvas.width 58 | ) { 59 | this.x = this.x + this.velocity.x 60 | } else { 61 | this.velocity.x = 0 62 | } 63 | 64 | if ( 65 | this.y - this.radius + this.velocity.y > 0 && 66 | this.y + this.radius + this.velocity.y < canvas.height 67 | ) { 68 | this.y = this.y + this.velocity.y 69 | } else { 70 | this.velocity.y = 0 71 | } 72 | this.x = this.x + this.velocity.x 73 | this.y = this.y + this.velocity.y 74 | } 75 | 76 | shoot(mouse, color = 'white') { 77 | const angle = Math.atan2(mouse.y - this.y, mouse.x - this.x) 78 | const velocity = { 79 | x: Math.cos(angle) * 5, 80 | y: Math.sin(angle) * 5 81 | } 82 | projectiles.push(new Projectile(this.x, this.y, 5, color, velocity)) 83 | shootAudio.play() 84 | } 85 | } 86 | 87 | class Projectile { 88 | constructor(x, y, radius, color, velocity) { 89 | this.x = x 90 | this.y = y 91 | this.radius = radius 92 | this.color = color 93 | this.velocity = velocity 94 | } 95 | 96 | draw() { 97 | c.beginPath() 98 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 99 | c.fillStyle = this.color 100 | c.fill() 101 | } 102 | 103 | update() { 104 | this.draw() 105 | this.x = this.x + this.velocity.x 106 | this.y = this.y + this.velocity.y 107 | } 108 | } 109 | 110 | const powerUpImg = new Image() 111 | powerUpImg.src = './img/lightning.png' 112 | 113 | class PowerUp { 114 | constructor(x, y, velocity) { 115 | this.x = x 116 | this.y = y 117 | this.velocity = velocity 118 | this.width = 14 119 | this.height = 18 120 | this.radians = 0 121 | } 122 | 123 | draw() { 124 | c.save() 125 | c.translate(this.x + this.width / 2, this.y + this.height / 2) 126 | c.rotate(this.radians) 127 | c.translate(-this.x - this.width / 2, -this.y - this.height / 2) 128 | c.drawImage(powerUpImg, this.x, this.y, 14, 18) 129 | c.restore() 130 | } 131 | 132 | update() { 133 | this.radians += 0.002 134 | this.draw() 135 | this.x = this.x + this.velocity.x 136 | this.y = this.y + this.velocity.y 137 | } 138 | } 139 | 140 | class Enemy { 141 | constructor(x, y, radius, color, velocity) { 142 | this.x = x 143 | this.y = y 144 | this.radius = radius 145 | this.color = color 146 | this.velocity = velocity 147 | this.type = 'linear' 148 | this.center = { 149 | x, 150 | y 151 | } 152 | 153 | this.radians = 0 154 | 155 | if (Math.random() < 0.25) { 156 | this.type = 'homing' 157 | 158 | if (Math.random() < 0.5) { 159 | this.type = 'spinning' 160 | 161 | if (Math.random() < 0.75) { 162 | this.type = 'homingSpinning' 163 | } 164 | } 165 | } 166 | } 167 | 168 | draw() { 169 | c.beginPath() 170 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 171 | c.fillStyle = this.color 172 | c.fill() 173 | } 174 | 175 | update() { 176 | this.draw() 177 | 178 | if (this.type === 'linear') { 179 | this.x = this.x + this.velocity.x 180 | this.y = this.y + this.velocity.y 181 | } else if (this.type === 'homing') { 182 | const angle = Math.atan2(player.y - this.y, player.x - this.x) 183 | 184 | this.velocity = { 185 | x: Math.cos(angle), 186 | y: Math.sin(angle) 187 | } 188 | 189 | this.x = this.x + this.velocity.x 190 | this.y = this.y + this.velocity.y 191 | } else if (this.type === 'spinning') { 192 | this.radians += 0.05 193 | this.center.x += this.velocity.x 194 | this.center.y += this.velocity.y 195 | 196 | this.x = this.center.x + Math.cos(this.radians) * 100 197 | this.y = this.center.y + Math.sin(this.radians) * 100 198 | } else if (this.type === 'homingSpinning') { 199 | const angle = Math.atan2(player.y - this.y, player.x - this.x) 200 | 201 | this.velocity = { 202 | x: Math.cos(angle), 203 | y: Math.sin(angle) 204 | } 205 | 206 | this.radians += 0.05 207 | this.center.x += this.velocity.x 208 | this.center.y += this.velocity.y 209 | 210 | this.x = this.center.x + Math.cos(this.radians) * 100 211 | this.y = this.center.y + Math.sin(this.radians) * 100 212 | } 213 | } 214 | } 215 | 216 | const friction = 0.99 217 | class Particle { 218 | constructor(x, y, radius, color, velocity) { 219 | this.x = x 220 | this.y = y 221 | this.radius = radius 222 | this.color = color 223 | this.velocity = velocity 224 | this.alpha = 1 225 | } 226 | 227 | draw() { 228 | c.save() 229 | c.globalAlpha = this.alpha 230 | c.beginPath() 231 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 232 | c.fillStyle = this.color 233 | c.fill() 234 | c.restore() 235 | } 236 | 237 | update() { 238 | this.draw() 239 | this.velocity.x *= friction 240 | this.velocity.y *= friction 241 | this.x = this.x + this.velocity.x 242 | this.y = this.y + this.velocity.y 243 | this.alpha -= 0.01 244 | } 245 | } 246 | 247 | class BackgroundParticle { 248 | constructor(x, y, radius, color) { 249 | this.x = x 250 | this.y = y 251 | this.radius = radius 252 | this.color = color 253 | this.alpha = 0.05 254 | this.initialAlpha = this.alpha 255 | } 256 | 257 | draw() { 258 | c.save() 259 | c.globalAlpha = this.alpha 260 | c.beginPath() 261 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 262 | c.fillStyle = this.color 263 | c.fill() 264 | c.restore() 265 | } 266 | 267 | update() { 268 | this.draw() 269 | // this.alpha -= 0.01 270 | } 271 | } 272 | 273 | let player 274 | let powerUps = [] 275 | let projectiles = [] 276 | let enemies = [] 277 | let particles = [] 278 | let backgroundParticles = [] 279 | 280 | function init() { 281 | const x = canvas.width / 2 282 | const y = canvas.height / 2 283 | player = new Player(x, y, 10, 'white') 284 | powerUps = [] 285 | projectiles = [] 286 | enemies = [] 287 | particles = [] 288 | backgroundParticles = [] 289 | 290 | for (let x = 0; x < canvas.width; x += 30) { 291 | for (let y = 0; y < canvas.height; y += 30) { 292 | backgroundParticles.push(new BackgroundParticle(x, y, 3, 'blue')) 293 | } 294 | } 295 | } 296 | 297 | function spawnEnemies() { 298 | const radius = Math.random() * (30 - 4) + 4 299 | 300 | let x 301 | let y 302 | 303 | if (Math.random() < 0.5) { 304 | x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius 305 | y = Math.random() * canvas.height 306 | } else { 307 | x = Math.random() * canvas.width 308 | y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius 309 | } 310 | 311 | const color = `hsl(${Math.random() * 360}, 50%, 50%)` 312 | 313 | const angle = Math.atan2(canvas.height / 2 - y, canvas.width / 2 - x) 314 | 315 | const velocity = { 316 | x: Math.cos(angle), 317 | y: Math.sin(angle) 318 | } 319 | 320 | enemies.push(new Enemy(x, y, radius, color, velocity)) 321 | } 322 | 323 | function spawnPowerUps() { 324 | let x 325 | let y 326 | 327 | if (Math.random() < 0.5) { 328 | x = Math.random() < 0.5 ? 0 - 7 : canvas.width + 7 329 | y = Math.random() * canvas.height 330 | } else { 331 | x = Math.random() * canvas.width 332 | y = Math.random() < 0.5 ? 0 - 9 : canvas.height + 9 333 | } 334 | 335 | const angle = Math.atan2(canvas.height / 2 - y, canvas.width / 2 - x) 336 | 337 | const velocity = { 338 | x: Math.cos(angle), 339 | y: Math.sin(angle) 340 | } 341 | 342 | powerUps.push(new PowerUp(x, y, velocity)) 343 | } 344 | 345 | function createScoreLabel(projectile, score) { 346 | const scoreLabel = document.createElement('label') 347 | scoreLabel.innerHTML = score 348 | scoreLabel.style.position = 'absolute' 349 | scoreLabel.style.color = 'white' 350 | scoreLabel.style.userSelect = 'none' 351 | scoreLabel.style.left = projectile.x + 'px' 352 | scoreLabel.style.top = projectile.y + 'px' 353 | document.body.appendChild(scoreLabel) 354 | 355 | gsap.to(scoreLabel, { 356 | opacity: 0, 357 | y: -30, 358 | duration: 0.75, 359 | onComplete: () => { 360 | scoreLabel.parentNode.removeChild(scoreLabel) 361 | } 362 | }) 363 | } 364 | 365 | let animationId 366 | let score = 0 367 | let frame = 0 368 | function animate() { 369 | animationId = requestAnimationFrame(animate) 370 | frame++ 371 | c.fillStyle = 'rgba(0, 0, 0, 0.1)' 372 | c.fillRect(0, 0, canvas.width, canvas.height) 373 | 374 | if (frame % 70 === 0) spawnEnemies() 375 | if (frame % 300 === 0) spawnPowerUps() 376 | 377 | backgroundParticles.forEach((backgroundParticle) => { 378 | const dist = Math.hypot( 379 | player.x - backgroundParticle.x, 380 | player.y - backgroundParticle.y 381 | ) 382 | 383 | const hideRadius = 100 384 | if (dist < hideRadius) { 385 | if (dist < 70) { 386 | backgroundParticle.alpha = 0 387 | } else { 388 | backgroundParticle.alpha = 0.5 389 | } 390 | } else if ( 391 | dist >= hideRadius && 392 | backgroundParticle.alpha < backgroundParticle.initialAlpha 393 | ) { 394 | backgroundParticle.alpha += 0.01 395 | } else if ( 396 | dist >= hideRadius && 397 | backgroundParticle.alpha > backgroundParticle.initialAlpha 398 | ) { 399 | backgroundParticle.alpha -= 0.01 400 | } 401 | 402 | backgroundParticle.update() 403 | }) 404 | 405 | player.update() 406 | particles.forEach((particle, index) => { 407 | if (particle.alpha <= 0) { 408 | particles.splice(index, 1) 409 | } else { 410 | particle.update() 411 | } 412 | }) 413 | 414 | if (player.powerUp === 'Automatic' && mouse.down) { 415 | if (frame % 4 === 0) { 416 | player.shoot(mouse, '#FFF500') 417 | } 418 | } 419 | 420 | powerUps.forEach((powerUp, index) => { 421 | const dist = Math.hypot(player.x - powerUp.x, player.y - powerUp.y) 422 | 423 | // obtain power up 424 | // gain the automatic shooting ability 425 | if (dist - player.radius - powerUp.width / 2 < 1) { 426 | player.color = '#FFF500' 427 | player.powerUp = 'Automatic' 428 | powerUps.splice(index, 1) 429 | 430 | obtainPowerUpAudio.play() 431 | 432 | setTimeout(() => { 433 | player.powerUp = null 434 | player.color = '#FFFFFF' 435 | }, 5000) 436 | } else { 437 | powerUp.update() 438 | } 439 | }) 440 | 441 | projectiles.forEach((projectile, index) => { 442 | projectile.update() 443 | 444 | // remove from edges of screen 445 | if ( 446 | projectile.x + projectile.radius < 0 || 447 | projectile.x - projectile.radius > canvas.width || 448 | projectile.y + projectile.radius < 0 || 449 | projectile.y - projectile.radius > canvas.height 450 | ) { 451 | setTimeout(() => { 452 | projectiles.splice(index, 1) 453 | }, 0) 454 | } 455 | }) 456 | 457 | enemies.forEach((enemy, index) => { 458 | enemy.update() 459 | 460 | const dist = Math.hypot(player.x - enemy.x, player.y - enemy.y) 461 | 462 | // end game 463 | if (dist - enemy.radius - player.radius < 1) { 464 | cancelAnimationFrame(animationId) 465 | modalEl.style.display = 'flex' 466 | bigScoreEl.innerHTML = score 467 | endGameAudio.play() 468 | scene.active = false 469 | 470 | gsap.to('#whiteModalEl', { 471 | opacity: 1, 472 | scale: 1, 473 | duration: 0.45, 474 | ease: 'expo' 475 | }) 476 | } 477 | 478 | projectiles.forEach((projectile, projectileIndex) => { 479 | const dist = Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y) 480 | 481 | // hit enemy 482 | // when projectiles touch enemy 483 | if (dist - enemy.radius - projectile.radius < 0.03) { 484 | // create explosions 485 | for (let i = 0; i < enemy.radius * 2; i++) { 486 | particles.push( 487 | new Particle( 488 | projectile.x, 489 | projectile.y, 490 | Math.random() * 2, 491 | enemy.color, 492 | { 493 | x: (Math.random() - 0.5) * (Math.random() * 6), 494 | y: (Math.random() - 0.5) * (Math.random() * 6) 495 | } 496 | ) 497 | ) 498 | } 499 | 500 | // shrink enemy 501 | if (enemy.radius - 10 > 5) { 502 | enemyHitAudio.play() 503 | 504 | // increase our score 505 | score += 100 506 | scoreEl.innerHTML = score 507 | 508 | createScoreLabel(projectile, 100) 509 | 510 | gsap.to(enemy, { 511 | radius: enemy.radius - 10 512 | }) 513 | setTimeout(() => { 514 | projectiles.splice(projectileIndex, 1) 515 | }, 0) 516 | } else { 517 | // eliminate enemy 518 | enemyEliminatedAudio.play() 519 | 520 | // remove from scene altogether 521 | score += 250 522 | scoreEl.innerHTML = score 523 | createScoreLabel(projectile, 250) 524 | 525 | // change backgroundParticle colors 526 | backgroundParticles.forEach((backgroundParticle) => { 527 | backgroundParticle.color = enemy.color 528 | gsap.to(backgroundParticle, { 529 | alpha: 0.5, 530 | duration: 0.015, 531 | onComplete: () => { 532 | gsap.to(backgroundParticle, { 533 | alpha: backgroundParticle.initialAlpha, 534 | duration: 0.03 535 | }) 536 | } 537 | }) 538 | }) 539 | 540 | setTimeout(() => { 541 | const enemyFound = enemies.find((enemyValue) => { 542 | return enemyValue === enemy 543 | }) 544 | 545 | if (enemyFound) { 546 | enemies.splice(index, 1) 547 | projectiles.splice(projectileIndex, 1) 548 | } 549 | }, 0) 550 | } 551 | } 552 | }) 553 | }) 554 | } 555 | 556 | const mouse = { 557 | down: false, 558 | x: undefined, 559 | y: undefined 560 | } 561 | 562 | addEventListener('mousedown', ({ clientX, clientY }) => { 563 | mouse.x = clientX 564 | mouse.y = clientY 565 | 566 | mouse.down = true 567 | }) 568 | 569 | addEventListener('mousemove', ({ clientX, clientY }) => { 570 | mouse.x = clientX 571 | mouse.y = clientY 572 | }) 573 | 574 | addEventListener('mouseup', () => { 575 | mouse.down = false 576 | }) 577 | 578 | addEventListener('touchstart', (event) => { 579 | mouse.x = event.touches[0].clientX 580 | mouse.y = event.touches[0].clientY 581 | 582 | mouse.down = true 583 | }) 584 | 585 | addEventListener('touchmove', (event) => { 586 | mouse.x = event.touches[0].clientX 587 | mouse.y = event.touches[0].clientY 588 | }) 589 | 590 | addEventListener('touchend', () => { 591 | mouse.down = false 592 | }) 593 | 594 | addEventListener('click', ({ clientX, clientY }) => { 595 | if (scene.active && player.powerUp !== 'Automatic') { 596 | mouse.x = clientX 597 | mouse.y = clientY 598 | player.shoot(mouse) 599 | } 600 | }) 601 | 602 | addEventListener('resize', () => { 603 | canvas.width = innerWidth 604 | canvas.height = innerHeight 605 | 606 | init() 607 | }) 608 | 609 | startGameBtn.addEventListener('click', () => { 610 | init() 611 | animate() 612 | startGameAudio.play() 613 | scene.active = true 614 | 615 | score = 0 616 | scoreEl.innerHTML = score 617 | bigScoreEl.innerHTML = score 618 | backgroundMusicAudio.play() 619 | 620 | gsap.to('#whiteModalEl', { 621 | opacity: 0, 622 | scale: 0.75, 623 | duration: 0.25, 624 | ease: 'expo.in', 625 | onComplete: () => { 626 | modalEl.style.display = 'none' 627 | } 628 | }) 629 | }) 630 | 631 | addEventListener('keydown', ({ keyCode }) => { 632 | if (keyCode === 87) { 633 | player.velocity.y -= 1 634 | } else if (keyCode === 65) { 635 | player.velocity.x -= 1 636 | } else if (keyCode === 83) { 637 | player.velocity.y += 1 638 | } else if (keyCode === 68) { 639 | player.velocity.x += 1 640 | } 641 | 642 | switch (keyCode) { 643 | case 37: 644 | player.velocity.x -= 1 645 | break 646 | case 40: 647 | player.velocity.y += 1 648 | break 649 | case 39: 650 | player.velocity.x += 1 651 | break 652 | case 38: 653 | player.velocity.y -= 1 654 | break 655 | } 656 | }) 657 | 658 | soundOffEl.addEventListener('click', () => { 659 | console.log('mute') 660 | backgroundMusicAudio.volume = 0 661 | soundOnEl.style.display = 'block' 662 | soundOffEl.style.display = 'none' 663 | }) 664 | 665 | soundOnEl.addEventListener('click', () => { 666 | console.log('sound on') 667 | backgroundMusicAudio.volume = 1 668 | soundOnEl.style.display = 'none' 669 | soundOffEl.style.display = 'block' 670 | }) 671 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "canvas-game-vite", 3 | "version": "0.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "esbuild": { 8 | "version": "0.13.15", 9 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.15.tgz", 10 | "integrity": "sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==", 11 | "dev": true, 12 | "requires": { 13 | "esbuild-android-arm64": "0.13.15", 14 | "esbuild-darwin-64": "0.13.15", 15 | "esbuild-darwin-arm64": "0.13.15", 16 | "esbuild-freebsd-64": "0.13.15", 17 | "esbuild-freebsd-arm64": "0.13.15", 18 | "esbuild-linux-32": "0.13.15", 19 | "esbuild-linux-64": "0.13.15", 20 | "esbuild-linux-arm": "0.13.15", 21 | "esbuild-linux-arm64": "0.13.15", 22 | "esbuild-linux-mips64le": "0.13.15", 23 | "esbuild-linux-ppc64le": "0.13.15", 24 | "esbuild-netbsd-64": "0.13.15", 25 | "esbuild-openbsd-64": "0.13.15", 26 | "esbuild-sunos-64": "0.13.15", 27 | "esbuild-windows-32": "0.13.15", 28 | "esbuild-windows-64": "0.13.15", 29 | "esbuild-windows-arm64": "0.13.15" 30 | } 31 | }, 32 | "esbuild-android-arm64": { 33 | "version": "0.13.15", 34 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz", 35 | "integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==", 36 | "dev": true, 37 | "optional": true 38 | }, 39 | "esbuild-darwin-64": { 40 | "version": "0.13.15", 41 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz", 42 | "integrity": "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==", 43 | "dev": true, 44 | "optional": true 45 | }, 46 | "esbuild-darwin-arm64": { 47 | "version": "0.13.15", 48 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz", 49 | "integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==", 50 | "dev": true, 51 | "optional": true 52 | }, 53 | "esbuild-freebsd-64": { 54 | "version": "0.13.15", 55 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz", 56 | "integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==", 57 | "dev": true, 58 | "optional": true 59 | }, 60 | "esbuild-freebsd-arm64": { 61 | "version": "0.13.15", 62 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz", 63 | "integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==", 64 | "dev": true, 65 | "optional": true 66 | }, 67 | "esbuild-linux-32": { 68 | "version": "0.13.15", 69 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz", 70 | "integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==", 71 | "dev": true, 72 | "optional": true 73 | }, 74 | "esbuild-linux-64": { 75 | "version": "0.13.15", 76 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz", 77 | "integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==", 78 | "dev": true, 79 | "optional": true 80 | }, 81 | "esbuild-linux-arm": { 82 | "version": "0.13.15", 83 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz", 84 | "integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==", 85 | "dev": true, 86 | "optional": true 87 | }, 88 | "esbuild-linux-arm64": { 89 | "version": "0.13.15", 90 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz", 91 | "integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==", 92 | "dev": true, 93 | "optional": true 94 | }, 95 | "esbuild-linux-mips64le": { 96 | "version": "0.13.15", 97 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz", 98 | "integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==", 99 | "dev": true, 100 | "optional": true 101 | }, 102 | "esbuild-linux-ppc64le": { 103 | "version": "0.13.15", 104 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz", 105 | "integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==", 106 | "dev": true, 107 | "optional": true 108 | }, 109 | "esbuild-netbsd-64": { 110 | "version": "0.13.15", 111 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz", 112 | "integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==", 113 | "dev": true, 114 | "optional": true 115 | }, 116 | "esbuild-openbsd-64": { 117 | "version": "0.13.15", 118 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz", 119 | "integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==", 120 | "dev": true, 121 | "optional": true 122 | }, 123 | "esbuild-sunos-64": { 124 | "version": "0.13.15", 125 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz", 126 | "integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==", 127 | "dev": true, 128 | "optional": true 129 | }, 130 | "esbuild-windows-32": { 131 | "version": "0.13.15", 132 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz", 133 | "integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==", 134 | "dev": true, 135 | "optional": true 136 | }, 137 | "esbuild-windows-64": { 138 | "version": "0.13.15", 139 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz", 140 | "integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==", 141 | "dev": true, 142 | "optional": true 143 | }, 144 | "esbuild-windows-arm64": { 145 | "version": "0.13.15", 146 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz", 147 | "integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==", 148 | "dev": true, 149 | "optional": true 150 | }, 151 | "fsevents": { 152 | "version": "2.3.2", 153 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 154 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 155 | "dev": true, 156 | "optional": true 157 | }, 158 | "function-bind": { 159 | "version": "1.1.1", 160 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 161 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 162 | "dev": true 163 | }, 164 | "has": { 165 | "version": "1.0.3", 166 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 167 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 168 | "dev": true, 169 | "requires": { 170 | "function-bind": "^1.1.1" 171 | } 172 | }, 173 | "howler": { 174 | "version": "2.2.3", 175 | "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz", 176 | "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==" 177 | }, 178 | "is-core-module": { 179 | "version": "2.8.1", 180 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", 181 | "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==", 182 | "dev": true, 183 | "requires": { 184 | "has": "^1.0.3" 185 | } 186 | }, 187 | "nanoid": { 188 | "version": "3.2.0", 189 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", 190 | "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", 191 | "dev": true 192 | }, 193 | "path-parse": { 194 | "version": "1.0.7", 195 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 196 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 197 | "dev": true 198 | }, 199 | "picocolors": { 200 | "version": "1.0.0", 201 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 202 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 203 | "dev": true 204 | }, 205 | "postcss": { 206 | "version": "8.4.5", 207 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz", 208 | "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==", 209 | "dev": true, 210 | "requires": { 211 | "nanoid": "^3.1.30", 212 | "picocolors": "^1.0.0", 213 | "source-map-js": "^1.0.1" 214 | } 215 | }, 216 | "resolve": { 217 | "version": "1.21.0", 218 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz", 219 | "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==", 220 | "dev": true, 221 | "requires": { 222 | "is-core-module": "^2.8.0", 223 | "path-parse": "^1.0.7", 224 | "supports-preserve-symlinks-flag": "^1.0.0" 225 | } 226 | }, 227 | "rollup": { 228 | "version": "2.64.0", 229 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz", 230 | "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==", 231 | "dev": true, 232 | "requires": { 233 | "fsevents": "~2.3.2" 234 | } 235 | }, 236 | "source-map-js": { 237 | "version": "1.0.1", 238 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz", 239 | "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==", 240 | "dev": true 241 | }, 242 | "supports-preserve-symlinks-flag": { 243 | "version": "1.0.0", 244 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 245 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 246 | "dev": true 247 | }, 248 | "vite": { 249 | "version": "2.7.12", 250 | "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.12.tgz", 251 | "integrity": "sha512-KvPYToRQWhRfBeVkyhkZ5hASuHQkqZUUdUcE3xyYtq5oYEPIJ0h9LWiWTO6v990glmSac2cEPeYeXzpX5Z6qKQ==", 252 | "dev": true, 253 | "requires": { 254 | "esbuild": "^0.13.12", 255 | "fsevents": "~2.3.2", 256 | "postcss": "^8.4.5", 257 | "resolve": "^1.20.0", 258 | "rollup": "^2.59.0" 259 | } 260 | } 261 | } 262 | } 263 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "canvas-game-vite", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "devDependencies": { 10 | "vite": "^2.3.3" 11 | }, 12 | "dependencies": { 13 | "howler": "^2.2.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | --------------------------------------------------------------------------------