《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/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    };})();

四、源码下载。

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

HTML5中canvas实现拼图游戏,HTML5 Canvas学习笔记(6)拼图游戏（数字版）
今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑. 效果图: 点击这里试玩 http://www.108js.com/article/canvas/6/play.html 欢迎访问博主的网 ...
【学习笔记】使用魔数快速求平方根
[学习笔记]使用魔数快速求平方根简介介绍使用魔数0x1fbd1df5快速求平方根x{\sqrt{x}}x的C语言实现和公式的推导. 代码 float MagicSqrt(float x) {fl ...
算法【二叉树】学习笔记 - 已知结点数计算可构建出多少种二叉树
算法[二叉树]学习笔记 - 已知结点数计算可构建出多少种二叉树卡特兰数相关知识点排列组合公式排列 Arrangement 组合 Combination 分步计算简化参考资料题目:已知3个 ...
数钱数到手抽筋html5,数钱数到手抽筋的经典句子
1.他两手抓住竹竿,像敏捷的猴子那样,双脚一蹬,就嘈嘈嘈地爬了上去. 2.父母会在历史博物馆里徜徉度过愉快的时光. 3.只要我的生命没有停止,对他的记忆就不会熄灭. 4.对于像数学物理这样的学科,我只 ...
【学习笔记】使用魔数快速求立方根
[学习笔记]使用魔数快速求立方根简介介绍使用魔数0x2a517d47快速求立方根 x 3 {\sqrt[3]{x}} 3x 的C语言实现和公式的推导. 代码 float MagicCubeRoo ...
数钱数到手抽筋html5,经典说说心情短语数钱数到手抽筋
爱情不在于相互含情脉脉地对视,而在于共同朝一个方向前看. 把心掏空,不再放进任何人不管多大多老,不管家人朋友怎幺催,都不要随便对待婚姻,婚姻不是打牌,重新洗牌要付出巨大代价. 不要为了寂寞去恋爱,时 ...
canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
JavaWeb黑马旅游网-学习笔记10【项目代码】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

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

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

最新文章

热门文章