用HTML 5实现爱心小鱼的游戏

最新推荐文章于 2024-06-23 21:25:25 发布
最新推荐文章于 2024-06-23 21:25:25 发布
阅读量2.4k 收藏 4
点赞数 1
文章标签： html 游戏 鼠标 大鱼吃小鱼
本文介绍了如何使用HTML 5创建一款大鱼吃小鱼的游戏。通过控制大鱼吃掉屏幕上的果实，果实再喂给小鱼。游戏包含HTML、CSS和JavaScript代码，展示了如何实现游戏的基本功能，如鼠标控制、碰撞检测和游戏得分。
摘要由CSDN通过智能技术生成

本游戏的示例来源于果壳网，用鼠标可以控制大鱼吃果实，然后用大鱼将果实喂养给小鱼。

演示效果如下：


 HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tinyHeart</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="all_bg">
    <div id="allcanvas">
    <canvas id="canvas1" width="800" height="600"></canvas>
    <canvas id="canvas2" width="800" height="600"></canvas>
    </div>
    </div>
    <script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>


JS代码如下：

var can1=document.getElementById('canvas1');   //fish, dust, UI, circle
var can2=document.getElementById('canvas2');   //background, ane, fruits


var ctx1=can1.getContext("2d");
var ctx2=can2.getContext("2d");




var lastTime=Date.now();
var deltaTime=0;


var can1Width=can1.width;
var can1Height=can1.height;




var bgPic = new Image();
bgPic.src="images/background.jpg";


function drawBackground(){
ctx2.drawImage(bgPic,0,0,can1Width,can1Height);
}


var mx= can1Width *0.5;
var my= can1Height *0.5;
can1.addEventListener("mousemove",onMouseMove,false);
function onMouseMove(e){
if(!data.gameOver){
if(e.offsetX){
mx=e.offsetX;
my=e.offsetY;
}
}
}


function momFruitsCollision(){
if(!data.gameOver){
for(var i=0;i<fruit.num;i++){
if(fruit.alive[i]){
var l=calLength2(fruit.x[i],fruit.y[i], mom.x, mom.y);
if(l<900){
fruit.dead(i);
data.fruitNum++;
mom.momBodyCount++;
if(mom.momBodyCount>7){
mom.momBodyCount=7;
}
if(fruit.fruitType[i]=="blue"){
data.double=2;
}
wave.born(fruit.x[i],fruit.y[i]);
}
}
}
}
}


function momBabyCollision(){
if(data.fruitNum>0&&!data.gameOver){
var l=calLength2(mom.x,mom.y, baby.x, baby.y);
if(l<900){
baby.babyBodyCount=0;
mom.momBodyCount=0;
data.addScore();
}
}
}


var babyTail=[];
for(var i=0;i<8;i++){
babyTail[i]=new Image();
babyTail[i].src="images/babyTail"+i+".png";
}
var babyEye=[];
for(var i=0;i<2;i++){
babyEye[i]=new Image();
babyEye[i].src="images/babyEye"+i+".png";
}
var babyBody=[];
for(var i=0;i<20;i++){
babyBody[i]=new Image();
babyBody[i].src="images/babyFade"+i+".png";
}


var momTail=[];
for(var i=0;i<8;i++){
momTail[i]=new Image();
momTail[i].src="images/bigTail"+i+".png";
}
var momEye=[];
for(var i=0;i<2;i++){
momEye[i]=new Image();
momEye[i].src="images/bigEye"+i+".png";
}
var momBodyOra=[];
var momBodyBlue=[];
for(var i=0;i<8;i++){
momBodyOra[i]=new Image();
momBodyOra[i].src="images/bigSwim"+i+".png";
momBodyBlue[i]=new Image();
momBodyBlue[i].src="images/bigSwimBlue"+i+".png";
}


var dustPic=[];
for(var i=0;i<7;i++){
dustPic[i]=new Image();
dustPic[i].src="images/dust"+i+".png";
}




