html5 实现简单捕鱼达人部分功能

最新推荐文章于 2024-06-25 09:17:36 发布

曹振华

最新推荐文章于 2024-06-25 09:17:36 发布

阅读量4.1k

点赞数

分类专栏： html5 文章标签： html5 捕鱼达人

本文链接：https://blog.csdn.net/chadcao/article/details/39401263

版权

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html5确实强大，运用html5的元件<canvas>和js就能简单的完成捕鱼达人的部分功能。

1）代码如下

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var nowInterval = 0;//现在所流逝的时间100ms的倍数
        var baseInterval = 100;//100ms调用方法
        var createInterval = 3000;//3000ms创建鱼
        var swimInterval = 200;//200ms鱼游动
        var iID;//存放setInterval()返回的ID
        var canvas;//画布
        var width;//画布的宽
        var height;//画布的高
        var context;//画布内容
        var fishList = new Array();//数组，用来存放鱼
        var nowTypeCount = 0;//已加载鱼的种类数
        //定义鱼种类列表，类表包含鱼的种类，图片的位置，动态运动的位置
        var fishTypeList = [
            {
                type: 1,
                src: 'fish1.png',
                speed: 5,
                swimFrameCount: 4,
                frames: [
                    { x: 0, y: 0, w: 78, h: 64 },
                    { x: 0, y: 64, w: 78, h: 64 },
                    { x: 0, y: 128, w: 78, h: 64 },
                    { x: 0, y: 192, w: 78, h: 64 },
                    { x: 0, y: 256, w: 78, h: 64 },
                    { x: 0, y: 320, w: 78, h: 64 },
                    { x: 0, y: 384, w: 78, h: 64 },
                    { x: 0, y: 448, w: 78, h: 64 }
                ]
            },
            {
                type: 2,
                src: 'fish2.png',
                speed: 10,
                swimFrameCount: 4,
                frames: [
                    { x: 0, y: 0, w: 77, h: 59 },
                    { x: 0, y: 59, w: 77, h: 59 },
                    { x: 0, y: 118, w: 77, h: 59 },
                    { x: 0, y: 177, w: 77, h: 59 },
                    { x: 0, y: 236, w: 77, h: 59 },
                    { x: 0, y: 295, w: 77, h: 59 },
                    { x: 0, y: 354, w: 77, h: 59 },
                    { x: 0, y: 413, w: 77, h: 59 }
                ]
            }
        ]
        $(function () {
            width = window.innerWidth - 22;
            height = window.innerHeight - 22;
            var canvasHtml = '<canvas id="myCanvas" width="'
                + width + '" height="'
                + height + '">这个浏览器不支持HTML5元素。</canvas>';
            $('body').append(canvasHtml);
            canvas = $('#myCanvas')[0];
            canvas.addEventListener('click', catchFish, false);
            context = canvas.getContext('2d');
            initFishImage();
        });

        function initFishImage() {//加载鱼的图片
            if (fishTypeList.length == 0) {
                return;
            }
            for (var i = 0; i < fishTypeList.length; i++) {
                var img = new Image();
                img.src = fishTypeList[i].src;
                fishTypeList[i].img = img;//将Image对象放到鱼类型类表
                img.onload = function () {
                    nowTypeCount++;
                    if (nowTypeCount == fishTypeList.length) {
                        //只创建一个interval，
                        //因为创建多个interval浏览器在失去焦点后，不同的interval运行次数会混乱
                        iID = setInterval(fishAction, baseInterval);
                    }
                }
                img.onerror = function () {
                    alert('图片加载失败！');
                }
            }
        }
        function catchFish(e) {//捕捉鱼
            if (fishList.length > 0) {
                var p = getEventPosition(e);
                for (var i = 0; i < fishList.length; i++) {
                    var fish = fishList[i];
                    if (p.x >= fish.x && p.x <= (fish.x + fish.frames[0].w)
                        && p.y >= fish.y && p.y <= (fish.y + fish.frames[0].h)) {
                        fish.speed = 0;
                        fish.frameIndex = fish.swimFrameCount;
                        fish.isCatched = true;
                    }
                }
            }
        }
        function fishAction() {
            nowInterval += baseInterval;
            if (nowInterval % createInterval == 0) {
                createFish();
            }
            if (nowInterval % swimInterval == 0) {
                fishSwin();
            }
        }
        function createFish() {//创建鱼
            var type = Math.ceil(Math.random() * fishTypeList.length);//随机获取鱼的种类
            for (var i = 0; i < fishTypeList.length; i++) {
                if (fishTypeList[i].type == type) {
                    var fish = {};
                    fish.id = new Date().getTime();
                    fish.frameIndex = 0;
                    fish.type = fishTypeList[i].type;
                    fish.img = fishTypeList[i].img;
                    fish.frames = fishTypeList[i].frames;
                    fish.speed = fishTypeList[i].speed;
                    fish.swimFrameCount = fishTypeList[i].swimFrameCount;
                    fish.x = -fishTypeList[i].frames[0].w;
                    fish.y = Math.random() * (canvas.height - fish.frames[0].h);
                    fish.isCatched = false;
                    fishList.push(fish);
                    break;
                }
            }
        }
        function fishSwin() {//鱼游动
            context.clearRect(0, 0, canvas.width, canvas.height);
            if (fishList.length > 0) {
                for (var i = 0; i < fishList.length; i++) {//画鱼
                    var fish = fishList[i];
                    context.globalAlpha = fish.frameIndex >= fish.swimFrameCount
                        ? (fish.frames.length - fish.frameIndex)
                        / (fish.frames.length - fish.swimFrameCount) : 1;
                    context.drawImage(fish.img//规定要使用的图像、画布或视频。
                                    , fish.frames[fish.frameIndex].x//可选。开始剪切的 x 坐标位置。
                                    , fish.frames[fish.frameIndex].y//可选。开始剪切的 y 坐标位置。
                                    , fish.frames[fish.frameIndex].w//可选。被剪切图像的宽度。
                                    , fish.frames[fish.frameIndex].h//可选。被剪切图像的高度。
                                    , fish.x//在画布上放置图像的 x 坐标位置。
                                    , fish.y//在画布上放置图像的 y 坐标位置。
                                    , fish.frames[fish.frameIndex].w//可选。要使用的图像的宽度。（伸展或缩小图像）
                                    , fish.frames[fish.frameIndex].h);//可选。要使用的图像的高度。（伸展或缩小图像）
                    context.globalAlpha = 1;
                }
                for (var i = 0; i < fishList.length; i++) {//1）如果鱼游出界面删除，改变鱼的游动状态，改变鱼的位置
                    var fish = fishList[i];
                    if (fish.x > width) {//如果鱼游出画布，从数组中删除鱼
                        fishList.splice(fishList.indexOf(fish), 1);
                    } else {//如果鱼没有游出画布改变鱼的游动帧和位置
                        fish.frameIndex++;
                        if (fish.isCatched) {//鱼被抓到
                            if (fish.frameIndex == fish.frames.length) {
                                fishList.splice(fishList.indexOf(fish), 1);
                            }
                        } else {//鱼没有被抓到
                            if (fish.frameIndex == fish.swimFrameCount) {
                                fish.frameIndex = 0;
                            }
                            fish.x += fish.speed;
                        }
                    }
                }
            }
        }
        function getEventPosition(ev) {//获取事件对象发生的位置  
            var x, y;
            if (ev.layerX || ev.layerX == 0) {
                x = ev.layerX;
                y = ev.layerY;
            } else if (ev.offsetX || ev.offsetX == 0) { // Opera     
                x = ev.offsetX;
                y = ev.offsetY;
            }
            return { x: x, y: y };
        }
    </script>
</head>
<body>
</body>
</html>

2）图片如下

曹振华

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
html5 实现简单捕鱼达人部分功能

1）代码如下测试 var nowInterval = 0; var baseInterval = 100;//100ms调用方法 var createInterval = 3000;//3000ms创建鱼 var swimInterval = 200;//200ms鱼游动
复制链接

扫一扫

专栏目录