一个拼图游戏

  闲着放松一下,试着看能不能用js写一个拼图游戏,就当是练习语法。以及对代码的管理。

  下面是我写的时候的思路:

      我的拼图是3*3的,在写的时候用ul>li作为容器。

      下面是各个部分的结构思路:

        --1.将图片的url放在一个resource数组中

        --2.用自己写的随机函数生成一个包含0-8的数字的数组,用来表示resource数组中图片的位置下标(每次load的时候数组都是变化的)

        --3.在load时,数组生成之后,把数组成员作为resource数组的下标给<img>的src赋值,(这几步是为了每次load时随机出现图片的位置)

        --4.然后就是操作了,这里有两种玩法,一种是用键盘的上下左右键控制,另一种就是用页面上的上下左右键

        --5.交换的思路:

        1)每一次把当前所有图片的随机的src作为一个数组

        2)从里面找出空白的那个、再找到需要交换的目标图片、交换他们在数组里的位置

        3)用交换之后的数组重新渲染图片src

        --6.成功的条件,在每次交换时,判断随机数组中的src是否按顺序都等于resource中的成员,即为成功。

        下面是我的代码的地址(请大家多指教:)  https://github.com/AllenLLB/js-Study/tree/master/%E6%8B%BC%E5%9B%BE

        大家想不想试一下我的这个能不能玩(用电脑,我没考虑到手机也能进去):115.159.190.99:1234/拼图/resource/index.html

时间: 2024-10-03 04:09:37

一个拼图游戏的相关文章

JavaScript写一个拼图游戏

拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开: 因为使用canvas,所以某些浏览器是不支持的: you know: 为什么要用canvas(⊙o⊙)?  因为图片是一整张jpg或者png, 我们要用把图片导入到canvas画布, 然后再调用上下文context的getImageData方法, 把图片处理成小图, 这些小图就作为拼图的基本单位: 如何判断游戏是否结束, 或者说如何判断用户拼成的大图是正确的? 我们就要在刚刚生成的小图上面添加自定义属性, 后期在小图被移动后再一

基于unity3d和leap motion的拼图游戏

最近用unity3d引擎做了一个拼图游戏,会分几次写完,以此作为总结.本文基本查找了网上能查到的所有资料作为参考.也算是大家节省了时间. 目前只完成了拼图部分,leap motion手势控制部分会在后续完成,不过说实话不太看好LM. 项目资源来自 栋笃神探 http://blog.csdn.net/cube454517408/article/details/7907247,不过玩法不同,玩法与小夭 http://game.ceeger.com/forum/read.php?tid=2852相同.

实战美女拼图游戏_Android游戏源码

今天给大家带来一个拼图游戏,当然了不是很传统那个缺一块的拼图,那游戏我不会玩~~所以我们换个方式玩拼图,怎么玩呢,把图片切成很多份,点击交换拼成一张完整的:这样关卡也很容易设计,3*3:4*4:5*5:6*6:...一直下去.... 没事在网上逛看到一个图片切片的辅助类,类很简单,上面说了一句,如果做拼图游戏的话可以用到,然后,我们就用到了~~ 下载地址:http://www.dwz.cn/zo8gL 运行图

Android 实战美女拼图游戏 你能坚持到第几关

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40595385,本文出自:[张鸿洋的博客] 1.概述 继2048之后,今天给大家带来一个拼图游戏,当然了不是很传统那个缺一块的拼图,那游戏我不会玩~~所有我们换个方式玩拼图,怎么玩呢,把图片且成很多份,点击交换拼成一张完整的:这样关卡也很容易设计,3*3:4*4:5*5:6*6:...一直下去.... 博客产生的原因是,没事在网上逛看到一个图片切片的辅助类,类很简单,上面说了一句

[CareerCup] 8.6 Jigsaw Puzzle 拼图游戏

8.6 Implement a jigsaw puzzle. Design the data structures and explain an algorithm to solve the puzzle. You can assume that you have a f itsWith method which, when passed two puzzle pieces, returns true if the two pieces belong together. 这道题让我们设计一个拼图

拼图游戏 v1.1

原文:拼图游戏 v1.1 我一直对拼图游戏比较有兴趣,市面上卖的所谓“1000块拼图”也玩过不少,不过玩那个太占地方,后来也不再买了,同时也就萌生了在电脑上玩拼图的想法. 现在虽然有很多拼图游戏,但能大多数只能支持几十或几百块拼图,很少能支持上千块拼图的游戏. 后来,我就利用 Direct2D 自己实现了一个拼图游戏,可以流畅的支持最高 1200 块的拼图(更高其实也可以支持,但是感觉已经足够了),拼图碎片之间也可以自动吸附,还可以设置吸附到背景.游戏界面如图 1 所示. 图 1 游戏界面 一.

Java小项目之:拼图游戏!

Java小项目之:拼图游戏!今天教大家用java做出一个拼图游戏,很适合java初学者练手.所用素材: 部分代码: package picture_mosical; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.image.BufferedImage; import java.awt.image.CropImageFilter; import java.awt.i

一款html拼图游戏详解

本文是爱编程原创翻译,转载请看清文末的转载要求,谢谢合作! 游戏介绍 这篇文章是献给web游戏开发者用简单的开发工具开发一款游戏.此文介绍了用html.css.javascript只需简单和几个步骤开发一款2d游戏.在这里,我要呈现给大家如何创建一款拼图游戏,在这个游戏中你可以拖动小图块来拼成完整的大图. 点击这里查看游戏效果. 游戏规则 游戏规则非常简单,你只要拖动被切碎的图片块来组成完整的大图.需要用正确的方法才能最终拼成完整的图片.在游戏中拖动小图片的次数将被统计下来.所以.应该尽量用最少

Vue.js实现拼图游戏

Vue.js实现拼图游戏 之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5516065.html 前言 为了进一步让大家了解Vue.js的神奇魅力,了解Vue.js的一种以数据为驱动的理念,本文主要利用Vue实现了一个数字拼图游戏,其原理并不是很复杂,效果图如下: demo展示地址为:https://luozhihao.github.io/vue-puzz