- 浏览: 583759 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。
效果图:
点击这里试玩http://www.108js.com/article/canvas/6/play.html
欢迎访问博主的网站:http://www.108js.com
代码:
<canvas id="15-puzzle"></canvas>
<div id="msg">请您将上面数字排成<br>
1,2,3, 4<br>
5, 6, 7, 8<br>
9, 10,11,12<br>
13,14,15<br>
</div>
<script>
window.onload = function() {
var W = window.innerHeight/2, H = W;
var canvas = document.getElementById('15-puzzle');
var ctx = canvas.getContext('2d');
var frames, time;
canvas.width = W;
canvas.height = H;
var tileWidth = W/4, tileHeight = H/5;
ctx.font = tileHeight/2 + 'px Helvetica';
var I1=0;//记录鼠标点击和移动的位置
var I=0;
var J1=0;
var J=0;
var fillC=false;//用于改变文字的颜色
var tiles = {//界面对象
tiles: [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
rightTiles: [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 0]],
draw: function() {//绘制自己
var x = 0, y = 0;
ctx.strokeStyle = "#FFF";
var tile, width, height, posX, posY;
for (var i = 0; i < this.tiles.length; i++) {
for (var j = 0; j < this.tiles[0].length; j++) {
tile = this.tiles[i][j];
if(tile!= 0){
width = ctx.measureText(tile).width;
height = tileHeight/2;
posX = x * tileWidth + (tileWidth - width)/2;
posY = y * tileHeight + tileHeight - (height/2);
var fillStyle;
tile== this.rightTiles[i][j] ? fillStyle = "#0F0": fillStyle = "#FFF";
ctx.fillStyle = fillStyle;
ctx.fillText(this.tiles[i][j], posX, posY);
ctx.beginPath();
ctx.rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
ctx.stroke();
}
x++;
}
x = 0;
y++;
}
},
//打乱二维数组
randomize: function() {
var aux = [];
for (var i = 0; i < this.tiles.length; i++) {
for (var j = 0; j < this.tiles[0].length; j++) {
aux.push(this.tiles[i][j]);
}
}
aux = shuffle(aux);
for (var i = 0; i < this.tiles.length; i++) {
for (var j = 0; j < this.tiles[0].length; j++) {
this.tiles[i][j] = aux[j+i*4];
}
}
}
}
//启动游戏
function init() {
tiles.randomize();
frames = 0, time = 0;
run();
}
function run() {
frames++;
update();
draw();
if(end()) document.getElementById("msg").innerHTML="你成功了!!!!";
window.requestAnimationFrame(run, canvas);
}
//更新
function update() {
if(frames % 60 === 0) {
if(time < 999){
time++;
}
}
if(inx(I,J)&&tiles.tiles[I][J]!=0){
if(inx(I-1,J)&&tiles.tiles[I-1][J]==0) swap(I,J,I-1,J);
if(inx(I+1,J)&&tiles.tiles[I+1][J]==0) swap(I,J,I+1,J);
if(inx(I,J-1)&&tiles.tiles[I][J-1]==0) swap(I,J,I,J-1);
if(inx(I,J+1)&&tiles.tiles[I][J+1]==0) swap(I,J,I,J+1);
}
}
//绘制
function draw() {
drawBackground();
tiles.draw();
}
//画背景
function drawBackground() {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "#AAA";
ctx.fillRect(0, tileHeight * 4, tileWidth*4, tileHeight);
drawRestart();
drawTime();
}
//画重新开始按钮
function drawRestart() {
ctx.strokeStyle ="#FFF";
ctx.beginPath();
ctx.rect(0, tileHeight * 4, tileWidth * 2.5, tileHeight);
ctx.stroke();
var text = "RESTART";
var width = ctx.measureText(text).width;
var height = tileHeight/2;
var textX = (tileWidth * 2.5 - width)/2;
var textY = tileHeight * 5 - (height/2);
ctx.fillStyle =fillC? "#FF0":"#FFF";
ctx.fillText(text, textX, textY);
}
//画游戏计时
function drawTime() {
ctx.strokeStyle = "#FFF";
ctx.beginPath();
ctx.rect(tileWidth * 2.5, tileHeight * 4, tileWidth * 1.5, tileHeight);
ctx.stroke();
var width = ctx.measureText(time).width;
var height = tileHeight/2;
var textX = tileWidth * 2.5 + (tileWidth * 1.5 - width)/2;
var textY = tileHeight * 5 - (height/2);
ctx.fillStyle = "#000";
ctx.fillText(time, textX, textY);
}
init();
function shuffle(array) {//打乱一个一维数组
array.sort(function(){ return 0.5 - Math.random() })
return array;
}
//鼠标点击http://www.108js.com
canvas.onclick =function(e) {
var e = window.event || e;
var rect = this.getBoundingClientRect();
var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
var mouseY =e.clientY - rect.top;
J=Math.floor(mouseX/tileWidth);
I=Math.floor(mouseY/tileHeight);
if(I==4&J<3) init();
}
//鼠标移动
canvas.onmousemove = function(e){
var e = window.event || e;//
var rect = this.getBoundingClientRect();
var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
var mouseY =e.clientY - rect.top;
J1=Math.floor(mouseX/tileWidth);
I1=Math.floor(mouseY/tileHeight);
if(I1==4&J1<3) fillC=true;//改变重新开始按钮的颜色
else fillC=false;
}
//鼠标移动,要改变文字颜色http://www.108js.com
canvas.onmouseout = function(){
fillC=false;
}
//交换二维数组两个位置的值
function swap(a,b,x,y){
var temp=tiles.tiles[a][b];
tiles.tiles[a][b]=tiles.tiles[x][y];
tiles.tiles[x][y]=temp;
}
//是否出边界
function inx(x,y){
if(0<=x&&x<tiles.tiles.length&&0<=y&&y<tiles.tiles[0].length) return true;
return false;
}
//是否完成游戏
function end(){
for(var m=0;m<tiles.tiles.length;m++){
for(var n=0;n<tiles.tiles[0].length;n++){
if(tiles.tiles[m][n]!=tiles.rightTiles[m][n]) return false;
}
}
return true;
}
}
</script>
下载源码:
效果图:
点击这里试玩http://www.108js.com/article/canvas/6/play.html
欢迎访问博主的网站:http://www.108js.com
代码:
<canvas id="15-puzzle"></canvas>
<div id="msg">请您将上面数字排成<br>
1,2,3, 4<br>
5, 6, 7, 8<br>
9, 10,11,12<br>
13,14,15<br>
</div>
<script>
window.onload = function() {
var W = window.innerHeight/2, H = W;
var canvas = document.getElementById('15-puzzle');
var ctx = canvas.getContext('2d');
var frames, time;
canvas.width = W;
canvas.height = H;
var tileWidth = W/4, tileHeight = H/5;
ctx.font = tileHeight/2 + 'px Helvetica';
var I1=0;//记录鼠标点击和移动的位置
var I=0;
var J1=0;
var J=0;
var fillC=false;//用于改变文字的颜色
var tiles = {//界面对象
tiles: [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
rightTiles: [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 0]],
draw: function() {//绘制自己
var x = 0, y = 0;
ctx.strokeStyle = "#FFF";
var tile, width, height, posX, posY;
for (var i = 0; i < this.tiles.length; i++) {
for (var j = 0; j < this.tiles[0].length; j++) {
tile = this.tiles[i][j];
if(tile!= 0){
width = ctx.measureText(tile).width;
height = tileHeight/2;
posX = x * tileWidth + (tileWidth - width)/2;
posY = y * tileHeight + tileHeight - (height/2);
var fillStyle;
tile== this.rightTiles[i][j] ? fillStyle = "#0F0": fillStyle = "#FFF";
ctx.fillStyle = fillStyle;
ctx.fillText(this.tiles[i][j], posX, posY);
ctx.beginPath();
ctx.rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
ctx.stroke();
}
x++;
}
x = 0;
y++;
}
},
//打乱二维数组
randomize: function() {
var aux = [];
for (var i = 0; i < this.tiles.length; i++) {
for (var j = 0; j < this.tiles[0].length; j++) {
aux.push(this.tiles[i][j]);
}
}
aux = shuffle(aux);
for (var i = 0; i < this.tiles.length; i++) {
for (var j = 0; j < this.tiles[0].length; j++) {
this.tiles[i][j] = aux[j+i*4];
}
}
}
}
//启动游戏
function init() {
tiles.randomize();
frames = 0, time = 0;
run();
}
function run() {
frames++;
update();
draw();
if(end()) document.getElementById("msg").innerHTML="你成功了!!!!";
window.requestAnimationFrame(run, canvas);
}
//更新
function update() {
if(frames % 60 === 0) {
if(time < 999){
time++;
}
}
if(inx(I,J)&&tiles.tiles[I][J]!=0){
if(inx(I-1,J)&&tiles.tiles[I-1][J]==0) swap(I,J,I-1,J);
if(inx(I+1,J)&&tiles.tiles[I+1][J]==0) swap(I,J,I+1,J);
if(inx(I,J-1)&&tiles.tiles[I][J-1]==0) swap(I,J,I,J-1);
if(inx(I,J+1)&&tiles.tiles[I][J+1]==0) swap(I,J,I,J+1);
}
}
//绘制
function draw() {
drawBackground();
tiles.draw();
}
//画背景
function drawBackground() {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "#AAA";
ctx.fillRect(0, tileHeight * 4, tileWidth*4, tileHeight);
drawRestart();
drawTime();
}
//画重新开始按钮
function drawRestart() {
ctx.strokeStyle ="#FFF";
ctx.beginPath();
ctx.rect(0, tileHeight * 4, tileWidth * 2.5, tileHeight);
ctx.stroke();
var text = "RESTART";
var width = ctx.measureText(text).width;
var height = tileHeight/2;
var textX = (tileWidth * 2.5 - width)/2;
var textY = tileHeight * 5 - (height/2);
ctx.fillStyle =fillC? "#FF0":"#FFF";
ctx.fillText(text, textX, textY);
}
//画游戏计时
function drawTime() {
ctx.strokeStyle = "#FFF";
ctx.beginPath();
ctx.rect(tileWidth * 2.5, tileHeight * 4, tileWidth * 1.5, tileHeight);
ctx.stroke();
var width = ctx.measureText(time).width;
var height = tileHeight/2;
var textX = tileWidth * 2.5 + (tileWidth * 1.5 - width)/2;
var textY = tileHeight * 5 - (height/2);
ctx.fillStyle = "#000";
ctx.fillText(time, textX, textY);
}
init();
function shuffle(array) {//打乱一个一维数组
array.sort(function(){ return 0.5 - Math.random() })
return array;
}
//鼠标点击http://www.108js.com
canvas.onclick =function(e) {
var e = window.event || e;
var rect = this.getBoundingClientRect();
var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
var mouseY =e.clientY - rect.top;
J=Math.floor(mouseX/tileWidth);
I=Math.floor(mouseY/tileHeight);
if(I==4&J<3) init();
}
//鼠标移动
canvas.onmousemove = function(e){
var e = window.event || e;//
var rect = this.getBoundingClientRect();
var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
var mouseY =e.clientY - rect.top;
J1=Math.floor(mouseX/tileWidth);
I1=Math.floor(mouseY/tileHeight);
if(I1==4&J1<3) fillC=true;//改变重新开始按钮的颜色
else fillC=false;
}
//鼠标移动,要改变文字颜色http://www.108js.com
canvas.onmouseout = function(){
fillC=false;
}
//交换二维数组两个位置的值
function swap(a,b,x,y){
var temp=tiles.tiles[a][b];
tiles.tiles[a][b]=tiles.tiles[x][y];
tiles.tiles[x][y]=temp;
}
//是否出边界
function inx(x,y){
if(0<=x&&x<tiles.tiles.length&&0<=y&&y<tiles.tiles[0].length) return true;
return false;
}
//是否完成游戏
function end(){
for(var m=0;m<tiles.tiles.length;m++){
for(var n=0;n<tiles.tiles[0].length;n++){
if(tiles.tiles[m][n]!=tiles.rightTiles[m][n]) return false;
}
}
return true;
}
}
</script>
下载源码:
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10023效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2367效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12895效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7385效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1579效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3200网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1371接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1661接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2333在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1075效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1931效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1660先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1901看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2918一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(二)
2014-06-12 09:57 1292接上文: javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1780用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1398点击这里可以查看动画效果: http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 543当执行冗长的for语句时,要保持语句块的尽量简洁,例如: 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2409<!DOCTYPE HTML> <html& ...
相关推荐
javascript(html5 canvas)做的拼图游戏,简单易懂
亲测html5+canvas+jquery拼图游戏实例,供学习参考 html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏 例子只是引子,一个思路,具体可以根据自己需求扩张。
canvas拼图游戏,基于html + canvas画布实现
canvas拼图小游戏
NULL 博文链接:https://128kj.iteye.com/blog/2085698
NULL 博文链接:https://128kj.iteye.com/blog/2083289
Android—BitMap与Canvas学习笔记
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
html5 canvas拼图拖到验证码代码,仿QQ第三方登录鼠标拖动滑块图片重叠验证代码。
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
《HTML5 Canvas 开发详解》第二版pdf 版
NULL 博文链接:https://128kj.iteye.com/blog/2084722
html5 canvas简单的五子棋小游戏代码 html5 canvas简单的五子棋小游戏代码
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
NULL 博文链接:https://128kj.iteye.com/blog/2085273
html5 canvas制作15种数字时钟样式代码 html5 canvas制作15种数字时钟样式代码
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