canvas 实现小人的行走和上下左右的变换

最新推荐文章于 2024-08-08 23:04:40 发布

weixin_30460489

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量378

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huqinqin/p/7551509.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小人行走动画</title>
</head>
<body>
   <canvas id="cvs" height="600" width="600"></canvas>
</body>
<script src="js/loadImage.js"></script>
<script>
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var objImg = {
        NPC2: "./images/NPC2.png",
        NPC3: "./images/NPC3.png"
    }
    loadImage(objImg,function (imgObj) {
        /*设置画布大小*/
        cvs.width = imgObj.NPC2.width;
        cvs.height = imgObj.NPC2.height;
        //console.log(cvs.width,cvs.height);

        /*调用小人*/
        var person = new Person(ctx,imgObj.NPC2,4,4,20,20,100,100);
        setInterval(function () {
            person._bind();
            person.draw();

            person.update();
        },400);




    })
    function Person(ctx, img, widthFrame, heightFrame, x, y, renderWidth, renderHeight) {
        this.ctx = ctx;
        this.img = img;
        /*图片水平方向有几个重复的小人*/
        this.widthFrame = widthFrame;
        /*图片竖直方向有几个重复的小人 */
        this.heightFrame = heightFrame;
        /*求出一个小人的宽和高*/
        this.width = this.img.width/this.widthFrame;
        this.height = this.img.height/this.heightFrame;

        /*图像绘制时的坐标和大小*/
        this.x = x;
        this.y = y;
        this.renderWidth = renderWidth;
        this.renderHeight = renderHeight;
        this.currentFrame = 0;
    }

   /* function extend(o1,o2) {
        for(var key in o2){
            if(o2.hasOwnProperty(key)){
                o1[key] = o2[key];
            }
        }
    }*/
    Person.prototype = {
        constructor: Person,
        draw: function () {
            this.ctx.clearRect(0,0,this.img.width,this.img.height);
            this.ctx.drawImage(this.img, this.currentFrame * this.width, this.derection*this.height||0,
                this.width, this.height, this.x , this.y, this.renderWidth, this.renderHeight)
        },
        _bind: function () {
            var self = this;
            document.addEventListener("keydown",function (e) {
                switch (e.keyCode){
                    case 37:
                        self.derection = 1;
                        break;
                    case 38:
                        self.derection = 3;
                        break;
                    case 39:
                        self.derection = 2;
                        break;
                    case 40:
                        self.derection = 0;
                        break;
                }
                //console.log(self.derection);
            })
            //window.confirm();
        },
        update: function () {
            this.currentFrame = ++this.currentFrame>=this.widthFrame?0: this.currentFrame;
            switch (this.derection){
                /*0表示向下走,y轴相加*/
                case 0:
                    this.y += 2;
                    break;
                /*1表示向左走,x轴相减*/
                case 1:
                    this.x -= 2;
                    break;
                /*2表示向右走,x轴相加*/
                case 2:
                    this.x += 2;
                    break;
                /*3表示向上走,y轴相减*/
                case 3:
                    this.y -= 2;
                    break;
            }
        }
    }

</script>
<script>

</script>
</html>

转载于:https://www.cnblogs.com/huqinqin/p/7551509.html

weixin_30460489

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas 实现小人的行走和上下左右的变换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小人行走动画</title></head><body> <canvas id="cvs" height="600" width="600">...
复制链接

扫一扫