社区
HTML5
帖子详情
求html5拼图小游戏
sen11028
2014-07-05 01:39:00
有没哪位大神有符合下面条件的html5拼图小游戏的源码的,能否让我借鉴下,之前写了个拼图,只实现了功能,其他为考虑,没想到老师要求还蛮高,但是本人是渣渣,能实现功能就很不错了,所以希望哪位大神帮忙下,让我借鉴学习下,谢谢!!!
(界面设计和用户体验要考虑好,另外主要思考一下如何实现增加一个“打乱”按钮,能够将图片按照某种规律打乱;一个“演示”按钮,点击后能够自动完成,自动显示整个拼图的步骤。)
...全文
532
8
打赏
收藏
求html5拼图小游戏
有没哪位大神有符合下面条件的html5拼图小游戏的源码的,能否让我借鉴下,之前写了个拼图,只实现了功能,其他为考虑,没想到老师要求还蛮高,但是本人是渣渣,能实现功能就很不错了,所以希望哪位大神帮忙下,让我借鉴学习下,谢谢!!! (界面设计和用户体验要考虑好,另外主要思考一下如何实现增加一个“打乱”按钮,能够将图片按照某种规律打乱;一个“演示”按钮,点击后能够自动完成,自动显示整个拼图的步骤。)
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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>
KK3K2005
2014-07-07
打赏
举报
回复
你贴代码还能帮你改改 另外现在老师对学生都是高要求 但是学生为什么不肯向老师请教呢 呵呵
sen11028
2014-07-07
打赏
举报
回复
第一个需要密码,第二个下不了
,能不能发下qq邮箱的,603993896
欢乐的小猪
2014-07-05
打赏
举报
回复
http://www.veryhuo.com/down/html/37136.html http://download.csdn.net/download/prettyxu_1234/3852460
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩的
小游戏
html5
拼图
小游戏
.zip 好玩
html5
实现
拼图
小游戏
利用
html5
实现的
拼图
小游戏
,源码公开无加密 。下载下来打开浏览器直接运行。
HTML5
Canvas
拼图
游戏开发
本课程基于
HTML5
的Canvas编程技术、JavaScript和CSS等前端技术,实现了
拼图
游戏的开发过程,可以借此课程初步掌握网页游戏的开发过程和思路,并加强对H5等前端技术的熟练掌握。
canvas
拼图
小游戏
canvas
拼图
小游戏
H5
拼图
游戏源码.zip
利用
html5
实现的
拼图
小游戏
,源码公开无加密,可以直接修改研究,也可以直接下载下来打开浏览器直接运行。
HTML5
39,084
社区成员
5,548
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章