您的位置：首页 > 其它

寻找金馆长canvas小游戏

2017-07-26 21:53 204 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas 小游戏 canvas

相关文章推荐

新的分享

章节导航