说明：最近对游戏比较感兴趣，就想着能不能自己做一款游戏，于是就想了个简单易实现的小游戏来练练手，利用Web前端技术Javascript+Css+Html就可以实现的小游戏
实现效果图：
打开webstorm新建一个项目
项目目录：
接下来就直接贴源码吧
创建一个game.html
|
创建game.js
用于绘画颜色块(function() {
var dyl = {cache: {}};
dyl.setContext = function(context) {
dyl.cache._context = context;
return context;
};
dyl.getDom = function(id) {
return document.getElementById(id);
};
dyl._getContext = function() {
return dyl.cache._context;
};
dyl.save = function() {
var context = dyl._getContext();
context ? context.save() : void(0);
};
dyl.restore = function() {
var context = dyl._getContext();
context ? context.restore() : void(0);
};
dyl.createContext = function(canvasID) {
var canvas = this.getDom(canvasID);
if(!canvas) {
return null;
}
return dyl.setContext(canvas.getContext("2d"));
};
dyl.createColor = function() {
var color = "rgb(";
color += Math.round(Math.random()*255);
color += ",";
color += Math.round(Math.random()*255);
color += ",";
color += Math.round(Math.random()*255);
color += ")";
return color;
};
dyl.addImg = function(img, x, y) {
var context = dyl._getContext();
if(!img || !context) {
return;
}
if(typeof img === "string") {
var oImg = new Image();
oImg.src = img;
oImg.onload = function() {
context.drawImage(oImg, x, y);
}
return;
}
context.drawImage(img, x, y);
};
dyl.rect = function(color, x, y, width, height, alpha) {
var context = dyl._getContext();
if(!context) {
return;
}
context.save();
context.fillStyle = color;
context.globalAlpha = alpha ? alpha : 1;
context.fillRect(x, y, width, height);
context.restore();
};
dyl.circle = function(color, x, y, r, alpha) {
var context = dyl._getContext();
context.save();
context.fillStyle = color;
context.beginPath();
context.globalAlpha = alpha ? alpha : 1;
context.arc(x, y, r, 0, 2*Math.PI);
context.fill();
context.stroke();
};
dyl.clearRect = function(x, y, width, height) {
var context = dyl._getContext();
if(!context) {
return;
}
context.clearRect(x, y, width, height);
};
dyl.scale = function(x, y) {
var context = dyl._getContext();
if(!context) {
return;
}
x = x ? x : 1;
y = y ? y : 1;
context.scale(x, y);
};
if(!window.dyl) {
window.dyl = dyl;
}
})();
创建algorithm.js
用于计算游戏中的逻辑var num=30;// 可用的总步数
var newColor; //点击的颜色
/**
* 点击按钮时计算颜色变化
* */
function change(color){
if(num<=0){ //可用步数不足时不给执行
return;
}
num--; //步数减1
newColor=color;
add(findPane(newColor));
redraw();
if(num>5){// 低于5步时红色预警
$("#num").html(num);
}else if(num<=5&&num>=0){
$("#num")[0].style.color="red"
$("#num").html(num);
}
if(success()){
$("#success").show()
}
if(num==0){
$("#fail").show()
}
}
function success() {
for(var i=0; i<offsetX; i++) {
for(var j=0; j<offsetY; j++) {
if(matrix[0][0]!=matrix[i][j]){
return false;
}
}
}
return true;
}
/**
* 将新的方框加入到初始块，并替换初始块颜色为新的色
* */
function add(newColors){
for(var i=0; i<initial.length; i++){
matrix[initial[i].x][initial[i].y]=newColor;
for(var j=0; j<newColors.length;j++){
if((newColors[j].x+1==initial[i].x&&newColors[j].y==initial[i].y)||
(newColors[j].x-1==initial[i].x&&newColors[j].y==initial[i].y)||
(newColors[j].y+1==initial[i].y&&newColors[j].x==initial[i].x)||
(newColors[j].y-1==initial[i].y&&newColors[j].x==initial[i].x)){
initial.push(newColors[j])
newColors.splice(j,1)
}
}
}
}
/**
* 查找出颜色为oldColor的方块集合
* */
function findPane(oldColor) {
var elements=[];// 可能替换的元素集合
for(var i=0; i<offsetX; i++) {
for(var j=0; j<offsetY; j++) {
if(oldColor==matrix[i][j]){
var a={
x:i,
y:j
}
elements.push(a);
}
}
}
return elements;
}
/**
* 符合逻辑位置处的方框颜色替换
* */
function replaceColor(x,y,abc,index,initial){
var a={
x:x,
y:y
}
initial.push(a);
for(var j=index;j<abc.length; j++) {
if((x+1==abc[j].x&&y==abc[j].y)||
(y+1==abc[j].y&&x==abc[j].x)||
(x-1==abc[j].x&&y==abc[j].y)||
(y-1==abc[j].y&&x==abc[j].x)){
replaceColor(abc[j].x,abc[j].y,abc,j+1,initial);
}
}
return initial;
}
/**
* 计算结果后重绘
* */
function redraw(){
for(var i=0; i<offsetX; i++) {
for(var j=0; j<offsetY; j++) {
var alpha = 1;//透明度
(function(i,j ,alpha) {
dyl.rect(matrix[i][j], i*30, j*30, 60, 60, alpha);
})(i,j,alpha);
}
}
}
function res() {
location.reload();
}
引入jquery-3.1.1.min.js
你可以从别的地方引入这个，也可以自己新建这个
/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */ |
有兴趣的你可以试试哦，或者您还可以优化下一开始随机生成的时候避免多个相同色块相连的问题
欢迎留言给出您的建议