Forked from: asannou's PAC-MAN http://gdd-2010-quiz-japan.appspot.com/pro.. diff(67)

problems?problem=pacman

asannou

2010-08-20 15:38:26

Fork: 2

Fav: 1

View: 1832

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 360 lines
HTML 7 lines
CSS 5 lines

PAC-MAN2 http://gdd-2010-quiz-japan.appspot.com/problems?problem=pacman
Prototype JavaScript framework, v1.6.1

var t = 0;
var path = "";
var score = 0;
var field = Array(
  "####################".split(""),
  "###.....L..........#".split(""),
  "###.##.##.##L##.##.#".split(""),
  "###.##.##.##.##.##.#".split(""),
  "#.L................#".split(""),
  "#.##.##.##.##.##.###".split(""),
  "#.##.##L##.##.##.###".split(""),
  "#.................L#".split(""),
  "#.#.#.#J####J#.#.#.#".split(""),
  "#L.................#".split(""),
  "###.##.##.##.##.##.#".split(""),
  "###.##.##R##.##.##.#".split(""),
  "#................R.#".split(""),
  "#.##.##.##.##R##.###".split(""),
  "#.##.##.##.##.##.###".split(""),
  "#@....R..........###".split(""),
  "####################".split("")
);
var _field;
var p;
var monster = new Array();

PAC-MAN2 http://gdd-2010-quiz-japan.appspot.com/problems?problem=pacman

