桃鉄っぽいもの。 funnythingz Follow 2012-02-17 10:18:38 License: MIT License Fork0 Fav0 View1875 /** * 桃鉄っぽいものを作ってます。 * 頑張って日本地図完成させます。 * * 操作方法 * ↑ i * ↓ k * ← j * → l */ 2012/02/17 キャラアイコンをanimate対応しました。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 205 lines HTML 3 lines CSS 49 lines /** * 桃鉄っぽいものを作ってます。 * 頑張って日本地図完成させます。 * * 操作方法 * ↑ i * ↓ k * ← j * → l */ 2012/02/17 キャラアイコンをanimate対応しました。 桃鉄っぽいもの。 jQuery v1.6.2 var map = [ /** * 0: false * 1: lineX * 2: lineY * b: blue * r: red * c: card * s: star * p: port */ ["0","0","0","0","p","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["b","1","1","1","p","1","1","1","p","1","1","1","p","1","1","1","p","0","0","0","0"], ["0","0","0","0","2","0","0","0","2","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","2","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","2","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","c","1","1","1","p","1","1","1","r","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0"], ["r","1","1","1","p","1","1","1","p","0","0","0","p","0","0","0","0","0","0","0","p"], ["2","0","0","0","0","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["2","0","0","0","0","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["2","0","0","0","0","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["p","1","1","1","p","1","1","b","0","0","0","0","r","1","1","1","r","1","1","1","s"], ["0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0","2","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0","2","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0","2","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","p","1","1","1","s","0","0","0","s"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["0","0","0","0","0","0","0","b","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","s","0","0","0","s","1","1","1","p"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","2","0","0","0","0"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","2","0","0","0","0"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","2","0","0","0","0"], ["0","0","0","0","0","0","0","b","0","0","0","0","p","1","1","1","s","0","0","0","0"] /**/ ]; var param = { maskY: 4, maskX: 4, stageY: 0, stageX: 0, size: 50 } var momotetsu = {} momotetsu.createBlock = function(type, size){ this.type = type; this.size = size; return this.init(); } momotetsu.createBlock.prototype = { init: function(){ var elm = $("<span>"); elm.addClass("box"); elm.addClass(this.type); elm.css({ width: this.size + "px", height: this.size + "px" }); elm.html(""); return elm; } } momotetsu.createMask = function(type, size){ this.type = type; this.size = size; return this.init(); } momotetsu.createMask.prototype = { init: function(){ var elm = $("<span>"); elm.addClass("conshelljar"); elm.addClass(this.type); elm.css({ width: this.size + "px", height: this.size + "px", top: this.size * param.maskY + "px", left: this.size * param.maskX + "px" }); elm.html(""); return elm; } } $(function(){ var container = $("#container"); var stage = $("#stage"); stage.css({ width: (map[0].length * param.size) + "px", top: param.stageY, left: param.stageX }); $("body").css({ backgroundSize: param.size + "px " + param.size + "px" }); var block = []; for(var y = 0, yl = map.length; y < yl; y++){ block[y] = []; for(var x = 0, xl = map[y].length; x < xl; x++){ switch(map[y][x]){ case "0": block[y][x] = new momotetsu.createBlock("false", param.size); break; case "1": block[y][x] = new momotetsu.createBlock("lineX", param.size); break; case "2": block[y][x] = new momotetsu.createBlock("lineY", param.size); break; case "b": block[y][x] = new momotetsu.createBlock("blue", param.size); break; case "r": block[y][x] = new momotetsu.createBlock("red", param.size); break; case "s": block[y][x] = new momotetsu.createBlock("star", param.size); break; case "p": block[y][x] = new momotetsu.createBlock("port", param.size); break; case "c": block[y][x] = new momotetsu.createBlock("card", param.size); break; } stage.append(block[y][x]); container.append(); }} var mask = new momotetsu.createMask("jar_red", param.size); container.append(mask); /** * 105 ↑ i * 107 ↓ k * 106 ← j * 108 → l */ $(document).bind("keypress", function(e){ switch(e.which){ //↑ i case 105: if(map[param.maskY - 1][param.maskX] !== "0" && typeof(map[param.maskY - 1][param.maskX]) !== "undefined"){ var count = 1; while(map[param.maskY - 1 * count][param.maskX] === "1" || map[param.maskY - 1 * count][param.maskX] === "2"){ count++; } param.maskY -= 1 * count; param.stageY += param.size * count; stage.animate({ top: param.stageY + "px" }); } break; //↓ k case 107: if(map[param.maskY + 1][param.maskX] !== "0" && typeof(map[param.maskY + 1][param.maskX]) !== "undefined"){ var count = 1; while(map[param.maskY + 1 * count][param.maskX] === "1" || map[param.maskY + 1 * count][param.maskX] === "2"){ count++; } param.maskY += 1 * count; param.stageY -= param.size * count; stage.animate({ top: param.stageY + "px" }); } break; //← j case 106: if(map[param.maskY][param.maskX - 1] !== "0" && typeof(map[param.maskY][param.maskX - 1]) !== "undefined"){ var count = 1; while(map[param.maskY][param.maskX - 1 * count] === "1" || map[param.maskY][param.maskX - 1 * count] === "2"){ count++; } param.maskX -= 1 * count; param.stageX += param.size * count; stage.animate({ left: param.stageX + "px" }); } break; //→ l case 108: if(map[param.maskY][param.maskX + 1] !== "0" && typeof(map[param.maskY][param.maskX + 1]) !== "undefined"){ var count = 1; while(map[param.maskY][param.maskX + 1 * count] === "1" || map[param.maskY][param.maskX + 1 * count] === "2"){ count++; } param.maskX += 1 * count; param.stageX -= param.size * count; stage.animate({ left: param.stageX + "px" }); } break; } }); }); <div id="container"> <div id="stage"></div> </div> 桃鉄っぽいもの。 body { background: url(http://jsrun.it/assets/r/U/w/h/rUwhm.gif) repeat 0 0; } #container { position: relative; } #stage { overflow: hidden; position: absolute; top: 0; left: 0; } .box { display: block; float: left; background-size: contain; } .red { background: url(http://jsrun.it/assets/k/M/J/u/kMJuz.gif) no-repeat 0 0; } .blue { background: url(http://jsrun.it/assets/q/o/n/j/qonj4.gif) no-repeat 0 0; } .card { background: url(http://jsrun.it/assets/x/b/E/7/xbE7K.gif) no-repeat 0 0; } .star { background: url(http://jsrun.it/assets/A/k/I/Q/AkIQ0.gif) no-repeat 0 0; } .false { background: url(http://jsrun.it/assets/n/0/z/7/n0z7z.gif) no-repeat 0 0; } .lineX { background: url(http://jsrun.it/assets/5/I/M/i/5IMib.gif) no-repeat 0 0; } .lineY { background: url(http://jsrun.it/assets/2/l/C/j/2lCjJ.gif) no-repeat 0 0; } .port { background: url(http://jsrun.it/assets/z/Y/A/N/zYANm.gif) no-repeat 0 0; } .conshelljar { position: absolute; display: block; } .jar_red { background: url(http://jsrun.it/assets/p/j/Q/l/pjQlh.png) no-repeat 0 0; background-size: contain; } /** * 桃鉄っぽいものを作ってます。 * 頑張って日本地図完成させます。 * * 操作方法 * ↑ i * ↓ k * ← j * → l */ 2012/02/17 キャラアイコンをanimate対応しました。 var map = [ /** * 0: false * 1: lineX * 2: lineY * b: blue * r: red * c: card * s: star * p: port */ ["0","0","0","0","p","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"], ["b","1","1","1","p","1","1","1","p","1","1","1","p","1","1","1","p","0","0","0","0"], ["0","0","0","0","2","0","0","0","2","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","2","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","2","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","c","1","1","1","p","1","1","1","r","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0"], ["0","0","0","0","2","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0"], ["r","1","1","1","p","1","1","1","p","0","0","0","p","0","0","0","0","0","0","0","p"], ["2","0","0","0","0","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["2","0","0","0","0","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["2","0","0","0","0","0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["p","1","1","1","p","1","1","b","0","0","0","0","r","1","1","1","r","1","1","1","s"], ["0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0","2","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0","2","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","0","0","0","0","2","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","p","1","1","1","s","0","0","0","s"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["0","0","0","0","0","0","0","b","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","0","0","0","0","2"], ["0","0","0","0","0","0","0","2","0","0","0","0","s","0","0","0","s","1","1","1","p"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","2","0","0","0","0"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","2","0","0","0","0"], ["0","0","0","0","0","0","0","2","0","0","0","0","2","0","0","0","2","0","0","0","0"], ["0","0","0","0","0","0","0","b","0","0","0","0","p","1","1","1","s","0","0","0","0"] /**/ ]; var param = { maskY: 4, maskX: 4, stageY: 0, stageX: 0, size: 50 } var momotetsu = {} momotetsu.createBlock = function(type, size){ this.type = type; this.size = size; return this.init(); } momotetsu.createBlock.prototype = { init: function(){ var elm = $("<span>"); elm.addClass("box"); elm.addClass(this.type); elm.css({ width: this.size + "px", height: this.size + "px" }); elm.html(""); return elm; } } momotetsu.createMask = function(type, size){ this.type = type; this.size = size; return this.init(); } momotetsu.createMask.prototype = { init: function(){ var elm = $("<span>"); elm.addClass("conshelljar"); elm.addClass(this.type); elm.css({ width: this.size + "px", height: this.size + "px", top: this.size * param.maskY + "px", left: this.size * param.maskX + "px" }); elm.html(""); return elm; } } $(function(){ var container = $("#container"); var stage = $("#stage"); stage.css({ width: (map[0].length * param.size) + "px", top: param.stageY, left: param.stageX }); $("body").css({ backgroundSize: param.size + "px " + param.size + "px" }); var block = []; for(var y = 0, yl = map.length; y < yl; y++){ block[y] = []; for(var x = 0, xl = map[y].length; x < xl; x++){ switch(map[y][x]){ case "0": block[y][x] = new momotetsu.createBlock("false", param.size); break; case "1": block[y][x] = new momotetsu.createBlock("lineX", param.size); break; case "2": block[y][x] = new momotetsu.createBlock("lineY", param.size); break; case "b": block[y][x] = new momotetsu.createBlock("blue", param.size); break; case "r": block[y][x] = new momotetsu.createBlock("red", param.size); break; case "s": block[y][x] = new momotetsu.createBlock("star", param.size); break; case "p": block[y][x] = new momotetsu.createBlock("port", param.size); break; case "c": block[y][x] = new momotetsu.createBlock("card", param.size); break; } stage.append(block[y][x]); container.append(); }} var mask = new momotetsu.createMask("jar_red", param.size); container.append(mask); /** * 105 ↑ i * 107 ↓ k * 106 ← j * 108 → l */ $(document).bind("keypress", function(e){ switch(e.which){ //↑ i case 105: if(map[param.maskY - 1][param.maskX] !== "0" && typeof(map[param.maskY - 1][param.maskX]) !== "undefined"){ var count = 1; while(map[param.maskY - 1 * count][param.maskX] === "1" || map[param.maskY - 1 * count][param.maskX] === "2"){ count++; } param.maskY -= 1 * count; param.stageY += param.size * count; stage.animate({ top: param.stageY + "px" }); } break; //↓ k case 107: if(map[param.maskY + 1][param.maskX] !== "0" && typeof(map[param.maskY + 1][param.maskX]) !== "undefined"){ var count = 1; while(map[param.maskY + 1 * count][param.maskX] === "1" || map[param.maskY + 1 * count][param.maskX] === "2"){ count++; } param.maskY += 1 * count; param.stageY -= param.size * count; stage.animate({ top: param.stageY + "px" }); } break; //← j case 106: if(map[param.maskY][param.maskX - 1] !== "0" && typeof(map[param.maskY][param.maskX - 1]) !== "undefined"){ var count = 1; while(map[param.maskY][param.maskX - 1 * count] === "1" || map[param.maskY][param.maskX - 1 * count] === "2"){ count++; } param.maskX -= 1 * count; param.stageX += param.size * count; stage.animate({ left: param.stageX + "px" }); } break; //→ l case 108: if(map[param.maskY][param.maskX + 1] !== "0" && typeof(map[param.maskY][param.maskX + 1]) !== "undefined"){ var count = 1; while(map[param.maskY][param.maskX + 1 * count] === "1" || map[param.maskY][param.maskX + 1 * count] === "2"){ count++; } param.maskX += 1 * count; param.stageX -= param.size * count; stage.animate({ left: param.stageX + "px" }); } break; } }); }); <div id="container"> <div id="stage"></div> </div> body { background: url(http://jsrun.it/assets/r/U/w/h/rUwhm.gif) repeat 0 0; } #container { position: relative; } #stage { overflow: hidden; position: absolute; top: 0; left: 0; } .box { display: block; float: left; background-size: contain; } .red { background: url(http://jsrun.it/assets/k/M/J/u/kMJuz.gif) no-repeat 0 0; } .blue { background: url(http://jsrun.it/assets/q/o/n/j/qonj4.gif) no-repeat 0 0; } .card { background: url(http://jsrun.it/assets/x/b/E/7/xbE7K.gif) no-repeat 0 0; } .star { background: url(http://jsrun.it/assets/A/k/I/Q/AkIQ0.gif) no-repeat 0 0; } .false { background: url(http://jsrun.it/assets/n/0/z/7/n0z7z.gif) no-repeat 0 0; } .lineX { background: url(http://jsrun.it/assets/5/I/M/i/5IMib.gif) no-repeat 0 0; } .lineY { background: url(http://jsrun.it/assets/2/l/C/j/2lCjJ.gif) no-repeat 0 0; } .port { background: url(http://jsrun.it/assets/z/Y/A/N/zYANm.gif) no-repeat 0 0; } .conshelljar { position: absolute; display: block; } .jar_red { background: url(http://jsrun.it/assets/p/j/Q/l/pjQlh.png) no-repeat 0 0; background-size: contain; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? /** * 桃鉄っぽいものを作ってます。 * 頑張って日本地図完成させます。 * * 操作方法 * ↑ i * ↓ k * ← j * → l */ 2012/02/17 キャラアイコンをanimate対応しました。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/gawo/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/funnythingz/gawo" title="桃鉄っぽいもの。">桃鉄っぽいもの。 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> css3 HTML5 Javascript Tweet twitter Tags HTML5 Javascript css3 Forked sort new page view favorite forked forked: 桃鉄っぽいもの。 Shinagawa.Ko.. 00 40views 206/3/49 HTML5 Javascript css3