canvas绘制以及控制游戏中移动的小人的行为 

<!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);
        width: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>

　　

posted @ 2021-01-31 18:24  lanyan  阅读(372)  评论(0)    收藏  举报