网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。
鼠标拖动或点按都可以“数钱”，效果图：
[img]/upload/attachment/0104/5227/9b8473ee-a2de-340a-a6c9-6df5cbba0081.gif[/img]
点击可以试玩：[url]/article/canvas/money/index.html[/url]
欢迎访问博主网站：[url][/url]
一、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><html>
二、app.js
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 }; }var c = document.getElementById("stage");
三、图像装载器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)》数钱数到手抽筋》对你有帮助，请点赞、收藏，并留下你的观点哦！
