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

最新推荐文章于 2022-03-10 16:51:47 发布

iteye_8466

最新推荐文章于 2022-03-10 16:51:47 发布

阅读量511

点赞数

分类专栏： HTML5 动画游戏文章标签： html5 游戏 html javascript 编程 ViewUI

HTML5 动画游戏专栏收录该内容

32 篇文章 1 订阅

订阅专栏

网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。
鼠标拖动或点按都可以“数钱”，效果图：
[img]http://dl2.iteye.com/upload/attachment/0104/5227/9b8473ee-a2de-340a-a6c9-6df5cbba0081.gif[/img]

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

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

一、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
    };
})();

四、源码下载。

iteye_8466

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。鼠标拖动或点按都可以“数钱”，效果图：[img]http://dl2.iteye.com/upload/attachment/0104/5227/9b8473ee-a2de-340a-a6c9-6df5cbba0081.gif[/img]点击可以试玩：[url]http://www.108js.com/article/canvas/...
复制链接

扫一扫

专栏目录