canvas实现水果机游戏

最新推荐文章于 2023-07-25 20:03:49 发布

勿忘灬无期

最新推荐文章于 2023-07-25 20:03:49 发布

阅读量436

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/F_eve/article/details/115469450

版权

这是html和js代码，需要导入jquery，和重置样式表。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FruitGame</title>
    <link rel="stylesheet" href="resetCss/reset.css">
    <link rel="stylesheet" href="css/水果机.css">
</head>

<body>
    <div class="box">
        <div class="canvas">
            <canvas></canvas>
        </div>
        <ul>
            <li class="item">苹果<span>3</span></li>
            <li class="item">草莓<span>4</span></li>
            <li class="item">菠萝<span>5</span></li>
            <li class="item">香蕉<span>6</span></li>
            <li></li>
            <li class="begin">点击开始现金:<span></span></li>
            <li class="item">火龙果<span>10</span></li>
            <li class="item">西瓜<span>5</span></li>
            <li class="item">橙子<span>4</span></li>
            <li class="item">柚子<span>6</span></li>
        </ul>
    </div>
    <div class="count">
        <ul>
            <li class="menu">苹果<br><span>0</span></li>
            <li class="menu">草莓<br><span>0</span></li>
            <li class="menu">菠萝<br><span>0</span></li>
            <li class="menu">香蕉<br><span>0</span></li>
            <li class="end">得分<br><span>0</span></li>
            <li class="menu">火龙果<br><span>0</span></li>
            <li class="menu">西瓜<br><span>0</span></li>
            <li class="menu">橙子<br><span>0</span></li>
            <li class="menu">柚子<br><span>0</span></li>
        </ul>
    </div>
    <script src="jquery/jquery-3.4.0.js"></script>
    <script src="jquery/tools.js"></script>
    <script>
        /* 画布 */
        var mypen = $('canvas')[0].getContext('2d');
        $('canvas')[0].width = 450;
        $('canvas')[0].height = 450;
        /* 设置背景颜色 */
        $('.item').each(function(index) {
            $(this).css({
                'background': 'pink' /* Mytools.getColor() */
            })
        });
        /* 投币 */
        $('.menu').each(function(index) {
            var index;
            $(this).on({
                click: function() {
                    index = $(this).children('span').text();
                    $(this).children('span').text(++index);
                }
            })
        });
        /* 游戏开始 */
        var x = 0;
        var y = 0;
        var n = 0; //得分
        var m = 100; //现金
        var total; //投币总量
        var timer;
        var flag = true;
        $('.begin').children('span').text(m);
        $('.begin').on('click', function() {
            if ($('.begin').children('span').text() < 0) {
                alert('游戏结束');
                flag = false;
            }
            if (flag) {
                //避免多次触发定时器
                flag = false;
                /* 重置画布 */
                mypen.clearRect(0, 0, 450, 450);
                /* 计算投币量 */
                total = 0;
                $('.menu').each(function() {
                    total += parseInt($(this).children('span').text());
                });
                /* 现金减去投币量 */
                m -= total;
                $(this).children('span').text(m);
                /* 重置得分项 */
                $('.end').children('span').text('0');
                /* 开始画矩形 */
                timer = setInterval(function() {
                    $('.begin').css({
                        'cursor': 'no-drop'
                    })
                    if (x > 7) {
                        clearRect(rectArray[7]);
                        x = 0;
                    }
                    if (x > 0) {
                        y = x;
                        clearRect(rectArray[y - 1]);
                        createRect(rectArray[x]);
                    } else {
                        createRect(rectArray[x]);
                    }
                    x++;
                }, 100);
                setTimeout(function() {
                    clearInterval(timer); //关闭定时器
                    //让动画和显示框保持一致;
                    switch (x - 1) {
                        case 3:
                            x = 5;
                            break;
                        case 4:
                            x = 8;
                            break;
                        case 5:
                            x = 7;
                            break;
                        case 6:
                            x = 6;
                            break;
                        case 7:
                            x = 4;
                            break;
                    }
                    /* 计算分数 */
                    n = $('.menu').eq(x - 1).children('span').text() * $('.item').eq(x - 1).children('span').text();
                    $('.end').children('span').text(n);
                    /* 更新现金 */
                    m = parseInt($('.begin').children('span').text()) + n;
                    $('.begin').children('span').text(m);
                    /* 重置投币项 */
                    $('.menu').each(function() {
                        $(this).children('span').text('0');
                    });
                    /* 出现小手 */
                    $('.begin').css({
                        'cursor': 'pointer'
                    });
                    /* 开启新一轮游戏 */
                    flag = true;
                }, parseInt(Math.random() * 80 + 32) * 100)
            }
        });
        /* 矩形坐标 */
        var rectArray = [
            [0, 0],
            [150, 0],
            [300, 0],
            [300, 150],
            [300, 300],
            [150, 300],
            [0, 300],
            [0, 150]
        ];
        /* 画矩形函数 */
        function createRect(Array) {
            mypen.fillStyle = 'rgba(181,52,52,.5)';
            mypen.fillRect(Array[0], Array[1], 150, 150);
        };
        /* 清除矩形函数 */
        function clearRect(Array) {
            mypen.clearRect(Array[0], Array[1], 150, 150);
        }
    </script>
</body>

</html>

这是css

*::selection {
    background: none;
}


/* 显示框 */

.box {
    width: 450px;
    height: 450px;
    margin: 0 auto;
    position: relative;
}

.box>ul {
    width: 450px;
    height: 450px;
}

.box>ul>li {
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    float: left;
    box-sizing: border-box;
    border: 1px solid blueviolet;
}


/* 开始按钮 */

.box>ul>.begin {
    cursor: pointer;
    clear: both;
    position: absolute;
    top: 150px;
    left: 150px;
}


/* 画布 */

.canvas {
    width: 450px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}


/* 得分项目 */

.count {
    width: 900px;
    height: 100px;
    margin: 50px auto;
}

.count>ul {
    width: 900px;
    height: 100px;
}

.count>ul>li {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 50px;
    float: left;
    background-color: #999;
    cursor: pointer;
}

勿忘灬无期

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas实现水果机游戏

这是html和js代码，需要导入jquery，和重置样式表。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FruitGame</title> <lin
复制链接

扫一扫