Canvas 下落算法

周大胖子 · 发表于 2018-12-23 23:47:17

注意下落算法， y = 常数*T

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>像素鸟测试</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="style/reset.css" rel="stylesheet">
<link href="style/common.css" rel="stylesheet">
<style>
#canvas{
border:1px solid #000;
}
div{
margin:10px auto;
width:602px;
}
h4{
text-align: center;
}
</style>
</head>
<body>
<h4>下落算法推演</h4>
<div>
<canvas id="canvas" width="600" height="600"></canvas>
</div>
<button id="btn">掉啊</button>
<button id="startbtn">飞飞飞</button>
<script>
var myCanvas = document.querySelector("#canvas");
var ctx = myCanvas.getContext("2d");
var img = new Image();
img.src = 'img/bird0_0.png
var pin = 0; //帧编号
var downtime = 0; // 小鸟下落的小帧编号
var y = 100; //小鸟开始下落的定位初始位置
var key = false; //控制小鸟是否下落的开关 true 表示开始下落
var energy = false; //点击上升按钮，让小鸟飞起来
var bor_C = 0; //鸟头角度
img.onload = function (){
setInterval(function(){
// 清屏
ctx.clearRect(0, 0, 600, 600);
// 下面三句话代表打点计数，帧编号增加
pin++;
ctx.font="32px serif";
ctx.fillText(pin,40,40);
// 劳资要开始改变坐标系拉
ctx.save();
// 下落开关
// if(key){
// // 物体下落的公式是常数*t 每次下落，距离都增加了常数*t 所以 y+= 常数*t
// y += 1.6*downtime;
// // 下落时间增加
// downtime++;
// }
// // 再来一个小鸟向上飞,飞的宗旨是越飞越慢，到达一个时间点就开始往下掉
// // 用20- 这个20 其实就是每次向上飞起的帧数
// y -= 1.2*(20-downtime);
// downtime++;
// 综合上升，下落，本质是
// 1.状态是一直在下落
// 2.小鸟上飞的时候，鸟头会陡然向上20祯后，鸟头平缓
if(energy){
// 小鸟起飞
y -= 0.4*(20-downtime);
if(downtime>=20){
energy = false;
downtime = 0;
}
}else{
// 小鸟下落
y += 0.6*downtime;
}
downtime++;
// 鸟头角度改变
bor_C++;
// 坐标圆心偏移x 150 ,Y 120
ctx.translate(200, 200+y);
// 坐标轴整体旋转 (Math.PI*2/360)*2 2°
ctx.rotate((Math.PI*2/120)*bor_C);
// 注意了，这里的图片的坐标轴是负的
ctx.drawImage(img,-24,-24,48,48);
// 还原坐标系
ctx.restore();
// 放个框证明屏幕正常
ctx.fillRect(500,500,50,50);
}, 100)
}
var Btn = document.querySelector('#btn');
var startBtn = document.querySelector('#startbtn');
Btn.onclick= function (){
key = true
}
// 飞起按钮
startBtn.onclick= function (){
energy = true;
downtime = 0; //下落的小祯编号清零
bor_C = -20; //鸟头朝上倾斜
}
</script>
</body>
</html>

复制代码