java编写九宫格拼图游戏_基于jquery实现九宫格拼图小游戏
九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用js简单写了一个。
游戏的玩法很简单。九宫格中有八个小图片。随机打乱之后,将八张小图片拼接成一个完整的图。
html代码
body{
border: 0;
}
.out{
width: 606px;
height: 606px;
margin: 0 auto;
border: 1px solid black;
}
.in{
width: 200px;
height: 200px;
background-color:red;
float: left;
border: 1px solid black;
}
.no_see{
width: 200px;
height: 200px;
background-color:white;
float: left;
border: 1px solid black;
}
.btn{
width: 50px;
height: 25px;
margin: 50px auto;
}
.begin{
width: 50px;
height: 25px;
}
my game
这里使用div来布局。具体实现就不啰嗦了。文章的重点是js的实现。
实现图片的互换
图片的互换其实就是html中的div互换。当点击图片时,和游戏中的空白图进行交换。
$('.in').click(function(){
var t = $(this).clone(); //复制当前点击的div
$('.no_see').before(t); //在空白div的前面插入复制的div
$(this).before($('.no_see')); //把空白div插入到点击div的前面
t.before($(this)) //把点击的div插入到复制div的前面
t.remove(); //移除复制的div
})
这里可能会有疑问。为什么后边要多一步 “把点击的div插入到复制div的前面”。测试过程中,发现clone()不会保留js操作节点。也就是点击的div所拥有的class,不能被继承。所以多这一步是为了点击过的div后面还能再继续点击。
保证只有相邻才能互换
当然,只有在空白div旁边的图片才能与其互换。不然游戏就太简单了。如何实现?下面先使用一种比较笨的方式来实现。
$(function(){
var menu = {
"1":["2","4"],
"2":["1","3","5"],
"3":["2","6"],
"4":["1","5","7"],
"5":["2","4","6","8"],
"6":["3","5","9"],
"7":["4","8"],
"8":["5","7","9"],
"9":["6","8"]
}
$('.in').click(function(){
var click_num = $(this).index()+1;
var no_see_num = $('.no_see').index()+1;
var arr = menu[no_see_num];
if(jQuery.inArray(String(click_num), arr)=='-1'){
//这里是无法交换位置的逻辑。可以做点什么。
}else{
var t = $(this).clone();
$('.no_see').before(t);
$(this).before($('.no_see'));
t.before($(this))
t.remove();
}
})
})
是的,这种方法很蠢,但是可以实现。通过数组的方式,先找到空白div,再查看空白div所在位置四周有哪些位置的图片可以与其交换。
当然,九宫格使用这样的方式来实现没有问题,毕竟数组是可列的。但是如果变成16宫格,36宫格呢?先不说要去列数组,还要修改代码。这样就很费劲了。所以我需要通过别的方式,让代码以后扩展更容易。
通过算法保证互换条件
$(function(){
$('.in').click(function(){
var tmp = false;
var click_num = $(this).index();
var no_see_num = $('.no_see').index();
var click_x = click_num % 3;
var click_y = Math.floor(click_num / 3);
var no_see_x = no_see_num % 3;
var no_see_y = Math.floor(no_see_num / 3);
if (click_x==no_see_x) { //同一行
if (click_y==no_see_y+1||click_y==no_see_y-1) {
tmp = true; //保证相邻
}
}else if (click_y==no_see_y) { //同一列
if (click_x==no_see_x+1||click_x==no_see_x-1) {
tmp = true; //保证相邻
}
}
if (tmp) {
var t = $(this).clone();
t.addClass('bit');
$('.no_see').before(t);
$(this).before($('.no_see'));
t.before($(this))
t.remove();
}
})
})
算法看起来会比较乱。简单的说是通过求余和相除取最小整数的方式来计算。
画几个表可能就清楚了。
1.在九宫格下每个图的顺序如下。
2.在九宫格下每个位置求余后的值如下。
3.在九宫格下每个位置除法取最小整数的值如下。
现在看起来应该简单多了。当取余相等时,两个位置在一列上。当除法取最小整数相等时,两个位置在一行上。
但是此时还存在一个问题,在一行或者一列上也有可能中间有间隔。所以采取当取余相等时,用除法的结果+1或者-1。此时就可以判断是否有间隔值了。
最后
到这里,游戏的主体就算写完了。当然,如何想丰富游戏趣味,可以加入计时器、完成所用步骤等等。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java编写九宫格拼图游戏_基于jquery实现九宫格拼图小游戏相关推荐
- java在线选座功能_基于jquery实现在线选座订座之影院篇
先给大家展示效果图(支持源码下载哦): 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座 ...
- jQuery 一次定时器_用 jQuery 手写一个小游戏
作者:王圣松 转发链接:https://juejin.im/post/6844903687307919373 前言 今天给大家带来一个小游戏. 要求:熟悉 JavaScript 继承的概念. 游戏预览 ...
- python爬取小游戏_如何用Python爬取小游戏网站,把喜欢的游戏收藏起来(附源码)...
简介: Python 是一门简单易学且功能强大的编程语言,无需繁琐的配置,掌握基本语法,了解基本库函数,就可以通过调用海量的现有工具包编写自己的程序,轻松实现批量自动化操作,可以极大提高办公和学习效率 ...
- cmd小游戏_使用pygame制作Flappy bird小游戏
原文链接: [Python]使用Pygame做一个Flappy bird小游戏(一)mp.weixin.qq.com 最近看到很多大佬用强化学习玩Flappy bird.所以打算也上手玩一玩,但是苦 ...
- python连连看小游戏_利用Python制作一个连连看小游戏,边学边玩!
导语 今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块 环境搭建 安装Python并添加到环 ...
- java编写类骑士游历_[基于Java的骑士游历问题的预见算法]骑士游历问题
摘要:骑士游历问题是经典的NP问题.在骑士游历问题常规算法的基础上,提出一个新的算法――预见算法,用Java实现该算法,提高程序的运行效率. 关键词:骑士游历:预见:Java算法 1 骑士游历问题 在 ...
- 用java编写一个聊天程序_基于JAVA实现的一个简单的网络聊天程序
一.Java Socket的概述 1.Socket套接字方便了开发网络应用程序.TCP面向连接的可靠传输协议.具有数据确认和数据重传机制.保证了发送数据一定能到达通信的对方.UPD协议无连接,不可靠的 ...
- 用php编写比赛评奖系统_基于JQuery+PHP编写砸金蛋中奖程序
首先给大家展示效果图: 查看演示 下载源码 准备工作 我们需要准备道具(素材),即相关图片,包括金蛋图片.蛋砸碎后的图片.砸碎后的碎花图片.以及锤子图片. HTML 我们页面上要展现的是一个砸金蛋的台 ...
- java小恐龙游戏_【分享】 chrome恐龙小游戏 java
本帖最后由 leiyanfu 于 2019-5-3 14:27 编辑 最近学习java也有一段时间了 前些天打开网站老是出出现小恐龙所以就萌生了想模仿着写一个 无奈一些东西我还没学到 比如java的窗 ...
- python h5游戏_从零开始制作H5人脸融合小游戏
去年的建军节,一个展示军装照的H5人脸融合游戏火遍朋友圈,带来很好的传播效果.最近欧冠决赛要来了,公司决定做一个寻找和你最像的欧冠球星的H5游戏,那么该怎么做呢?认真分析了一下,这个游戏其实用到的技术 ...
最新文章
- Centos 6安装python3.5
- hbase安装,以及安装前置hadoop(单节点)
- 全球及中国血铅检测服务行业应用动态及未来产销需求预测报告2022版
- 感觉灵感被掏空?你需要这 9 篇论文来补一补 | PaperDaily #05
- Android属性动画 Interpolator
- racle的STRUCT和VARRAY的读写方法
- PHPWeb开发入门体验学习笔记
- 结构体怎么赋值_c语言学习之基础知识点介绍:结构体的介绍
- 模式识别听课笔记【武汉理工大学】
- 一种简单的可控并发粒度的TaskScheduler的实现
- 从大到小依次输出三个整数
- oracle怎么把in值列出来,oracle – SELECT的解析和绑定变量.. WHERE列IN(..)查询
- 互联网+ 何人能挡?带着你的Code飞奔吧!
- 小数形式与科学计数法转换c语言,BUAA小数形式与科学计数法转换(简)
- RHadoop(一)
- 全网优惠券、红包获取api
- 安卓之旅第七站--实战演练之快给小宝宝买装备吧
- 【Android Gradle 插件】Splits 配置 ③ ( Splits#density{} 脚本块配置 | 根据屏幕像素密度进行分包 | DensitySplitOptions 配置简介 )
- lo4net的简单运用
- 奇文共欣赏 疑义相与析