<!DOCTYPE html>
<html>
<head>
<title>Jigsaw</title>
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
<style>
img {position:absolute; border:none;
}
form {position: absolute; z-index: 10;}
body
{
height:100%;
margin: 30px;
}
video {display:none; position:absolute; z-index: 100;
}
#fullpage
{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:90%;
overflow: hidden;
z-index: 1;
}
</style>
<script type="text/javascript">
var pieces = [
"dan1.jpg","dan2.jpg","dan3.jpg","dan4.jpg","dan5.jpg","dan6.jpg"
];
var piecesx = [
0,71, 124,0,77,123 ];
var piecesy = [
0,0,0,72,72,72
];
var v;
var doingjigsaw = false;
var firstpkel; //assumption that first piece in array is upper left corner.
function init(){
bodyelement = document.getElementById("body");
v = document.getElementById("dance");
setupgame();
// msg = document.getElementById("msg");
bodyel = document.getElementById("body");
formel = document.getElementById("questionform");
setupjigsaw();
}
var bodyel;
var formel;
var nums = pieces.length;
var pieceelements = [];
var questionfel;
function setupgame() {
var i;
var x;
var y;
var uniqueid;
var s;
for(i=0;i<nums;i++) {
uniqueid = "a"+String(i);
s = document.createElement('piece');
s.innerHTML = (
"<img src='"+pieces[i]+"' id='"+uniqueid+"'/>");
document.body.appendChild(s);
thingelem = document.getElementById(uniqueid);
x = piecesx[i] +100;
y = piecesy[i] + 100;
thingelem.style.top = String(y)+"px";
thingelem.style.left = String(x)+"px";
pieceelements.push(thingelem);
}
firstpkel = document.getElementById("a0");
questionfel = document.getElementById("questionform");
questionfel.style.left = "20px";
questionfel.style.top = "400px";
questionfel.feedback.value = " ";
}
function endjigsaw() {
var df;
if (doingjigsaw) {
doingjigsaw = false;
d.onmousedown = "";
d.onmousemove = "";
d.onmouseup = "";
df = document.getElementById("fullpage");
bodyel.removeChild(df);
v.pause();
v.style.display = "none";
}
setupjigsaw();
return false;
}
function checkpositions() {
var i;
var x;
var y;
var tolerance = 10;
var deltax = [];
var deltay = [];
var delx;
var dely;
for (i=0;i<nums;i++) {
x = pieceelements[i].style.left;
y = pieceelements[i].style.top;
x = x.substr(0,x.length-2); // remove px
y = y.substr(0,y.length-2);
x = Number(x);
y = Number(y);
delx = x - piecesx[i];
dely = y - piecesy[i];
deltax.push(delx);
deltay.push(dely);
}
var averagex = doaverage(deltax);
var averagey = doaverage(deltay);
//check if any delta (x or y) is more than tolerance from average
for (i=0;i<nums;i++) {
if ((Math.abs(averagex - deltax[i])>tolerance) || (Math.abs(averagey-deltay[i])>tolerance)) {
break;
}
}
if (i<nums) {
questionfel.feedback.value = "Keep working.";
}
else {
questionfel.feedback.value = "GOOD!";
for (i=0;i<nums;i++) {
pieceelements[i].style.display = "none";
}
v.style.left = firstpkel.style.left;
v.style.top = firstpkel.style.top;
v.style.display="block";
v.currentTime = 0;
v.play();
}
}
function doaverage(arr) {
var sum;
var i;
var n = arr.length;
sum = 0;
for(i=0;i<n;i++) {
sum += arr[i];
}
return (sum/n);
}
function setupjigsaw() {
v.pause();
v.style.display = "none";
doingjigsaw = true;
var i;
var x;
var y;
var thingelem;
for (i=0;i<nums;i++) {
x = 10+Math.floor(Math.random()*210);
y = 50+Math.floor(Math.random()*240);
thingelem = pieceelements[i];
thingelem.style.top = String(y)+"px";
thingelem.style.left = String(x)+"px";
thingelem.style.display = "inline";
}
d.onmousedown = startdragging;
d.onmousemove = moving;
d.onmouseup = release;
d.addEventListener("touchstart", touchHandler, true);
d.addEventListener("touchmove", touchHandler, true);
d.addEventListener("touchend", touchHandler, true);
d.addEventListener("touchcancel", touchHandler, true);
var df = document.createElement('div');
df.id = "fullpage";
bodyel.appendChild(df);
questionfel.submitbut.value = "Do jigsaw again.";
questionfel.feedback.value = " ";
formel.style.zIndex = 100;
}
function touchHandler(event)
{
var touches = event.changedTouches;
if (touches.length>1) {
return false;
}
var first = touches[0];
var type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
var d = document;
var ie= d.all;
var mouseDown = false;
var adjustX;
var adjustY;
var movingobj;
// we let go
function release(e){
mouseDown = false;
checkpositions();
};
// only move image (set mouseDown = true) when inside image
function startdragging(e)
{
var o;
var j;
var i;
var curX = ie ? e.clientX+d.body.scrollLeft : e.pageX;
var curY = ie ? e.clientY+d.body.scrollTop : e.pageY;
//determine what obj, if any, is under mouse
for (i=0; i<nums;i++) {
j = pieceelements[i];
o = offset(j);
if (curX >= o.x && curX <= o.x + j.width &&
curY >= o.y && curY <= o.y + j.height)
{
break;
}
}
if (i<nums) {
movingobj = pieceelements[i];
adjustX = curX - o.x;
adjustY = curY - o.y;
mouseDown = true;
}
//msg.innerHTML="down on "+i;
};
function moving(e)
{
if (!mouseDown) return;
if (ie)
draw(e.clientX+d.body.scrollLeft, e.clientY+d.body.scrollTop);
else
draw(e.pageX, e.pageY);
//msg.innerHTML="moving";
};
function draw(x, y)
{
var js = movingobj.style;
js.left = (x - adjustX) + "px";
js.top = (y - adjustY) + "px";
}
function offset(obj)
{
var left = 0;
var top = 0;
if (obj.offsetParent)
do
{
left += obj.offsetLeft;
top += obj.offsetTop;
} while (obj = obj.offsetParent);
return {x: left, y: top};
}
</script>
</head>
<body id="body" onLoad="init();">
<h2> In the tent</h2>
<form id="questionform" name="questionform" onSubmit="return endjigsaw();" >
<input name="submitbut" type="submit" value=" " size="30"/>
Feedback: <input name="feedback" value=" " size="11" />
</form>
<video id="dance" loop="loop" preload="auto" controls="controls" autoplay>
<source src="dance.webm" type='video/webm; codec="vp8, vorbis"'>
<source src="dance.mp4">
<source src="dance.ogg" type='video/ogg; codecs="theora, vorbis"'>
Your browser does not accept the video tag.
</video>
</p>
</body>
</html>
html5拼图视屏游戏代码
4星 · 超过85%的资源 需积分: 50 86 浏览量
2011-11-28
15:09:58
上传
评论
收藏 5.29MB ZIP 举报 
Meyer-08-code.zip （13个子文件） 
dan6.jpg 8KB
jigsawdance.html 7KB dan1.jpg 9KB
dance.3g2 352KB dan4.jpg 9KB dance.m4v 1.19MB
dance.mp4 1.17MB dan3.jpg 9KB dance.webm 2.24MB dance.3gp 352KB dan5.jpg 8KB dance.jpg 6KB dan2.jpg 9KB
prettyxu_1234
- 粉丝: 0
- 资源: 2
最新资源
- 基于MIC+NE555光敏电阻的声光控电路Multisim仿真原理图
- python tkinter-08-盒子模型.ev4.rar
- Doozy UI Manager 2023
- 基于matlab实现夜间车牌识别程序(1).rar
- 基于matlab实现无线传感器网络无需测距定位算法matlab源代码 包括apit，dv-hop，amorphous在内的共7个
- 基于python的yolov5实现的旋转目标检测
- 基于matlab实现无线传感器网络 CAB定位仿真程序 这是无线传感器节点定位CAB算法的仿真程序，由matlab完成.rar
- 基于matlab实现图像处理，本程序使用背景差分法对来往车辆进行检测和跟踪.rar
- 基于matlab实现视频监控中车型识别代码，自己写的，希望和大家多多交流.rar
- springcodespringcodespringcodespringcode
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页