tinyHeart.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML小游戏---爱心鱼</title>
<style type="text/css">
body{
padding-top: 10px;
}
.all_bg{
width:800px;
height: 600px;
margin: 0px auto;
}
#allcanvas{
position: relative;
width: 800px;
height: 600px;
margin: 0px;
}
#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>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
main.js:
var can1;
var can2;
var ctx1;
var cxt2;
var canWidth;
var canHeight;
var lastTime;//上一帧执行的时间
var deltaTime;//两帧间隔的时间差
var bgPic=new Image();
document.body.onload=game;
function game()
{
init();
lastTime=Date.now();
deltaTime=0;
gameloop();
}
function init()
{
//获得canvas context
can1=document.getElementById("canvas1");//fishes,dust,UI,circle
ctx1=can1.getContext('2d');
can2=document.getElementById("canvas2");//background,ane,fruits
ctx2=can2.getContext('2d');
bgPic.src="./src/background.jpg";
canWidth=can1.width;
canHeight=can1.height;
}
function gameloop()
{
window.requestAnimFrame(gameloop);
var now=Date.now();
deltaTime=now-lastTime；
lastTime=now；
drawBackground();
}
background.js:
function drawBackground()
{
ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
function gameloop(){
requestAnimationFrame(gameloop);
var now=Date.now();
//以下两行是中文;
deltaTime=now-lastTime;
lastTime=now;
drawBackground();
}- 1 回答
- 0 关注
- 1347 浏览
添加回答
举报
0/150
提交
取消