Skip to content

Commit d9202d1

Browse files
davidnorthdavidnorth
committed
cache bg
1 parent ef25727 commit d9202d1

8 files changed

Lines changed: 61 additions & 28 deletions

File tree

‎board.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ class Board {
213213

214214

215215

216-
if(this.stateFrame % 20 === 0) {
216+
if(this.stateFrame % 40 === 0) {
217217
this.newMino.moveDown(true)
218218
}
219219

‎carts‎

944 Bytes
Binary file not shown.

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
<link rel="stylesheet" type="text/css" href="style.css" />
55
</head>
66
<body>
7-
<canvas id="canvas" width="160" height="160"></canvas>
7+
8+
<div id="wrapper">
9+
<canvas id="canvas" width="192" height="192"></canvas>
10+
</div>
811

912
<button id="testButton1">1</button>
1013
<button id="testButton2">2</button>

‎main.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
// Render settings
3-
const CANVAS_WIDTH = 640;
4-
const CANVAS_HEIGHT = 480;
3+
const CANVAS_WIDTH = 192
4+
const CANVAS_HEIGHT = 192
55
const BUFFER_WIDTH = 160;
66
const BUFFER_HEIGHT = 120;
77
const SPRITE_SIZE = 8;
@@ -46,13 +46,13 @@ const sprites = new SpriteSheet('sprites.png', SPRITE_SIZE, () => {
4646
const renderer = new Renderer({
4747
canvasId: 'canvas',
4848
sprites,
49-
state
49+
state,
50+
onReady: (renderer) => {
51+
const game = new Game(state, update, renderer.render.bind(renderer));
52+
game.start();
53+
}
5054
});
5155

52-
const game = new Game(state, update, renderer.render.bind(renderer));
53-
54-
game.start();
55-
5656
})
5757

5858

‎mino.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ class Mino {
4545
}
4646

4747
rotateCW () {
48-
console.log(this.y);
49-
5048
this.rotation = this.rotation + 1 === SHAPE_TABLE[this.shape].length ? 0 : this.rotation + 1;
5149
this.rebuildBlocks()
5250
}
@@ -64,7 +62,6 @@ class Mino {
6462
moveDown (instant) {
6563
if(this.y !== undefined) {
6664
this.y ++;
67-
console.log(this.y);
6865
}
6966
this.blocks.forEach((block) => {
7067
block.moveDown();

‎renderer.js‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,65 @@
1+
const BOARD_OFFSET_X = 16
2+
const BOARD_OFFSET_Y = 16
3+
14
class Renderer {
25

36
constructor (options) {
47
const canvas = document.getElementById(options.canvasId);
58
this.ctx = canvas.getContext('2d');
69
this.sprites = options.sprites;
710
this.state = options.state;
8-
}
9-
10-
spr (spriteX, spriteY, x, y) {
11-
const spriteImage = this.sprites.getSpriteImageData(spriteX, spriteY);
12-
this.ctx.putImageData(spriteImage, x, y);
11+
this.onReady = options.onReady;
12+
this.prepare();
1313
}
1414

1515

16+
prepare () {
1617

18+
this.bgCanvas = document.createElement('canvas')
19+
this.bgCanvas.width = 192
20+
this.bgCanvas.height = 192
21+
this.bgCtx = this.bgCanvas.getContext('2d');
22+
this.drawBg();
1723

24+
this.bgImage = this.bgCtx.getImageData(0, 0, 192, 192)
1825

19-
render () {
20-
this.drawBg();
21-
this.drawMinos();
26+
this.onReady(this)
2227
}
2328

2429
drawBg () {
25-
this.ctx.fillStyle = '#eee';
26-
this.ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
30+
this.bgCtx.fillStyle = '#eee';
31+
this.bgCtx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
32+
33+
34+
for(let y = 0; y < CANVAS_HEIGHT / SPRITE_SIZE; y++) {
35+
for(let x = 0; x < CANVAS_WIDTH / SPRITE_SIZE; x++) {
36+
this.spr(this.bgCtx, 10, 0, x * SPRITE_SIZE, y * SPRITE_SIZE)
37+
}
38+
}
2739

2840
for(let y = 0; y < BOARD_HEIGHT; y++) {
2941
for(let x = 0; x < BOARD_WIDTH; x++) {
30-
this.spr(4, 0, x * SPRITE_SIZE, y * SPRITE_SIZE)
42+
this.spr(this.bgCtx, 4, 0, x * SPRITE_SIZE + BOARD_OFFSET_X, y * SPRITE_SIZE + BOARD_OFFSET_Y)
3143
}
3244
}
3345
}
3446

47+
48+
49+
spr (ctx, spriteX, spriteY, x, y) {
50+
const spriteImage = this.sprites.getSpriteImageData(spriteX, spriteY);
51+
ctx.putImageData(spriteImage, x, y);
52+
}
53+
54+
55+
56+
57+
58+
render () {
59+
this.ctx.putImageData(this.bgImage, 0, 0);
60+
this.drawMinos();
61+
}
62+
3563
drawMino (mino) {
3664
mino.blocks.forEach((block) => {
3765
let sX, sY
@@ -43,9 +71,9 @@ class Renderer {
4371
sX = spriteMap[block.col][0]
4472
sY = spriteMap[block.col][1]
4573
}
46-
this.spr(
74+
this.spr(this.ctx,
4775
sX ,sY,
48-
block.entity.x * SPRITE_SIZE, block.entity.y * SPRITE_SIZE);
76+
block.entity.x * SPRITE_SIZE + BOARD_OFFSET_X, block.entity.y * SPRITE_SIZE + BOARD_OFFSET_Y);
4977
});
5078
}
5179

‎sprites.png‎

827 Bytes
Loading

‎style.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
body {
22
font-family: Helvetica;
3+
background: #444;
34
}
45

56

@@ -10,16 +11,20 @@ canvas, img {
1011
image-rendering: optimize-contrast;
1112
image-rendering: pixelated;
1213
-ms-interpolation-mode: nearest-neighbor;
13-
border: 5px solid #f00;
1414
}
1515

1616
#canvas {
1717

18-
width: 640px;
19-
height: 640px;
18+
width: 576px;
19+
height: 576px;
20+
2021

2122
/* width: 320px; */
2223
/* height: 320px; */
2324

2425
}
2526

27+
#wrapper {
28+
width: 576px;
29+
margin: 10px auto;
30+
}

0 commit comments

Comments
 (0)