§ Минимальный шаблон index.html
<!DOCTYPE html> <html> <head> <title>Минимальный шаблон</title> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="app.js"></script> </head> <body onload="new app()"> <canvas id="viewport" width="640" height="400" style="width: 1280px; height: 800px; image-rendering: pixelated;"></canvas> </body> </html>
§ Код класса app.js
class app { constructor() { this.el = document.getElementById('viewport'); this.ctx = this.el.getContext('2d'); this.width = this.el.width; this.height = this.el.height; this.img = this.ctx.getImageData(0, 0, this.width, this.height); this.dos256 = [ 0x000000, 0x0000aa, 0x00aa00, 0x00aaaa, 0xaa0000, 0xaa00aa, 0xaa5500, 0xaaaaaa, // 0 0x555555, 0x5555ff, 0x55ff55, 0x55ffff, 0xff5555, 0xff55ff, 0xffff55, 0xffffff, // 8 0x000000, 0x141414, 0x202020, 0x2c2c2c, 0x383838, 0x454545, 0x515151, 0x616161, // 10 0x717171, 0x828282, 0x929292, 0xa2a2a2, 0xb6b6b6, 0xcbcbcb, 0xe3e3e3, 0xffffff, // 18 0x0000ff, 0x4100ff, 0x7d00ff, 0xbe00ff, 0xff00ff, 0xff00be, 0xff007d, 0xff0041, // 20 0xff0000, 0xff4100, 0xff7d00, 0xffbe00, 0xffff00, 0xbeff00, 0x7dff00, 0x41ff00, // 28 0x00ff00, 0x00ff41, 0x00ff7d, 0x00ffbe, 0x00ffff, 0x00beff, 0x007dff, 0x0041ff, // 30 0x7d7dff, 0x9e7dff, 0xbe7dff, 0xdf7dff, 0xff7dff, 0xff7ddf, 0xff7dbe, 0xff7d9e, // 38 0xff7d7d, 0xff9e7d, 0xffbe7d, 0xffdf7d, 0xffff7d, 0xdfff7d, 0xbeff7d, 0x9eff7d, // 40 0x7dff7d, 0x7dff9e, 0x7dffbe, 0x7dffdf, 0x7dffff, 0x7ddfff, 0x7dbeff, 0x7d9eff, // 48 0xb6b6ff, 0xc7b6ff, 0xdbb6ff, 0xebb6ff, 0xffb6ff, 0xffb6eb, 0xffb6db, 0xffb6c7, // 50 0xffb6b6, 0xffc7b6, 0xffdbb6, 0xffebb6, 0xffffb6, 0xebffb6, 0xdbffb6, 0xc7ffb6, // 58 0xb6ffb6, 0xb6ffc7, 0xb6ffdb, 0xb6ffeb, 0xb6ffff, 0xb6ebff, 0xb6dbff, 0xb6c7ff, // 60 0x000071, 0x1c0071, 0x380071, 0x550071, 0x710071, 0x710055, 0x710038, 0x71001c, // 68 0x710000, 0x711c00, 0x713800, 0x715500, 0x717100, 0x557100, 0x387100, 0x1c7100, // 70 0x007100, 0x00711c, 0x007138, 0x007155, 0x007171, 0x005571, 0x003871, 0x001c71, // 78 0x383871, 0x453871, 0x553871, 0x613871, 0x713871, 0x713861, 0x713855, 0x713845, // 80 0x713838, 0x714538, 0x715538, 0x716138, 0x717138, 0x617138, 0x557138, 0x457138, // 88 0x387138, 0x387145, 0x387155, 0x387161, 0x387171, 0x386171, 0x385571, 0x384571, // 90 0x515171, 0x595171, 0x615171, 0x695171, 0x715171, 0x715169, 0x715161, 0x715159, // 98 0x715151, 0x715951, 0x716151, 0x716951, 0x717151, 0x697151, 0x617151, 0x597151, // A0 0x517151, 0x517159, 0x517161, 0x517169, 0x517171, 0x516971, 0x516171, 0x515971, // A8 0x000041, 0x100041, 0x200041, 0x300041, 0x410041, 0x410030, 0x410020, 0x410010, // B0 0x410000, 0x411000, 0x412000, 0x413000, 0x414100, 0x304100, 0x204100, 0x104100, // B8 0x004100, 0x004110, 0x004120, 0x004130, 0x004141, 0x003041, 0x002041, 0x001041, // C0 0x202041, 0x282041, 0x302041, 0x382041, 0x412041, 0x412038, 0x412030, 0x412028, // C8 0x412020, 0x412820, 0x413020, 0x413820, 0x414120, 0x384120, 0x304120, 0x284120, // D0 0x204120, 0x204128, 0x204130, 0x204138, 0x204141, 0x203841, 0x203041, 0x202841, // D8 0x2c2c41, 0x302c41, 0x342c41, 0x3c2c41, 0x412c41, 0x412c3c, 0x412c34, 0x412c30, // E0 0x412c2c, 0x41302c, 0x41342c, 0x413c2c, 0x41412c, 0x3c412c, 0x34412c, 0x30412c, // E8 0x2c412c, 0x2c4130, 0x2c4134, 0x2c413c, 0x2c4141, 0x2c3c41, 0x2c3441, 0x2c3041, // F0 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000 // F8 ]; } // Вычисление размера экрана windowsize() { let win = window, doc = document, docelem = doc.documentElement, body = doc.getElementsByTagName('body')[0], wx = win.innerWidth || docelem.clientWidth || body.clientWidth, wy = win.innerHeight || docelem.clientHeight|| body.clientHeight; return {w: wx, h: wy}; } // Цвет из 256-палитры dos(cl) { return this.dos256[ cl & 255 ]; } // Рисование пикселя на экране pset(x, y, k) { if (x < this.el.width && y < this.el.height && x >= 0 && y >= 0) { let p = 4*(x + y * this.el.width); this.img.data[p ] = (k >> 16) & 0xff; this.img.data[p + 1] = (k >> 8) & 0xff; this.img.data[p + 2] = (k ) & 0xff; this.img.data[p + 3] = ((k >> 24) & 0xff) ^ 0xff; } } // Линия по Брезенхэму line(x1, y1, x2, y2, color) { // Инициализация смещений let signx = x1 < x2 ? 1 : -1; let signy = y1 < y2 ? 1 : -1; let deltax = x2 > x1 ? x2 - x1 : x1 - x2; let deltay = y2 > y1 ? y2 - y1 : y1 - y2; let error = deltax - deltay; let error2; // Если линия - это точка this.pset(x2, y2, color); // Перебирать до конца while ((x1 != x2) || (y1 != y2)) { this.pset(x1, y1, color); error2 = 2 * error; if (error2 > -deltay) { error -= deltay; x1 += signx; } if (error2 < deltax) { error += deltax; y1 += signy; } } } // Очистка экрана cls(cl) { for (let y = 0; y < this.height; y++) for (let x = 0; x < this.width; x++) this.pset(x, y, cl); } // Обновление экрана flush() { this.ctx.putImageData(this.img, 0, 0); } }
16 дек, 2020
© 2007-2023 Все киты весьма распакованы