Forked from: eller86's HTML5 DnD + Canvas diff(150) TowerDefence(HTML5 DnD + Canvas) eller86 Follow 2010-08-28 23:01:57 License: MIT License Fork2 Fav0 View1276 DnD plugin Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 160 lines HTML 4 lines CSS 11 lines DnD plugin TowerDefence(HTML5 DnD + Canvas) jQuery v1.4.2 /* DnD plugin */ (function(){ jQuery.fn.draggable = function(data, type) { type = type || 'text/plain'; this.bind('dragstart', function(ev) { var dt = ev.originalEvent.dataTransfer; dt.setData(type, data); return true; }); }; jQuery.fn.droppable = function(){ this.bind('dragover', function(ev) { ev.preventDefault(); return false; }); }; jQuery.fn.drop = function(callback){ this.bind('drop', function(ev) { callback(ev); ev.stopPropagation(); return false; }); }; })(jQuery); /* グローバル変数群 */ units = []; missiles = []; colors = ['rgba(0, 0, 255, 0.8)', 'rgba(255, 0, 0, 0.8)']; /* ready? */ $(function(){ canvas = document.getElementById('world'); ctx = canvas.getContext('2d'); canvas = $(canvas); initCanvas(); setInterval(scheduled, 60); // unitsの排他制御は必要?JSはシングルスレッドのはず function scheduled() { createEnemy(); moveUnits(); moveMissiles(); fireMissiles(); initCanvas(); drawUnits(); drawMissiles(); } function createEnemy() { if (Math.random() < 0.9) return; var y = Math.random() * 320; var vy = 0; var enemy = {x: -10, y: y, vx: 3, vy: vy, life: 10, team: 1, sleep: 0}; units.push(enemy); } function initCanvas() { ctx.strokeStyle = ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.fillRect(0, 0, 320, 320); } function drawUnits() { for (var i = 0; i < units.length; ++i) { var unit = units[i]; ctx.strokeStyle = ctx.fillStyle = colors[unit.team]; ctx.beginPath(); ctx.arc(unit.x, unit.y, 10, 0, Math.PI*2, false); ctx.fill(); } } function drawMissiles() { ctx.lineWidth = 2; for (var i = 0; i < missiles.length; ++i) { var missile = missiles[i]; ctx.strokeStyle = ctx.fillStyle = colors[missile.team]; ctx.beginPath(); ctx.moveTo(missile.x, missile.y); ctx.lineTo(missile.x + Math.cos(missile.angle) * missile.speed, missile.y + Math.sin(missile.angle) * missile.speed); ctx.stroke(); } ctx.lineWidth = 0; } function moveUnits() { for (var i = 0; i < units.length; ++i) { var unit = units[i]; unit.x += unit.vx; unit.y += unit.vy; if (unit.sleep) unit.sleep--; } function isLive(elem, index, array) { return elem.life > 0 && elem.x > -20 && elem.x < 340 && elem.y > -20 && elem.y < 340; } units = units.filter(isLive); } function moveMissiles() { for (var i = 0; i < missiles.length; ++i) { var missile = missiles[i]; missile.x += missile.speed * Math.cos(missile.angle); missile.y += missile.speed * Math.sin(missile.angle); } function isLive(elem, index, array) { return elem.x > -20 && elem.x < 340 && elem.y > -20 && elem.y < 340; } missiles = missiles.filter(isLive); } function fireMissiles() { for (var i = 0; i < units.length; ++i) { var from = units[i]; if (from.team == 1 || from.sleep > 0) { continue; } for (var j = 0; j < units.length; ++j) { var to = units[j]; if (from.team == to.team) { continue; } var dx = to.x - from.x; var dy = to.y - from.y; var dist = Math.sqrt(dx * dx + dy * dy); if (dist > 40) { continue; } // 距離充分、発射! from.sleep = 10; var missile = { x:from.x, y:from.y, team:from.team, angle: Math.atan2(dy, dx), speed: 10 }; missiles.push(missile); } } } $('#drag').draggable('hoge'); canvas.droppable(); canvas.drop(function(ev){ function createUnit(x, y) { var unit = {x: x, y: y, vx: 0, vy: 0, life: 10, team: 0, sleep: 0}; units.push(unit); } var dx = ev.pageX -canvas.position().left; var dy = ev.pageY - canvas.position().top; createUnit(dx, dy); }); }); <canvas id='world' width='320' height='320'> <p>test</p> </canvas> <p draggable='true' id='drag'>drag & drop me.</p> TowerDefence(HTML5 DnD + Canvas) body { background-color: #DDDDDD; font: 30px sans-serif; } canvas { display: block; } #drag { border: 1px dashed black; cursor: pointer; } DnD plugin /* DnD plugin */ (function(){ jQuery.fn.draggable = function(data, type) { type = type || 'text/plain'; this.bind('dragstart', function(ev) { var dt = ev.originalEvent.dataTransfer; dt.setData(type, data); return true; }); }; jQuery.fn.droppable = function(){ this.bind('dragover', function(ev) { ev.preventDefault(); return false; }); }; jQuery.fn.drop = function(callback){ this.bind('drop', function(ev) { callback(ev); ev.stopPropagation(); return false; }); }; })(jQuery); /* グローバル変数群 */ units = []; missiles = []; colors = ['rgba(0, 0, 255, 0.8)', 'rgba(255, 0, 0, 0.8)']; /* ready? */ $(function(){ canvas = document.getElementById('world'); ctx = canvas.getContext('2d'); canvas = $(canvas); initCanvas(); setInterval(scheduled, 60); // unitsの排他制御は必要?JSはシングルスレッドのはず function scheduled() { createEnemy(); moveUnits(); moveMissiles(); fireMissiles(); initCanvas(); drawUnits(); drawMissiles(); } function createEnemy() { if (Math.random() < 0.9) return; var y = Math.random() * 320; var vy = 0; var enemy = {x: -10, y: y, vx: 3, vy: vy, life: 10, team: 1, sleep: 0}; units.push(enemy); } function initCanvas() { ctx.strokeStyle = ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.fillRect(0, 0, 320, 320); } function drawUnits() { for (var i = 0; i < units.length; ++i) { var unit = units[i]; ctx.strokeStyle = ctx.fillStyle = colors[unit.team]; ctx.beginPath(); ctx.arc(unit.x, unit.y, 10, 0, Math.PI*2, false); ctx.fill(); } } function drawMissiles() { ctx.lineWidth = 2; for (var i = 0; i < missiles.length; ++i) { var missile = missiles[i]; ctx.strokeStyle = ctx.fillStyle = colors[missile.team]; ctx.beginPath(); ctx.moveTo(missile.x, missile.y); ctx.lineTo(missile.x + Math.cos(missile.angle) * missile.speed, missile.y + Math.sin(missile.angle) * missile.speed); ctx.stroke(); } ctx.lineWidth = 0; } function moveUnits() { for (var i = 0; i < units.length; ++i) { var unit = units[i]; unit.x += unit.vx; unit.y += unit.vy; if (unit.sleep) unit.sleep--; } function isLive(elem, index, array) { return elem.life > 0 && elem.x > -20 && elem.x < 340 && elem.y > -20 && elem.y < 340; } units = units.filter(isLive); } function moveMissiles() { for (var i = 0; i < missiles.length; ++i) { var missile = missiles[i]; missile.x += missile.speed * Math.cos(missile.angle); missile.y += missile.speed * Math.sin(missile.angle); } function isLive(elem, index, array) { return elem.x > -20 && elem.x < 340 && elem.y > -20 && elem.y < 340; } missiles = missiles.filter(isLive); } function fireMissiles() { for (var i = 0; i < units.length; ++i) { var from = units[i]; if (from.team == 1 || from.sleep > 0) { continue; } for (var j = 0; j < units.length; ++j) { var to = units[j]; if (from.team == to.team) { continue; } var dx = to.x - from.x; var dy = to.y - from.y; var dist = Math.sqrt(dx * dx + dy * dy); if (dist > 40) { continue; } // 距離充分、発射! from.sleep = 10; var missile = { x:from.x, y:from.y, team:from.team, angle: Math.atan2(dy, dx), speed: 10 }; missiles.push(missile); } } } $('#drag').draggable('hoge'); canvas.droppable(); canvas.drop(function(ev){ function createUnit(x, y) { var unit = {x: x, y: y, vx: 0, vy: 0, life: 10, team: 0, sleep: 0}; units.push(unit); } var dx = ev.pageX -canvas.position().left; var dy = ev.pageY - canvas.position().top; createUnit(dx, dy); }); }); <canvas id='world' width='320' height='320'> <p>test</p> </canvas> <p draggable='true' id='drag'>drag & drop me.</p> body { background-color: #DDDDDD; font: 30px sans-serif; } canvas { display: block; } #drag { border: 1px dashed black; cursor: pointer; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? DnD plugin 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/oJjB/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/eller86/oJjB" title="TowerDefence(HTML5 DnD + Canvas)">TowerDefence(HTML5 DnD + Canvas) - jsdo.it - share JavaScript, HTML5 and CSS</a></p> canvas dnd html5 jquery Tweet twitter Tags canvas dnd html5 jquery Forked sort new page view favorite forked forked from: TowerDefence(HTML.. zerdang 00 408views 161/4/11 TowerDefence(HTML5 DnD + Canva.. eller86 11 953views 261/4/11