jQuery 문자 그림 퍼즐 게임 코드
JS 코드
<스크립트 유형="텍스트/자바스크립트">
$(함수(){
var tt=null;
//게임 완료 시간 및 단계 수
변수 횟수=0;
변수 시간=0;
// 이전 이미지 배열을 중단하고 준비하세요
var src= 배열();
src.push("images/201.png");
src.push("images/202.png");
src.push("images/203.png");
src.push("images/204.png");
src.push("images/205.png");
src.push("images/206.png");
src.push("images/207.png");
src.push("images/208.png");
src.push("images/209.png");
//버튼 이벤트가 발생합니다. . . 게임을 시작하세요
$('#버튼').click(function(){
클리어간격(tt)
// 시간은 0
으로 돌아갑니다. 시간=0;
횟수=0;
// 와서 시간을 정하세요
tt=setInterval(shij,1000)
함수 shij(){
시간++;
$(".time>p>span").text(time)
}
> > // 순서대로 정렬됨
var srcUsing= new Array();
for(var p=0; p<src.length;p++){
srcUsing[p]=src[p];
}
var newArry= new Array();
for(var i=0;i< $("#box img").length;i++){
newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
~ for(var j=0;j<newArry.length;j++){
$("#box img").eq(j).attr("src",String(newArry[j]));
~
//빈 그림을 설정합니다,
var Arrps=document.getElementById("box").getElementsByTagName("img");
for(var i=0;i<Arrps.length;i++){
Arrps[i].onclick=function(){
if (this.getAttribute("src")=="images/201.png");
changeP(this,Arrps);
};
}
})
// 判断位置
함수 변경P(ob,Arrps){
var Ni=0;
var Nj=0;
for(var i=0;i<Arrps.length;i++){
if(Arrps[i]==ob)
{
// 경고(ob)
니=i;
}
if(Arrps[i].getAttribute("src")=="images/201.png")
{
Nj=i;
}
}
// 绝对值
if(Math.abs(Ni-Nj)==3)
{
var tempOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
번++;
ifright();
}else if((Ni-Nj)==1&&(Ni%3)!=0){
var tempOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
번++;
ifright();
}else if((Ni-Nj)==-1&&(Ni%3)!=2){
var tempOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
번++;
ifright();
}
$(".bu>p>span").text(회)
}
함수 ifright(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i<src.length;i++){
if(src[i]!=Arrps[i].getAttribute("src")) return;
}
Alert("축하합니다. 성공했습니다..."+"n"+"used"+times+"step")
}
})
이 사이트의 모든 리소스는 네티즌이 제공하거나 주요 다운로드 사이트에서 재인쇄되었습니다. 소프트웨어의 무결성을 직접 확인하십시오! 이 사이트의 모든 리소스는 학습 참고용으로만 사용됩니다. 상업적 목적으로 사용하지 마시기 바랍니다. 그렇지 않으면 모든 결과에 대한 책임은 귀하에게 있습니다! 침해가 있는 경우 당사에 연락하여 삭제하시기 바랍니다. 연락처: admin@php.cn
관련 기사
![jQuery 없이 맨 위로 부드러운 애니메이션 스크롤을 만드는 방법은 무엇입니까?](https://img.php.cn/upload/article/001/246/273/173059479117375.jpg)
03 Nov 2024
많은 브라우저에서 맨 위로 애니메이션 스크롤(jQuery 제외) 웹에서 부드러운 애니메이션 "맨 위로 스크롤" 효과 구현...
![CSS가 콘텐츠에 영향을 주지 않고 반투명 요소에 대한 배경 흐림을 달성할 수 있습니까?](https://img.php.cn/upload/article/001/246/273/173020704318573.jpg)
29 Oct 2024
CSS에서 배경 흐림 효과 달성: 동적 투명 효과 가이드질문:Vista/7-aero-glass 스타일 효과를 만드는 것이 바람직합니다...
![JavaScript 없이 CSS에서 hover 효과를 어떻게 지연할 수 있나요?](https://img.php.cn/upload/article/001/246/273/173260669098536.jpg)
26 Nov 2024
CSS에서 :hover 효과 지연JavaScript를 사용하지 않고 :hover 이벤트를 지연할 수 있습니까? CSS에서 hover 효과 적용을 지연하는 것이 가능합니다...
![내 CSS 전환으로 인해 Chrome에서 이미지가 흐릿해지고 움직임이 발생하는 이유는 무엇입니까?](https://img.php.cn/upload/article/001/246/273/173512189063200.jpg)
25 Dec 2024
Chrome에서 이미지 흐림 및 움직임을 유발하는 CSS 전환 효과?Chrome에서 이미지 흐림 및 움직임을 유발하는 CSS 전환 효과 문제...
![오버레이에서 CSS Glass Blur 효과를 얻는 방법은 무엇입니까?](https://img.php.cn/upload/article/001/246/273/173245544212051.jpg)
24 Nov 2024
오버레이에 CSS 유리/흐림 효과 적용Q: 반투명 오버레이에 흐림 효과 구현 웹 개발자가 어려움을 겪고 있는 이유는 다음과 같습니다.
![PHP 모방 Comsenz 설치 효과 코드](https://img.php.cn/upload/article/000/000/015/5c62555e5c6c2376.png)
29 Jul 2016
shifenzheng.bak:shifenzheng.bak php는 Comsenz 설치 효과 코드 패키지를 모방하고 다운로드를 제공합니다. 최종 효과는 다음과 같습니다. step.inc.php 설치 단계 효과 클래스: 다음과 같이 코드 코드를 복사합니다:/** * step.inc. php 설치 단계 효과 클래스 * * 누구나 배울 수 있는 Comsenz 제품의 설치 효과 데이터 시트에서 메인 코드 추출 * @author tianxin * @version 1.0.0 * */ class StepClass { function show_header() { defi
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![jQuery2019 발렌타인데이 고백 불꽃놀이 애니메이션 특수 효과](https://img.php.cn/upload/jscode/000/000/001/5c64d3e6d92b2641.jpg)
jQuery2019 발렌타인데이 고백 불꽃놀이 애니메이션 특수 효과
Douyin에 대한 매우 인기 있는 jQuery 발렌타인 데이 고백 불꽃놀이 애니메이션 특수 효과는 프로그래머와 기술 전문가가 사랑하는 소녀에 대한 사랑을 표현하는 데 적합합니다. 좋아하든 원하지 않든 결국에는 동의해야 합니다.
![Layui 반응형 애니메이션 로그인 인터페이스 템플릿](https://img.php.cn/upload/jscode/000/000/001/5a93a913de3a7571.png)
Layui 반응형 애니메이션 로그인 인터페이스 템플릿
Layui 반응형 애니메이션 로그인 인터페이스 템플릿
![520 발렌타인 데이 고백 웹 애니메이션 특수 효과](https://img.php.cn/upload/jscode/000/287/557/620611f90d724550.jpg)
520 발렌타인 데이 고백 웹 애니메이션 특수 효과
jQuery 발렌타인데이 고백 애니메이션, 520 고백 배경 애니메이션
![멋진 시스템 로그인 페이지](https://img.php.cn/upload/jscode/000/120/096/5e09903f2f0c4401.jpg)
멋진 시스템 로그인 페이지
멋진 시스템 로그인 페이지
![HTML5 테이프 음악 플레이어 - CASSETTE PLAYER](https://img.php.cn/upload/jscode/000/120/096/5e200ad65973d549.jpg)
HTML5 테이프 음악 플레이어 - CASSETTE PLAYER
HTML5 테이프 음악 플레이어 - CASSETTE PLAYER
![](/static/imghw/taglogo.png)