js 对原型的理解，面向对象的精灵图案例 

    new的原理解释：
    new一个构造函数，如var eg = new Sprite()， new了之后的步骤是这样的
    0.立即执行Sprite构造函数
    1.在内存中开辟一块空间
    2.创建一个新的空对象 如 var t = {}
    3.把this指向这个空对象 this = t
    4.把空对象的内部原型指向构造函数的原型对象 this._proto_ = eg.prototype
    5.如果构造函数有返回值，立即把返回值给eg
    6.如果没有返回值，就把构造函数里面的this作为返回值返回给eg,也就是如果没有返回值时，构造函数里面默认有这样一句代码 return this

一般我们把属性写在构造函数中，把方法写在构造函数的原型对象中

 function Sprite(){//在构造函数中添加属性
     this.name = "222"
        // return this 默认有这行代码
 }
 Sprite.prototype.show = function (){//在构造函数原型对象中添加方法，主要是为了节省内存空间
     console.log("jjjjg",this.name)
 }
 var s = new Sprite()//这样代码的内部执行过程就是对new的原理解释的6步
 s.show()//s.show方法执行的时候，会首先去构造函数中找show()方法，如果有该方法就被调用，如果没有则去原型对象中找show()方法

 案例代码

页面代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象的精灵图</title>
    <script src="./js/Sprite.js"></script>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器太垃圾了，请升级你的浏览器
    </canvas>
</div>
<button id="left">左</button>
<button id="right">右</button>
<button id="up">后</button>
<button id="down">前</button>
<script>
    (function (){
        var canvas = document.getElementById("cavsElem")
        var ctx = canvas.getContext('2d')
        canvas.width = 600
        canvas.height = 600
        canvas.style.border = "1px solid red"

        var s = new Sprite({
            x:200,
            y:200,
            w:80,
            h:130,
            fps:10,
            originW:40,
            originH:65,
            imgSrc:"imgs/DMMban.png"
        })
        s.render(ctx)

        // 绑定按钮的点击事件
        var left = document.getElementById("left")
        var right = document.getElementById("right")
        var up = document.getElementById("up")
        var down = document.getElementById("down")
        left.onclick = function (){
            s.changeDir("1")
        }
        right.onclick = function (){
            s.changeDir("2")
        }
        up.onclick = function (){
            s.changeDir("3")
        }
        down.onclick = function (){
            s.changeDir("0")
        }
    }())
</script>
</body>
</html>

　　js

function Sprite(option){
    this._init(option)
}
Sprite.prototype = {
    _init:function (option){
        this.x = option.x == 0 ? 0 : (option.x || 10)
        this.y = option.y == 0 ? 0 : (option.y || 10)
        this.w = option.w || 40//绘制到画布上的宽高
        this.h = option.h || 65
        this.fps = option.fps || 10
        this.originW = option.originW || 40//截取的精灵图片的宽高
        this.originH = option.originH || 65
        this._dirIndex = 0
        this._imgSrc = option.imgSrc || ''
    },
    render:function (ctx){//把图片画到画布上去
        var img = new Image()
        img.src = this._imgSrc
        var self = this
        img.onload = function (){
            var frameIndex = 0
            setInterval(function (){
                ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
                ctx.drawImage(
                    img,
                    frameIndex * self.originW,
                    self._dirIndex * self.originH,
                    self.originW,
                    self.originH,
                    self.x,
                    self.y,
                    self.w,
                    self.h
                )
                frameIndex ++
                frameIndex %= 4
            },1000/self.fps)
        }
    },
    changeDir:function (dir){
        this._dirIndex = dir
    }
}

　　图片

 

效果

 

 

 

 

 

posted @ 2021-02-01 17:16  张先生zy  阅读(149)  评论(0)    收藏  举报