脑图
一丶展示出静态效果
构造函数+canvas精灵图，将人物放入canvas画布中，并定义girl对象
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
//画布+精灵图
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="girl.png";
//定义Girl构造函数及渲染
function Girl(){
}
Girl.prototype.render=function(){
ctx.drawImage(img,0,0,79,108,100,100,79,108)
}
//生成实例，渲染
var girl= new Girl(0,0);
img.onload=function(){
girl.render()
}
</script>
</body>
二、动态效果-转向
1.按照脑图创建出Girl的各种属性。
2.创建Gril方法changeDirection(),并将其与键盘上下左右想绑定，进行改变direction属性的值
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
//画布+精灵图
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="nvhai.png";
//Girl构造函数
function Girl(){
this.step=0,
this.direction=0,
this.x=100,
this.y=100
}
//渲染
Girl.prototype.render=function(){
ctx.drawImage(img,79*this.step,108*this.direction,79,108,this.x,this.y,79,108)
}
//改变方向
Girl.prototype.changedirection=function(direction){
this.direction=direction;
}
//生成实例
var girl= new Girl();
//定时器，20毫秒刷新一下画布
img.onload=function(){
setInterval(function(){
ctx.clearRect(0, 0, 500, 400)
girl.render()
girl.update()
},20)
}
//键盘事件
document.onkeydown=function(e){
console.log(e.keyCode)
if(e.keyCode==37){
girl.changedirection(1)
}else if(e.keyCode==38){
girl.changedirection(3)
}else if(e.keyCode==39){
girl.changedirection(2)
}else if(e.keyCode==40){
girl.changedirection(0)
}
}
</script>
</body>
三、移动效果
1.根据direction判断下x,y变化
2.移动时step变化
3.键盘抬起时停止动画
4.完结撒花
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
//画布+精灵图
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="nvhai.png";
//Girl构造函数
//direction1-4 表示人物移动的方向
//x,y表示画布上移动的距离
//step1-4分别显示精灵图的不同位置
function Girl(){
this.step=0,
this.direction=0,
this.x=100,
this.y=100
this.run=false
}
//渲染
Girl.prototype.render=function(){
ctx.drawImage(img,79*this.step,108*this.direction,79,108,this.x,this.y,79,108)
}
//改变方向
Girl.prototype.changedirection=function(direction){
this.direction=direction;
}
//状态机
Girl.prototype.update=function(){
//direction1-4 表示人物移动的方向
//x,y表示画布上移动的距离
if(this.run){if(this.direction==0){
this.y+=14
}else if(this.direction==1){
this.x-=14
}else if(this.direction==2){
this.x+=14
}else if(this.direction==3){
this.y-=14
}
//step1-4分别显示精灵图的不同位置
this.step++;
if(this.step>3){
this.step=0
}
}
}
Girl.prototype.go=function(){
this.run=true
}
Girl.prototype.stop=function(){
this.run=false
}
//生成实例
var girl= new Girl();
//定时器，20毫秒刷新一下画布
img.onload=function(){
setInterval(function(){
ctx.clearRect(0, 0, 500, 400)
girl.render()
girl.update()
},20)
}
//键盘事件
//键盘按下go()changeDirection()
document.onkeydown=function(e){
if(e.keyCode==37){
girl.go()
girl.changedirection(1)
}else if(e.keyCode==38){
girl.go()
girl.changedirection(3)
}else if(e.keyCode==39){
girl.go()
girl.changedirection(2)
}else if(e.keyCode==40){
girl.go()
girl.changedirection(0)
}
}
document.onkeyup=function(){
girl.stop()
}
</script>
网友评论