-
Notifications
You must be signed in to change notification settings - Fork 0
/
step2-1.html
74 lines (62 loc) · 2.7 KB
/
step2-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mario Game</title>
<link href="./css/game.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#btnBegin {-webkit-border-radius:6px;border-radius:6px;border:none;color:#fff;cursor:pointer;font:16px/30px \5fae\8f6f\96c5\9ed1;height:40px;width:120px;position:relative;background-image:-webkit-gradient(linear,left top,left bottom,from(#2AB7EC),to(#2CA0CA));background-image:-webkit-linear-gradient(top,#2AB7EC,#2CA0CA);background-image:-ms-linear-gradient(top,#2AB7EC,#2CA0CA);background-image:-moz-linear-gradient(top,#2AB7EC,#2CA0CA);FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff2AB7EC,endColorStr=#ff2CA0CA);}
#btnBegin::before {background-color:#0F6282;-webkit-box-shadow:1px 2px 4px rgba(0,0,0,.2);box-shadow:1px 2px 4px rgba(0,0,0,.2);-webkit-border-radius:6px;border-radius:6px;content:'';display:inline-block;height:40px;width:120px;position:absolute;left:0;top:4px;z-index:-1;}
#btnBegin:active {background-image:-webkit-gradient(linear,left top,left bottom,from(#3EB7E4),to(#2AB7EC));background-image:-webkit-linear-gradient(top,#3EB7E4,#2AB7EC);background-image:-ms-linear-gradient(top,#3EB7E4,#2AB7EC);background-image:-moz-linear-gradient(top,#3EB7E4,#2AB7EC);FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff3EB7E4,endColorStr=#ff2AB7EC);top:2px;}
#btnBegin:active::before{top:2px;}
</style>
</head>
<body>
<p class="tc mt10"><button id="btnBegin" class="tc">点击开始动画</button></p>
<section class="cont">
</section>
</body>
<script type="text/javascript">
function draw(src,obj,sx,sy,sw,sh,ox,oy,ow,oh){
var i = new Image;
i.onload = function(){
sw === undefined ? obj.drawImage(i,sx,sy) : obj.drawImage(i,sx,sy,sw,sh,ox,oy,ow,oh);
}
i.src = src;
}
var btnBegin = document.getElementById('btnBegin');
function ldimg(){
var d = document.createElement('canvas');
d.height = 400;
d.width = 600;
d.className = 'hb';
document.querySelector('.cont').appendChild(d);
var c = d.getContext('2d');
var FPS = 30,
sleep = Math.floor(1000/FPS),
x = 0,
y = 284,
speedX = 65/1000,
speedY = -45/1000,
minX = 0,
maxX = 500,
minY = 0,
maxY = 284;
function loopDemo(){
var jiangeTime = sleep;
x += speedX * jiangeTime;
y += speedY * jiangeTime;
x = Math.max(minX,Math.min(x,maxX));
y = Math.max(minY,Math.min(y,maxY));
c.clearRect(0,0,600,400);
draw('./img/bg.png',c,0,0);
draw('./img/player.png',c,0,0,50,60,x,y,50,60);
}
setInterval(loopDemo,sleep);
}
btnBegin.addEventListener('click',ldimg,false);
</script>
</html>