|
|
|
var Game = function(canvas, option) {
|
|
|
|
canvas.style.backgroundColor = option.background;
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.context = canvas.getContext('2d');
|
|
|
|
|
|
|
|
this.w = canvas.width = option.width;
|
|
|
|
this.h = canvas.height = option.height;
|
|
|
|
|
|
|
|
|
|
|
|
this.itemW = option.width / 3;
|
|
|
|
this.itemH = option.height / 3;
|
|
|
|
};
|
|
|
|
|
|
|
|
Game.prototype = {
|
|
|
|
_supportTouch: function() { },
|
|
|
|
start: function() { },
|
|
|
|
pause: function() { },
|
|
|
|
addItem: function() {},
|
|
|
|
addEvent: function() { }
|
|
|
|
};
|
|
|
|
|
|
|
|
Game.Button = function() {
|
|
|
|
};
|
|
|
|
|
|
|
|
Game.Button.prototype = {
|
|
|
|
addEventListener: function(type, handle) {
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Game.Cursor = function() {
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var canvas = document.querySelector('#stage');
|
|
|
|
var width = 500;
|
|
|
|
var height = 400;
|
|
|
|
var itemW = width / 3;
|
|
|
|
var itemH = height / 3;
|
|
|
|
|
|
|
|
var game = new Game(canvas, {
|
|
|
|
width: width,
|
|
|
|
height: height,
|
|
|
|
background: '#32212c'
|
|
|
|
});
|
|
|
|
var button = new Game.Button();
|
|
|
|
var cursor = new Game.Cursor();
|
|
|
|
var context = game.context;
|
|
|
|
|
|
|
|
button.addEventListener('click', function() {
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function drawLine(c) {
|
|
|
|
var i, j;
|
|
|
|
var action = function(begin, end) {
|
|
|
|
c.lineWidth = 1;
|
|
|
|
c.strokeStyle = 'black';
|
|
|
|
c.beginPath();
|
|
|
|
c.moveTo(begin.x, begin.y);
|
|
|
|
c.lineTo(end.x, end.y);
|
|
|
|
c.stroke();
|
|
|
|
};
|
|
|
|
|
|
|
|
for (i = itemH; i < height; i = i + itemH) {
|
|
|
|
action({ x: 0, y: i }, { x: width, y: i });
|
|
|
|
}
|
|
|
|
|
|
|
|
for (j = itemW; j < width; j = j + itemW) {
|
|
|
|
action({ x: j, y: 0 }, { x: j, y: height });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function drawStage(c) {
|
|
|
|
drawLine(c);
|
|
|
|
}
|
|
|
|
|
|
|
|
drawStage(context);
|
|
|
|
game.addItem(button);
|
|
|
|
game.addItem(cursor);
|
|
|
|
game.start();
|
|
|
|
});
|
|
|
|
// var Game = function(canvas, option) {
|
|
|
|
// canvas.style.backgroundColor = option.background;
|
|
|
|
// this.canvas = canvas;
|
|
|
|
// this.context = canvas.getContext('2d');
|
|
|
|
|
|
|
|
// this.w = canvas.width = option.width;
|
|
|
|
// this.h = canvas.height = option.height;
|
|
|
|
|
|
|
|
|
|
|
|
// this.itemW = option.width / 3;
|
|
|
|
// this.itemH = option.height / 3;
|
|
|
|
// };
|
|
|
|
|
|
|
|
// Game.prototype = {
|
|
|
|
// _supportTouch: function() { },
|
|
|
|
// start: function() { },
|
|
|
|
// pause: function() { },
|
|
|
|
// addItem: function() {},
|
|
|
|
// addEvent: function() { }
|
|
|
|
// };
|
|
|
|
|
|
|
|
// Game.Button = function() {
|
|
|
|
// };
|
|
|
|
|
|
|
|
// Game.Button.prototype = {
|
|
|
|
// addEventListener: function(type, handle) {
|
|
|
|
|
|
|
|
// }
|
|
|
|
// };
|
|
|
|
|
|
|
|
// Game.Cursor = function() {
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
// document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// var canvas = document.querySelector('#stage');
|
|
|
|
// var width = 500;
|
|
|
|
// var height = 400;
|
|
|
|
// var itemW = width / 3;
|
|
|
|
// var itemH = height / 3;
|
|
|
|
|
|
|
|
// var game = new Game(canvas, {
|
|
|
|
// width: width,
|
|
|
|
// height: height,
|
|
|
|
// background: '#32212c'
|
|
|
|
// });
|
|
|
|
// var button = new Game.Button();
|
|
|
|
// var cursor = new Game.Cursor();
|
|
|
|
// var context = game.context;
|
|
|
|
|
|
|
|
// button.addEventListener('click', function() {
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// function drawLine(c) {
|
|
|
|
// var i, j;
|
|
|
|
// var action = function(begin, end) {
|
|
|
|
// c.lineWidth = 1;
|
|
|
|
// c.strokeStyle = 'black';
|
|
|
|
// c.beginPath();
|
|
|
|
// c.moveTo(begin.x, begin.y);
|
|
|
|
// c.lineTo(end.x, end.y);
|
|
|
|
// c.stroke();
|
|
|
|
// };
|
|
|
|
|
|
|
|
// for (i = itemH; i < height; i = i + itemH) {
|
|
|
|
// action({ x: 0, y: i }, { x: width, y: i });
|
|
|
|
// }
|
|
|
|
|
|
|
|
// for (j = itemW; j < width; j = j + itemW) {
|
|
|
|
// action({ x: j, y: 0 }, { x: j, y: height });
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
// function drawStage(c) {
|
|
|
|
// drawLine(c);
|
|
|
|
// }
|
|
|
|
|
|
|
|
// drawStage(context);
|
|
|
|
// game.addItem(button);
|
|
|
|
// game.addItem(cursor);
|
|
|
|
// game.start();
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
...
|
...
|
|