//ane
var aneObj=function(){
this.rootx=[];
this.headx=[];
this.heady=[];
this.amp=[];
this.alpha=0;
}
aneObj.prototype.num=50;
aneObj.prototype.init=function(){
var h=can1.height;
for(var i=0;i<this.num;i++){
this.rootx[i]=i*16 + Math.random() * 20;
this.headx[i]=this.rootx[i];
this.heady[i]=h-250+Math.random() * 50;
this.amp[i]=50+Math.random() * 50;
}
}
aneObj.prototype.draw=function(){
this.alpha+=deltaTime *0.0008;
var l=Math.sin(this.alpha);
ctx2.save();
ctx2.globalAlpha=0.6;
ctx2.lineCap= "round";
ctx2.strokeStyle= "#3b154e";
ctx2.lineWidth=20;
for(var i=0;i<this.num;i++){
ctx2.beginPath();
ctx2.moveTo(this.rootx[i],can1Height);
ctx2.quadraticCurveTo(this.rootx[i],can1Height-100,this.headx[i]+l*this.amp[i],this.heady[i]);
ctx2.stroke();
ctx2.closePath();
}
ctx2.restore();
}


var ane=new aneObj();
ane.init();


//fruit
var fruitObj=function(){
this.alive=[];
this.x=[];
this.y=[];
this.l=[];
this.spd=[];
this.fruitType=[];
this.orange =new Image();
this.blue =new Image();
}
fruitObj.prototype.num= 30;
fruitObj.prototype.init= function(){
for(var i=0;i<this.num;i++){
this.alive[i]=false;
this.spd[i]=Math.random() *0.017 + 0.003;
}
this.orange.src="images/fruit.png";
this.blue.src="images/blue.png";
}
fruitObj.prototype.draw=function(){
for(var i=0;i<this.num;i++){
if(this.alive[i]){
if(this.fruitType[i]=="blue"){
var pic=this.blue;
}else{
var pic=this.orange;
}
if(this.l[i]<=14){
this.l[i]+=this.spd[i] * deltaTime;
}else{
this.y[i]-=this.spd[i] *7 *deltaTime;
}
ctx2.drawImage(pic, this.x[i] -this.l[i] *0.5,
this.y[i] - this.l[i] *0.5, this.l[i] , this.l[i]);
if(this.y[i]<10){
this.alive[i] =false;
}
}
}
}
fruitObj.prototype.born=function(i){
var aneID=Math.floor(Math.random() * ane.num);
this.alive[i]=true;
this.l[i]=0;
this.x[i]=ane.headx[aneID];
this.y[i]=ane.heady[aneID];
var ran=Math.random();
if(ran<0.2){
this.fruitType[i]="blue";
}else{
this.fruitType[i]="orange";
}

}
fruitObj.prototype.dead=function(i){
this.alive[i]=false;
}
function fruitMonitor(){
var num=0;
for(var i=0;i<fruit.num;i++){
if(fruit.alive[i]) num++;
}
if(num<15){
sendFruit();
return;
}
}
function sendFruit(){
for(var i=0;i<fruit.num;i++){
if(!fruit.alive[i]){
fruit.born(i);
return;
}
}
}
var fruit=new fruitObj();
fruit.init();


//mom
var momObj=function(){
this.x;
this.y;
this.angle;
this.bigEye=new Image();
this.bigTail=new Image();
this.momBodyCount=0;
}
momObj.prototype.init = function(){
this.x=can1Width *0.5;
this.y=can1Height *0.5;
this.angle=0;
this.bigEye.src="images/bigEye0.png";
this.bigTail.src="images/bigTail0.png";
}
momObj.prototype.draw=function(){
this.x=lerpDistance(mx, this.x, 0.96);
this.y=lerpDistance(my, this.y, 0.96);
var deltaY=my-this.y;
var deltaX=mx-this.x;
var beta = Math.atan2(deltaY,deltaX)+Math.PI;
this.angle=lerpAngle(beta, this.angle, 0.6);


ctx1.save();
ctx1.translate(this.x,this.y);
ctx1.rotate(this.angle);
ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+30,-this.bigTail.height*0.5);
var momBodyCount=this.momBodyCount;
if(data.double==1){
ctx1.drawImage(momBodyOra[momBodyCount],-momBodyOra[momBodyCount].width*0.5,-momBodyOra[momBodyCount].height*0.5);
}else{
ctx1.drawImage(momBodyBlue[momBodyCount],-momBodyBlue[momBodyCount].width*0.5,-momBodyBlue[momBodyCount].height*0.5);
}
ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5);
ctx1.restore();
}
var mom=new momObj();
mom.init();


