Canvas 绘制 HTML5 小鱼游戏

作者: 梁同桌 | 来源:发表于2017-04-29 15:42 被阅读80次

这是一个由 canvas 绘制的一个游戏

  • 主要业务逻辑
    • 利用二次贝塞尔曲线绘制海葵
    • 海葵的根部产生果实
    • 大鱼与果实的碰撞
    • 小鱼与大鱼的碰撞
    • 大鱼和小鱼的针动画
    • 生命值判断
    • 分数判断
    • 绘制碰撞圆圈
    • 绘制果实移动

游戏地址:http://www.liangtongzhuo.com/other/game1

GitHub:https://github.com/hi363138911/fish_game

教程地址: http://www.imooc.com/learn/516
个人博客: www.liangtongzhuo.com

相关文章

  • Canvas 绘制 HTML5 小鱼游戏

    这是一个由 canvas 绘制的一个游戏 主要业务逻辑利用二次贝塞尔曲线绘制海葵海葵的根部产生果实大鱼与果实的碰撞...

  • 阿里开源HTML5小游戏开发框架Hilo实战教程

    前言 开发基于Html5的小游戏并不困难,基本思路就是使用Html5的canvas进行游戏图像绘制,通过监听Dom...

  • HTML5 - Canvas

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 Canvas 绘制图像 在使用 ...

  • 14-JS canvas 学习

    Canvas简介 canvas作用: canvas元素可以让用户在网页上绘制图形; canvas介绍 HTML5中...

  • 1.canvas基础(1)

    canvas定义 Canvas 对象是 HTML5 中新增的。HTML5 标签用于绘制图像(通过脚本,通常是 ...

  • 前端知识梳理-1/Canvas

    HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成....

  • HTML5 Canvas

    canvas元素用于网页上绘制图形。 什么事Canvas? HTML5的canvas元素使用JavaScript在...

  • HTML 5 Canvas

    canvas 元素用于在网页上绘制图形。 什么是 Canvas? HTML5 的 canvas 元素使用 Java...

  • HTML5 Canvas游戏开发实战

    《HTML5 Canvas游戏开发实战》主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,...

  • canvas 基本知识

    什么是 canvas canvas 是 HTML5 新定义的标签,通过使用脚本(通常是 JavaScript)绘制...

网友评论

    本文标题:Canvas 绘制 HTML5 小鱼游戏

    本文链接:https://www.haomeiwen.com/subject/vhimzttx.html