JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var game = {

canvas: document.getElementById("canvas"),

ctx: document.getElementById("canvas").getContext("2d"),

cellCount: 9,

cellWidth: 30,

lineCount: 5,

mode: 7,

actions: {},

play: function (name, action, interval) {

var me = this;

this.actions[name] = setInterval(function () {

action();

me.draw();

}, interval || 50);

},

stop: function (name) {

clearInterval(this.actions[name]);

this.draw();

},

colors: ["red", "#039518", "#ff00dc", "#ff6a00", "gray", "#0094ff", "#d2ce00"],

start: function () {

this.map.init();

this.ready.init();

this.draw();

this.canvas.onclick = this.onclick;

},

over: function () {

alert("GAME OVER");

this.onclick = function () {

return false;

};

},

draw: function () {

this.ctx.clearRect(0, 0, 400, 600);

this.ctx.save();

this.map.draw();

this.ready.draw();

this.score.draw();

this.ctx.restore();

},

clicked: null,

isMoving: function () {

return this.ready.isMoving || this.map.isMoving;

},

onclick: function (e) {

if (game.isMoving()) {

return;

}

var px = (e.offsetX || (e.clientX - game.canvas.offsetLeft)) - game.map.startX;

var py = (e.offsetY || (e.clientY - game.canvas.offsetTop)) - game.map.startY;

if (px < 0 || py < 0 || px > game.map.width || py > game.map.height) {

return;

}

var x = parseInt(px / game.cellWidth);

var y = parseInt(py / game.cellWidth);

var clicked = game.clicked;

var bubble = game.map.getBubble(x, y);

if (bubble.color) {

if (clicked) {

if (clicked.x == x && clicked.y == y) {

return;

}

clicked.stop();

}

clicked = game.clicked = bubble;

bubble.play();

}

else {

if (clicked) {

clicked.stop();

game.map.move(clicked, bubble);

}

}

//console.log("x:" + x + " y:" + y);

},

getRandom: function (max) {

return parseInt(Math.random() * 1000000 % (max));

},

};

game.score = {

basic: 0,

operate: 0,

star1: 0,

star2: 0,

boom: 0,

draw: function () {

var startX = game.cellWidth * 10 + game.map.startX;

var startY = game.map.startY;

var ctx = game.ctx;

ctx.save();

ctx.translate(startX, startY);

ctx.clearRect(0, 0, 150, 400);

ctx.strokeStyle = "#456";

//ctx.strokeRect(0, 0, 150, 200);

ctx.font = "24px San";

ctx.fillStyle = "#fefefe";

ctx.fillText("Score:" + (this.basic * 5 + this.star1 * 8 + this.star2 * 10 + this.boom * 20), 0, 30);

ctx.stroke();

ctx.restore();

},

addScore: function (length) {

switch (length) {

case 5:

this.basic++;

break;

case 6:

this.star1++;

break;

case 7:

this.star2++;

break;

default:

this.boom++;

break;

}

this.draw();

},

};

game.ready = {

startX: 41.5,

startY: 21.5,

width: game.cellWidth * 3,

height: game.cellWidth,

bubbles: [],

init: function () {

this.genrate();

var me = this;

me.flyin();

},

genrate: function () {

for (var i = 0; i < 3; i++) {

var color = game.colors[game.getRandom(game.mode)];

this.bubbles.push(new Bubble(i, 0, color));

}

//console.log(this.bubbles);

},

draw: function () {

var ctx = game.ctx;

ctx.save();

ctx.translate(this.startX, this.startY);

ctx.beginPath();

ctx.strokeStyle = "#555";

ctx.strokeRect(0, 0, this.width, this.height);

ctx.stroke();

this.bubbles.forEach(function (bubble) {

bubble.draw();

});

ctx.restore();

},

isMoving: false,

flyin: function () {

var emptys = game.map.getEmptyBubbles();

if (emptys.length < 3) {

//GAME OVER

game.over();

return;

}

var me = this;

var status = [0, 0, 0];

var times = 1;

game.play("flyin", function () {

if (status[0] && status[1] && status[2]) {

game.stop("flyin");

me.isMoving = false;

status = [0, 0, 0];

me.bubbles = [];

me.genrate();

return;

}

me.isMoving = true;

for (var i = 0; i < me.bubbles.length; i++) {

if (status[i]) {

continue;

}

var target = emptys[i];

var x2 = target.px + game.map.startX - me.startX;

var y2 = target.py + game.map.startY - me.startY;

var current = me.bubbles[i];

var step = Math.abs(x2 - current.px)/10 || Math.abs(y2 - current.y)/10;

if (current.px < x2) {

current.py = ((y2 - current.py) / (x2 - current.px)) * step + current.py;

current.px += step;

if (current.px > x2) {

current.px = x2;

}

}

else if (current.px > x2) {

current.py = ((y2 - current.py) / (current.px - x2)) * step + current.py;

current.px -= step;

if (current.px < x2) {

current.px = x2;

}

}

else {

current.py += step;

}

if (current.py > y2) {

current.py = y2;

}

if (parseInt(current.px+0.1) == x2 && parseInt(current.py+0.1) == y2) {

status[i] = 1;

current.x = target.x;

current.y = target.y;

game.map.addBubble(current);

game.map.clearLine(current.x, current.y, current.color, false);

}

}

}, 10);

}

};