//baby
var babyObj=function(){
this.x;
this.y;
this.angle;
this.babyEye=new Image();
this.babyBody=new Image();
this.babyTail=new Image();
this.babyTailTimer= 0;
this.babyTailCount= 0;


this.babyEyeTimer=0;
this.babyEyeCount=0;
this.babyEyeInterval =1000;


this.babyBodyTimer= 0;
this.babyBodyCount= 0;
}
babyObj.prototype.init=function(){
this.x=can1Width * 0.5-50;
this.y=can1Height * 0.5+50;
this.angle=0;
this.babyBody.src="images/babyFade0.png";
}
babyObj.prototype.draw=function(){
this.x=lerpDistance(mom.x, this.x, 0.996);
this.y=lerpDistance(mom.y, this.y, 0.996);
var deltaY=mom.y-this.y;
var deltaX=mom.x-this.x;
var beta = Math.atan2(deltaY,deltaX) +Math.PI;
this.angle=lerpAngle(beta, this.angle, 0.6);


this.babyTailTimer +=deltaTime;
if(this.babyTailTimer>50){
this.babyTailCount=(this.babyTailCount+1) % 8;
this.babyTailTimer %= 50;
}




this.babyEyeTimer +=deltaTime;
if(this.babyEyeTimer>this.babyEyeInterval){
this.babyEyeCount=(this.babyEyeCount+1) % 2;
this.babyEyeTimer %= this.babyEyeInterval;
if(this.babyEyeCount==0){
this.babyEyeInterval= Math.random() * 1500 + 2000;
}else{
this.babyEyeInterval=200;
}
}


this.babyBodyTimer +=deltaTime;
if(this.babyBodyTimer>300){
this.babyBodyCount=this.babyBodyCount+1;
this.babyBodyTimer %=300;
if(this.babyBodyCount>19){
this.babyBodyCount=19;
data.gameOver=true;
}
}




ctx1.save();
ctx1.translate(this.x,this.y);
ctx1.rotate(this.angle);
var babyTailCount=this.babyTailCount;
ctx1.drawImage(babyTail[babyTailCount],-babyTail[babyTailCount].width*0.5+23,-babyTail[babyTailCount].height*0.5);
var babyBodyCount=this.babyBodyCount;
ctx1.drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount].width*0.5,-babyBody[babyBodyCount].height*0.5);
var babyEyeCount=this.babyEyeCount;
ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width*0.5,-babyEye[babyEyeCount].height*0.5);


ctx1.restore();
}
var baby=new babyObj();
baby.init();


//data
var dataObj=function(){
this.fruitNum=0;
this.double=1;
this.score=0;
this.gameOver=false;
this.Alpha=0;
}
dataObj.prototype.reset=function(){
this.double=1;
}
dataObj.prototype.draw=function(){
var w=can1.width;
var h=can1.height;
ctx1.fillStyle="white";
ctx1.font="25px Verdana";
ctx1.textAlign="center";
ctx1.fillText("SCORE:"+this.score,w * 0.5,h-20);
if(this.gameOver){
this.Alpha+=deltaTime *0.0005;
if(this.Alpha>1)
this.Alpha=1;
ctx1.fillStyle="rgba(255,255,255,"+this.Alpha+")";
ctx1.fillText("GAMEOVER",w * 0.5,h * 0.5);
}
}
dataObj.prototype.addScore=function(){
this.score+=this.fruitNum*100*this.double;
this.fruitNum=0;
this.double=1;
}
var data=new dataObj();


//wave
var waveObj=function(){
this.x=[];
this.y=[];
this.alive=[];
this.r=[];
}
waveObj.prototype.num=10;
waveObj.prototype.init=function(){
for (var i = 0; i < this.num; i++) {
this.alive[i]=false;
this.r[i]=0;
}
}
waveObj.prototype.draw=function(){
for (var i = 0; i < this.num; i++) {
if(this.alive[i]){
this.r[i]+=deltaTime *0.04;
if(this.r[i]>50)
this.alive[i]=false;
var alpha=1-this.r[i] / 100;
ctx1.beginPath();
ctx1.arc(this.x[i], this.y[i], this.r[i], 0,Math.PI*2);
ctx1.closePath();
ctx1.strokeStyle = 'rgba(255,255,255,' + alpha + ')';
ctx1.stroke();
}
}
}
waveObj.prototype.born=function(x,y){
for (var i = 0; i < this.num; i++) {
if(!this.alive[i]){
this.alive[i]=true;
this.r[i]=10;
this.x[i]=x;
this.y[i]=y;
               return;
}
}
}
var wave=new waveObj();
wave.init();


