index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>游戏</title>
  9.     <style>
  10.         #gameScreen{
  11.             border: 1px solid black;
  12.         }    
  13.         #img_ball,#img_brick{
  14.             display: none;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <img id="img_ball" src="/img/ball.png">
  20.     <img id="img_brick" src="/img/brick.png">
  22.     <canvas id="gameScreen" width="800" height="600"></canvas>
  23.     <script src="collisionDetection.js"></script>
  24.     <script src="ball.js"></script>
  25.     <script src="brick.js"></script>
  26.     <script src="levels.js"></script>
  27.     <script src="paddle.js"></script>
  28.     <script src="input.js"></script>
  29.     <script src="game.js"></script>
  30.     <script src="index.js"></script>
  31. </body>
  32. </html>

index.js

  2. const canvas = document.getElementById('gameScreen');
  3. const ctx = canvas.getContext('2d');
  5. const GAME_WIDTH = 800;
  6. const GAME_HEIGHT = 600;
  9. // 载入game
  10. const game = new Game(GAME_WIDTH, GAME_HEIGHT);
  12. let lastTime = 0;
  14. function gameLoop(timestamp) {
  15.     let deltaTime = timestamp - lastTime;
  16.     lastTime = timestamp;
  17.     ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
  19.     // 更新
  20.     game.update(deltaTime);
  21.     game.draw(ctx);
  24.     requestAnimationFrame(gameLoop);
  26. }
  28. requestAnimationFrame(gameLoop);

input.js

  1. class InputHandler {
  2.     constructor(paddle, game) {
  3.         // 按下事件
  4.         document.addEventListener('keydown', e => {
  5.             switch (e.keyCode) {
  6.                 case 37:
  7.                     paddle.moveLeft();
  8.                     break;
  9.                 case 39:
  10.                     paddle.moveRight();
  11.                     break;
  12.                 case 27:
  13.                     game.togglePause();
  14.                     break;
  15.                 case 32:
  16.                     game.start();
  17.                     break;
  19.             }
  20.         })
  22.         document.addEventListener('keyup', e => {
  23.             switch (e.keyCode) {
  24.                 case 37:
  25.                     if (paddle.speed < 0)
  26.                         paddle.stop();
  27.                     break;
  28.                 case 39:
  29.                     if (paddle.speed > 0)
  30.                         paddle.stop();
  31.                     break;
  32.             }
  33.         })
  34.     }
  37. }

