Forked from: eller86's HTML5 DnD + Canvas diff(150)

TowerDefence(HTML5 DnD + Canvas)

eller86

2010-08-28 23:01:57

License: MIT License

Fork: 2

Fav: 0

View: 1276

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

TowerDefence(HTML5 DnD + Canvas)

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

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/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>

QR Code