//dust
var dustObj=function(){
this.x=[];
this.y=[];
this.amp=[];
this.NO=[];
this.alpha;
}
dustObj.prototype.num=30;
dustObj.prototype.init=function(){
for (var i = 0; i < this.num; i++) {
this.x[i]=Math.random()*can1Width;
this.y[i]=Math.random()*can1Height;
this.amp[i]=20+Math.random()*15;
this.NO[i]=Math.floor(Math.random()*7);
}
this.alpha=0;
}
dustObj.prototype.draw=function(){
this.alpha+=deltaTime*0.0008;
var l=Math.sin(this.alpha);
for (var i = 0; i < this.num; i++) {
var no=this.NO[i];
ctx1.drawImage(dustPic[no],this.x[i]+this.amp[i]*l,this.y[i]);
}
}
var dust=new dustObj();
dust.init();




gameloop();


function gameloop(){
window.requestAnimFrame(gameloop);
var now=Date.now();
deltaTime=now-lastTime;
lastTime=now;
if(deltaTime>40) deltaTime=40;
drawBackground();
ane.draw();
fruitMonitor();
fruit.draw();


ctx1.clearRect(0,0,can1Width,can1Height);
mom.draw();
momFruitsCollision();
baby.draw();
momBabyCollision();
data.draw();
wave.draw();
dust.draw();
}





