拼图小游戏

最新推荐文章于 2024-09-06 14:54:13 发布
最新推荐文章于 2024-09-06 14:54:13 发布
阅读量52 收藏
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LebaiA/article/details/130772713
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #box {

            width: 600px;

            height: 600px;

            border: 1px solid slateblue;

            margin: 100px 0 0 100px;

            position: relative;


 

        }

        .item {

            width: 100px;

            height: 100px;

            color: white;

            border: 1px solid springgreen;

            position: absolute;

            background-repeat: no-repeat;

        }

    </style>

</head>

<body>

    <div id="box">

    </div>

</body>

<script>

    var box = document.getElementById("box")

    var imgArr = []

    for (var i = 0; i < 6; i++) {

        for (var j = 0; j < 6; j++) {

            imgArr.push({

                top: -i * 100 + "px",

                left: -j * 100 + "px",

                c: i * 6 + j

            })

        }

    }

    console.log(imgArr)

    function ran(x, y) {

        return Math.floor(Math.random() * (y - x + 1) + x)

    }

    for (var i = 0; i < 36; i++) {

        var random = ran(0, imgArr.length - 1)

        var node = document.createElement("div")

        node.className = 'item'

        if (i == 35) {

            console.log(node)

            node.style.background = 'none'

            node.className = 'item kongimg'

            node.setAttribute('data-t', imgArr[random]['c'])

        } else {

            node.style.background = 'url(./1.webp)'

            node.style.backgroundSize = ' 600% 600%';

            node.style.backgroundPosition = `${imgArr[random].left} ${imgArr[random].top}`

            node.setAttribute('data-t', imgArr[random]['c'])

            imgArr.splice(random, 1)

        }

        node.style.top = Math.floor(i / 6) * 100 + "px"

        node.style.left = i % 6 * 100 + "px"

        box.appendChild(node)

    }

    box.onclick = function (e) {

        var i_img = document.querySelector('.kongimg')

        var imgTop = i_img.offsetTop;

        var imgLeft = i_img.offsetLeft

        var i_top = e.target.offsetTop;

        var i_left = e.target.offsetLeft;

        if (imgLeft == i_left && (imgTop - i_top == 100 || imgTop - i_top == -100)) {

            i_img.setAttribute('class', 'item');

            i_img.style.background = e.target.style.background;

            e.target.style.background = 'none';

            e.target.className = 'item kongimg'

            var nn = i_img.dataset.random;

            i_img.setAttribute('data-t', e.target.dataset.random)

            e.target.dataset.random = nn

        }

        if (imgTop == i_top && (imgLeft - i_left == 100 || imgLeft - i_left == -100)) {

            i_img.setAttribute('class', 'item');

            i_img.style.background = e.target.style.background;

            e.target.style.background = 'none';

            e.target.className = 'item kongimg'

            var nn = i_img.dataset.random;

            i_img.setAttribute('data-t', e.target.dataset.random)

            e.target.dataset.random = nn

        }

    }




 

</script>

</html>

