html5 七巧板

<!DOCTYPE html>
<html>
    <canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
    <canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
</html>
<script>
position = [
 {p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#cfff67"},
 {p:[{x:0, y:0}, {x:400, y:400}, {x:0, y:800}], color:"#67becf"},
  {p:[{x:800, y:0}, {x:800, y:400}, {x:600, y:600}, {x:600, y:200}], color:"#6fbfcf"},
  {p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#6eefcf"},
  {p:[{x:400, y:400}, {x:600, y:600}, {x:400, y:800}, {x:200, y:600}], color:"#abe"},
  {p:[{x:200, y:600}, {x:400, y:800}, {x:0, y:800}], color:"#eab"},
  {p:[{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#6e9ec9"},

]
var canvas = document.getElementById('diag');     //huo
var context = canvas.getContext('2d');   //获取canvas上下环境
canvas.width = '800';
canvas.height = '800';
for(i=0; i<position.length; i++) {
    draw(position[i], context)
}
function draw(pe, context) {
    context.beginPath();
    context.moveTo(pe.p[0].x, pe.p[0].y);
    console.log(pe.p.length);
    // return;
    for (var i = 1; i < pe.p.length; i++) {
        // console.log(pe.p)
        context.lineTo(pe.p[i].x, pe.p[i].y)
    };
    context.closePath();
    context.fillStyle=pe.color;
    context.fill()
}
</script>

转载于:https://www.cnblogs.com/agang-php/p/4822849.html

简单GUI七巧板游戏的实现可以使用C语言结合图形库进行开发。这里以使用EasyX图形库为例,给出一个简单的实现: ```c #include <graphics.h> #include <conio.h> // 定义七巧板数据结构 struct Puzzle { int x, y; // 左上角坐标 int w, h; // 宽度和高度 COLORREF color; // 颜色 int shape[5][5]; // 形状数组 }; // 定义七巧板数组 Puzzle puzzles[8] = { { 10, 10, 60, 60, RGB(255, 0, 0), { { 0, 1, 0 }, { 1, 1, 1 }, { 0, 1, 0 } } }, { 80, 10, 60, 60, RGB(255, 255, 0), { { 1, 1, 0 }, { 0, 1, 1 }, { 0, 0, 1 } } }, { 150, 10, 60, 60, RGB(0, 255, 0), { { 0, 1, 0, 0 }, { 0, 1, 0, 0 }, { 1, 1, 1, 1 }, { 0, 1, 0, 0 } } }, { 220, 10, 60, 60, RGB(0, 255, 255), { { 1, 1, 0 }, { 1, 1, 0 }, { 0, 0, 1 } } }, { 10, 80, 60, 60, RGB(0, 0, 255), { { 1, 1, 0, 0 }, { 0, 1, 1, 0 }, { 0, 0, 1, 1 } } }, { 80, 80, 60, 60, RGB(255, 0, 255), { { 1, 0, 0 }, { 1, 1, 0 }, { 0, 1, 1 } } }, { 150, 80, 60, 60, RGB(192, 192, 192), { { 1, 1 }, { 1, 1 } } }, { 220, 80, 60, 60, RGB(128, 128, 128), { { 1 } } } }; // 绘制七巧板 void drawPuzzle(Puzzle p) { setfillcolor(p.color); for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { if (p.shape[i][j] == 1) { int x = p.x + j * p.w / 5; int y = p.y + i * p.h / 5; solidrectangle(x, y, x + p.w / 5, y + p.h / 5); } } } } // 判断是否可以放置七巧板 bool canPlace(Puzzle p, int x, int y, Puzzle board[5][5]) { for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { if (p.shape[i][j] == 1) { int bx = x + j; int by = y + i; if (bx < 0 || bx >= 5 || by < 0 || by >= 5 || board[by][bx].shape[i][j] == 1) return false; } } } return true; } // 放置七巧板 void placePuzzle(Puzzle p, int x, int y, Puzzle board[5][5]) { for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { if (p.shape[i][j] == 1) { int bx = x + j; int by = y + i; board[by][bx] = p; } } } } // 移除七巧板 void removePuzzle(Puzzle p, Puzzle board[5][5]) { for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { if (p.shape[i][j] == 1) { int bx = p.x / p.w + j; int by = p.y / p.h + i; board[by][bx] = { 0 }; } } } } int main() { initgraph(300, 300); setbkcolor(WHITE); // 初始化七巧板棋盘 Puzzle board[5][5] = { { 0 } }; // 绘制七巧板棋盘 setlinestyle(PS_SOLID, 2); setlinecolor(BLACK); for (int i = 0; i <= 5; i++) { line(10, 10 + i * 60, 250, 10 + i * 60); line(10 + i * 60, 10, 10 + i * 60, 250); } // 绘制七巧板 for (int i = 0; i < 8; i++) { drawPuzzle(puzzles[i]); } int curX = -1, curY = -1; int dragX = -1, dragY = -1; int dragIndex = -1; // 游戏循环 while (true) { // 获取鼠标位置 int x = mousex(); int y = mousey(); // 判断是否在七巧板上方 int index = -1; for (int i = 0; i < 8; i++) { if (x >= puzzles[i].x && x < puzzles[i].x + puzzles[i].w && y >= puzzles[i].y && y < puzzles[i].y + puzzles[i].h) { index = i; break; } } // 绘制拖动状态 if (dragIndex != -1) { Puzzle p = puzzles[dragIndex]; p.x = dragX; p.y = dragY; drawPuzzle(p); } // 绘制当前位置状态 else if (curX != -1 && curY != -1) { Puzzle p = puzzles[dragIndex]; p.x = curX; p.y = curY; drawPuzzle(p); } // 处理鼠标按下事件 if (ismouseclick(WM_LBUTTONDOWN)) { // 判断是否在七巧板上方 if (index != -1) { dragIndex = index; dragX = curX = puzzles[index].x; dragY = curY = puzzles[index].y; } // 判断是否在棋盘上方 else if (x >= 10 && x < 250 && y >= 10 && y < 250) { int bx = (x - 10) / 50; int by = (y - 10) / 50; if (canPlace(puzzles[dragIndex], bx, by, board)) { removePuzzle(puzzles[dragIndex], board); placePuzzle(puzzles[dragIndex], bx, by, board); dragIndex = -1; } } } // 处理鼠标拖动事件 if (ismouseclick(WM_LBUTTONUP)) { // 判断是否在七巧板上方 if (dragIndex != -1) { dragIndex = -1; } } Sleep(10); } closegraph(); return 0; } ``` 这个程序实现了一个简单的七巧板游戏,其中包含了七巧板的数据结构、绘制函数、棋盘判断函数、放置函数、移除函数等。主程序部分则是使用图形库进行界面的搭建和游戏循环的实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值