追星逐月丶
关注
imooc爱心鱼源代码
03-20
自己一行一行跟着教程打的，希望大家会喜欢
Canvas 绘制 HTML5 小鱼游戏
weixin_34343000的博客
12-14 270
这是一个由 canvas 绘制的一个游戏 主要业务逻辑 利用二次贝塞尔曲线绘制海葵 海葵的根部产生果实 大鱼与果实的碰撞 小鱼与大鱼的碰撞 大鱼和小鱼的针动画 生命值判断 分数判断 绘制碰撞圆圈 绘制果实移动 游戏地址：http://www.liangtongzhuo.com/other/game1 GitHub：https://github.com/hi363138911/fi...
爱心代码html
最新发布
liu198273的博客
06-23 218
【代码】爱心代码html。
HTML5爱心鱼小游戏（timy）
08-12
一款爱心鱼HTML5小游戏，通过鼠标的自由移动控制大鱼的移动方向，使大鱼吃到更多的果实（海藻产生的橙色或蓝色果实），大鱼在吃到橙色食物后身体变橙色、吃到蓝色食物后身体变蓝。
html5爱心鱼
11-28
html5新技术，利用canvas接口，js技术开发爱心鱼小游戏，解压即可使用
关于慕课网上爱心小鱼的讲解
weixin_30483495的博客
06-04 80
大家好！我是super喵二，这两个游戏是我学了h5之后，开始做的。主要是参照了慕课网的视频 ：话不多说，先讲思路吧： 1.爱心小鱼（这个小游戏是看着视频敲的，之前不是太熟悉的时候）：先上图 一、当然是需要两个canvas啦： 看图分析就是一个canvas用于画背景，芦苇，和果实 另一个canvas画鱼，记录分数，以及产生的水圈 二、绘制： 芦苇：定义一个芦苇类，包含芦苇根的位置，以...
HTML5大鱼吃小鱼小游戏代码.zip
05-14
在这个“大鱼吃小鱼”小游戏的代码中，我们可以深入理解HTML5在游戏开发中的应用，以及前端技术如何结合创造出富有动态效果的互动体验。 游戏的核心在于JavaScript，它是HTML5生态的重要组成部分，负责处理游戏逻辑...
HTML5大鱼吃小鱼小游戏代码
04-01
在压缩包的文件名称列表中，“HTML5大鱼吃小鱼小游戏代码”可能是包含所有游戏资源的文件夹，其中包括HTML文件（游戏的主页面），JavaScript文件（包含游戏逻辑），可能还有CSS文件（定义游戏的样式），以及图片和...
html5实现疯狂的鲨鱼吃小鱼手机端游戏源码.zip
11-04
"疯狂的鲨鱼吃小鱼"手机端游戏源码是基于HTML5技术实现的一个游戏示例，下面我们将深入探讨HTML5在游戏开发中的应用以及相关知识点。 首先，HTML5的`<canvas>`元素是游戏开发的关键。这个元素提供了一个可编程的...
html5游戏大鱼吃小鱼
09-29
JavaScript是实现游戏逻辑的核心语言，它负责处理游戏中的事件、状态管理和动画循环。在这个"大鱼吃小鱼"游戏中，JavaScript用于定义鱼的行为规则（如移动、转向、吃掉小鱼等），响应用户输入（方向键控制鱼的移动）...
H5小游戏——爱心鱼
03-21
html5新技术，利用canvas接口，页面有吃果实总数及喂食小鱼的果实数量时时变化数据，js技术开发爱好者很好参考的爱心鱼小游戏，解压即可调试使用。
h5简单小游戏，大鱼吃小鱼
08-01
h5简单小游戏，大鱼吃小鱼，这个是当初学习游戏开发时跟着视频写的。希望对你有所帮助
大鱼吃小鱼实现脚本（部分）
10-13
scratch,目前部分功能实现,后续完善继续发布，仅供初学者！
html爱心页面
11-06
我能抽象出整个世界．．． 但是我不能抽象出你．．． 因为你在我心中是那么的具体．．． 所以我的世界并不完整．．． 我可以重载甚至覆盖这个世界里的任何一种方法．．． 但是我却不能重载对你的思念．．． 也许命中注定了 你在我的世界里永远的烙上了静态的属性．．． 而我不慎调用了爱你这个方法．．． 当我义无返顾的把自己作为参数传进这个方法时．．． 我才发现爱上你是一个死循环．．． 它不停的返回对你的思念压入我心里的堆栈．．． 在这无尽的黑夜中．．． 我的内存里已经再也装不下别人．．． 我不停的向系统申请空间．．． 但却捕获一个异常－－－我爱的人不爱我．．． 为了解决这个异常．．． 我愿意虚拟出最后一点内存．．． 把所有我能实现的方法地址压入堆栈．．． 并且在栈尾压入最后一个方法－－－将字符串＂我爱你，你爱我吗？＂传递给你．．． 如果返回值为真－－我将用尽一生去爱你．．． 否则－－我将释放掉所有系资源．
html5喂养小鱼游戏.zip
07-11
JavaScript的`requestAnimationFrame`函数用于实现游戏循环，这个函数在浏览器准备好下一次重绘之前调用指定的函数，确保游戏画面流畅地更新。通过不断调用这个函数，游戏中的所有动态元素得以持续更新，如鱼的游动...
如何动态显示爱心HTML,css 如何在html页面上输出一个“爱心”呢？
weixin_34811747的博客
06-08 1833
摘要:下文讲述使用css脚本在页面上绘制一个“爱心”形状的方法分享,如下所示:“爱心”是html中常用的一种形状，那么如何使用css脚本在html上绘制一个”爱心”呢？实现思路:1.绘制两个长方形并设置长方形的圆角边框2.对绘制的长方形进行旋转，拼接处“爱心”形状如下所示:例:使用css绘制一个“爱心”形状的示例分享maomao365.com css 绘制 "爱心" 的示例分享----将div转换...
html5鱼游动动画,前端每日实战：121# 视频演示如何用 CSS 和 D3 创作一个小鱼游动的交互动画...
weixin_34574003的博客
06-07 636
效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载每日前端实战系列的全部源代码请从 github 下载：代码解读定义 dom，容器中包含的子元素分别代表鱼的身体、眼睛、背鳍和尾巴：设置页面样式为全屏且没有滚动条：body {margin:...
情人节-动态爱心背景（html5+css+js）
weixin_42449711的博客
07-21 7639
一、效果图 二、源代码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;情人节爱心背景&lt;/title&gt; &lt;style&gt; body{ overflow: hidden; margin: 0; } h1{
html5制作大鱼吃小鱼游戏
10-21
大鱼吃小鱼游戏是一款经典的游戏，非常适合用HTML5制作。 首先，我们需要创建一个画布元素(canvas)，用于绘制游戏场景。然后，使用JavaScript编写游戏逻辑和动画效果。 游戏开始时，我们可以在画布上绘制一个大鱼...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值