- 浏览: 603980 次
- 来自: ...
文章分类
最新评论
-
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 10089效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2490效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12971效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7453效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1632效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3289网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1413接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1720接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2407在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1129效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 2001效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1704先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1996看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 3000一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(二)
2014-06-12 09:57 1346接上文: javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1871用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2263欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1486点击这里可以查看动画效果: http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 621当执行冗长的for语句时,要保持语句块的尽量简洁,例如: 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2447<!DOCTYPE HTML> <html& ...
相关推荐
在本项目中,我们探讨的是一个使用JavaScript、HTML5 Canvas技术和相关图像资源创建的拼图游戏。这个小游戏展示了如何利用这些技术来实现交互式的图形界面和动态逻辑。 首先,让我们聚焦于HTML5 Canvas。Canvas是...
在这个"html5+canvas+jquery拼图游戏实例"中,我们看到的是如何利用这些技术来创建一个有趣的游戏体验。Canvas是HTML5的一个核心元素,它允许开发者在网页上进行动态图形绘制,而jQuery则是一个流行的JavaScript库,...
这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记,我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先,Canvas是HTML5的...
canvas拼图游戏,基于html + canvas画布实现
这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件,包括`addEventListener`用于绑定事件处理函数,`...
这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏,首先需要理解Canvas的基本结构和绘图API。...
在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中,我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果,这是一个增强用户体验的重要技巧,尤其在游戏加载、场景切换或过渡效果中。 首先,淡入淡出...
在“HTML5 Canvas学习笔记(3)加载游戏/动画音乐”这个主题中,我们将深入探讨如何利用Canvas API来加载和播放音频资源,这对于创建交互式游戏和动画至关重要。 1. HTML5 Audio API HTML5提供了Audio元素,它是网页...
在本文中,我们将深入探讨如何使用HTML5的Canvas API创建一个拼图小游戏。Canvas是HTML5的一个重要组成部分,它提供了一种在网页上绘制图形的方法,而无需使用Flash或其他插件。JavaScript则作为驱动这个小游戏的...
html5中canvas学习笔记.doc
这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分,即色块的绘制与移动。 首先,我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...
在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中,作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体,这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...
在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API: HTML5 Canvas是一个基于矢量图形的画布,...
这个游戏不仅展示了HTML5 Canvas的技术潜力,也为学习者提供了一个很好的实践案例,通过研究源代码,可以深入了解Canvas的绘图和游戏开发原理。同时,这个小游戏也表明,HTML5 Canvas不仅可以用于复杂的可视化应用,...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
在这个项目中,开发者利用HTML5的Canvas元素和JavaScript编程来创建一个互动的拼图游戏,玩家可以将打乱的图片碎片重新组合成完整的图像。 【描述】:“拼图将碎片拼凑成一个完整画面HTML5源码”描述的是一个基于...
这篇“HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)”主要探讨了如何利用Canvas来实现经典游戏——俄罗斯方块的方块部分。我们将深入探讨相关知识点,包括Canvas基本操作、事件处理、动画原理以及游戏逻辑。 ...
这篇名为“HTML5 Canvas学习笔记(10) - 数钱数到手抽筋”的博客文章,很可能是讲解如何使用Canvas来模拟数钱动画或游戏的教程。在Canvas中实现这样的功能,需要掌握以下几个关键知识点: 1. **Canvas基本概念**:...
标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...