// forked from asannou's "PAC-MAN http://gdd-2010-quiz-japan.appspot.com/problems?problem=pacman" http://jsdo.it/asannou/pacman var canvas = document.getElementById('world'); var ctx = canvas.getContext('2d'); var size = 20; var frame = new Array(); var t = 0; var path = ""; var score = 0; var field = Array( "####################".split(""), "###.....L..........#".split(""), "###.##.##.##L##.##.#".split(""), "###.##.##.##.##.##.#".split(""), "#.L................#".split(""), "#.##.##.##.##.##.###".split(""), "#.##.##L##.##.##.###".split(""), "#.................L#".split(""), "#.#.#.#J####J#.#.#.#".split(""), "#L.................#".split(""), "###.##.##.##.##.##.#".split(""), "###.##.##R##.##.##.#".split(""), "#................R.#".split(""), "#.##.##.##.##R##.###".split(""), "#.##.##.##.##.##.###".split(""), "#@....R..........###".split(""), "####################".split("") ); var _field; var p; var monster = new Array(); var query = location.search.toQueryParams(); var q = new Array(); if (query.move) { q = query.move.split(""); $("mask").show(); } var keymap = "hklj"; var replay = function() { $("mask").hide(); if (q.length) { document.onkeydown({ keyCode: 37 + keymap.indexOf(q.shift()) }); setTimeout(replay, 200); } }; function displayField(field) { var sprite = document.getElementById("sprite"); ctx.clearRect(0, 0, canvas.width, canvas.height); c = new Array(); for (var y = 0; y < field.length; y++) { for (var x = 0; x < field[y].length; x++) { var cx = x * size; var cy = y * size; var c = field[y][x]; if (c == ".") { ctx.drawImage(sprite, 0, 180, size / 2, size / 2, cx + 4, cy + 4, size / 2, size / 2); } else if (c == "#") { ctx.beginPath(); ctx.strokeStyle = 'rgb(0, 0, 255)'; ctx.rect(cx + 2, cy + 2, size - 4, size - 4); ctx.stroke(); } } } p.draw(); var i; for (i = 0; i < monster.length; i++) { monster[i].draw(); } var str = ""; for (i = 0; i < frame.length; i++) { str += frame[i].path; } $("time").innerHTML = t; $("score").innerHTML = score; $("path").value = str + path; } function copyField(src) { var dest = new Array(); for (var y = 0; y < src.length; y++) { dest[y] = Array(); for (var x = 0; x < src[y].length; x++) { dest[y][x] = src[y][x]; } } for (var i = 0; i < monster.length; i++) { var m = monster[i]; if (dest[m.y][m.x] != ".") dest[m.y][m.x] = m.dot ? "." : " "; } return dest; } document.onkeydown = function (e) { var _path; _field = copyField(field); var _monster = new Array(); for (i = 0; i < monster.length; i++) { _monster.push(Object.clone(monster[i])); } var _p = Object.clone(p); var i; var swap = new Array(); for (i = 0; i < _monster.length; i++) { _monster[i].move(); if (_monster[i].x == p.x && _monster[i].y == p.y) swap.push(i); } if (e.keyCode == 37) { _p.moveLeft(); _path = "h"; } else if (e.keyCode == 38) { _p.moveUp(); _path = "k"; } else if (e.keyCode == 39) { _p.moveRight(); _path = "l"; } else if (e.keyCode == 40) { _p.moveDown(); _path = "j"; } else if (e.keyCode == 85) { var f = frame.pop(); t = f.t; path = f.path; score = f.score; field = f.field; p = f.p; monster = f.monster; displayField(field); return; } else { _path = "."; } for (i = 0; i < swap.length; i++) { if (_p.x == monster[swap[i]].x && _p.y == monster[swap[i]].y) return; } var _c = _field[_p.y][_p.x]; var _score = (_c == "."); if (_score || _c == " " || _c == "@") { if (_field[p.y][p.x] == "@") _field[p.y][p.x] = " "; _field[_p.y][_p.x] = "@"; } else { return; } frame.push({ "t": t, "path": path, "score": score, "field": field, "p": p, "monster": monster }); t++; path = _path; if (_score) score++; field = _field; p = _p; monster = _monster; displayField(field); }; var Base = Class.create(); Base.prototype = { initialize: function(x, y) { this.x = x; this.y = y; this.rad = 0; this.dot = false; }, drawImage: function(sx, sy) { var sprite = document.getElementById("sprite"); ctx.drawImage(sprite, sx, sy, size, size, this.x * size, this.y * size, size, size); } }; var Pacman = Class.create(); Pacman.prototype = Object.extend(new Base, { sy: 0, draw: function() { this.drawImage(0, this.sy); }, moveUp: function() { this.y--; this.sy = 40; }, moveDown: function() { this.y++; this.sy = 60; }, moveLeft: function() { this.x--; this.sy = 0; }, moveRight: function() { this.x++; this.sy = 20; } }); var Monster = Class.create(); Monster.prototype = Object.extend(new Base, { drawMonster: function (sy) { var sx = 140; var rad = this.rad % 2.0; if (rad == 0.5) { sx = 40; } else if (rad == 1.0) { sx = 80; } else if (rad == 1.5) { sx = 0; } this.drawImage(sx, sy); }, move: function () { if (t === 0) { this.moveFirst(); return; } var path = new Array(); for (var dr = -0.5; dr <= 0.5; dr = dr + 0.5) { var rad = this.rad + dr; var x = this.getX(rad); var y = this.getY(rad); var c = _field[y][x]; if (c != "#") path.push(rad); } if (path.length === 0) { this.updateField(this.rad + 1.0); } else if (path.length == 1) { this.updateField(path.pop()); } else if (path.length > 1) { this.moveCrossing(); } }, moveFirst: function () { for (var rad = 0.5; rad <= 2.0; rad = rad + 0.5) { if (this.updateField(rad)) return; } }, moveHorizontal: function () { var dx = p.x - this.x; var rad; if (dx !== 0) { rad = dx < 0 ? 1.0 : 0; return this.updateField(rad); } }, moveVertical: function() { var dy = p.y - this.y; var rad; if (dy !== 0) { rad = dy < 0 ? -0.5 : 0.5; return this.updateField(rad); } }, updateField: function(rad) { var x = this.getX(rad); var y = this.getY(rad); var c = _field[y][x]; if (c != "#") { _field[y][x] = "M"; this.x = x; this.y = y; this.rad = rad % 2.0; this.dot = (c == "."); return true; } }, getX: function(rad) { return Math.floor(this.x + Math.cos(Math.PI * (rad % 2.0)) + 0.1); }, getY: function(rad) { return Math.floor(this.y + Math.sin(Math.PI * (rad % 2.0)) + 0.1); } }); var MonsterL = Class.create(); MonsterL.prototype = Object.extend(new Monster, { draw: function() { this.drawImage(0, 120); }, moveCrossing: function () { if (this.updateField(this.rad - 0.5)) return; if (this.updateField(this.rad)) return; if (this.updateField(this.rad + 0.5)) return; } }); var MonsterR = Class.create(); MonsterR.prototype = Object.extend(new Monster, { draw: function() { this.drawMonster(140); }, moveCrossing: function () { if (this.updateField(this.rad + 0.5)) return; if (this.updateField(this.rad)) return; if (this.updateField(this.rad - 0.5)) return; } }); var MonsterV = Class.create(); MonsterV.prototype = Object.extend(new Monster, { draw: function() { this.drawMonster(80); }, moveCrossing: function () { if (this.moveVertical()) return; if (this.moveHorizontal()) return; this.moveFirst(); } }); var MonsterH = Class.create(); MonsterH.prototype = Object.extend(new Monster, { draw: function() { this.drawMonster(100); }, moveCrossing: function () { if (this.moveHorizontal()) return; if (this.moveVertical()) return; this.moveFirst(); } }); var MonsterJ = Class.create(); MonsterJ.prototype = Object.extend(new Monster, { toggle: true, draw: function() { this.drawMonster(80); }, moveCrossing: function () { if (this.toggle) { MonsterL.prototype.moveCrossing.apply(this); } else { MonsterR.prototype.moveCrossing.apply(this); } this.toggle = !this.toggle; } }); var tweet = function() { var s = score == 147 ? score + (300 - t) : score; var search = $H({ move: $("path").value }).toQueryString(); var jsrunit = "http://jsrun.it/asannou/pacman2?" + search; var query = $H({ url: jsrunit, text: "PAC-MAN でスコア " + s + " (移動回数 " + t + " 回) を達成しました！ #gdd2010jp #pacman", lang: "ja" }); var url = "http://twitter.com/share?" + query.toQueryString(); window.open(url, "", "width=550,height=250"); }; window.onload = function () { var d = $("wrap").getDimensions(); $("wrap").style.marginLeft = - (d.width / 2) + "px"; $("wrap").style.marginTop = - (d.height / 2) + "px"; $("wrap").style.left = "50%"; $("wrap").style.top = "50%"; $("wrap").style.display = "block"; for (var y = 0; y < field.length; y++) { for (var x = 0; x < field[y].length; x++) { var c = field[y][x]; if (c == "@") { p = new Pacman(x, y); } else if (c == "L") { monster.push(new MonsterL(x, y)); } else if (c == "R") { monster.push(new MonsterR(x, y)); } else if (c == "V") { monster.push(new MonsterV(x, y)); } else if (c == "H") { monster.push(new MonsterH(x, y)); } else if (c == "J") { monster.push(new MonsterJ(x, y)); } } } displayField(field); //self.focus(); }; <div id="wrap"> time: <span id="time">0</span>/300 score: <span id="score">0</span> <input id="path" style="display:none;" /> <img src="http://twitter-badges.s3.amazonaws.com/t_small-a.png" onclick="tweet();return false;" style="cursor:pointer;"> <a href="http://d.hatena.ne.jp/asannou/20100819" target="_blank">blog</a><br /> <canvas id='world' width="400" height="340"></canvas> </div> <img id="sprite" src="http://www.google.com/logos/pacman10-hp-sprite-2.png" /> <div id="mask" style="background:none repeat scroll 0 0 #000000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1500;opacity:0.8;display:none;" onclick="replay();"><div style="position:absolute;left:50%;top:50%;margin-left:-75px;margin-top:-15px;color:#fff;cursor:pointer;">click to play</div></div> body { background-color: #DDDDDD; font: 30px sans-serif; } #wrap { position:absolute; left:0; top:0; display: none; } #world { background-color: #000; width: 100%; height: 100%; } #sprite { display: none; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/vJwl/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/asannou/pacman2" title="PAC-MAN2 http://gdd-2010-quiz-japan.appspot.com/problems?problem=pacman">PAC-MAN2 http://gdd-2010-quiz-japan.appspot.com/problems?problem=pacman - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

Forked

sort

PAC-MAN2

dongrikim

0
0
469views

282/4/4

PAC-MAN3 http://gdd-2010-quiz-..

asannou

2
2
2140views

369/7/5
- game