`
128kj
  • 浏览: 580736 次
  • 来自: ...
社区版块
存档分类
最新评论

《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

阅读更多
网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。
鼠标拖动或点按都可以“数钱”,效果图:


点击可以试玩:http://www.108js.com/article/canvas/money/index.html

欢迎访问博主网站:http://www.108js.com

一、HTML文件
<html>
<head>
   <style type="text/css">
   html,body,canvas{
    margin: 0px;
    padding: 0px;
    border:none;
    text-align: center;
    background-color: black;
   }

  canvas {
    background-color: green;
  }
 </style>
</head>
 <body>   
<canvas id="stage" width="540" height="700">
   您的浏览器不支持html5, 请换用支持html5的浏览器</canvas>
 </body>
</html>
 <script type="text/javascript" src="resources.js"></script>
 <script type="text/javascript" src="app.js"></script>


二、app.js
var c = document.getElementById("stage");
var ctx = c.getContext("2d");
var dragging = false;
var w1=0;
var loc;
var dy=0;
var h1=0;
var int;

//加载图片
resources.load([
    'img/splashtitle.png',
    'img/starttip.png',
    'img/mb0.png',
    'img/m0.png'
]);

//添加回调函数,图像加载完毕后执行,启动游戏
resources.onReady(init);

function init() {
   w1=resources.get("img/mb0.png").width;
   h1=resources.get("img/mb0.png").height;
 
   ctx.drawImage(resources.get("img/splashtitle.png"),0,0);
   ctx.drawImage(resources.get("img/starttip.png"),c.width/2-30,c.height/2);
   ctx.drawImage(resources.get("img/mb0.png"),c.width/2-w1/2,c.height/2+82);
}

// 事件处理
 c.onmousedown = function (e) { //鼠标按下
   if(int){
        clearInterval(int);
        dy=0;
    }
    dragging = true;//程序处于拖动状态
    e.preventDefault();
 }

 c.onmousemove = function (e) { //鼠标移动
   if (dragging) {
      //窗口坐标转canvas坐标
      loc = windowToCanvas(c, e.clientX, e.clientY);
      
      ctx.drawImage(resources.get("img/m0.png"),c.width/2-w1/2,loc.y);
    }
  }

 c.onmouseup = function (e) { //鼠标松开
    dragging = false;
    loc = windowToCanvas(c, e.clientX, e.clientY);
    
    if(int){
        clearInterval(int);
        dy=0;
    }
    int=setInterval(Animation,50);

 }

 function Animation(){
     ctx.clearRect(0,0,c.width,c.height);
     ctx.drawImage(resources.get("img/splashtitle.png"),0,0);
     ctx.drawImage(resources.get("img/starttip.png"),c.width/2-30,c.height/2);
     ctx.drawImage(resources.get("img/mb0.png"),c.width/2-w1/2,c.height/2+82);
     ctx.drawImage(resources.get("img/m0.png"),c.width/2-w1/2,loc.y-dy);
     dy+=100;
     
  }

//窗口坐标转canvas坐标............

function windowToCanvas(canvas, x, y) {
   var canvasRectangle = canvas.getBoundingClientRect();
   
   return {
             x: x - canvasRectangle.left,
             y: y - canvasRectangle.top
          };
}


三、图像装载器resources.js
//图像装载器
(function() {
    var resourceCache = {};//缓存图片的数组
    var loading = [];
    var readyCallbacks = [];//保存所有回调函数的数组

    // 从一个url或一个数组装载图像
    function load(urlOrArr) {
        if(urlOrArr instanceof Array) {
            urlOrArr.forEach(function(url) {//遍历数组中的每一个url,装载图像
                _load(url);
            });
        }
        else {
            _load(urlOrArr);
        }
    }

    //从一个url装载图像
    function _load(url) {
        if(resourceCache[url]) {//缓存中有这个图片,直接返回它
            return resourceCache[url];
        }
        else {
            var img = new Image();
            img.onload = function() {//图片加载完后
                resourceCache[url] = img;//放入缓存
                if(isReady()) {//全部图片加载后,执行全部回调函数
                    readyCallbacks.forEach(function(func) { func(); });
                }
            };
            resourceCache[url] = false;//标记这个图片还没加载
            img.src = url;
        }
    }

    function get(url) {//从缓存中取图片
        return resourceCache[url];
    }

    function isReady() {//所有图片是否加载完毕
        var ready = true;
        for(var k in resourceCache) {//遍历缓存图片的数组
            if(resourceCache.hasOwnProperty(k) &&
               !resourceCache[k]) {//只要有一个图片没加载,返回false
                ready = false;
            }
        }
        return ready;//当全部图片加载到缓存中后,返回true,否则返回false;
    }

    function onReady(func) {//添加回调函数
        readyCallbacks.push(func);
    }

    window.resources = { //定义一个对象
        load: load,
        get: get,
        onReady: onReady,
        isReady: isReady
    };
})();


四、源码下载。
  • 大小: 49.2 KB
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics