原生js完成拼图小游戏
废话不说，看代码，图片可以自己找，我这直接引用了百度的了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>智能拼图</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
padding:0;
margin:0;
}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
font-size:12px;
background:#f3f3f3;
color:#333;
}
a{
outline:none;
-moz-outline:none;
text-decoration:none;
}
.play_wrap{
width:300px;
float:left;
padding:20px;
margin:0px auto;
}
#play_area{
position:relative;
width:300px;
height:300px;
margin:auto;
background:#f8f8f8;
border-radius:2px;
color: black;
box-shadow: 0px 0px 8px #09F;
border:1px solid #fff;
*border:1px solid #e5e5e5;
cursor:default;
}
#play_area .play_cell{ /*小方块*/
width:73px;
height:73px;
border:1px solid #fff;
border-radius:4px;
position:absolute;
cursor: default;
z-index:80;
box-shadow:0px 0px 8px #fff;
}
.play_menu{
float:left;
margin-left:60px;
font-size:14px;
}
.play_menu p{
line-height:200%;
padding-right: 2em;
clear:both;
}
.play_menu a.play_btn{
display:inline-block;
margin-bottom:20px;
width:80px;
height:28px;
line-height:28px;
text-align:center;
text-decoration:none;
color:#333;
background:#fefefe;
border:1px solid #eee;
border-radius: 2px;
box-shadow: 1px 1px 2px #eee;
border-color: #ddd #d2d2d2 #d2d2d2 #ddd;
outline:none;
-moz-outline:none;
}
.play_menu a.play_btn:hover{
background-color: #f5f5f5;
border-color: #ccc;
box-shadow: inset 0 -2px 6px #eee;
}
.play_menu a#play_btn_level{
position:relative;
}
.level_text{
margin-left:-10px;
}
.level_icon{
display:block;
position:absolute;
top:12px;
right:16px;
width:0;
height:0;
overflow:hidden;
border:5px solid #FFF;
border-color:#999 transparent transparent transparent;
}
.level_menu{
position:absolute;
margin:-8px 0 0px 104px;
display:none;
}
.level_menu ul{
list-style:none;
}
.level_menu li{
float:left;
}
.level_menu li a{
display:block;
padding:3px 10px;
border:1px solid #64c2ce;
margin-left:-1px;
color:#09c;
}
.level_menu li a:hover{
background:#09c;
color:#fefefe;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var puzzleGame = function(options){
this.img = options.img || "";
this.isSize = options.isSize || false;
this.e_playArea = $("#play_area");
this.e_startBtn = $("#play_btn_start");
this.e_playScore = $("#play_score");
this.e_playCount = $("#play_count");
this.e_levelBtn = $("#play_btn_level");
this.e_levelMenu = $("#play_menu_level");
this.areaWidth = parseInt(this.e_playArea.css("width"));
this.areaHeight = parseInt(this.e_playArea.css("height"));
this.offX = this.e_playArea.offset().left;
this.offY = this.e_playArea.offset().top;
this.grade = 4;
this.playCellWidth = this.areaWidth/this.grade;;
this.arrNum = [];
this.boxsLen = Math.pow(this.grade,2);;
this.playCell = null;
this.arrBox = [];
this.count = 0;
this.lunArr = [];
this.over = true;
this.start();
};
puzzleGame.prototype = {
start:function(){
this.init();
this.mune();
},
mune:function(){
var self = this;
this.e_levelBtn.click(function(){
self.e_levelMenu.toggle();
});
this.e_startBtn.bind("click",function(){ //开始按钮
self.e_levelBtn.unbind("click");
self.randomFun();
self.changeStyle();
self.touchFun();
})
this.e_levelMenu.find("a").click(function(){ //等级选择按钮
self.e_levelMenu.hide();
self.e_levelBtn.find(".level_text").html($(this).html())
self.grade = parseInt($(this).attr("title"));
self.playCellWidth = self.areaWidth/self.grade;
self.boxsLen = Math.pow(self.grade,2);
self.init();
});
},
init:function(){
this.e_playArea.html("");
this.arrBox = [];
for(var i=0;i<this.boxsLen;i++){
this.arrNum[i] = i; //给定数组，添加元素
this.playCell = document.createElement("div");
this.playCell.className = "play_cell";
if(this.isSize){
$(".play_cell").css({"backgroundSize":this.areaWidth+"px" + " auto"});
}
var lef = parseInt(i%this.grade);
var top = parseInt(i/this.grade);
this.e_playArea.append(this.playCell)
// $(this.playCell).attr("data",i) //data;
this.arrBox.push(this.playCell);
$(this.arrBox[i]).css({
"background":"url("+this.img+")",
"width":this.playCellWidth+"px",
"height":this.playCellWidth+"px",
"left" : (lef*this.playCellWidth)+"px",
"top" : (top*this.playCellWidth)+"px"
})
}
this.changeStyle()
},
changeStyle:function(){
this.over = false;
for(var x in this.arrBox){
var data = this.arrNum[x];
$(this.arrBox[x]).attr("idx",data); //idx
var a = parseInt(data%this.grade);
var b = parseInt(data/this.grade);
$(this.arrBox[x]).css({
"backgroundPosition":(a*-this.playCellWidth)+ "px " +( b*-this.playCellWidth) + "px"
})
if(data == 0){
$(this.arrBox[x]).css("opacity","0.1")
}
}
},
randomFun:function(){
this.arrNum = [];
this.arrNum[0] = 0;
var isHave = true;
while(true){
var num = parseInt(Math.random()*this.boxsLen);
for(var d in this.arrNum){
if(this.arrNum[d] == num){
isHave = false;
break;
}else{
isHave = true;
}
}
if(isHave){
this.arrNum.push(num)
}
if(this.arrNum.length >= this.boxsLen){
break;
}
}
return this.arrNum;
},
touchFun:function(){
var that = this;
that.e_playArea.children("div").bind("click",function(e){
if(that.over){
return;
}
var e = e || event;
e.preventDefault()
var idx = $(that.arrBox).index(this);
var oIdx = (function(){
for(var x in that.arrNum){
if(that.arrNum[x] == 0){
return x;
}
}
})()
var c = idx-oIdx;
switch(c){
case 1 :
if(that.arrNum[idx-1] != 0){return;}
$(this).css("left",(parseInt($(this).css("left"))-that.playCellWidth)<0?0:(parseInt($(this).css("left"))-that.playCellWidth)+"px");
$(that.arrBox[idx-1]).css("left",parseInt($(that.arrBox[idx-1]).css("left"))+that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[idx-1];that.arrNum[idx-1] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[idx-1];that.arrBox[idx-1] = temp_box;
break;
case -1:
if(that.arrNum[idx+1] != 0){return;}
$(this).css("left",(parseInt($(this).css("left"))+that.playCellWidth)>(that.areaWidth-that.playCellWidth)?(that.areaWidth-that.playCellWidth):(parseInt($(this).css("left"))+that.playCellWidth)+"px");
$(that.arrBox[idx+1]).css("left",parseInt($(that.arrBox[idx+1]).css("left"))-that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[idx+1];that.arrNum[idx+1] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[idx+1];that.arrBox[idx+1] = temp_box;
break;
case that.grade :
var curIdx = parseInt(idx-that.grade)
if(that.arrNum[curIdx] != 0){return;}
$(this).css("top" ,(parseInt($(this).css("top"))-that.playCellWidth)<0?0:(parseInt($(this).css("top"))-that.playCellWidth)+"px");
$(that.arrBox[curIdx]).css("top",parseInt($(that.arrBox[curIdx]).css("top"))+that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[curIdx];that.arrNum[curIdx] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[curIdx];that.arrBox[curIdx] = temp_box;
break;
case that.grade*-1 :
var curIdx_1 = parseInt(idx+that.grade)
if(that.arrNum[curIdx_1] != 0){return;}
$(this).css("top" ,(parseInt($(this).css("top"))+that.playCellWidth)>(that.areaWidth-that.playCellWidth)?(that.areaWidth-that.playCellWidth):(parseInt($(this).css("top"))+that.playCellWidth)+"px");
$(that.arrBox[curIdx_1]).css("top",parseInt($(that.arrBox[curIdx_1]).css("top"))-that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[curIdx_1];that.arrNum[curIdx_1] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[curIdx_1];that.arrBox[curIdx_1] = temp_box;
break;
}
that.count ++ ;
that.e_playCount.text(that.count);
that.e_startBtn.unbind("click");
that.gameOver();
if(that.over){
alert("恭喜过关！");
}
})
},
gameOver:function(){
var a = false;
for(var i =0 ;i<this.boxsLen;i++){
if(i != $(this.arrBox[i]).attr("idx")){
a = true;
}
}
if(a){
this.over = false;
}else{
this.over = true;
}
}
}
window.onload = function(){
var game_ = new puzzleGame({
img: "http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=77e869ddef24b899de69713e5e3631ad/50da81cb39dbb6fd0db6a6fb0f24ab18962b3779.jpg", //图片文件路径
});
$("#play_btn_local").click(function(){
location.reload();
})
}
</script> </head>
<body>
<div class="wrap">
<div class="play_wrap">
<div id="play_area"></div>
</div>
<div class="play_menu">
<a id="play_btn_start" class="play_btn" href="#" unselectable="on">开始</a>
<a id="play_btn_local" class="play_btn" href="#" unselectable="on">重置</a>
<a id="play_btn_level" class="play_btn" href="javascript:void(0);" unselectable="on">
<span class="level_text">4 x 4</span>
<span class="level_icon"></span>
</a>
<div class="level_menu" id="play_menu_level">
<ul>
<li>
<a href="javascript:void(0);" title="3" >3 x 3</a>
</li>
<li>
<a href="javascript:void(0);" title="4" >4 x 4</a>
</li>
<li>
<a href="javascript:void(0);" title="6" >6 x 6</a>
</li>
</ul>
</div>
<p>步数：<span id="play_count">0</span></p>
<p>说明：-请先选择等级，然后点击开始，小图片将随机打乱，向空白方向滑动，顺序完全正确后则成功；
</p>
</div>
</div>
</body>
</html>
原生js完成拼图小游戏的更多相关文章
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
- JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
- 原生js做h5小游戏之打砖块
前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
- 原生js完成打地鼠小游戏
:这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- 使用NGUI实现拖拽功能（拼图小游戏）
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
随机推荐
- mysql select
select 查询: 赋值:赋值不能应用在where中,因为where操作的是磁盘上的文件,可以应用在having筛选中. 例:select (market_price-shop_price) as ...
- POJ2417 Discrete Logging
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- 正则表达式 match 和 exec 比较
match 和 exec 主要有两点不同: 1.exec是正则表达式的方法,而不是字符串的方法,它的参数才是字符串,如下所示: var re=new RegExp(/\d/); re.exec( &q ...
- Alpha阶段第九次Scrum Meeting
情况简述 Alpha阶段第九次Scrum Meeting 敏捷开发起始时间 2016/11/2 00:00 敏捷开发终止时间 2016/11/3 00:00 会议基本内容摘要 汇报进度,安排工作 参与 ...
- Theano: CNMeM is disabled, CuDNN not available
Problem Theano: CNMeM is disabled, CuDNN not available Solution cnmem package: https://github.com/NV ...
- CSS-背景渐变的兼容写法
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: - ...
- BZOJ4650: [Noi2016]优秀的拆分
考场上没秒的话多拿5分并不划算的样子. 思想其实很简单嘛. 要统计答案,求以每个位置开始和结束的AA串数量就好了.那么枚举AA中A的长度L,每L个字符设一个关键点,这样AA一定经过相邻的两个关键点.计 ...
- 10月24日上午PHP面向对象
面向对象 程序分为两种,一种是面向过程的,另一种是面向对象的.之前的学的都是面向过程的,按部就班的一步一步的按照顺序往下走. 面向对象: 1.什么叫做对象 一切皆为对象(一个对象由一组属性和有权对这些 ...
- SQL SERVER批量修改表名前缀
比如前缀由mms_修改为 ets_ exec sp_msforeachtable @command1=' declare @o sysname,@n sysname ...
- C语言基础(5)-有符号数、无符号数、printf、大小端对齐
1.有符号数和无符号数 有符号数就是最高位为符号位,0代表正数,1代表负数 无符号数最高位不是符号位,而就是数的一部分而已. 1011 1111 0000 1111 1111 0000 1011 10 ...