adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Adrien MALINGREY 2019-10-23 17:49:38 +02:00
commit 30420dac28
4 changed files with 1589 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/style.css Normal file
View File

@ -0,0 +1,11 @@
* {
background: #000;
padding: 0;
margin: 0;
}
canvas {
background: #000;
display: block;
margin: 0 auto;
}

93
index.html Normal file
View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webtris</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
<script>
const MINO_SIZE = 20;
const LINES = 20;
const COLLUMNS = 10;
const KEY = {
MOVE_LEFT: 37,
MOVE_RIGHT: 39,
SOFT_DROP: 40
}
class Mino {
constructor(color) {
this.x = 4;
this.y = 0;
this.color = color;
}
draw(context) {
context.fillStyle = this.color;
context.fillRect(this.x*MINO_SIZE, this.y*MINO_SIZE, MINO_SIZE, MINO_SIZE);
}
}
class Matrix {
constructor() {
}
draw(context) {
// clear
context.clearRect(0, 0, COLLUMNS*MINO_SIZE, LINES*MINO_SIZE);
// 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();
}
}
matrixCanvas = document.getElementById("matrix");
matrixContext = matrixCanvas.getContext("2d");
mino = new Mino("orange")
matrix = new Matrix()
function keyDownHandler(e) {
switch(e.keyCode){
case KEY.MOVE_LEFT:
mino.x -= 1;
break;
case KEY.MOVE_RIGHT:
mino.x += 1;
break;
case KEY.SOFT_DROP:
mino.y += 1;
break;
}
}
function keyUpHandler(e) {
}
function draw() {
matrix.draw(matrixContext)
mino.draw(matrixContext)
}
window.onload = function() {
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
setInterval(draw, 10);
}
</script>
</body>
</html>

1414
js/excanvas.js Normal file
View File

File diff suppressed because it is too large Load Diff

71
js/webtris.js Normal file
View File

@ -0,0 +1,71 @@
const MINO_SIZE = 20;
const LINES = 20;
const COLLUMNS = 10;
class Coord {
constructor(x, y) {
this.x = x; this.y = y
}
add(other) {
return new Coord(this.x+other.y, this.y+other.y)
}
rotate(spin) {
return new Coord(spin*this.y, -spin*this.x)
}
}
class Mino {
constructor(context, color) {
this.context = context;
this.coord = new Coord(4, 0);
this.color = color;
}
draw() {
this.context.fillStyle = this.color;
this.context.fillRect(this.coord.x*MINO_SIZE, this.coord.y*MINO_SIZE, MINO_SIZE, MINO_SIZE);
}
}
class Matrix {
constructor(context) {
this.context = context;
}
draw() {
// clear
this.context.clearRect(0, 0, COLLUMNS*Mino.size, LINES*MINO_SIZE);
// grid
this.context.strokeStyle = "rgba(128, 128, 128, 128)";
this.context.beginPath();
for (var x = 0; x <= COLLUMNS*MINO_SIZE; x += MINO_SIZE) {
this.context.moveTo(x, 0); this.context.lineTo(x, matrixCanvas.height);
}
for (var y = 0; y <= LINES*MINO_SIZE; y += MINO_SIZE) {
this.context.moveTo(0, y); this.context.lineTo(matrixCanvas.width, y);
}
this.context.stroke();
}
}
function draw() {
matrix.draw()
mino.draw()
}
window.onload = function() {
matrixCanvas = document.getElementById("matrix");
matrixContext = matrixCanvas.getContext("2d");
mino = new Mino(matrixContext, "orange")
matrix = new Matrix(matrixContext)
window.requestAnimationFrame(draw)
}