HTML5 Canvas学习笔记(6)拼图游戏(数字版)ITeye - AG环亚娱乐集团

HTML5 Canvas学习笔记(6)拼图游戏(数字版)ITeye

2019-01-13 23:05:01 | 作者: 涵蕾 | 标签: 游戏,鼠标,点击 | 浏览: 637

今日网上发现了一段代码,只要界面,很不错,学习了并完结了逻辑。
效果图:


点击这儿试玩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
下载源码:
版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表AG环亚娱乐集团立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章