用JS写游戏，摸鱼也能理直气壮！

引言：当代码遇上游戏，程序员也能成为“造物主”！

大家好，我是你们的老朋友——一个每天都在和bug斗智斗勇的前端程序员。今天，我们不聊枯燥的业务逻辑，也不谈让人头秃的性能优化，我们来点好玩的——用JS写游戏！

是的，你没看错！用JS，你就能在浏览器里打造自己的游戏世界。从经典的贪吃蛇到炫酷的物理弹球，甚至还能做个“社畜快乐球”来发泄一下对老板的不满（嘘，别告诉他）。

最重要的是，代码全公开，复制即运行！老板问起来就说你在“测试浏览器性能”，摸鱼也能理直气壮！

案例1：贪吃蛇——经典永不过时

效果：一条蛇追着自己的尾巴跑，吃到食物变长，撞到墙或自己就GG。简单却让人上瘾，简直是摸鱼界的扛把子！

微信输入代码游戏_代码游戏代码大全_所有游戏的代码

完整代码：




  贪吃蛇
  <style>
    canvas { background: #000; display: block; margin: 0 auto; }
  </style>

<body>
  "game" width="400" height="400">
  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const grid = 20;
    let snake = [{ x: 200, y: 200 }];
    let food = { x: 0, y: 0 };
    let dx = grid;
    let dy = 0;

    functionplaceFood() {
      food.x = Math.floor(Math.random() * (canvas.width / grid)) * grid;
      food.y = Math.floor(Math.random() * (canvas.height / grid)) * grid;
    }

    functiongameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const head = { x: snake[0].x + dx, y: snake[0].y + dy };
      snake.unshift(head);
      if (head.x === food.x && head.y === food.y) {
        placeFood();
      } else {
        snake.pop();
      }
      if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
        alert('Game Over!');
        snake = [{ x: 200, y: 200 }];
        dx = grid;
        dy = 0;
      }
      ctx.fillStyle = 'lime';
      snake.forEach(segment => ctx.fillRect(segment.x, segment.y, grid, grid));
      ctx.fillStyle = 'red';
      ctx.fillRect(food.x, food.y, grid, grid);
    }

    document.addEventListener('keydown', e => {
      if (e.key === 'ArrowUp' && dy === 0) { dx = 0; dy = -grid; }
      if (e.key === 'ArrowDown' && dy === 0) { dx = 0; dy = grid; }
      if (e.key === 'ArrowLeft' && dx === 0) { dx = -grid; dy = 0; }
      if (e.key === 'ArrowRight' && dx === 0) { dx = grid; dy = 0; }
    });

    placeFood();
    setInterval(gameLoop, 100);
  </script>


玩法：用方向键控制蛇的移动，吃到红色方块（食物）变长，撞墙或撞到自己就Game Over。

摸鱼指数：

老板发现概率：（建议全屏运行，老板路过时秒切屏）

案例2：物理弹球——让牛顿为你打工

效果：一个小球在屏幕上弹来弹去，物理引擎加持，效果贼丝滑！

微信输入代码游戏_所有游戏的代码_代码游戏代码大全

完整代码：




  物理弹球
  <style>
    canvas { background: #000; display: block; margin: 0 auto; }
  </style>

<body>
  "game" width="600" height="400">
  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    let x = 100;
    let y = 100;
    let dx = 4;
    let dy = 4;
    const radius = 20;

    functiongameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);
      ctx.fillStyle = 'cyan';
      ctx.fill();
      ctx.closePath();
      x += dx;
      y += dy;
      if (x + dx > canvas.width - radius || x + dx < radius) dx = -dx;
      if (y + dy > canvas.height - radius || y + dy < radius) dy = -dy;
      requestAnimationFrame(gameLoop);
    }

    gameLoop();
  </script>


玩法：打开页面，看小球自己弹来弹去，解压又催眠。

摸鱼指数：

老板发现概率：（建议命名为“物理引擎测试”）

案例3：社畜快乐球——发泄一下对老板的不满

效果：一个球在屏幕上乱飞，用鼠标点击它，它会加速逃跑，像极了老板追你加班的场景！

所有游戏的代码_微信输入代码游戏_代码游戏代码大全

完整代码：




  社畜快乐球
  <style>
    canvas { background: #000; display: block; margin: 0 auto; }
  </style>

<body>
  "game" width="600" height="400">
  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    let x = 300;
    let y = 200;
    let dx = 2;
    let dy = 2;
    const radius = 30;

    functiongameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);
      ctx.fillStyle = 'orange';
      ctx.fill();
      ctx.closePath();
      x += dx;
      y += dy;
      if (x + dx > canvas.width - radius || x + dx < radius) dx = -dx;
      if (y + dy > canvas.height - radius || y + dy < radius) dy = -dy;
      requestAnimationFrame(gameLoop);
    }

    canvas.addEventListener('click', e => {
      const mouseX = e.offsetX;
      const mouseY = e.offsetY;
      if (Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2) < radius) {
        dx *= 1.5;
        dy *= 1.5;
      }
    });

    gameLoop();
  </script>


玩法：用鼠标点击小球，它会加速逃跑，像极了老板追你加班的场景！

摸鱼指数：

老板发现概率：（建议命名为“鼠标事件性能测试”）

结语：摸鱼有道，代码为证！

以上代码，复制粘贴就能运行，摸鱼的同时还能提升JS技能，简直是打工人の福音！

友情提示：摸鱼虽好，可不要贪杯哦~如果被老板抓包，请务必甩锅给浏览器性能测试！

快把这些代码收藏起来，趁着老板不注意，悄悄运行一下吧！

福利活动小编最近在做照片冲洗的业务，超有质感，价格只需要几毛钱一张，另外资料打印低至7分/页，需要的朋友私信小编，或者加下方微信联系即可，超10元全国(非偏远地区)可包邮

代码游戏代码大全_所有游戏的代码_微信输入代码游戏

互动话题：你还有什么想用JS实现的游戏效果？评论区告诉我，下次安排！