game.map = {

startX: 40.5,

startY: 60.5,

width: game.cellCount * game.cellWidth,

height: game.cellCount * game.cellWidth,

bubbles: [],

init: function () {

for (var i = 0; i < game.cellCount; i++) {

var row = [];

for (var j = 0; j < game.cellCount; j++) {

row.push(new Bubble(j, i, null));

}

this.bubbles.push(row);

}

},

clearLine: function (x1, y1, color, isClick) {

if (this.isEmpty(x1, y1)) {

if (isClick) game.ready.flyin();

return;

};

//Given a coordinate, to see whether there is a satisfying line can be eliminated

//4 lines direction 一 | / \

var current = this.getBubble(x1, y1);

if (!current.color) {

console.log(current);

}

var arr1, arr2, arr3, arr4;

arr1 = this.bubbles[y1];

arr2 = [];

for (var y = 0; y < game.cellCount; y++)

arr2.push(this.getBubble(x1, y));

arr3 = [current];

arr4 = [current];

for (var i = 1; i < game.cellCount ; i++) {

if (x1 - i >= 0 && y1 - i >= 0)

arr3.unshift(this.getBubble(x1 - i, y1 - i));

if (x1 + i < game.cellCount && y1 + i < game.cellCount)

arr3.push(this.getBubble(x1 + i, y1 + i));

if (x1 - i >= 0 && y1 + i < game.cellCount)

arr4.push(this.getBubble(x1 - i, y1 + i));

if (x1 + i < game.cellCount && y1 - i >= 0)

arr4.unshift(this.getBubble(x1 + i, y1 - i));

}

var line1 = getLine(arr1);

var line2 = getLine(arr2);

var line3 = getLine(arr3);

var line4 = getLine(arr4);

var line = line1.concat(line2).concat(line3).concat(line4);

if (line.length < 5) {

if (isClick) game.ready.flyin();

return;

}

else {

var me = this;

var i = 0;

game.play("clearline", function () {

if (i == line.length) {

game.score.addScore(line.length);

game.stop("clearline");

me.isMoving = false;

//game.ready.flyin();

return;

}

me.isMoving = true;

var p = line[i];

me.setBubble(p.x, p.y, null);

i++;

}, 100);

}

function getLine(bubbles) {

var line = [];

for (var i = 0; i < bubbles.length; i++) {

var b = bubbles[i];

if (b.color == color) {

line.push({ "x": b.x, "y": b.y });

}

else {

if (line.length < 5)

line = [];

else

return line;

}

}

if (line.length < 5)

return [];

return line;

}

},

draw: function () {

var ctx = game.ctx;

ctx.save();

ctx.translate(this.startX, this.startY);

ctx.beginPath();

for (var i = 0; i <= game.cellCount; i++) {

var p1 = i * game.cellWidth;;

ctx.moveTo(p1, 0);

ctx.lineTo(p1, this.height);

var p2 = i * game.cellWidth;

ctx.moveTo(0, p2);

ctx.lineTo(this.width, p2);

}

ctx.strokeStyle = "#555";

ctx.stroke();

//draw the chess pieces

this.bubbles.forEach(function (row) {

row.forEach(function (bubble) {

bubble.draw();

});

});

ctx.restore();

},

isMoving: false,

move: function (bubble, target) {

var path = this.search(bubble.x, bubble.y, target.x, target.y);

if (!path) {

return;

}

//console.log(path);

var me = this;

var name = "move_" + bubble.x + "_" + bubble.y;

var i = path.length - 1;

var color = bubble.color;

game.play(name, function () {

if (i < 0) {

game.stop(name);

game.clicked = null;

me.isMoving = false;

me.clearLine(target.x, target.y, color, true);

return;

}

me.isMoving = true;

path.forEach(function (cell) {

me.setBubble(cell.x, cell.y, null);

});

var currentCell = path[i];

me.setBubble(currentCell.x, currentCell.y, color);

i--;

}, 50);

},

search: function (x1, y1, x2, y2) {

var history = [];

var goalCell = null;

var me = this;

getCell(x1, y1, null);

if (goalCell) {

var path = [];

var cell = goalCell;

while (cell) {

path.push({ "x": cell.x, "y": cell.y });

cell = cell.parent;

}

return path;

}

return null;

function getCell(x, y, parent) {

if (x >= me.bubbles.length || y >= me.bubbles.length)

return;

if (x != x1 && y != y2 && !me.isEmpty(x, y))

return;

for (var i = 0; i < history.length; i++) {

if (history[i].x == x && history[i].y == y)

return;

}

var cell = { "x": x, "y": y, child: [], "parent": parent };

history.push(cell);

if (cell.x == x2 && cell.y == y2) {

goalCell = cell;

return cell;

}

var child = [];

var left, top, right, buttom;

//shortest path

if (x - 1 >= 0 && me.isEmpty(x - 1, y))

child.push({ "x": x - 1, "y": y });

if (x + 1 < me.bubbles.length && me.isEmpty(x + 1, y))

child.push({ "x": x + 1, "y": y });

if (y + 1 < me.bubbles.length && me.isEmpty(x, y + 1))

child.push({ "x": x, "y": y + 1 });

if (y - 1 >= 0 && me.isEmpty(x, y - 1))

child.push({ "x": x, "y": y - 1 });

var distance = [];

for(var i=0;i

var c = child[i];

if(c){

distance.push({"i":i,"d":Math.abs(x2 - c.x) + Math.abs(y2 - c.y)});

}else{

distance.push({"i":i,"d":-1});

}

};

distance.sort(function (a, b) { return a.d - b.d });

for (var i = 0; i < child.length; i++) {

var d = distance[i];

var c = child[d.i];

if (c) cell.child.push(getCell(c.x, c.y, cell));

}

return cell;

}

},

getEmptyBubbles: function () {

var empties = [];

this.bubbles.forEach(function (row) {

row.forEach(function (bubble) {

if (!bubble.color) {

empties.push(new Bubble(bubble.x, bubble.y));

}

});

});

if (empties.length <= 3) {

return [];

}

var result = [];

var useds = [];

for (var i = 0; i < empties.length; i++) {

if (result.length == 3) {

break;

}

var isUsed = false;

var ra = game.getRandom(empties.length);

for (var m = 0; m < useds.length; m++) {

isUsed = ra === useds[m];

if (isUsed) break;

}

if (!isUsed) {

result.push(empties[ra]);

useds.push(ra);

}

}

//console.log(useds);

return result;

},

addBubble: function (bubble) {

var thisBubble = this.getBubble(bubble.x, bubble.y);

thisBubble.color = bubble.color;

},

setBubble: function (x, y, color) {

this.getBubble(x, y).color = color;

},

getBubble: function (x, y) {

if (x < 0 || y < 0 || x > game.cellCount || y > game.cellCount) return null;

return this.bubbles[y][x];

},

isEmpty: function (x, y) {

var bubble = this.getBubble(x, y);

return !bubble.color;

},

};

