找回密码
当前位置：前端开发者 > HTML > 正文

前端H5 canvas实现的找不同色块游戏

2018-09-20 20:52:16 分类：HTML 阅读(247) 评论(0)

web前端开发工作条件 前端开发工作的展开 前端开发找工作群

颜色差距会随着正确次数越多而逐渐缩小。
html 代码

<head>
    <title>找不同色块的游戏 不限时 总共60关</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #f3f3f3;
            overflow: hidden;
            display: table;
        }
        div {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <canvas id=’canvas’>您的浏览器不支持canvas</canvas>
    </div>
    <script>
        canvas = document.getElementById(‘canvas’)
        size = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight
        canvas.width = size
        canvas.height = size
        ctx = canvas.getContext(‘2d’)
        var rank = 0, n = 2
        targetX = parseInt(Math.random() * n)
        targetY = parseInt(Math.random() * n)
        addRect()
        canvas.onclick = function (e) {
            bcr = canvas.getBoundingClientRect()
            clickX = e.clientX – bcr.left * (canvas.width / bcr.width)
            clickY = e.clientY – bcr.top * (canvas.height / bcr.height)
            if (checkArea(clickX, clickY)) {
                rank++
                ctx.clearRect(0, 0, size, size)
                if (rank >= 60) {
                    alert(“天才，你已经通关了，得分为” + rank + “分”)
                    rank = 0
                    n = 2
                } else if (n < 8) {
                    n++
                }
            } else {
                alert(“游戏结束，你的分数为：” + rank + “分”)
                ctx.clearRect(0, 0, size, size)
                rank = 0
                n = 2
            }
            targetX = parseInt(Math.random() * n)
            targetY = parseInt(Math.random() * n)
            addRect()
        }
        //判断点击的位置是否为不同色块所在区域
        function checkArea(clickX, clickY) {
            beginX = size * targetX / n
            endX = size * (targetX + 1) / n
            beginY = size * targetY / n
            endY = size * (targetY + 1) / n
            if (clickX >= beginX && clickX <= endX && clickY >= beginY && clickY <= endY) {
                return true
            } else {
                return false
            }
        }
        //向canvas添加多个矩形
        function addRect() {
            itemSize = size / n
            rectSize = itemSize – size * 0.06 / n
            rectPadding = size * 0.03 / n
            rectRadius = size * 0.1 / n
            colorArr = setColor()
            color = colorArr.color
            scolor = colorArr.scolor
            for (var x = 0; x < n; x++) {
                for (var y = 0; y < n; y++) {
                    if (x != targetX || y != targetY) {
                        drawRect(color, x * itemSize + rectPadding, y * itemSize + rectPadding, rectSize, rectSize, rectRadius)
                    } else {
                        drawRect(scolor, x * itemSize + rectPadding, y * itemSize + rectPadding, rectSize, rectSize, rectRadius)
                    }
                }
            }
        }
        //画圆角矩形，r为圆角半径
        function drawRect(color, x, y, w, h, r) {
            ctx.beginPath()
            ctx.moveTo(x – r, y)
            ctx.arcTo(x + w, y, x + w, y + h, r)
            ctx.arcTo(x + w, y + h, x, y + h, r)
            ctx.arcTo(x, y + h, x, y, r)
            ctx.arcTo(x, y, x + r, y, r)
            ctx.fillStyle = color
            ctx.fill()
        }
        //颜色配置
        function setColor() {
            rgbArr = [parseInt(Math.random() * 100 + 150), parseInt(Math.random() * 250), parseInt(Math.random() * 200)]
            rgbArr.sort(randomsort);
            red = rgbArr[0]
            green = rgbArr[1]
            blue = rgbArr[2]
            //设置颜色数字变化范围
            if (Math.random() > 0.5) {
                index = parseInt((100 – rank) / 5)
            } else {
                index = -parseInt((100 – rank) / 5)
            }
            color = “rgb(” + red + “, ” + green + “, ” + blue + “)”
            scolor = “rgb(” + (red + index) + “, ” + (green + index) + “, ” + (blue + index) + “)”
            return {
                color: color,
                scolor: scolor
            }
        }
        //打乱颜色数组数组
        function randomsort() {
            return Math.random() > 0.5 ? -1 : 1
        }
    </script>
</body>
</html>

如果效果预览不正常可到演示链接查看

深圳前端开发工作难找 web前端开发工作报告 webgl前端开发工作

» 本文来自：前端开发者 » 《前端H5 canvas实现的找不同色块游戏》
» 本文链接地址：https://www.rokub.com/5846.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论