桃鉄っぽいもの。

funnythingz

2012-02-17 10:18:38

License: MIT License

Fork: 0

Fav: 0

View: 842

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

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;
	}
    });
    
});

桃鉄っぽいもの。

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; }

Tweet
QR code
Embed

Design view
Code view
<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>
zip

Forked

sort

forked: 桃鉄っぽいもの。

Shinagawa.Ko..

0
0
11views

206/3/49
- HTML5
- Javascript
- css3

桃鉄っぽいもの。

tags

Tweet

twitter

Tags

Forked