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


四、源码下载。
展开阅读全文

没有更多推荐了,返回首页