根据键盘上下左右控制小人行走的方向。
素材:
效果展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行走的小人</title>
<style>
canvas {
display: block;
margin: 100px auto;
border:1px dashed #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400">
</canvas>
<script>
function Person() {
this.ctx = document.querySelector('canvas').getContext('2d');
this.src = 'images/03.png';
//画布的大小
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
//步伐大小
this.stepSize = 10;
//行走的方向 向前