canvas 绘画游戏，根据重叠率算分

最新推荐文章于 2024-08-14 22:24:56 发布
最新推荐文章于 2024-08-14 22:24:56 发布
阅读量131 收藏
点赞数
分类专栏： html5 文章标签： js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fafa2088/article/details/119356837
版权

游戏说明：先绘出图形A，再绘出图形B，根据图A和图B的轮廓相似度算得分

直接贴代码:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1" />
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <title>小画家</title>
</head>
<style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
	/*禁用滑动选中文字*/
    body {
        -webkit-touch-callout: none;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
    }

    #text a {
        color: #0af;
    }
</style>

<body>
    <canvas id="canvas"
            width="300"
            height="150"></canvas>
    <div id="text"
         style="color:#ff0;font-size:11px;position:fixed;left:0;top:0;z-index:9999"></div>

    <script language="javascript">


        document.body.addEventListener('touchmove', function (e) {
            e.preventDefault()
        }, { passive: false });//禁止浏览器下拉，否则画画的时候会变成下拉
        var canvas = document.getElementById('canvas'); //获取标签

        var ctx = canvas.getContext("2d");

        var fillStyle = "#666666";//背景填充色
        var windowWidth = document.documentElement.clientWidth
        var windowHeight = document.documentElement.clientHeight
        canvas.width = windowWidth
        canvas.height = windowHeight
    
        ctx.fillStyle = fillStyle;
        ctx.fillRect(0, 0, windowWidth, windowHeight);

        var onoff = false; //按下标记

        var oldx = -10;

        var oldy = -10;
        var endX = 0;
        var endY = 0;

        //设置颜色
        var linecolor = "#ffffff";//线条颜色
        var linw = 1;
        canvas.addEventListener("touchmove", draw, true); //鼠标移动事件
        canvas.addEventListener("touchstart", startDraw, false); //鼠标按下事件
        canvas.addEventListener("touchend", endDraw, false); //鼠标弹起事件
        //设置提示
        document.getElementById('text').innerHTML = "请一笔绘制一个封闭图形"
        var pointsA = [] //参照图形坐标集
        var pointsB = [] //重绘图形坐标集
        var count = 0
		//开始绘画
        function startDraw(e) {

            if (e.touches.length != 1) { //只允许单指绘画
                return;
            }
            onoff = true;
            event = e.touches[0]
            oldx = event.pageX;
            oldy = event.pageY;
            startX = event.pageX;
            startY = event.pageY;
			
            if (++count % 2 == 1) {
                console.log("第一次绘制轮廓")
                ctx.globalAlpha = 1;
                fillStyle = "#666666";
                linecolor = "#ffffff";
                ctx.fillStyle = fillStyle;
                ctx.fillRect(0, 0, windowWidth, windowHeight);
                points = pointsA

                document.getElementById('text').innerHTML = "绘制中..."
            } else {
                console.log("第二次重绘轮廓")
                fillStyle = "#666666";
                linecolor = "#0f0";
                //ctx.globalAlpha=0.2;
                points = pointsB
            }

            points.length = 0;
            points.push([event.pageX, event.pageY])


        }
		//绘画结束
        function endDraw(e) {
            onoff = false;
            console.log(e)
            if (count % 2 == 1) {
				//第一次绘制完成
                ctx.beginPath();
                ctx.fillStyle = fillStyle;
                ctx.fillRect(0, 0, windowWidth, windowHeight);

                document.getElementById('text').innerHTML = "游戏开始：请一笔画出灰色区域图形，<a href='#' onclick='restart()'>创建新游戏</a>"

                var p = pointsA.shift();
                ctx.moveTo(p[0], p[1]);
                for (i in pointsA) {
                    p = pointsA[i]
                    ctx.lineTo(p[0], p[1]);
                    console.log(p)
                }
                ctx.closePath();
                ctx.fillStyle = "#aaaaaa";
                ctx.fill();

            } else {
				//第二次绘制完成
                console.log("游戏结束")
                ctx.save()
                //绘制原图
                ctx.beginPath();
                ctx.fillStyle = fillStyle;
                ctx.fillRect(0, 0, windowWidth, windowHeight);

                var p = pointsA.shift();
                ctx.moveTo(p[0], p[1]);
                for (i in pointsA) {
                    p = pointsA[i]
                    ctx.lineTo(p[0], p[1]);

                }
                ctx.closePath();
                ctx.fillStyle = "#aaaaaa";
                ctx.fill();
                var imgData = ctx.getImageData(0, 0, windowWidth, windowHeight);
                var areaA = 0

                for (var i = 0; i < imgData.data.length; i += 4) {
                    if (imgData.data[i] == 170) {//原图填充色的面积
                        areaA++; 
                    }

                }

                //绘制图形
                ctx.globalAlpha = 0.2;
                ctx.beginPath();
                var p = pointsB.shift();
                ctx.moveTo(p[0], p[1]);
                for (i in pointsB) {
                    p = pointsB[i]
                    ctx.lineTo(p[0], p[1]);

                }
                ctx.closePath();
                ctx.fillStyle = "green";
                ctx.fill();


                ctx.beginPath();
                var p = pointsA.shift();
                ctx.moveTo(p[0], p[1]);
                for (i in pointsA) {
                    p = pointsA[i]
                    ctx.lineTo(p[0], p[1]);

                }
                ctx.closePath();
                ctx.fillStyle = "green";
                ctx.fill();

                ctx.clip();
                ctx.beginPath();
                var p = pointsB.shift();
                ctx.moveTo(p[0], p[1]);
                for (i in pointsB) {
                    p = pointsB[i]
                    ctx.lineTo(p[0], p[1]);

                }
                ctx.closePath();
                ctx.globalAlpha = 1;
                ctx.fillStyle = "#aaaaaa";
                ctx.fill();

                var imgData = ctx.getImageData(0, 0, windowWidth, windowHeight);
                var areaB = 0
                for (var i = 0; i < imgData.data.length; i += 4) {
                    if (imgData.data[i] != 170 && imgData.data[i] != 102) {//图A和图B的差集面积
                        areaB++;
                    }

                }
                ctx.restore()

                document.getElementById('text').innerHTML = "游戏结束：得分" + parseInt((1 - (areaB / areaA)) * 100) + "<a href='#' onclick='restart()'>再来一局</a> "


            }




        }
		//重新开始
        function restart() {
            document.getElementById('text').innerHTML = "请一笔绘制一个封闭图形"
            ctx.beginPath();
            ctx.fillStyle = fillStyle;
            ctx.fillRect(0, 0, windowWidth, windowHeight);
            count = 0;
        }

     
		//手指移动绘出路径
        function draw(e) {

            event = e.touches[0]
            if (onoff == true) {
                var newx = event.pageX;

                var newy = event.pageY

                ctx.beginPath();

                ctx.moveTo(oldx, oldy);

                ctx.lineTo(newx, newy);

                ctx.strokeStyle = linecolor;

                ctx.lineWidth = linw;

                ctx.lineCap = "round";

                ctx.stroke();

                oldx = newx;
                oldy = newy;
                endX = newx;
                endY = newy;
                points.push([event.pageX, event.pageY])

            }

        }

     
    </script>
