求html5拼图小游戏

sen11028 2014-07-05 01:39:00

有没哪位大神有符合下面条件的html5拼图小游戏的源码的，能否让我借鉴下，之前写了个拼图，只实现了功能，其他为考虑，没想到老师要求还蛮高，但是本人是渣渣，能实现功能就很不错了，所以希望哪位大神帮忙下，让我借鉴学习下，谢谢！！！

（界面设计和用户体验要考虑好，另外主要思考一下如何实现增加一个“打乱”按钮，能够将图片按照某种规律打乱；一个“演示”按钮，点击后能够自动完成，自动显示整个拼图的步骤。）

...全文

564 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

初遇你时动了情 2014-07-22

打赏
举报

厉害开始看起来还有点麻烦

ifour 2014-07-11

打赏
举报

厉害啊！！

sen11028 2014-07-09

打赏
举报

额。。。我们老师需要把我原来的代码修改

业余草 2014-07-08

打赏
举报

网上有很多的html5小游戏，贪吃蛇了等等的

sen11028 2014-07-08

打赏
举报

感觉代码有点多，看着会烦，就没贴了。不问老师，一则问老师很麻烦，很久才能得到回复，而且现在对这门课兴致不是特别高，不在这个方向，有时是无理由的不想问

<!DOCTYPE html> <html> <head> <title>拼图游戏</title> <meta charset="utf-8" /> <style type="text/css"> * { position:absolute; margin:0; padding:0; } #main { position:fixed; width:800px; height:400px; left:50%; margin-left:-400px; top:30px; } #mycanvas { width:100%; height:100%; } </style> </head> <body> <div id="main"> <canvas id="mycanvas">您的浏览器不支持HTML5</canvas> <div id="inf">等候js加载</div> </div> <script type="text/javascript"> document.getElementById('inf').innerText = ''; var game = function(canve){ //尝试获取画笔等 try { var canvas = document.getElementById(canve); //强制宽高与css保持一致 var width = canvas.width=800; var height = canvas.height=400; var pen = canvas.getContext('2d'); } catch (e) { } //检测是否获取到画笔 if (pen) { //存在画笔，继续初始化 //设置好对象 //画布对象 var canve = { width: width, height: height, pen: pen }; //背景绘制函数 var setbg = function () { canve.pen.clearRect(0, 0, canve.width, canve.height); var color = canve.pen.createLinearGradient(0, 0, canve.width, canve.height); color.addColorStop('0', 'blue'); color.addColorStop('1', 'red'); canve.pen.fillStyle = color; canve.pen.fillRect(0, 0, canve.width, canve.height); }; //用时记录 var t = 0; //开始函数 var star = function (the) { isStar = true; for (var $i = 0; $i < 9; $i++) { block[$i]=[]; block[$i]['weizhi'] = $i; block[$i]['img'] = new Image(); block[$i]['img'].src='1_'+($i+1)+'.jpg' } block[8]['img']=null for (var $i = 0; $i < 9; $i++) { var h = Math.floor(Math.random() * (9)); var temp = block[$i]; block[$i] = block[h]; block[h] = temp; } img = new Image(); img.src = '1.jpg'; time = setInterval(run, 10); }; //要拼的图片 var img = null; var run=function(){ t++; draw(); } //计时器 var time = null; //定义一个空数组，以便到时候存放各块拼图 var block = []; //状态标记 var isStar = false; //移动方法 var move = function (h, l) { //得到当前块位置 var t = l + h * 3; //左右移动判断 switch (l) { case 0: //说明在第一列，无法左移，但是可能可以右移 if (block[t + 1]['img'] == null) { var temp = block[t + 1]; block[t + 1] = block[t]; block[t] = temp; return 1; } break; case 1: //说明在第二列，可能可以左移也可能右移 if (block[t+1]['img'] == null) { //右 var temp = block[t + 1]; block[t + 1] = block[t]; block[t] = temp; return 1; } else if (block[t-1]['img'] == null) { //左 var temp = block[t - 1]; block[t - 1] = block[t]; block[t] = temp; return 1; } break; case 2: //说明在第一列，无法右移，但是可能可以左移 if (block[t-1]['img'] == null) { var temp = block[t - 1]; block[t - 1] = block[t]; block[t] = temp; return 1; } break; } switch (h) { case 0: //第一行 if (block[t + 3]['img'] == null) { var temp = block[t + 3]; block[t + 3] = block[t]; block[t] = temp; return 1; } break; case 1: //第二行 if (block[t + 3]['img'] == null) { var temp = block[t + 3]; block[t + 3] = block[t]; block[t] = temp; return 1; } else if (block[t - 3]['img'] == null) { var temp = block[t - 3]; block[t - 3] = block[t]; block[t] = temp; return 1; } break; case 2: if (block[t - 3]['img'] == null) { var temp = block[t - 3]; block[t - 3] = block[t]; block[t] = temp; return 1; } break; } return 0; } var draw = function () { if (isStar) { setbg();//重绘背景 canve.pen.strokeStyle = '#1E90FF'; canve.pen.lineWidth = 0.8; canve.pen.strokeText('游戏用时 ' + t + ' 毫秒', canve.width * 0.5 + 150, 50); canve.pen.drawImage(img, canvas.width / 2 + 10, 80); for (var $i = 0; $i < 3; $i++) { for (var $j = 0; $j < 3; $j++) { if (block[$i * 3 + $j]['img']) { canve.pen.drawImage(block[$i * 3 + $j]['img'], $j * 100 + 10, $i * 100 + 80); } } } } else { //绘制第一屏 setbg(); canve.pen.textAlign = 'center'; canve.pen.font = '50px Arial'; canve.pen.fillStyle = '#FFF'; canve.pen.fillText('html5拼图', width * 0.5, 60); canve.pen.strokeStyle = 'orange'; canve.pen.strokeText('html5拼图', width * 0.5, 60); canve.pen.fillStyle = '#99F'; var w = 100; var h = 30; canve.pen.fillRect(width * 0.5 - w / 2, height * 0.5, w, h); canve.pen.fillStyle = '#000'; canve.pen.font = '25px Arial'; canve.pen.fillText('开始游戏', canve.width * 0.5, canve.height * 0.5 + 22); canve.pen.strokeStyle = '#1E90FF'; canve.pen.lineWidth = 0.8; canve.pen.strokeText('开始游戏', canve.width * 0.5, canve.height * 0.5 + 22); } } //是否获胜 var isWin = function () { for (var $i = 0; $i < 8; $i++) { if (block[$i]['weizhi'] != $i) { return 0; } } draw(); clearTimeout(time); time = null; alert('恭喜完成，用时' + t / 100 + '秒'); //重新初始化 t = 0; isStar = false; draw(); } //点击事件 var click = function (even) { var x = even.offsetX ; var y = even.offsetY ; if (!isStar && x <= canve.width * 0.5 + 50 && x >= canve.width * 0.5 - 50 && y >= canve.height / 2 && y <= canve.height / 2 + 30) { star(this); } else if (isStar) { if (x < 10) { } else if (x < 110) { var l=0; } else if (x < 210) { var l=1; } else if (x < 310) { var l=2; } if(!isNaN(l)){ if (y < 80) { } else if (y < 180) { var h = 0; } else if (y < 280) { var h = 1; } else if (y < 360) { var h = 2; } if (!isNaN(h)) { if (move(h, l)) { isWin(); } } } } } canvas.onclick = click;//绑定点击事件 draw(); } else { alert('此浏览器不支持html5，游戏无法运行, 去其他原因导致的程序中断'); } } game('mycanvas'); </script> </body> </html>