Canvas 绘制 HTML5 小鱼游戏

最新推荐文章于 2021-06-07 12:52:27 发布
最新推荐文章于 2021-06-07 12:52:27 发布
阅读量256 收藏
点赞数
原文链接：https://juejin.im/post/5a31f154518825585132b573
版权

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

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

游戏地址：http://www.liangtongzhuo.com/other/game1
GitHub：https://github.com/hi363138911/fish_game
教程地址： http://www.imooc.com/learn/516 个人博客： www.liangtongzhuo.com

转载于:https://juejin.im/post/5a31f154518825585132b573

weixin_34343000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5 canvas基础入门到捕鱼达人小游戏实现(5)drawImage的应用
joke_shi的博客
12-30 3101
不知不觉，这已经是第五篇canvas系列文章了， 课时我们依然没有讲捕鱼游戏，今天这节我们主要讲canvas是如何处理图片的，这节讲完了，我们就可以正式开始编写捕鱼游戏了。 图片处理 drawImage1、context.drawImage(image,x,y) x:绘制图像的x坐标 y:绘制图像的y坐标2、context.drawImage(image,x,y,w,h); x:画在canvas的x
H5 canvas基础入门到捕鱼达人小游戏实现(4)canvas事件处理和图形动作
joke_shi的博客
12-27 1707
这已经是第四篇canvas文章了，今天主要讲canvas中图形动作和canvas中的事件 图形动作常用动作api：平移，缩放，旋转平移var oC = document.getElementById('c1'); var gd = oC.getContext('2d'); gd.translate(100,100);//x,y平移到的位置 gd.fillRect(0,0,100,100);//绘制一
HTML5交互动画开发历次作业
zb_tjw的博客
03-24 1265
Please Call Me LeiFeng!!! 1.用canvas画个笑脸 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &amp
Canvas绘制鱼儿游水动画
越陌度阡
06-26 1386
实现一个canvas绘图的鱼儿游水动画，绘图的原理为通过定时器绘制图片不同的位置实现动画的效果。 以下是动画效果： 以下是代码实现 ： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas绘制鱼儿游水动画</title......
2021年Canvas绘制鱼儿游水动画
码蝗的博客
03-12 453
Canvas绘制鱼儿游水动画 实现一个canvas绘图的鱼儿游水动画，绘图的原理为通过定时器绘制图片不同的位置实现动画的效果。 以下是动画效果： 以下是代码实现 ： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas绘制鱼儿游水动画</title> <style type="text/css"&gt...
html5喂养小鱼游戏.zip
07-11
本项目"html5喂养小鱼游戏"是基于HTML5的Canvas元素构建的一个趣味小游戏，旨在展示HTML5的图形渲染能力和JavaScript编程技巧。 Canvas是HTML5中的一个核心元素，它允许通过JavaScript在网页上进行动态图形绘制。在...
html5游戏大鱼吃小鱼
09-29
《HTML5游戏大鱼吃小鱼：纯JS+Canvas实现》 HTML5作为现代网页开发的重要标准，极大地拓展了Web应用程序的功能，其中HTML5的Canvas元素更是为动态图形和交互式游戏开发提供了强大的舞台。本项目"大鱼吃小鱼"就是...
HTML5大鱼吃小鱼小游戏代码.zip
05-14
总结来说，这个HTML5大鱼吃小鱼小游戏不仅展示了HTML5的各种特性，如Canvas绘图、Web Storage、事件处理，还涉及到了JavaScript的游戏编程技巧，如对象创建、动画制作和游戏逻辑设计。对于想要学习前端开发，尤其是...
HTML5大鱼吃小鱼小游戏代码
04-01
首先，HTML5的`<canvas>`元素是这个游戏的基础，它提供了在网页上绘制图形的能力。开发者通过JavaScript操作`canvas`的绘图API，如`fillRect`、`clearRect`、`beginPath`、`moveTo`、`lineTo`等，来绘制游戏场景，...
HTML5 Canvas海里鱼游动特效.zip
07-04
HTML5 Canvas海里鱼游动特效是一款蓝色大海海水里鱼儿游动特效下载。
简单用Html5画了一条鱼
IT程序员
10-16 683
[code="JavaScript"] function draw(){ var c = document.getElementById("myTrails"); var cxt = c.getContext("2d"); cxt.save(); head(cxt); backbone(cxt); fishtail(cxt); setAuthor(cxt); ...
用HTML 5实现爱心小鱼的游戏
qq_22187867的博客
05-02 2419
本游戏的示例来源于果壳网，用鼠标可以控制大鱼吃果实，然后用大鱼将果实喂养给小鱼。 演示效果如下：  HTML代码如下： tinyHeart                             JS代码如下： var can1=document.getElementById('canvas1');
HTML5之简单小画板
蓝莓味的鱼
09-08 2893
一：先熟悉一下基本图形绘制 1：线条 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;绘制线条&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &
游戏状态自动管理框架 BOARDGAME.IO
12-26 2620
授权协议:MIT 开发语言:JavaScript 操作系统:跨平台 开发厂商:Google BOARDGAME.IO 详细介绍 BOARDGAME.IO 是 Google 开源的一个游戏框架，旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数，这些函数用于描述当一个指定动作发生时游戏的状态变化，框架负责处理表述性状态传递。 无需再手动编写任何网络或后端代码。
Canvas绘制一个大鱼喂小鱼的游戏
weixin_30342827的博客
04-06 187
Canvas是HTML5中的一部分，强大的API足以让我们绘制我们任意想绘制的东西。利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏，下面是源码地址https://github.com/CuteBlackCat/tinyHeart 这是一个完全由Canvas绘制的游戏，效果图： 这个小游戏很具有美感，没一点一滴都是绘制出...
HTML5+JavaScript游戏：模拟水族馆
emowuyi
12-13 503
模仿水族馆，您可以创建丰富多彩，充满活力的运动模式。 源演示地址：http://www.31358.cn/demo/bact/ 游戏需要html5浏览器支持
用html编写一幅简单的画,简单用Html5画了一条鱼
weixin_29133151的博客
06-07 323
function draw(){var c = document.getElementById("myTrails");var cxt = c.getContext("2d");cxt.save();head(cxt);backbone(cxt);fishtail(cxt);setAuthor(cxt);cxt.restore();createTwoFish(cxt);}//再创建一条鱼funct...
python利用pygame框架实现类似大鱼吃小鱼游戏 (松鼠吃松鼠) code from making games with python and pygame
Ibelievesunshine的博客
10-30 2284
本源码来自于 《Python和Pygame游戏开发指南》 # Squirrel Eat Squirrel (a 2D Katamari Damacy clone) # By Al Sweigart al@inventwithpython.com # http://inventwithpython.com/pygame # Released under a "Simplified BSD" li...
【180629】大鱼吃小鱼游戏VC++最终版源码
资源小站
06-29 4320
基于VC++平台编写的大鱼吃小鱼Game游戏最终版，运行后 会出现带背景的 类似大鱼吃小鱼的游戏，当然不能喝真的相比，只是一个课程设计，可以设置关卡。　　界面方面运用了SkinPlusPlusDLL.dll界面控件，运行时请保证此控件和RES目录在EXE同级目录中，否则出错。源码下载地址：点击下载备用下载地址：点击下载...
HTML5 Canvas入门：绘制线条与文本
在HTML5中，Canvas是一个强大的图形绘制接口，允许开发者通过JavaScript动态创建和修改二维图形。这个入门教程面向初学者，旨在教授如何利用HTML5 Canvas进行基本的绘图操作，包括创建简单的动画和响应鼠标事件。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值