externalize script
This commit is contained in:
parent
498002ac68
commit
268f0fc8fa
186
index.html
186
index.html
@ -5,193 +5,9 @@
|
|||||||
<title>Webtris</title>
|
<title>Webtris</title>
|
||||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||||
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
|
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
|
||||||
|
<script type="text/javascript" src="js/webtris.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
|
<canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
|
||||||
<scipt type="text/javascript" src="js/webtris.js" />
|
|
||||||
<script>
|
|
||||||
const MINO_SIZE = 20
|
|
||||||
const LINES = 20
|
|
||||||
const COLLUMNS = 10
|
|
||||||
const INIT_POSITION = [4, -1]
|
|
||||||
const ACTION_KEY = {
|
|
||||||
MOVE_LEFT: "ArrowLeft",
|
|
||||||
MOVE_RIGHT: "ArrowRight",
|
|
||||||
SOFT_DROP: "ArrowDown",
|
|
||||||
ROTATE_CW: "ArrowUp",
|
|
||||||
ROTATE_CCW: "z"
|
|
||||||
}
|
|
||||||
const MOVEMENT = {
|
|
||||||
LEFT: [-1, 0],
|
|
||||||
RIGHT: [1, 0],
|
|
||||||
DOWN: [0, 1]
|
|
||||||
}
|
|
||||||
const SPIN = {
|
|
||||||
CW: -1,
|
|
||||||
CCW: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class Tetromino {
|
|
||||||
constructor() {
|
|
||||||
this.pos = INIT_POSITION
|
|
||||||
this.orientation = 0
|
|
||||||
this.rotated_last = false
|
|
||||||
this.rotation_point_5_used = false
|
|
||||||
this.hold_enabled = true
|
|
||||||
this.SRS = new Map([
|
|
||||||
[
|
|
||||||
SPIN.CW,
|
|
||||||
[
|
|
||||||
[[0, 0], [-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
|
||||||
[[0, 0], [1, 0], [1, 1], [0, -2], [1, -2]],
|
|
||||||
[[0, 0], [1, 0], [1, -1], [0, 2], [1, 2]],
|
|
||||||
[[0, 0], [-1, 0], [-1, 1], [0, 2], [-1, -2]],
|
|
||||||
]
|
|
||||||
],
|
|
||||||
[
|
|
||||||
SPIN.CCW,
|
|
||||||
[
|
|
||||||
[[0, 0], [1, 0], [1, -1], [0, 2], [1, 2]],
|
|
||||||
[[0, 0], [1, 0], [1, 1], [0, -2], [1, -2]],
|
|
||||||
[[0, 0], [-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
|
||||||
[[0, 0], [-1, 0], [-1, 1], [0, -2], [-1, -2]],
|
|
||||||
]
|
|
||||||
],
|
|
||||||
])
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
draw(context) {
|
|
||||||
for(const pos of this.minoes_pos) {
|
|
||||||
draw_mino(context, this.pos[0]+pos[0], this.pos[1]+pos[1], this.color)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class T_Tetrimino extends Tetromino {
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.color = "magenta"
|
|
||||||
this.minoes_pos = [[-1, 0], [0, 0], [1, 0], [0, 1]]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function draw_mino(context, x, y, color) {
|
|
||||||
context.fillStyle = color
|
|
||||||
context.fillRect(x*MINO_SIZE, y*MINO_SIZE, MINO_SIZE, MINO_SIZE);
|
|
||||||
context.strokeStyle = "rgba(255, 255, 255, 128)";
|
|
||||||
context.strokeRect(x*MINO_SIZE, y*MINO_SIZE, MINO_SIZE, MINO_SIZE);
|
|
||||||
}
|
|
||||||
|
|
||||||
class Matrix {
|
|
||||||
constructor() {
|
|
||||||
this.cells = Array.from(Array(COLLUMNS), y => Array(LINES))
|
|
||||||
}
|
|
||||||
|
|
||||||
occupied_cell(x, y) {
|
|
||||||
if (0 <= x && x < COLLUMNS && y < LINES)
|
|
||||||
return this.cells[x][y]
|
|
||||||
else
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
space_to_move(piece_pos, minoes_pos) {
|
|
||||||
for (const mino_pos of minoes_pos) {
|
|
||||||
if (this.occupied_cell(piece_pos[0]+mino_pos[0], piece_pos[1]+mino_pos[1]))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
draw(context) {
|
|
||||||
// grid
|
|
||||||
context.strokeStyle = "rgba(128, 128, 128, 128)";
|
|
||||||
context.beginPath();
|
|
||||||
for (var x = 0; x <= COLLUMNS*MINO_SIZE; x += MINO_SIZE) {
|
|
||||||
context.moveTo(x, 0);
|
|
||||||
context.lineTo(x, matrixCanvas.height);
|
|
||||||
}
|
|
||||||
for (var y = 0; y <= LINES*MINO_SIZE; y += MINO_SIZE) {
|
|
||||||
context.moveTo(0, y);
|
|
||||||
context.lineTo(matrixCanvas.width, y);
|
|
||||||
}
|
|
||||||
context.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function move(movement) {
|
|
||||||
const test_pos = [tetro.pos[0]+movement[0], tetro.pos[1]+movement[1]]
|
|
||||||
if (matrix.space_to_move(test_pos, tetro.minoes_pos)) {
|
|
||||||
tetro.pos = test_pos
|
|
||||||
draw()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function rotate(spin) {
|
|
||||||
const text_minoes_pos = tetro.minoes_pos.map(pos => [spin*pos[1], pos[0]])
|
|
||||||
rotation_point = 0
|
|
||||||
for (const movement of tetro.SRS.get(spin)[tetro.orientation]) {
|
|
||||||
const test_pos = [tetro.pos[0]+movement[0], tetro.pos[1]+movement[1]]
|
|
||||||
if (matrix.space_to_move(test_pos, text_minoes_pos)) {
|
|
||||||
tetro.pos = test_pos
|
|
||||||
tetro.minoes_pos = text_minoes_pos
|
|
||||||
tetro.orientation = (tetro.orientation + spin + 4) % 4
|
|
||||||
draw()
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
rotation_point++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fall() {
|
|
||||||
move(MOVEMENT.DOWN);
|
|
||||||
}
|
|
||||||
|
|
||||||
function keyDownHandler(e) {
|
|
||||||
switch(e.key){
|
|
||||||
case ACTION_KEY.MOVE_LEFT:
|
|
||||||
move(MOVEMENT.LEFT);
|
|
||||||
break
|
|
||||||
case ACTION_KEY.MOVE_RIGHT:
|
|
||||||
move(MOVEMENT.RIGHT);
|
|
||||||
break
|
|
||||||
case ACTION_KEY.SOFT_DROP:
|
|
||||||
move(MOVEMENT.DOWN);
|
|
||||||
break
|
|
||||||
case ACTION_KEY.ROTATE_CW:
|
|
||||||
rotate(SPIN.CW);
|
|
||||||
break
|
|
||||||
case ACTION_KEY.ROTATE_CCW:
|
|
||||||
rotate(SPIN.CCW);
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function keyUpHandler(e) {
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
matrixContext.clearRect(0, 0, COLLUMNS*MINO_SIZE, LINES*MINO_SIZE);
|
|
||||||
matrix.draw(matrixContext)
|
|
||||||
tetro.draw(matrixContext)
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = function() {
|
|
||||||
document.addEventListener("keydown", keyDownHandler, false);
|
|
||||||
document.addEventListener("keyup", keyUpHandler, false);
|
|
||||||
setInterval(fall, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
matrixCanvas = document.getElementById("matrix");
|
|
||||||
matrixContext = matrixCanvas.getContext("2d");
|
|
||||||
|
|
||||||
tetro = new T_Tetrimino()
|
|
||||||
matrix = new Matrix()
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
182
js/webtris.js
182
js/webtris.js
@ -1 +1,181 @@
|
|||||||
console.log("OK")
|
const MINO_SIZE = 20
|
||||||
|
const LINES = 20
|
||||||
|
const COLLUMNS = 10
|
||||||
|
const INIT_POSITION = [4, -1]
|
||||||
|
const ACTION_KEY = {
|
||||||
|
MOVE_LEFT: "ArrowLeft",
|
||||||
|
MOVE_RIGHT: "ArrowRight",
|
||||||
|
SOFT_DROP: "ArrowDown",
|
||||||
|
ROTATE_CW: "ArrowUp",
|
||||||
|
ROTATE_CCW: "z"
|
||||||
|
}
|
||||||
|
const MOVEMENT = {
|
||||||
|
LEFT: [-1, 0],
|
||||||
|
RIGHT: [1, 0],
|
||||||
|
DOWN: [0, 1]
|
||||||
|
}
|
||||||
|
const SPIN = {
|
||||||
|
CW: -1,
|
||||||
|
CCW: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
class Tetromino {
|
||||||
|
constructor() {
|
||||||
|
this.pos = INIT_POSITION
|
||||||
|
this.orientation = 0
|
||||||
|
this.rotated_last = false
|
||||||
|
this.rotation_point_5_used = false
|
||||||
|
this.hold_enabled = true
|
||||||
|
this.SRS = new Map([
|
||||||
|
[
|
||||||
|
SPIN.CW,
|
||||||
|
[
|
||||||
|
[[0, 0], [-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
||||||
|
[[0, 0], [1, 0], [1, 1], [0, -2], [1, -2]],
|
||||||
|
[[0, 0], [1, 0], [1, -1], [0, 2], [1, 2]],
|
||||||
|
[[0, 0], [-1, 0], [-1, 1], [0, 2], [-1, -2]],
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
SPIN.CCW,
|
||||||
|
[
|
||||||
|
[[0, 0], [1, 0], [1, -1], [0, 2], [1, 2]],
|
||||||
|
[[0, 0], [1, 0], [1, 1], [0, -2], [1, -2]],
|
||||||
|
[[0, 0], [-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
||||||
|
[[0, 0], [-1, 0], [-1, 1], [0, -2], [-1, -2]],
|
||||||
|
]
|
||||||
|
],
|
||||||
|
])
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
draw(context) {
|
||||||
|
for(const pos of this.minoes_pos) {
|
||||||
|
draw_mino(context, this.pos[0]+pos[0], this.pos[1]+pos[1], this.color)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
class T_Tetrimino extends Tetromino {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.color = "magenta"
|
||||||
|
this.minoes_pos = [[-1, 0], [0, 0], [1, 0], [0, 1]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function draw_mino(context, x, y, color) {
|
||||||
|
context.fillStyle = color
|
||||||
|
context.fillRect(x*MINO_SIZE, y*MINO_SIZE, MINO_SIZE, MINO_SIZE);
|
||||||
|
context.strokeStyle = "rgba(255, 255, 255, 128)";
|
||||||
|
context.strokeRect(x*MINO_SIZE, y*MINO_SIZE, MINO_SIZE, MINO_SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
|
class Matrix {
|
||||||
|
constructor() {
|
||||||
|
this.cells = Array.from(Array(COLLUMNS), y => Array(LINES))
|
||||||
|
}
|
||||||
|
|
||||||
|
occupied_cell(x, y) {
|
||||||
|
if (0 <= x && x < COLLUMNS && y < LINES)
|
||||||
|
return this.cells[x][y]
|
||||||
|
else
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
space_to_move(piece_pos, minoes_pos) {
|
||||||
|
for (const mino_pos of minoes_pos) {
|
||||||
|
if (this.occupied_cell(piece_pos[0]+mino_pos[0], piece_pos[1]+mino_pos[1]))
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
draw(context) {
|
||||||
|
// grid
|
||||||
|
context.strokeStyle = "rgba(128, 128, 128, 128)";
|
||||||
|
context.beginPath();
|
||||||
|
for (var x = 0; x <= COLLUMNS*MINO_SIZE; x += MINO_SIZE) {
|
||||||
|
context.moveTo(x, 0);
|
||||||
|
context.lineTo(x, matrixCanvas.height);
|
||||||
|
}
|
||||||
|
for (var y = 0; y <= LINES*MINO_SIZE; y += MINO_SIZE) {
|
||||||
|
context.moveTo(0, y);
|
||||||
|
context.lineTo(matrixCanvas.width, y);
|
||||||
|
}
|
||||||
|
context.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function move(movement) {
|
||||||
|
const test_pos = [tetro.pos[0]+movement[0], tetro.pos[1]+movement[1]]
|
||||||
|
if (matrix.space_to_move(test_pos, tetro.minoes_pos)) {
|
||||||
|
tetro.pos = test_pos
|
||||||
|
draw()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotate(spin) {
|
||||||
|
const text_minoes_pos = tetro.minoes_pos.map(pos => [spin*pos[1], pos[0]])
|
||||||
|
rotation_point = 0
|
||||||
|
for (const movement of tetro.SRS.get(spin)[tetro.orientation]) {
|
||||||
|
const test_pos = [tetro.pos[0]+movement[0], tetro.pos[1]+movement[1]]
|
||||||
|
if (matrix.space_to_move(test_pos, text_minoes_pos)) {
|
||||||
|
tetro.pos = test_pos
|
||||||
|
tetro.minoes_pos = text_minoes_pos
|
||||||
|
tetro.orientation = (tetro.orientation + spin + 4) % 4
|
||||||
|
draw()
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
rotation_point++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fall() {
|
||||||
|
move(MOVEMENT.DOWN);
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyDownHandler(e) {
|
||||||
|
switch(e.key){
|
||||||
|
case ACTION_KEY.MOVE_LEFT:
|
||||||
|
move(MOVEMENT.LEFT);
|
||||||
|
break
|
||||||
|
case ACTION_KEY.MOVE_RIGHT:
|
||||||
|
move(MOVEMENT.RIGHT);
|
||||||
|
break
|
||||||
|
case ACTION_KEY.SOFT_DROP:
|
||||||
|
move(MOVEMENT.DOWN);
|
||||||
|
break
|
||||||
|
case ACTION_KEY.ROTATE_CW:
|
||||||
|
rotate(SPIN.CW);
|
||||||
|
break
|
||||||
|
case ACTION_KEY.ROTATE_CCW:
|
||||||
|
rotate(SPIN.CCW);
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyUpHandler(e) {
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
matrixContext.clearRect(0, 0, COLLUMNS*MINO_SIZE, LINES*MINO_SIZE);
|
||||||
|
matrix.draw(matrixContext)
|
||||||
|
tetro.draw(matrixContext)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
document.addEventListener("keydown", keyDownHandler, false);
|
||||||
|
document.addEventListener("keyup", keyUpHandler, false);
|
||||||
|
setInterval(fall, 1000);
|
||||||
|
|
||||||
|
matrixCanvas = document.getElementById("matrix");
|
||||||
|
matrixContext = matrixCanvas.getContext("2d");
|
||||||
|
|
||||||
|
tetro = new T_Tetrimino()
|
||||||
|
matrix = new Matrix()
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user