使用canvas写一个flappy bird小游戏

最新推荐文章于 2024-06-16 17:04:32 发布

东方睡衣

最新推荐文章于 2024-06-16 17:04:32 发布

阅读量1.4k

点赞数 1

文章标签： javascript 前端 webpack

本文链接：https://blog.csdn.net/web2022050903/article/details/129104051

版权

本文介绍如何利用HTML5的canvas标签制作Flappy Bird小游戏，包括初始化画布、加载资源、绘制背景、地面、管道和小鸟，以及实现碰撞检测和游戏效果。详细讲述了游戏规则和制作过程，提供完整游戏地址和源码。

摘要由CSDN通过智能技术生成

简介

canvas 是HTML5 提供的一种新标签，它可以支持 JavaScript 在上面绘画，控制每一个像素，它经常被用来制作小游戏，接下来我将用它来模仿制作一款叫flappy bird的小游戏。flappy bird（中文名：笨鸟先飞）是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品，于2013年5月24日上线，并在2014年2月突然暴红。

游戏规则

玩家只需要用一根手指来操控，点击或长按屏幕，小鸟就会往上飞，不断的点击就会不断的往高处飞。放松手指，则会快速下降。所以玩家要控制小鸟一直向前飞行，然后注意躲避途中高低不平的管子。小鸟安全飞过的距离既是得分。当然撞上就直接挂掉，只有一条命。

游戏素材

链接：pan.baidu.com/s/1JZR27H1K…

提取码：02ii

开始制作

初始化canvas画布

这里主要是创建画布，并调整画布大小，画布自适应屏幕大小。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> body {
      margin: 0;
      padding: 0;
      overflow: hidden;
  } </style>
</head>
<body>
  <canvas id="canvas">
  当前浏览器不支持canvas，请更换浏览器查看。
  </canvas>

  <script> /** @type {HTMLCanvasElement} */

    const canvas = document.querySelector('#canvas')
    const ctx = canvas.getContext('2d')

    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
  }) </script>
</body>
</html>

加载资源

图片等资源的加载是异步的，只有当所有的资源都加载完了才能开始游戏，所以这里需要对图片等资源进行统一的监控和管理。将图片资源用json进行描述，通过fetch进行统一加载。

// 资源管理器
class SourceManager {
  static images = {};
  static instance = new SourceManager();
  constructor() {
    return SourceManager.instance;}

  loadImages() {
    return new Promise((resolve) => {
      fetch("./assets/images/image.json")
      .then((res) => res.json())
      .then((res) => {
          res.forEach((item, index) => {
            const image = new Image();
            image.src = item.url;
            image.onload = () => {
              SourceMa

最低0.47元/天解锁文章

东方睡衣

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用canvas写一个flappy bird小游戏

canvas 是HTML5 提供的一种新标签，它可以支持 JavaScript 在上面绘画，控制每一个像素，它经常被用来制作小游戏，接下来我将用它来模仿制作一款叫flappy bird的小游戏。flappy bird（中文名：笨鸟先飞）是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品，于2013年5月24日上线，并在2014年2月突然暴红。
复制链接

扫一扫