|
|
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();
|
|
|
});
|
|
|
|
|
|
|
...
|
...
|
|