var Cell = function (x, y) {

this.x = x;

this.y = y;

}

var Bubble = function (x, y, color) {

this.x = x;

this.y = y;

this.px = game.cellWidth * (this.x + 1) - game.cellWidth / 2;

this.py = game.cellWidth * (this.y + 1) - game.cellWidth / 2;

this.color = color;

this.light = 10;

};

Bubble.prototype.draw = function () {

if (!this.color) {

return;

}

var ctx = game.ctx;

ctx.beginPath();

//console.log("x:" + px + "y:" + py);

var gradient = ctx.createRadialGradient(this.px - 5, this.py - 5, 0, this.px, this.py, this.light);

gradient.addColorStop(0, "white");

gradient.addColorStop(1, this.color);

ctx.arc(this.px, this.py, 11, 0, Math.PI * 2);

ctx.strokeStyle = this.color;

ctx.fillStyle = gradient;

ctx.fill();

ctx.stroke();

};

Bubble.prototype.play = function () {

var me = this;

var isUp = true;

game.play("light_" + this.x + "_" + this.y, function () {

if (isUp) {

me.light += 3;

}

if (!isUp) {

me.light -= 3;

}

if (me.light >= 30) {

isUp = false;

}

if (me.light <= 10) {

isUp = true;

}

}, 50);

};

Bubble.prototype.stop = function () {

//this.light = 10;

var me = this;

game.stop("light_" + this.x + "_" + this.y);

game.play("restore_" + this.x + "_" + this.y, function () {

if (me.light > 10) {

me.light--;

}

else {

me.light = 10;

game.stop("restore_" + me.x + "_" + me.y);

}

}, 50);

};

game.start();