LebaiA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端技术搭建拼图小游戏（内含源码）
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
android拼图小游戏代码,Android实现拼图小游戏
weixin_35577004的博客
05-26 1239
###前言Android原生开发也可以实现一些简单的小游戏。今天给大家讲解一个Android实现拼图小游戏的知识。游戏拼图，在很多地方应该都是有讲解的了，不过，我今天要讲解的不同在于，我已经将这个拼图游戏功能封装都了一个类——Puzzle中，然后会讲解些在实现过程中需要注意的问题和心得。今天设计内容：1. `Puzzle`类的主要方法介绍2. `Puzzle`在`MainActivity`中的应用...
Java实现拼图小游戏
2301_76675652的博客
12-03 680
拼图小游戏，通过交换拼图块来还原一个乱序的拼图，游戏所用的图片可以自己定义。本程序主要运用了 Swing 组件和 Java 图形界面编程的知识，让用户可以通过图形化交互来完成一项简单的游戏任务。
java拼图小游戏
weixin_63880309的博客
03-14 828
拼图小游戏完整
Unity拼图小游戏
北宁born的博客
06-03 9448
Unity拼图小游戏的实现 目前做了一款拼图小游戏，不规则的图形，自由拖拽，网上其他拼图大部分都是基于九宫格的类似华容道拼图模式，我做的时候没有找到我这种类型的相关的项目代码（有一付费下载，然后发现是用3d实现碰撞，然后正交相机来模拟2d），所以现在来记录一下自己的完成思路。 下附一张效果截图。 一、主要难点 1.不规则图形的显示和碰撞 2.拼图自动生成 二、难点思路 1.显示和碰撞 我之前是一...
c++编程拼图小游戏
EDU_YONG的博客
05-31 1600
如何才能提供自己的编程水平，就要千锤百炼。今天给大家推荐的是拼图小游戏；采用 c++ 编写, 主要使用到了两个类, 分别是 GameFrame 和 Picture。GameFrame 负责游戏界面的初始化和原始信息的绘制;Picture 负责图片的切割, 图片位置的初始化,通关条件判断, 控制整个游戏正确运行。另外这次还修改了鼠标位置与图片的定位算法, 同时图片位置初始化由正确的通关位置移动而来, 所以能保证拼图游戏绝对有解. 不需要使用复杂的数学公式来判断。 picture.cpp /...
拼图小游戏html原理,打造自己的html5拼图小游戏
weixin_42526068的博客
05-31 275
得益于liuyubobobo老师的canvas课程和思路指点，做了一版简单的 html5拼图小游戏，下面就简单介绍一下实现的原理。。。利用canvas裁剪拼图所需的小块图片//核心代码如下：var index = 1;for (var i=0; i<3; i++) {for (var j=0; j<3; j++) {ctx.drawImage(image, 300*j, 300*i, ...
C++拼图小游戏
kxtxdy的博客
03-25 1952
游戏名：拼图 采用 c++ 编写，主要使用到了两个类，分别是 GameFrame 和 Picture。GameFrame 负责游戏界面的初始化和原始信息的绘制；Picture 负责图片的切割， 图片位置的初始化,通关条件判断， 控制整个游戏正确运行。另外这次还修改了鼠标位置与图片的定位算法，同时图片位置初始化由正确的通关位置移动而来， 所以能保证拼图游戏绝对有解，不需要使用复杂的数学公式来判断。 放几张效果图： ...
Java-拼图小游戏(游戏界面完整版)
2301_81253185的博客
03-24 818
今天向大家分享我最近写的一个java小游戏-拼图游戏为了使结构更加美观,我们要把关于游戏的登录页面,注册页面,游戏页面分为3个类来分别写,最后在主函数中进行运行在这里,由于登录界面以及注册界面的不完善,所以我仅为大家分享一下关于游戏的游戏界面以及一些我自己的分析与理解分析,代码中有详细的解释,如果大家有什么不会的以及不太懂的地方可以随时问我以下便是我所写都App的主函数的运行界面。
python课程设计用pyqt5做的拼图小游戏源码.zip
06-16
python课程设计用pyqt5做的拼图小游戏源码python课程设计用pyqt5做的拼图小游戏源码python课程设计用pyqt5做的拼图小游戏源码python课程设计用pyqt5做的拼图小游戏源码python课程设计用pyqt5做的拼图小游戏源码...
canvas拼图小游戏
01-19
综上所述，创建一个canvas拼图小游戏涉及多个步骤，从图像处理到用户交互，再到游戏逻辑的实现。熟练掌握Canvas API和JavaScript是成功构建此类游戏的关键。在提供的`puzzle.html`文件中，你可以找到具体的游戏实现...
Python写简单的拼图小游戏完整项目
07-03
**Python编程：构建拼图小游戏** 在Python编程领域，创建一个拼图小游戏是一个经典且有趣的实践项目，尤其适合初学者提升编程技能。本项目利用Python的图形用户界面（GUI）库，如Tkinter或Pygame，来实现一个交互式...
python 华容道拼图小游戏
10-28
《Python实现华容道拼图小游戏详解》 华容道，一种源于中国古代的益智游戏，如今被编程爱好者们用代码赋予了新的生命。本文将详细介绍如何使用Python的pygame模块来编写一个华容道拼图小游戏，同时涉及os、random和...
基于python+pyqt5做的拼图小游戏.rar
02-04
该项目是使用Python编程语言结合PyQt5库开发的一款拼图小游戏。PyQt5是一个强大的图形用户界面（GUI）工具包，允许开发者创建出美观且功能丰富的应用程序。在本项目中，它被用来构建游戏的界面和交互逻辑。 首先，...
Qt将数据库中的数据导出为html
qq_15181569的博客
09-04 648
【代码】Qt将数据库中的数据导出为html。
【HTML】置换元素（替换元素）
衣乌安、随笔
09-06 242
● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1623
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
【Harmony】文本高亮显示、关键字凸显字体大小、颜色、背景色等风格自定义、嵌入html脚本提取超链接及超链接文本或其他脚本片段
最新发布
lichong951的专栏
09-06 285
预览效果如图（网上找到demo，如有疑问请留评论蛤！）：这个是超链接这是例子里的数据定义方式，和从接口里解析的json数据有所区别再看看其他预览效果，比如有html超链接。
Android拼图小游戏实现教程
在本文中，我们将深入探讨如何在Android平台上实现一款拼图小游戏。首先，我们从设计界面开始，目标是在`activity_main.xml`布局文件中创建一个基础的GridLayout来展示拼图的格子。XML代码展示了如何设置GridLayout...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值