HTML5小游戏
2017-10-11 本文已影响53人
PHPer_
玩法：
1.大鱼吃果实
2.大鱼喂小鱼
3.小鱼恢复体力
阶段一目标：
1.静止的海葵
2.海葵产生果实
3.果实自动漂浮
4.大鱼吃果实
5.大鱼喂小鱼
搭建HTML网页结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>game</title>
<style type="text/css">
body {
padding-top: 10px;
}
.all_bg {
width: 800px;
height: 600px;
margin: 0 auto;
}
#allcanvas {
position: relative;
width: 800px;
height: 600px;
margin: 0;
}
#canvas1 {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
#canvas2 {
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
</style>
</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>
</body>
</html>
绘制背景
。。。
绘制海葵
绘制直线的API，参考HTML 5 Canvas：
beginPath();
closePath();
strokeStyle();
stroke();
lineWidth;
lineCap;
globalAlpha；
。。。
绘制果实
黄色果实和蓝色果实
使用到的API:
drawImage();
长大=>成熟
游戏规则：保持屏幕上有15颗果实
大鱼绘制
画大鱼、身子、尾巴、眼睛
使用到的API:
translate();
rotate();
Math.atan2(y,x);
大鱼随鼠标移动
大鱼的坐标、鼠标的坐标、大鱼根据鼠标的位置旋转；
大鱼和果实的碰撞检测
原理：检测大鱼和果实的距离
优化：切换浏览器标签后js不执行，果实无限大
绘制小鱼
原理和大鱼一样
阶段二目标：
1.海葵摆动动画
2.大鱼眼睛、尾巴动画
3.小鱼眼睛、尾巴动画
4.小鱼生命值判断
5.游戏分值计算
6.漂浮物
小鱼动画
尾巴摆动：轮播尾巴图片，时间规律
眨眼睛：轮播眼睛图片，闭眼时间一直，睁眼时间随机保持2000ms-3000ms
身体变白：大鱼不能及时把食物传递给小鱼，小鱼产生的动画，小鱼身体彻底变白那么游戏game over（包括GAMEOVER字体的过渡显示以及鼠标控制大鱼失效）；身体图片的轮播设计到有去无回的状态；
大鱼喂小鱼
原理跟大鱼吃果实类似，首先检测大鱼和小鱼之间的距离，然后判断小于某个距离那么小鱼满血复活（身体颜色的变化）；
大鱼动画
摇尾巴：同小鱼原理
眨眼睛：同小鱼原理
身体升级：判断吃的是蓝色果实还是橙色果实，身体分别变换不同的颜色，在喂小鱼之后大鱼身体恢复原始颜色；
游戏分值的计算
橙色果实一颗100分值，吃到蓝色果实后当前吃到的橙色果实乘以2；以及游戏界面分数的显示；
特效（增加用户体验）
- 大鱼吃果实特效
物体池（pool）
检测是否有闲着的物体
半径逐渐增大，颜色逐渐变浅，反比关系
绘图API - 大鱼喂小鱼特效
物体池（pool）
检测是否有闲着的物体
半径逐渐增大，颜色逐渐变浅，反比关系
