《你画我猜》是一款大家熟知的聚会游戏，需要两个或以上的玩家参与。游戏过程中，每个玩家轮流在画板上画出一幅画，其他玩家来猜画图者所画的是什么。游戏时间通常为一分钟，画笔颜料不能擦除或涂改，最先猜到的玩家得到一定的得分，而画图者也可得到一定的得分。这款游戏有利于锻炼玩家的想象力和表达能力，同时也能增强玩家之间的互动和沟通。在网络上，也有类似的线上游戏平台供玩家进行游戏。
我们需要一个HTML页面来作为游戏的主体框架。在HTML中，我们需要引入CSS和JavaScript文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>你画我猜小游戏</title>
<link rel="stylesheet" href="style.css">
<script src="game.js"></script>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
<div class="toolbar">
<button id="clear">清空</button>
<button id="submit">提交</button>
</div>
</div>
</body>
</html>
这里我们使用了一个canvas元素作为绘图区域，两个按钮分别用于清空画布和提交答案。
2、样式部分body {
margin: 0;
padding: 0;
background: #eee;
}
.container {
margin: 20px auto;
width: 800px;
height: 600px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#canvas {
margin: 10px;
border: 1px solid #ccc;
}
.toolbar {
margin: 10px;
display: flex;
justify-content: space-between;
}
button {
padding: 10px;
background: #03a9f4;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #039be5;
}
这里我们添加了简单的主体框架的样式。
3、获取画布const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 500;
这里我们设置画布的宽度和高度。
4、绘图代码- drawLine: 绘制直线
- drawPoint: 绘制圆点
- drawImage: 绘制背景图片
let draw = {
isDrawing: false,
lastX: 0,
lastY: 0,
lineWidth: 2,
color: 'black',
drawLine: function(x1, y1, x2, y2) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
},
drawPoint: function(x, y) {
context.beginPath();
context.arc(x, y, draw.lineWidth / 2, 0, Math.PI * 2);
context.fill();
context.closePath();
},
drawImage: function(src) {
const image = new Image();
image.src = src;
image.onload = function() {
context.drawImage(image, 0, 0);
}
}
};
这里我们定义了一个draw对象，包含了绘图相关的属性和方法。其中， drawLine 函数使用了canvas的基本绘图API， drawPoint 函数用于画小圆点， drawImage 函数用于加载背景图片。
5、背景在绘图之前，我们需要先加载游戏所需的背景图片。
draw.drawImage('background.png'); 6、绘画行为
我们使用鼠标或触屏设备的事件监听器来获取用户的绘图行为。
- handleMouseDown: 当鼠标按下时执行
- handleMouseMove: 当鼠标移动时执行
- handleMouseUp: 当鼠标抬起时执行
function handleMouseDown(e) {
draw.isDrawing = true;
draw.lastX = e.offsetX;
draw.lastY = e.offsetY;
}
function handleMouseMove(e) {
if (draw.isDrawing) {
draw.drawLine(draw.lastX, draw.lastY, e.offsetX, e.offsetY);
draw.drawPoint(e.offsetX, e.offsetY);
draw.lastX = e.offsetX;
draw.lastY = e.offsetY;
}
}
function handleMouseUp() {
draw.isDrawing = false;
}
在这里，我们使用了offsetX和offsetY属性获取鼠标/触屏的位置，然后调用drawLine和drawPoint函数进行绘图。
7、获取绘图结果我们需要在提交按钮被点击时获取用户绘图的结果。
- handleSubmit: 处理提交画布的函数
function handleSubmit() {
const imageData = canvas.toDataURL();
// 将图像数据发送到后端进行识别
}
在这里，我们使用canvas的toDataURL方法将画布中的图像数据以Base64的形式编码，方便后端进行识别处理。
8、按钮操作// 为按钮注册事件
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
draw.drawImage('background.png');
});
document.getElementById('submit').addEventListener('click', handleSubmit);
// 为画布注册事件
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
在这里，我们为清空按钮和提交按钮注册了点击事件，为canvas元素注册了鼠标事件。清空按钮事件中使用了context.clearRect方法清空画布，然后重新加载背景图片。
到这里，一个简单的你画我猜小游戏就完成了。
希望本文能够对您有所帮助，感谢您的阅读！
人人为我，我为人人，谢谢您的浏览，我们一起加油吧。
