《你畫我猜》是一款大家熟知的聚會遊戲，需要兩個或以上的玩家參與。遊戲過程中，每個玩家輪流在畫闆上畫出一幅畫，其他玩家來猜畫圖者所畫的是什麼。遊戲時間通常為一分鐘，畫筆顔料不能擦除或塗改，最先猜到的玩家得到一定的得分，而畫圖者也可得到一定的得分。這款遊戲有利于鍛煉玩家的想象力和表達能力，同時也能增強玩家之間的互動和溝通。在網絡上，也有類似的線上遊戲平台供玩家進行遊戲。
1、HTML部分
我們需要一個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方法清空畫布，然後重新加載背景圖檔。
到這裡，一個簡單的你畫我猜小遊戲就完成了。
希望本文能夠對您有所幫助，感謝您的閱讀！
人人為我，我為人人，謝謝您的浏覽，我們一起加油吧。
![Linux之Shell腳本自動化程式設計二（bash腳本混合程式設計和子shell）bash腳本混合程式設計子shell[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)