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

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

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


点击可以试玩：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
踩
分享到：
| 庄家派发的四种方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    数钱数到手抽筋HTML5游戏源码

    "数钱数到手抽筋HTML5游戏源码"是一款基于HTML5技术构建的趣味小游戏，旨在提供一种轻松愉快的数钱体验，可能适用于教学、娱乐或编程实践场景。 在这款游戏中，开发者可能利用了HTML5的Canvas元素来绘制游戏界面，...

    H5游戏源码 数钱数到手抽筋.zip

    本资源“H5游戏源码 数钱数到手抽筋.zip”提供了一款以“数钱”为主题的游戏源码，对于学习和研究H5游戏开发的人员来说，是一份宝贵的参考资料。 首先，我们要理解H5游戏开发的核心技术。HTML5是新一代的超文本标记...

    html5微信小游戏-数钱数到手抽筋.zip

    HTML5微信小游戏“数钱数到手抽筋”是一款基于HTML5技术开发的休闲娱乐应用，专为微信用户设计。这款游戏充分利用了HTML5的特性，包括Canvas绘图、Web Audio音频处理以及WebSocket实时通信等，旨在提供流畅的游戏...

    微信HTML5在线朋友圈游戏源码带安装部署教程-数钱数到手抽筋.rar

    例如，在“数钱数到手抽筋”这款游戏中，JavaScript可能会实现钞票的随机出现、用户的点击计数、时间限制等功能。 4. **Canvas绘图**：HTML5的Canvas元素提供了一个可编程的画布，允许开发者通过JavaScript绘制图形...

    HTML5 Canvas学习笔记(1)处理鼠标事件

    这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件，包括`addEventListener`用于绑定事件处理函数，`...

    HTML5 Canvas学习笔记(5)游戏得分动画

    这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的...

    HTML5 Canvas学习笔记(6)拼图游戏（数字版）

    在“HTML5 Canvas学习笔记(6)拼图游戏（数字版）”这篇博文中，作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**： - Canvas是一个基于矢量图形的画布元素...

    微信朋友圈【数钱数到手抽经】html5小游戏源码

    总的来说，“数钱数到手抽经”HTML5小游戏源码是一个实践HTML5游戏开发技术的实例，它涵盖了网页开发的多个关键领域，对于开发者来说，无论是初学者还是有一定经验的人，都能从中获得宝贵的学习经验和启示。

    HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

    在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中，作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体，这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...

    HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）

    这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分，即色块的绘制与移动。 首先，我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...

    HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

    在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中，我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果，这是一个增强用户体验的重要技巧，尤其在游戏加载、场景切换或过渡效果中。 首先，淡入淡出...

    HTML5 Canvas学习笔记(3)加载游戏/动画音乐

    在“HTML5 Canvas学习笔记(3)加载游戏/动画音乐”这个主题中，我们将深入探讨如何利用Canvas API来加载和播放音频资源，这对于创建交互式游戏和动画至关重要。 1. HTML5 Audio API HTML5提供了Audio元素，它是网页...

    HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）

    这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏，首先需要理解Canvas的基本结构和绘图API。...

    HTML5 Canvas核心技术源码技术代码

    HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

    HTML5 Canvas学习

    炫酷的HTML5 canvas效果展示， 代码结构简单，有利于开发者参考使用。

    html5 canvas云粒子数字时钟动画特效

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的...

    HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）

    这篇“HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）”主要探讨了如何利用Canvas来实现经典游戏——俄罗斯方块的方块部分。我们将深入探讨相关知识点，包括Canvas基本操作、事件处理、动画原理以及游戏逻辑。 ...

    Android—BitMap与Canvas学习笔记

    Android—BitMap与Canvas学习笔记

    html5 canvas飘洒的星星特效

    html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...

Magicbox
Global site tag (gtag.js) - Google Analytics