寻找金馆长canvas小游戏_金馆长2d游戏-CSDN博客

本文链接：https://blog.csdn.net/qq_39548647/article/details/76166090

<!DOCTYPE html>


<html>


<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

canvas {
display: block;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>


<body>
<canvas id="canvas" width="640"></canvas>
</body>


<script type="text/javascript">
//制图环境
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');


var flag = 0;
var All = null;


All = new AllCanvas(0, 0, 4, 1, 1);


function AllCanvas(x, y, padding, lineX, listY) {
this.x = x;
this.y = y;
this.padding = padding;
this.lineX = lineX;
this.listY = listY;
}


function CreateObj(flag) {
// debugger;
this.img = oldImg;
this.x = 0;
this.y = 0;
this.flag = flag ? flag : this.__proto__.flag;
this.width = canvas.width / All.lineX;
this.height = canvas.height / All.listY;
this.draw = function() {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}


CreateObj.prototype = {
flag: false
}


var oldImg = new Image();
oldImg.src = 'img/20171228122922059-6208.png';


var newImg = new Image();
newImg.src = 'img/532202764966532363.jpg';
var newImgX = 0,
newImgY = 0;
window.onload = function() {


for(var i = 0; i < All.lineX; i++) {
for(var j = 0; j < All.listY; j++) {
var obj = new CreateObj();
obj.img = newImg;
obj.x = All.x + obj.width * j;
obj.y = All.y + obj.height * i;
obj.draw();
}
}


function judeg() {
if(flag != 0) {
var random = parseInt(Math.random() * (All.lineX * All.listY));
var m = 0;
All = new AllCanvas(0, 0, 4, 1 + flag, 1 + flag);
var x1 = (random) % All.lineX;
var y1 = parseInt(random / All.listY);


for(var i = 0; i < All.lineX; i++) {
for(var j = 0; j < All.listY; j++) {
// debugger;
m++;
var obj = new CreateObj();
if(m == random + 1) {
obj.img = newImg;
obj.newImgx = x1 * obj.width;
obj.newImgy = y1 * obj.height;
newImgX = obj.newImgx;
newImgY = obj.newImgy;
} else {
obj.img = oldImg;
}
obj.x = All.x + obj.width * j;
obj.y = All.y + obj.height * i;
obj.draw();
}
}
}
}


canvas.onclick = function(ev) {
var evt = ev || window.event;


var relativeCanvasX = evt.clientX - canvas.offsetLeft;
var relativeCanvasY = evt.clientY - canvas.offsetTop;
console.log(relativeCanvasX);
console.log(relativeCanvasY);


if(newImgX < relativeCanvasX && relativeCanvasX < newImgX + obj.width / All.lineX && newImgY < relativeCanvasY && relativeCanvasY < newImgY + obj.height / All.lineX) {
ctx.clearRect(0, 0, 640, canvas.height)
flag += 1;
judeg();
console.log(flag);
if(flag >= 20) {
flag = 20;
}
} else {
judeg();
}
}
}


initCanvasHeight();


window.onresize = function() {
initCanvasHeight();
}


function initCanvasHeight() {
//获取可视窗口的高
var bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
//设置canvas的宽、高
if(bodyHeight <= 722) {
bodyHeight = 722;
}
canvas.height = bodyHeight - 2;
}
</script>


</html>