javascript;拼图游戏(可自选图片和设置行列数)
思路:浏览图片,读取其宽度ImageW,高度值ImageH。读取用户输入的分成几行Row几列Col。
每个方块:boxW=ImageW/Col;boxH=ImageH/Row;
在1到Row*Col中随机,第i个图片的位置设为pos【i】。然后动态创建div生成Row*Col个,其位置根据pos【i】算,其背景图片根据i算,这中间每个div是显示部分图片,所以用到backgroundPosition,其值也的根据i算。
div生成好后,就是根据键盘上下键移动方块啦。
主要依据空格方块的位置,在根据event.keyCode的值,判断是上下左右中哪一个。判断完后,再判断在当前方向键下,空格能否移动,不行,则啥都不做。若能移动,则根据div.style的top和left属性,移动空格块以及它要移动到的那个方块。并保存空格块的属性和位置,以及那个方块的属性和位置。
当i=pos【i】时,即每个方块都放在对应位置上,提示信息-----congratulations!
下面贴上部分代码:
<input type="file" id="file" style="display:none" \>
<input type="button" value="选择图片" onclick="ok()" \><br />
你想把图片分成几行及列呢:<br />行数:<input type="text" id="row" \ /><br />
列数:<input type="text" id="col" \ /><br />
<input type="button" value="Go" onclick="Run()" \><br />
其中,Run实现入口开始放置div,OK()实现读取图片,存取相关属性。当然还有验证等。
/获取设置的行数和列数,并开始游戏
function Run() {
Row = parseInt(row.value.toString());
Col = parseInt(col.value.toString());
boxH = ImgHeight / Row;
boxW = ImgWidth / Col;
blank_pos = Row * Col;
//generateL(Col * Row);
start();
}
function start() {
initPic();//alert(nam.length);
document.onkeydown = keyDown;//鼠标上下左右玩游戏的控制
}
//产生Row*Col-1个图片的随机位置
function initPic() {
&n
相关文档:
1. CSS
<style>
.dstyle1 {
font-size:13px;
font-weight: bold;
color: #ff6600;
}
.dstyle2 {
font-size:13px;
font-weight: bold;
color: #ffffff;
}
</style>
2. JavaScript
<script type="text/javascript">
m();
function m()
{
document.getElementById("span_new").classNa ......
JS自带函数
concat
将两个或多个字符的文本组合起来,返回一个新的字符串。
var a = "hello";
var b = ",world";
var c = a.concat(b);
alert(c);
//c = "hello,world"
indexOf
返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
var index1 = a.indexOf("l");
//index1 = 2 ......
源代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>验证邮箱地址合法性</title>
<sc ......
文件内容如下:(两个文件glossy.js和glossy.html)
/********************************** glossy.js ***********************************/
/**
* glossy.js 1.31 (19-Jul-2007)
* (c) by Christian Effenberger
* All Rights Reserved
* Source: glossy.netzgesta.de
* Distrib ......
今天看jQuery的时候发现的书写形式原来没有见过 如下:
(function(){
statement
...
})();
不理解,后来上网查了一下,原来是javascript匿名函数的调用方式
http://zhidao.baidu.com/question/95789340.html
javascript 可以以下方式调用函数
声明
a = function(){};
调用
a();
可以理解为
(function(){ ......