<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行走的小人</title>
<style>
#c1{
border: 1px solid;
}
</style>
<script>
window.onload = function(){
var myCanvas = document.getElementById('c1')
let ctx = myCanvas.getContext('2d')
let img = new Image();
let canvasWidth = ctx.canvas.width;
let canvasHeight = ctx.canvas.height;
var direction = 3;
var step = 0;
img.onload = function(){
let personWidth = img.width/4;
let personHeight = img.height/4;
let x0 = canvasWidth/2-personWidth/2;
let y0 = canvasHeight/2 -personHeight/2;
// 在中间画出来就行了
// 第一步就是把它画出来，非常的简单
ctx.drawImage(img,0,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
document.onkeydown = function(e){
if(e.keyCode==37){
ctx.clearRect(0,0,canvasWidth,canvasHeight)
if(direction!=0){
step=0;
ctx.drawImage(img,0,personHeight,personWidth,personHeight,x0,y0,personWidth,personHeight);
direction=0;
}else {
// 若是同个方向，则开始行走
step++;
x0-=10;
if(step>3){
step = 0;
}
ctx.drawImage(img,step*personWidth,personHeight,personWidth,personHeight,x0,y0,personWidth,personHeight);
}
}else if(e.keyCode==38){
ctx.clearRect(0,0,canvasWidth,canvasHeight)
if(direction!=1){
step=0;
ctx.drawImage(img,0,3*personHeight,personWidth,personHeight,x0,y0,personWidth,personHeight);
direction=1;
}else{
step++;
y0-=10;
if(step>3){
step = 0;
}
ctx.drawImage(img,step*personWidth,3*personHeight,personWidth,personHeight,x0,y0,personWidth,personHeight);
}
}else if(e.keyCode==39){
ctx.clearRect(0,0,canvasWidth,canvasHeight)
if(direction!=2){
step=0;
ctx.drawImage(img,0,2*personHeight,personWidth,personHeight,x0,y0,personWidth,personHeight);
direction=2;
}else{
x0+=10;
step++;
if(step>3){
step = 0;
}
ctx.drawImage(img,step*personWidth,2*personHeight,personWidth,personHeight,x0,y0,personWidth,personHeight);
}
}else if(e.keyCode==40){
ctx.clearRect(0,0,canvasWidth,canvasHeight)
if(direction!=3){
step=0;
ctx.drawImage(img,0,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
direction=3;
}else{
y0+=10;
step++;
if(step>3){
step = 0;
}
ctx.drawImage(img,step*personWidth,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
}
}
}
}
img.src = "image/04.png"
}
</script>
</head>
<body>
<canvas id = 'c1' width="500" height="500"></canvas>
</body>
</html>效果就是 上下左右键盘，然后能走
当然我写的思路， 一是，方向不同时，此时转向，则转成转向的第一幅图片，
若方向相同，则开始画，往前走一步！
图片如下：
逻辑是比较简单，就是调试起来稍微有点小啰嗦！
我是用面向过程写的， 也可以用面向对象，我就不用了