游戏说明:先绘出图形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>