<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
margin:0;
padding: 0;
}
.main {
background-image: url(./img/back.jpg);
100vw;
height: 100vh;
background-size: 100%;
position:relative;
}
.group {
position: absolute;
right: 10px;
top: 10px;
}
.group button { padding:6px 10px}
</style>
</head>
<body>
<div class="main">
<canvas id="myCanvas" >
您的浏览器不支持canvas。
</canvas>
</div>
<div class="group">
<button type="button" class="play">开始</button>
<button type="button" class="stop">暂停</button>
</div>
<!--<img id='img' src="img/person.png"/>-->
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
var timer = null;
function PersonRun() {
this.flag = true; //小人是否在移动
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
// -5 到 5
this.dx = Math.round(Math.random() * 10) - 5; // 0 -10之间的像素
this.dy = Math.round(Math.random() * 10) - 5;
//drawImage(img,x,y,w,h) 绘制图片
//var img = document.getElementById("img");
// ctx.drawImage(img,200,100,20,20)
//创建图片 new Image()
var image = new Image();
image.src = 'img/person.png';
//图片加载完后绘制
image.onload = () => {
ctx.drawImage(image, this.x, this.y, 30, 32);
};
this.image = image;
}
//更新位置
PersonRun.prototype.update = function (direction) {
// this.x +=this.dx;
// this.y +=this.dy;
// console.log(this.x);
// console.log(this.y);
switch (direction) {
case 'left':
this.x -= 5;
break;
case 'right':
this.x += 5;
break;
case 'up':
this.y -= 5;
break;
case 'down':
this.y += 5;
break;
default:
this.x += this.dx;
this.y += this.dy;
break;
}
}
//重新绘制
PersonRun.prototype.man = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布
ctx.drawImage(this.image, this.x, this.y, 30, 32);
}
var p1 = new PersonRun();
// p1.man();
// 自己跑
// var timer = setInterval(function(){
// p1.update();
// p1.man();
// },500);
//事件监听
document.querySelector('.group').addEventListener('click', function (ev) {
var target = ev.target;
switch (target.className) {
case 'play':
if (this.flag) return;
this.flag = true;
timer = setInterval(function () {
p1.update();
p1.man();
}, 200);
break;
case 'stop':
this.flag = false;
clearInterval(timer);
break;
}
});
// onkeydown：键盘按下后触发的事件
// onkeyup：按键抬起后触发的事件
// keyCode 属性返回 onkeydown 或 onkeyup 事件的键的代码。
document.onkeyup = grabEvent;
function grabEvent(ev) {
var keycode = ev.which || ev.keyCode;
switch (keycode) {
case 37://left功能；
document.querySelector('.stop').click();
p1.update('left');
break;
case 38://up
document.querySelector('.stop').click();
console.log('up');
p1.update('up');
break;
case 39://right
document.querySelector('.stop').click();
console.log('right');
p1.update('right');
break;
case 40://down
document.querySelector('.stop').click();
console.log('down');
p1.update('down');
break;
}
p1.man();
}
</script>
</body>
</html>