</body>

</html>

千与魏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas绘画银河特效
06-24
这种效果通常用于增强网站的视觉体验，吸引用户的注意力，或者在游戏、艺术展示等领域应用。 Canvas的基本使用涉及以下几个关键点： 1. **元素创建与获取**：首先，你需要在HTML文档中添加一个`<canvas>`元素，并...
canvas拼图小游戏
01-19
- 应用Canvas的`getImageData()`方法获取图像数据，然后根据切割尺寸分割这些数据，存储为二维数组。 2. **初始化Canvas** - 创建一个`<canvas>`元素，设置其宽高与分割后的拼图块相匹配。 - 获取Canvas的2D渲染...
HTML5 Canvas学习笔记(5)游戏得分动画
心中的利剑：HTML5 Canvas游戏动画（JavaScript）
06-26 263
效果图： [img]http://dl2.iteye.com/upload/attachment/0098/5168/e0519189-e6c2-35a7-88db-cc0fc074af20.gif[/img] 点击查看效果： [url]http://www.108js.com/article/canvas/5/exam.html[/url] 欢迎访问博主的网站：[url]http...
扫描像素点法获取图形轮廓
技术斋
12-11 4032
参考： http://runjs.cn/code/k09vtlq7 var _getContourData = function(contourData,canvas){ var w = canvas.width; var h = canvas.height; _draft = canvas.getContext('2d').createI
h5 canvas透明度图像边缘提取算法
愤怒的小江哥-移动游戏专栏
05-09 1885
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { // atlas是地图集的意思，这里是一种资源，由png和json组成 game.load....
canvas图像重叠处理 - Kaiqisan
Kaiqisan的博客
07-14 5925
图像重叠处理 在面对重叠的图层之后，所产生的应对手段。默认的方法就是新层覆盖旧层，但是为了更好地完成一些效果，所以就有了这个图像重叠处理。 关键代码 globalCompositeOperation=type: 选择图像重叠的时候的处理方法。一旦设置之后全局生效，如果要改的话，就需要使用**ctx.restore()**或者手动调整为自己想要的属性值。 这个属性有很多的属性值：(下图的绘制过程均为先绘制粉色图片，再绘制蓝色图片) source-over: 默认值，新的图层覆盖老的图层 source-in:
canvas
weixin_58431406的博客
02-28 1055
Canvas 的一些基本应用和属性方法，案例：绘制一个心形，案例：利用canvas设置视频封面，用video播放视频然后指定某一帧作为封面图
canvas实现动态小球重叠效果
10-20
首先，本文将介绍在HTML5中的<canvas>元素以及它如何用于绘制图形。...此外，对于重叠效果的表现形式，可以根据具体的项目需求来设计，例如通过颜色混合、透明度变化或者叠加特定图案等方式来增强视觉效果。
Html5 Canvas动画基础碰撞检测的实现
12-02
在Canvas中进行碰撞检测，大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能，好奇的你有思考过它们的内部运行机制吗？下面将针对基本的碰撞检测技术进行讲解： 1、基于矩形的碰撞检测 所谓碰撞检测就是判断物体间是否发生重叠，这里我们假设讨论的碰撞体都是矩形物体。下面示例中我们将创建两个rect对象A和B(以下简称A,B)，其中A位置固定，B跟随鼠标移动，当A,B重叠时控制台将提示intercect！！ 1、创建Rect对象 这里我们新建Rect.js，建立Rect对象并为其添加原型方法draw,该方法将根据当前对象的属性(位置、大小)绘制到传
Canvas 小游戏 消灭方块
04-18
《Canvas小游戏中消灭方块的实现与探索》 在网页开发领域，Canvas作为一个强大的图形绘制API，被广泛用于创建各种动态、交互式的图形效果。在这个名为"消灭方块"的小游戏中，开发者通过Canvas API实现了一个趣味性...
canvas 飞机大战小游戏
01-19
在Canvas上，我们可以监听键盘事件，根据用户按键控制飞机的移动。例如，当用户按下上、下、左、右箭头键时，飞机的位置会相应改变。同时，为了发射子弹，需要监听鼠标点击或触摸屏触控事件，并在适当的位置创建新的...
Canvas判断线段是否重叠
小蜜蜂的博客
11-06 1829
比如我们,想画一个完整的闭合的矩形,那我们就不能让线段进行重叠 那线段重叠了,判断的方法呢 canvas.onmouseup = function (e) { e = e || window.event; //let gx = e.clientX - canvas.getBoundingClientRect().left; //let gy = e.clientY - canvas.getBoundingClientRect()
html5 canvas重叠,javascript – Html 5 canvas避免重叠时的填充行为
weixin_28846179的博客
06-10 555
正如你在上面的图片中看到的,我的等距正方形之间有可见的线条,这是由每个正方形相互重叠引起的.现在重叠是不可避免的,因为我使用的坐标系统绘制(我不想改变它).这是用于绘制正方形的代码cRenderContext.beginPath();cRenderContext.moveTo(iPosX, iPosY);cRenderContext.lineTo(iPosX + iTileWidthIncreme...
HTML5+JavaScript绘制彩虹和云朵
cnds123的专栏
08-10 459
HTML5+JavaScript绘制彩虹和云朵，改进版云彩能动——从左向右不停地移动
前端css线性渐变
最新发布
weixin_58694594的博客
08-14 266
【代码】前端css线性渐变。
a标签下载文件重命名（download）不生效
Julia_0502的博客
08-13 286
移动端使用a标签下载文件。
HTML5 Canvas 2D 游戏开发详解
15. **绘图模型**：定义了图形是如何在Canvas上呈现的，包括渲染顺序、重叠规则等。 这些知识点构成了HTML5 Canvas 2D游戏开发的基础，开发者通过熟练掌握这些技术，可以创造出丰富的交互式网页游戏和动态视觉效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值