Be more flexible about the chargen bitmap.
catseye
12 years ago
40 | 40 | var intervalId; |
41 | 41 | var scaleX = 2; |
42 | 42 | var scaleY = 2; |
43 | ||
43 | var charWidth = 8; | |
44 | var charHeight = 8; | |
45 | var srcCharsPerRow = 8; | |
46 | ||
44 | 47 | var img = new Image(); |
45 | 48 | |
46 | 49 | var colors = [ |
95 | 98 | for (var x = 0; x < width; x++) { |
96 | 99 | for (var y = 0; y < height; y++) { |
97 | 100 | ctx.fillStyle = colors[bgColorMemory[x + y * width] || 0]; |
98 | ctx.fillRect(x * 16, y * 16, 16, 16); | |
101 | ctx.fillRect(x * charWidth * scaleX, y * charHeight * scaleY, | |
102 | charWidth * scaleX, charHeight * scaleY); | |
99 | 103 | /* blit character image */ |
100 | 104 | var charNum = characterMemory[x + y * width] || 0; |
101 | /* if img is charset8, use 8's in the source, but not the dest */ | |
105 | var srcCharX = (charNum % srcCharsPerRow) * charWidth; | |
106 | var srcCharY = Math.floor(charNum / srcCharsPerRow) * charHeight; | |
102 | 107 | ctx.drawImage(chargen[fgColorMemory[x + y * width] || 0], |
103 | /* source */ charNum * 16, 0, 16, 16, | |
104 | /* dest */ x * 16, y * 16, 16, 16); | |
108 | /* source */ srcCharX, srcCharY, charWidth, charHeight, | |
109 | /* dest */ x * charWidth * scaleX, y * charHeight * scaleY, | |
110 | charWidth * scaleX, charHeight * scaleY); | |
105 | 111 | } |
106 | 112 | } |
107 | 113 | var middle = new Date().getTime(); |
109 | 115 | for (var y = 0; y < height; y++) { |
110 | 116 | var bgColorNum = Math.floor(Math.random() * colors.length); |
111 | 117 | var fgColorNum = Math.floor(Math.random() * colors.length); |
112 | var charNum = Math.floor(Math.random() * 8); | |
118 | var charNum = Math.floor(Math.random() * srcCharsPerRow); | |
113 | 119 | this.setBgColor(bgColorNum); |
114 | 120 | this.setFgColor(fgColorNum); |
115 | 121 | this.plot(x, y, charNum); |
131 | 137 | self.createColoredCharsets(); |
132 | 138 | intervalId = setInterval(function() { self.drawFrame(); }, 1000/fps); |
133 | 139 | } |
134 | img.src = 'charset16.png'; | |
140 | img.src = 'charset8.png'; | |
135 | 141 | }; |
136 | 142 | |
137 | 143 | this.createColoredCharsets = function() { |
138 | 144 | var charset_0 = document.getElementById('charset_0'); |
139 | 145 | var charset_0_ctx = charset_0.getContext('2d'); |
140 | 146 | chargen[0] = charset_0; |
141 | charset_0_ctx.drawImage(img, 0, 0, 128, 16); | |
142 | var imageData = charset_0_ctx.getImageData(0, 0, 128, 16); | |
147 | charset_0_ctx.drawImage(img, 0, 0, img.width, img.height); | |
148 | var imageData = charset_0_ctx.getImageData(0, 0, img.width, img.height); | |
143 | 149 | var w = imageData.width; |
144 | 150 | var h = imageData.height; |
145 | 151 | for (var color = 1; color < 8; color++) { |
146 | 152 | var charset = document.getElementById('charset_' + color); |
147 | 153 | chargen[color] = charset; |
148 | 154 | var charset_ctx = charset.getContext('2d'); |
149 | var newData = charset_0_ctx.getImageData(0, 0, 128, 16); | |
155 | var newData = charset_0_ctx.getImageData(0, 0, img.width, img.height); | |
150 | 156 | for (var y = 0; y < h; y++) { |
151 | 157 | for (var x = 0; x < w; x++) { |
152 | 158 | var index = (y * w + x) * 4; |