新五子连珠浏览器html兼容模式,HTML5 五子连珠消除小游戏相关推荐

  1. 强制浏览器使用兼容模式，Web.config，httpProtocol

    对于一些政府类的网站,很多支持IE6~8,而不支持使用更高版本浏览器浏览.虽然有些浏览器会自动使用兼容模式,或有些人会手动调整浏览器的兼容模式,但不是每一个人.每一款浏览器都可以做到用兼容模式.所以, ...

  2. Win7系统浏览器的兼容模式如何设置

    核心提示:Win7系统浏览器的兼容模式如何设置?一起看看吧! Win7系统浏览器的兼容模式怎么设置?下面2345软件大全小编给大家介绍. 一.兼容性视图设置. 1.打开IE 浏览器. 2.选择&quo ...

  3. 360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来，但是极速模式可以显示？

    问题 最近遇到一个验证码出不来的问题,在360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,效果如下: 这个验证码的代码元素如下,是一张图片,由接口提供的一个图片链接,返回的是文件流. ...

  4. 本地ie打开html布局乱,网页设计：浏览器在兼容模式下布局全乱了 – 解决办法...

    在chrome.ie浏览器中显示均正常,为何用360或搜狗等浏览器的兼容模式查看网页布局会全乱了呢? 解决办法:在head中添加一个meta标签,指定兼容模式.因为旧的ie浏览器与chrome等浏览器 ...

  5. 计算机开机引导兼容模式,win10电脑Edge浏览器的兼容模式如何开启

    win10电脑Edge浏览器的兼容模式如何开启 腾讯视频/爱奇艺/优酷/外卖 充值4折起 今天给大家介绍一下win10电脑Edge浏览器的兼容模式如何开启的具体操作步骤. 1. 打开电脑之后,双击Ed ...

  6. 关于搜狗浏览器和360安全浏览器的兼容模式

    在处理浏览器兼容问题时,最让我头疼的是搜狗浏览器和360安全浏览器的兼容模式.有时表现为IE7内核,有时又表现为系统IE内核.上网搜了一下资料研究了一番.只是个人的小小研究,如有错误欢迎各路大神指教. ...

  7. 双核浏览器设置兼容模式

    由于报名系统兼容性不足,所以不支持手机.ipad浏览器报名,只能用电脑报名,所以报考教师资格证只能够使用基于IE浏览器内核的浏览器,但是感觉IE浏览器的用户体验感有点差,有什么办法可以使用其他的浏览器 ...

  8. 去掉浏览器的兼容模式

    <head id="Head1"><meta http-equiv="Imagetoolbar" content="no" ...

  9. edge浏览器设置兼容模式怎么设置

    edge浏览器在win10系统中默认使用,整体来说还算是个不错的浏览器,跟微软账户关联,所以使用的人还挺多.但是对于edge浏览器来说,很多网页都需要使用兼容模式进行打开,这里小编就给大家分享下edg ...

最新文章

  1. poj 1284 Primitive Roots（原根+欧拉函数）
  2. js模板引擎_VueSSRNuxt.js
  3. kindle刷多看系统_疑问解答 | kindle真的能护眼吗？
  4. php答题评分,Thinkphp 答题 评语
  5. 数据聚合Spring Data MongoDB：嵌套结果
  6. 单一索引和复合索引区别及联系
  7. 489 - Hangman Judge
  8. 让普通用户可以kill自己用户下的session（转）
  9. gvim设置字体和隐藏菜单栏工具栏
  10. 【CF1244C】The Football Season(思维枚举/扩展欧几里德)
  11. 【Thinking In Java】笔记之一 一切都是对象
  12. win10下安装SQLServer2005
  13. 【个人积累】轨道根数六要素中第4、5项的理解与STK仿真演示
  14. python爬取app中的音频_Python爬取喜马拉雅音频数据详解
  15. 显示性能指标的计算机术语是,下列计算机术语中，属于显示器性能指标的是（）...
  16. C++笔记 文件处理笔记
  17. linux服务器视频转换,linux下视频格式转换工具
  18. 自然语言处理NLP星空智能对话机器人系列：深入理解Transformer自然语言处理 Noisy relationships
  19. 马云的经典语录(转)
  20. 关键词生成的相关资源

热门文章

  1. mac连接有线宽带的心路历程
  2. 中国这家企业实力太强，新能源汽车巨头特斯拉都必须选择它
  3. 华裔科学家Ashe教授对涉嫌造假的Nature论文的正面回应
  4. 程立谈架构、敏捷和SOA实践
  5. pdf.js实现旋转放大缩小
  6. TL2837x-EasyEVM开发板 JTAG仿真器接口/ ADC接口
  7. SpringCloud系列知识快速复习 -- part 1（SpringCloud基础知识，Docker，RabbitMQ）
  8. 动物之美计算机教案,岭南版美术四年级下册《14. 成群的动物》教学设计1.doc
  9. HTML5 从零基础到实战（一）HTML基本介绍
  10. PCB封装添加3D模型AltiumDesigner09/18