Forked from: f_to's 色切り替え View Diff (2) forked: 色切り替え a15dc527 Follow 2019-01-12 13:28:11 License: MIT License Fork0 Fav0 View24 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 134 lines HTML 1 lines CSS 10 lines forked: 色切り替え ui.enchant.js enchant.js v0.8.0 // forked from f_to's "色切り替え" http://jsdo.it/f_to/yXAX enchant(); window.onload = function(){ // 30 * 32 var img = [ [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,0,0,2,2,0,0,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,0,0,2,2,0,0], [0,0,0,0,2,2,0,0,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,0,0,2,2,0,0], [0,0,0,0,2,2,0,0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,2,2,0,0], [0,0,0,0,2,2,0,0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,1,1,2,2,2,2,1,1,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,1,1,2,2,2,2,1,1,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,3,3,2,2,2,2,3,3,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,3,3,2,2,2,2,3,3,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,0,0], [0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,0,0], [0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,2,2,2,2,1,1,1,1,3,3,0,0], [0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,2,2,2,2,1,1,1,1,3,3,0,0], [0,0,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,1,1,1,1,3,3,3,3,3,3], [0,0,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,1,1,1,1,3,3,3,3,3,3], [3,3,3,3,2,2,3,3,3,3,3,3,3,3,1,1,1,1,1,1,1,1,1,1,2,2,3,3,3,3], [3,3,3,3,2,2,3,3,3,3,3,3,3,3,1,1,1,1,1,1,1,1,1,1,2,2,3,3,3,3], [3,3,2,2,2,2,2,2,3,3,3,3,2,2,3,3,3,3,1,1,1,1,2,2,2,2,2,2,3,3], [3,3,2,2,2,2,2,2,3,3,3,3,2,2,3,3,3,3,1,1,1,1,2,2,2,2,2,2,3,3], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,1,1,3,3,3,3,3,3,3,3,2,2,2,2,2,2], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,1,1,3,3,3,3,3,3,3,3,2,2,2,2,2,2], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,3,3,3,3,1,1,1,1,1,1,1,1,2,2,0,0], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,3,3,3,3,1,1,1,1,1,1,1,1,2,2,0,0], [3,3,3,3,3,3,3,3,3,3,3,3,2,2,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [3,3,3,3,3,3,3,3,3,3,3,3,2,2,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,2,2,2,2,2,2,2,2,2,2,3,3,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0], [0,0,2,2,2,2,2,2,2,2,2,2,3,3,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] ]; var colorPalette = [ [ [0, 0, 0], [184, 248, 24], [255, 255, 255], [228, 92, 16], [0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ], [ [0, 0, 0], [184, 184, 248], [255, 160, 68], [228, 92, 16], [0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ] ]; var game = new Game(320, 320); game.onload = function(){ var palette = 0; // 読み込むパレットの番号 var imgW = img[0].length; // 画像の横サイズ var imgH = img.length; // 画像の縦サイズ sprite = new Sprite(imgW, imgH); var surface = new Surface(imgW, imgH); sprite.image = surface; sprite.x = 150; // X座標 sprite.y = 150; // Y座標 sprite.scaleX = 1; // 横の拡大率 sprite.scaleY = 1; // 縦の拡大率 // 画像を初期化 writeSprite(); game.rootScene.addChild(sprite); // 画面にLinkを表示する // spriteの画像を書き換える function writeSprite(){ for(var i=0; i<imgH; i++){ for(var j=0; j<imgW; j++){ if(img[i][j] === 0){ // 透明色 surface.setPixel(j, i, 0, 0, 0, 0); }else{ var r = colorPalette[palette][img[i][j]][0]; var g = colorPalette[palette][img[i][j]][1]; var b = colorPalette[palette][img[i][j]][2]; surface.setPixel(j, i, r, g, b, 255); } } } } // 1Pカラーボタン var button1P = new Button("1Pカラー", "light"); button1P.moveTo(10,10); game.rootScene.addChild(button1P); button1P.ontouchstart = function(){ palette = 0; writeSprite(); }; // 2Pカラーボタン var button2P = new Button("2Pカラー", "light"); button2P.moveTo(10,50); game.rootScene.addChild(button2P); button2P.ontouchstart = function(){ palette = 1; writeSprite(); }; }; game.start(); }; <p id='helloWorld'></p> forked: 色切り替え * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } // forked from f_to's "色切り替え" http://jsdo.it/f_to/yXAX enchant(); window.onload = function(){ // 30 * 32 var img = [ [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,0,0,2,2,0,0,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,0,0,2,2,0,0], [0,0,0,0,2,2,0,0,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,0,0,2,2,0,0], [0,0,0,0,2,2,0,0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,2,2,0,0], [0,0,0,0,2,2,0,0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,1,1,2,2,2,2,1,1,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,1,1,2,2,2,2,1,1,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,3,3,2,2,2,2,3,3,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,2,2,2,2,3,3,2,2,3,3,2,2,2,2,3,3,2,2,3,3,2,2,2,2,0,0], [0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,0,0], [0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,0,0], [0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,2,2,2,2,1,1,1,1,3,3,0,0], [0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,2,2,2,2,1,1,1,1,3,3,0,0], [0,0,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,1,1,1,1,3,3,3,3,3,3], [0,0,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,1,1,1,1,3,3,3,3,3,3], [3,3,3,3,2,2,3,3,3,3,3,3,3,3,1,1,1,1,1,1,1,1,1,1,2,2,3,3,3,3], [3,3,3,3,2,2,3,3,3,3,3,3,3,3,1,1,1,1,1,1,1,1,1,1,2,2,3,3,3,3], [3,3,2,2,2,2,2,2,3,3,3,3,2,2,3,3,3,3,1,1,1,1,2,2,2,2,2,2,3,3], [3,3,2,2,2,2,2,2,3,3,3,3,2,2,3,3,3,3,1,1,1,1,2,2,2,2,2,2,3,3], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,1,1,3,3,3,3,3,3,3,3,2,2,2,2,2,2], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,1,1,3,3,3,3,3,3,3,3,2,2,2,2,2,2], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,3,3,3,3,1,1,1,1,1,1,1,1,2,2,0,0], [3,3,3,3,2,2,3,3,3,3,3,3,2,2,3,3,3,3,1,1,1,1,1,1,1,1,2,2,0,0], [3,3,3,3,3,3,3,3,3,3,3,3,2,2,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [3,3,3,3,3,3,3,3,3,3,3,3,2,2,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,2,2,2,2,2,2,2,2,2,2,3,3,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0], [0,0,2,2,2,2,2,2,2,2,2,2,3,3,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] ]; var colorPalette = [ [ [0, 0, 0], [184, 248, 24], [255, 255, 255], [228, 92, 16], [0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ], [ [0, 0, 0], [184, 184, 248], [255, 160, 68], [228, 92, 16], [0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ] ]; var game = new Game(320, 320); game.onload = function(){ var palette = 0; // 読み込むパレットの番号 var imgW = img[0].length; // 画像の横サイズ var imgH = img.length; // 画像の縦サイズ sprite = new Sprite(imgW, imgH); var surface = new Surface(imgW, imgH); sprite.image = surface; sprite.x = 150; // X座標 sprite.y = 150; // Y座標 sprite.scaleX = 1; // 横の拡大率 sprite.scaleY = 1; // 縦の拡大率 // 画像を初期化 writeSprite(); game.rootScene.addChild(sprite); // 画面にLinkを表示する // spriteの画像を書き換える function writeSprite(){ for(var i=0; i<imgH; i++){ for(var j=0; j<imgW; j++){ if(img[i][j] === 0){ // 透明色 surface.setPixel(j, i, 0, 0, 0, 0); }else{ var r = colorPalette[palette][img[i][j]][0]; var g = colorPalette[palette][img[i][j]][1]; var b = colorPalette[palette][img[i][j]][2]; surface.setPixel(j, i, r, g, b, 255); } } } } // 1Pカラーボタン var button1P = new Button("1Pカラー", "light"); button1P.moveTo(10,10); game.rootScene.addChild(button1P); button1P.ontouchstart = function(){ palette = 0; writeSprite(); }; // 2Pカラーボタン var button2P = new Button("2Pカラー", "light"); button2P.moveTo(10,50); game.rootScene.addChild(button2P); button2P.ontouchstart = function(){ palette = 1; writeSprite(); }; }; game.start(); }; <p id='helloWorld'></p> * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author a15dc527 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/y37T/js"></script> Discussion Questions on this code?