levels.js

  2. function buildLevel(game, level) {
  3.     const bricks = [];
  4.     level.forEach((row, rowIndex) => {
  5.         row.forEach((brick, brickIndex) => {
  6.             if (brick === 1) {
  7.                 let position = {
  8.                     x: 80 * brickIndex,
  9.                     y: 75 + 24 * rowIndex
  10.                 };
  12.                 bricks.push(new Brick(game, position));
  13.             }
  14.         });
  15.     });
  17.     return bricks;
  18. }
  20. const level1 = [
  21.     [0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
  22.     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  23.     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  24.     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  25. ]
  27. const level2 = [
  28.     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  29.     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  30.     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  31.     [0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
  32. ]

paddle.js

  2. class Paddle {
  3.     constructor(game) {
  4.         this.gameWidth = game.gameWidth;
  5.         this.width = 150;
  6.         this.height = 20;
  8.         this.maxSpeed = 7;
  9.         this.speed = 0;
  11.         this.position = {
  12.             x: game.gameWidth / 2 - this.width / 2,
  13.             y: game.gameHeight - this.height - 10
  14.         }
  16.     }
  18.     // 左移动
  19.     moveLeft() {
  20.         this.speed = -this.maxSpeed;
  21.     }
  23.     // 右移动
  24.     moveRight() {
  25.         this.speed = this.maxSpeed;
  26.     }
  28.     // 停止
  29.     stop() {
  30.         this.speed = 0;
  31.     }
  35.     draw(ctx) {
  36.         ctx.fillStyle = '#0ff';
  37.         ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  38.     }
  40.     update(deltaTime) {
  41.         this.position.x += this.speed;
  42.         if (this.position.x < 0) this.position.x = 0;
  43.         if (this.position.x + this.width > this.gameWidth) this.position.x = this.gameWidth - this.width;
  44.     }
  45. }

game.js

  1. const GAMESTATE = {
  2.     PAUSED: 0,
  3.     RUNNING: 1,
  4.     MENU: 2,
  5.     GAMEOVER: 3,
  6.     NEWLEVEL: 4
  7. }
  9. class Game {
  10.     constructor(gameWidth, gameHeight) {
  11.         this.gameWidth = gameWidth;
  12.         this.gameHeight = gameHeight;
  13.         this.gamestate = GAMESTATE.MENU;
  14.         this.paddle = new Paddle(this);
  15.         this.ball = new Ball(this);
  16.         new InputHandler(this.paddle, this);
  17.         this.lives = 3;
  18.         this.bricks = [];
  19.         this.gameObjects = [];
  21.         this.levels = [level1, level2];
  22.         this.currentLevel = 0;
  23.     }
  26.     start() {
  27.         // 只有从菜单进来时才能进行下方的操作
  28.         if (this.gamestate !== GAMESTATE.MENU && this.gamestate !== GAMESTATE.NEWLEVEL) return;
  29.         this.bricks = buildLevel(this, this.levels[this.currentLevel]);
  30.         // 重置
  31.         this.ball.reset();
  32.         this.gameObjects = [this.ball, this.paddle];
  33.         this.gamestate = GAMESTATE.RUNNING;
  34.     }
  36.     update(deltaTime) {
  38.         if (this.lives === 0) this.gamestate = GAMESTATE.GAMEOVER;
  39.         if (
  40.             this.gamestate === GAMESTATE.PAUSED ||
  41.             this.gamestate === GAMESTATE.MENU ||
  42.             this.gamestate === GAMESTATE.GAMEOVER
  43.         ) return;
  45.         // 判断长度
  46.         if (this.bricks.length === 0) {
  47.             console.log('切换新的游戏画面');
  48.             if (this.currentLevel + 1 < this.levels.length) {
  49.                 this.currentLevel++;
  50.                 this.gamestate = GAMESTATE.NEWLEVEL;
  51.                 this.start();
  52.             }
  54.         }
  58.         [...this.gameObjects, ...this.bricks].forEach(object => object.update(deltaTime));
  60.         this.bricks = this.bricks.filter(brick => !brick.markedForDeletion);
  61.     }
  63.     draw(ctx) {
  64.         [...this.gameObjects, ...this.bricks].forEach(object => object.draw(ctx));
  65.         // 如果是暂停
  66.         if (this.gamestate === GAMESTATE.PAUSED) {
  67.             ctx.rect(0, 0, this.gameWidth, this.gameHeight);
  68.             ctx.fillStyle = "rgba(0,0,0,0.7)";
  69.             ctx.fill();
  71.             ctx.font = "30px Arial";
  72.             ctx.fillStyle = 'white';
  73.             ctx.textAlign = 'center';
  74.             ctx.fillText('暂停', this.gameWidth / 2, this.gameHeight / 2);
  75.         }
  77.         if (this.gamestate === GAMESTATE.MENU) {
  78.             ctx.rect(0, 0, this.gameWidth, this.gameHeight);
  79.             ctx.fillStyle = "rgba(0,0,0,1)";
  80.             ctx.fill();
  82.             ctx.font = "30px Arial";
  83.             ctx.fillStyle = 'white';
  84.             ctx.textAlign = 'center';
  85.             ctx.fillText('按下空格后开始游戏', this.gameWidth / 2, this.gameHeight / 2);
  86.         }
  88.         if (this.gamestate === GAMESTATE.GAMEOVER) {
  89.             ctx.rect(0, 0, this.gameWidth, this.gameHeight);
  90.             ctx.fillStyle = "rgba(0,0,0,1)";
  91.             ctx.fill();
  93.             ctx.font = "30px Arial";
  94.             ctx.fillStyle = 'white';
  95.             ctx.textAlign = 'center';
  96.             ctx.fillText('游戏结束', this.gameWidth / 2, this.gameHeight / 2);
  97.         }
  98.     }
  100.     togglePause() {
  101.         //暂停
  102.         if (this.gamestate == GAMESTATE.PAUSED) {
  103.             this.gamestate = GAMESTATE.RUNNING;
  104.         } else {
  105.             this.gamestate = GAMESTATE.PAUSED;
  106.         }
  107.     }
  108. }

collistionDetection.js

  1. function detectCollistion(ball, gameObject) {
  2.     // 检测是否是小平台
  3.     const bootomOfBall = ball.position.y + ball.size;
  4.     const topOfBall = ball.position.y;
  6.     const topOfObject = gameObject.position.y;
  7.     const leftSideOfObject = gameObject.position.x;
  8.     const rightSideOfObject = gameObject.position.x + gameObject.width;
  9.     const bottomOfObject = gameObject.position.y + gameObject.height;
  11.     // 如果底部的高度大于等于球的高度值，则处于碰撞状态 
  12.     if (bootomOfBall >= topOfObject
  13.         && topOfBall <= bottomOfObject
  14.         && ball.position.x >= leftSideOfObject
  15.         && ball.position.x + ball.size <= rightSideOfObject
  16.     ) {
  17.         return true;
  18.     } else {
  19.         return false;
  20.     }
  23. }

bricks.js

  1. class Brick {
  2.     constructor(game, position) {
  3.         this.image = document.getElementById('img_brick');
  4.         this.game = game;
  6.         this.position = position;
  7.         this.width = 80;
  8.         this.height = 24;
  10.         this.markedForDeletion = false;
  11.     }
  13.     update() {
  14.         if (detectCollistion(this.game.ball, this)) {
  15.             this.game.ball.speed.y = -this.game.ball.speed.y;
  16.             this.markedForDeletion = true;
  17.         }
  18.     }
  20.     draw(ctx) {
  21.         ctx.drawImage(this.image, this.position.x, this.position.y, this.width, this.height);
  22.     }
  23. }

ball.js

  1. class Ball {
  2.     constructor(game) {
  3.         this.image = document.getElementById('img_ball');
  5.         this.gameWidth = game.gameWidth;
  6.         this.gameHeight = game.gameHeight;
  8.         this.game = game;
  10.         this.reset();
  12.         this.size = 16;
  13.     }
  15.     reset() {
  16.         this.speed = { x: 4, y: -2 };
  17.         this.position = { x: 10, y: 400 };
  18.     }
  20.     draw(ctx) {
  21.         ctx.drawImage(this.image, this.position.x, this.position.y, this.size, this.size);
  22.     }
  24.     update(deltaTime) {
  25.         this.position.x += this.speed.x;
  26.         this.position.y += this.speed.y;
  28.         // 判断边界 左右
  29.         if (this.position.x + this.size > this.gameWidth || this.position.x < 0) {
  30.             this.speed.x = -this.speed.x;
  31.         }
  33.         // 上下
  34.         if (this.position.y < 0) {
  35.             this.speed.y = -this.speed.y;
  36.         }
  38.         // 触碰到底部
  39.         if (this.position.y + this.size > this.gameHeight) {
  40.             this.game.lives--;
  41.             this.reset();
  42.         }
  44.         // 碰撞检测
  45.         if (detectCollistion(this, this.game.paddle)) {
  46.             this.speed.y = -this.speed.y;
  47.             this.position.y = this.game.paddle.position.y - this.size;
  48.         }
  50.     }
  52. }

图片资源

image.png
image.png