-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (128 loc) · 4.28 KB
/
index.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$终结</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img=new Image();
img.src="./NPCrabbitbaby-2.png";
//键盘码：37--左 38--上 39--右 40--下
img.onload=function(){
//计算宽高
var w=img.width/4;
var h=img.height/4;
//设置计算图片变化的变量
var i=0;
var j=0;
//设置图像移动距离的变量
var x=400-w/2;
var y=300-h/2;
//设置文字
ctx.font="30px Microsoft Yahei";
ctx.fillStyle="red";
ctx.fillText("点击方向键，开始移动",250,200);
ctx.drawImage(img,0,0,w,h,x,y,w,h);
//结束事件处理
function end (){
clearInterval(timer);
ctx.fillText("你死了",340,260);
};
//键盘点击事件
var timer;
window.onkeyup=function(e){
//代码简化
clearInterval(timer);
timer = setInterval(function(){
if(e.keyCode==40 || e.keyCode==37 || e.keyCode==38 || e.keyCode==39){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
if(e.keyCode==40){
ctx.drawImage(img,w*i,0,w,h,x,y+=6,w,h);
if(y>=canvas.height-h){
end();
}
}
if(e.keyCode==37){
ctx.drawImage(img,w*i,h,w,h,x-=6,y,w,h);
if(x<=0){
end();
}
}
if(e.keyCode == 38){
ctx.drawImage(img,w*i,h*3,w,h,x,y-=6,w,h);
if(y<=0){
end();
}
}
if(e.keyCode == 39){
ctx.drawImage(img,w*i,h*2,w,h,x+=6,y,w,h);
if(x>=canvas.width-w){
end();
}
}
i++;
if(i>=4) i=0;
},100);
//思路代码
/*if(e.keyCode==40){
clearInterval(timer);
timer=setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,w*i,0,w,h,x,y+=6,w,h);
i++;
if(i>=4) i=0;
if(y>=canvas.height-h){
clearInterval(timer);
ctx.fillText("你死了",340,260);
}
},100)
};
if(e.keyCode==37){
clearInterval(timer);
timer=setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,w*i,h,w,h,x-=6,y,w,h);
i++;
if(i>=4) i=0;
if(x<=0){
clearInterval(timer);
ctx.fillText("你死了",340,260);
}
},100)
};
if(e.keyCode == 38){
clearInterval(timer);
timer = setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,w*i,h*3,w,h,x,y-=6,w,h);
i++;
if(i>=4) i=0;
if(y<=0){
clearInterval(timer);
ctx.fillText("你死了",340,260);
}
},100)
};
if(e.keyCode == 39){
clearInterval(timer);
timer = setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,w*i,h*2,w,h,x+=6,y,w,h);
i++;
if(i>=4) i=0;
if(x>=canvas.width-w){
clearInterval(timer);
ctx.fillText("你死了",340,260);
}
},100)
}*/
}
}
</script>
</html>