« »

Aujourd'hui, dans ce message , ACC @ nk veux vous pr?senter un simple Application JavaScript faite par HTML5 , le nom de ce jeu bas? sur le Web JavaScript est l'ast?ro?de , et des conseils pour jouer : nous avons juste besoin d'utiliser les touches fl?ch?es pour d?placer votre personnage ( vaisseau spatial en forme de triangle ) pour ?viter les ast?ro?des d?placer al?atoirement autour de
canvas objet ) - un exemple de code JavaScript bonne pour nous aider ? atteindre cette nouvelle technologie facilement
JavaScript Image Rotation script avec toile en HTML5

? Awesome Canvas tiroir avec HTML5

? HOT nouvelles API JavaScript avec HTML5

? 12 Awesome et Creative Jeux JavaScript vous devriez essayer

Étiquette: HTML5 JavaScript jeu, JavaScript Asteroid jeu, Jeu toile JavaScript, jeu en ligne ast?ro?de, t?l?chargement de jeu ast?ro?de, Application JavaScript, jeu bas? sur le Web JavaScript, Techniques HTML5, toile to

Rapport de nous cette erreur JavaScript

Demo
Agrandir
Recharger
New window

Gratuit iPage hébergement Web pour la première année MOMENT

Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage. Essayez iPage GRATUIT première année MOMENT

Code
Files
CSS
JavaScript
HTML
Imprimer

demo.html

Copy All x2

<style type="text/css"> 
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
* {
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

body {
  margin: 0px;
}
canvas {
  display: block;
  background-color: #113;
}
</style>

Copy All x2

<script type="text/javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
var Vector2 = function (x,y) {
  this.x= x || 0; 
  this.y = y || 0; 
};

Vector2.prototype = {

  reset: function ( x, y ) {

    this.x = x;
    this.y = y;

    return this;

  },

  toString : function (decPlaces) {
     decPlaces = decPlaces || 3; 
    var scalar = Math.pow(10,decPlaces); 
    return "[" + Math.round (this.x * scalar) / scalar + ", " + Math.round (this.y * scalar) / scalar + "]";
  },
  
  clone : function () {
    return new Vector2(this.x, this.y);
  },
  
  copyTo : function (v) {
    v.x = this.x;
    v.y = this.y;
  },
  
  copyFrom : function (v) {
    this.x = v.x;
    this.y = v.y;
  },  
  
  magnitude : function () {
    return Math.sqrt((this.x*this.x)+(this.y*this.y));
  },
  
  magnitudeSquared : function () {
    return (this.x*this.x)+(this.y*this.y);
  },
  
  normalise : function () {
    
    var m = this.magnitude();
        
    this.x = this.x/m;
    this.y = this.y/m;

    return this;  
  },
  
  reverse : function () {
    this.x = -this.x;
    this.y = -this.y;
    
    return this; 
  },
  
  plusEq : function (v) {
    this.x+=v.x;
    this.y+=v.y;
    
    return this; 
  },
  
  plusNew : function (v) {
     return new Vector2(this.x+v.x, this.y+v.y); 
  },
  
  minusEq : function (v) {
    this.x-=v.x;
    this.y-=v.y;
    
    return this; 
  },

  minusNew : function (v) {
     return new Vector2(this.x-v.x, this.y-v.y); 
  },  
  
  multiplyEq : function (scalar) {
    this.x*=scalar;
    this.y*=scalar;
    
    return this; 
  },
  
  multiplyNew : function (scalar) {
    var returnvec = this.clone();
    return returnvec.multiplyEq(scalar);
  },
  
  divideEq : function (scalar) {
    this.x/=scalar;
    this.y/=scalar;
    return this; 
  },
  
  divideNew : function (scalar) {
    var returnvec = this.clone();
    return returnvec.divideEq(scalar);
  },

  dot : function (v) {
    return (this.x * v.x) + (this.y * v.y) ;
  },
  
  angle : function (useRadians) {
    
    return Math.atan2(this.y,this.x) * (useRadians ? 1 : Vector2Const.TO_DEGREES);
    
  },
  
  rotate : function (angle, useRadians) {
    
    var cosRY = Math.cos(angle * (useRadians ? 1 : Vector2Const.TO_RADIANS));
    var sinRY = Math.sin(angle * (useRadians ? 1 : Vector2Const.TO_RADIANS));
  
    Vector2Const.temp.copyFrom(this); 

    this.x= (Vector2Const.temp.x*cosRY)-(Vector2Const.temp.y*sinRY);
    this.y= (Vector2Const.temp.x*sinRY)+(Vector2Const.temp.y*cosRY);
    
    return this; 
  },  
    
  equals : function (v) {
    return((this.x==v.x)&&(this.y==v.x));
  },
  
  isCloseTo : function (v, tolerance) {  
    if(this.equals(v)) return true;
    
    Vector2Const.temp.copyFrom(this); 
    Vector2Const.temp.minusEq(v); 
    
    return(Vector2Const.temp.magnitudeSquared() < tolerance*tolerance);
  },
  
  rotateAroundPoint : function (point, angle, useRadians) {
    Vector2Const.temp.copyFrom(this); 
    //trace("rotate around point "+t+" "+point+" " +angle);
    Vector2Const.temp.minusEq(point);
    //trace("after subtract "+t);
    Vector2Const.temp.rotate(angle, useRadians);
    //trace("after rotate "+t);
    Vector2Const.temp.plusEq(point);
    //trace("after add "+t);
    this.copyFrom(Vector2Const.temp);
    
  }, 
  
  isMagLessThan : function (distance) {
    return(this.magnitudeSquared()<distance*distance);
  },
  
  isMagGreaterThan : function (distance) {
    return(this.magnitudeSquared()>distance*distance);
  }
  
  
  // still AS3 to convert : 
  // public function projectOnto(v:Vector2) : Vector2
  // {
  //     var dp:Number = dot(v);
  // 
  //     var f:Number = dp / ( v.x*v.x + v.y*v.y );
  // 
  //     return new Vector2( f*v.x , f*v.y);
  //   }
  // 
  // 
  // public function convertToNormal():void
  // {
  //   var tempx:Number = x; 
  //   x = -y; 
  //   y = tempx; 
  //   
  //   
  // }    
  // public function getNormal():Vector2
  // {
  //   
  //   return new Vector2(-y,x); 
  //   
  // }
  // 
  // 
  // 
  // public function getClosestPointOnLine ( vectorposition : Point, targetpoint : Point ) : Point
  // {
  //   var m1 : Number = y / x ;
  //   var m2 : Number = x / -y ;
  //   
  //   var b1 : Number = vectorposition.y - ( m1 * vectorposition.x ) ;
  //   var b2 : Number = targetpoint.y - ( m2 * targetpoint.x ) ;
  //   
  //   var cx : Number = ( b2 - b1 ) / ( m1 - m2 ) ;
  //   var cy : Number = m1 * cx + b1 ;
  //   
  //   return new Point ( cx, cy ) ;
  // }
  // 

};

Vector2Const = {
  TO_DEGREES : 180 / Math.PI,    
  TO_RADIANS : Math.PI / 180,
  temp : new Vector2()
  };
(function () {

var spareBullets = [];

window.Bullet = function (ctx, x, y, angle) {
  // this is rather nasty - so I'm not sure why I'm doing it...
  if (this === window) {
    if (spareBullets.length) {
      var bullet = spareBullets.pop();
      bullet.init(x, y, angle);
      bullet.fresh = false;
      return bullet;
    } else {
      return new Bullet(ctx, x, y, angle);
    }
  }
  
  this.ctx = ctx;

  // initialise
  this.init(x, y, angle);
  return this;
};

Bullet.prototype = {
  init: function (x, y, angle) {
    this.fresh = true;
    this.pos = new Vector2(x,y);
    this.vel = new Vector2(Bullet.speed,0);

    this.vel.rotate(angle);

    this.enabled = true;    

    // 15 is the length of the ship
    this.pos.plusEq(this.vel.clone().normalise().multiplyEq(15));    
  },
  
  checkEnabled: function ()  {
    var ctx = this.ctx;
    
    if (this.enabled == false) {
      return;
    }
    
    if (this.pos.x < 0 || this.pos.x > ctx.canvas.width) this.enabled = false;

    if (this.pos.y < 0 || this.pos.y > ctx.canvas.height) this.enabled = false;
    
    if (this.enabled == false) {
      spareBullets.push(this);
    }
  },
  
  update: function () {
    this.pos.plusEq(this.vel);     
    this.checkEnabled();
    return this;    
  },
  
  draw: function () {
    var ctx = this.ctx,
        pos = this.pos;
        
    ctx.save();
    ctx.lineWidth = 2; 
    ctx.strokeStyle = "#fff"; 
    ctx.beginPath(); 
    ctx.arc(pos.x, pos.y, 2, 0, Math.PI*2, true); 
    ctx.stroke();
    ctx.restore();
    return this;    
  }
};

// static
Bullet.speed = 5;

})();


Asteroid = function (x,y,radius)
{
  this.pos = new Vector2(x,y); 
  this.vel = new Vector2(0,0); 
  
  this.points; 
  

  this.enabled = true; 
  
  
  // temp vector to calculate distance from circle in hitTest
  this.diff = new Vector2(0,0); 
  
  this.reset = function (radius) {
    this.points = []; 
    this.radius = radius; 
    
    var temp = new Vector2(radius, 0);
    
    for (var angle = 0; angle<360; angle+= random(0, 45)) {
      temp.reset(random(radius / 2, radius),0); 
      temp.rotate(angle);
      
      this.points.push(temp.clone()); 
    }
  
    
  };
  
  this.reset(radius); 
  
  this.update = function(canvas) {
    
    this.pos.plusEq(this.vel); 

    if(this.pos.x+this.radius < 0) this.pos.x = canvas.width+this.radius; 
    else if (this.pos.x-this.radius > canvas.width) this.pos.x = -this.radius; 
      
    if(this.pos.y+this.radius < 0) this.pos.y = canvas.height+this.radius; 
    else if (this.pos.y-this.radius > canvas.height) this.pos.y = -this.radius; 
        
  };
  
  this.draw = function(ctx) {
    ctx.save(); 
    ctx.translate(this.pos.x, this.pos.y); 
    ctx.strokeStyle = "#fff";
    ctx.fillStyle = '#000';
    ctx.lineWidth = 2; 
    ctx.beginPath(); 
  
    for(var i = 0; i<this.points.length; i++) {
      
      var p = this.points[i % this.points.length]; 
      ctx.lineTo(p.x, p.y); 
      
    }
    
    ctx.closePath(); 
    ctx.fill();
    ctx.stroke();
    ctx.restore(); 
  };
  
  this.hitTest = function(x,y) {
    
    this.diff.copyFrom(this.pos); 
    this.diff.x-=x; 
    this.diff.y-=y; 
    
    var distanceSq = (this.diff.x * this.diff.x) + (this.diff.y*this.diff.y);
    return distanceSq < (this.radius * this.radius);
    
  };
  
};

ShipMoving = function(x,y) {
  this.pos = new Vector2(x,y); 
  this.angle = 0; 
  this.vel = new Vector2(0,0); 
  this.temp = new Vector2(0,0); 
  
  this.thrustPower = 0.1; 
  this.rotateSpeed = 5; 
  
  this.thrusting = false;
  this.invulnerable = false;
  this.thrustAmount = 0;
  
  this.dead = [];  

  this.update = function() {
    this.pos.plusEq(this.vel); 
  };
  
  this.thrust = function() {
    this.temp.reset(this.thrustPower,0); 

    this.temp.rotate(this.angle); 
    this.vel.plusEq(this.temp); 
  };
  
  this.rotateLeft = function() {
    this.angle -= this.rotateSpeed; 
  };
  
  this.rotateRight = function() {
    this.angle += this.rotateSpeed; 
  };
  
  this.hit = function () {
    var n = 20;
    while (n--) {
      this.dead.push(new Vector2(random(3, 6), 0));
      this.dead[this.dead.length - 1].rotate(Math.random() * Math.PI * 2, true);
    }
  };
  
  this.isdead = function () {
    return !!this.dead.length;
  };
  
  this.draw = function(c) {    
    c.save();
    c.translate(this.pos.x, this.pos.y); 
    c.rotate(this.angle * Vector2Const.TO_RADIANS);

    if (this.invulnerable == false && !this.isdead()) {
      c.lineWidth = 4; 

      if (this.thrustAmount) {
        c.beginPath();
        c.moveTo(-11, -3);
        c.lineTo(-11, 3);
        c.lineTo(-12 -this.thrustAmount, 0);
        c.closePath(); 
        c.fillStyle = 'hsla(3, 100%, 50%, 0.9)';
        c.fill();      
        c.strokeStyle = 'hsla(32, 100%, 50%, 0.7)';
        c.stroke();
      }
    
      c.lineWidth = 2; 
      c.strokeStyle = "#fff"; 
    
      c.beginPath();
      c.moveTo(-10, -10);
      c.lineTo(-10, 10);
      c.lineTo(14, 0);
      c.closePath(); 
      c.stroke();      
    } else if (this.dead.length) {
      var i = this.dead.length;
      c.lineWidth = 2; 
      c.fillStyle = 'hsla(1, 100%, 50%, 0.75)'; 
      while (i--) {
        this.dead[i].multiplyEq(1.05);

        c.beginPath();
        c.arc(this.dead[i].x, this.dead[i].y, 2, 0, Math.PI * 2, true);
        c.closePath(); 
        c.fill();
      }
    }
    
    if (this.thrusting && this.thrustAmount < 10) {
      this.thrustAmount++;
    } else if (this.thrustAmount > 0) {
      this.thrustAmount--;
    }
    
    c.restore();
  };
}; 
// canvas element and 2D context

var canvas = document.createElement('canvas'),
  c = canvas.getContext('2d'),
  touch = 'createTouch' in document;

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.body.appendChild(canvas);

c.strokeStyle = "#ffffff";

var mouseX, mouseY, 
  halfWidth = canvas.width/2, 
  halfHeight = canvas.height/2,
  bullets = [],
  spareAsteroids = [],
  ship = new ShipMoving(halfWidth, halfHeight),
  thrusting = false,
  rotateLeft = false, 
  rotateRight = false,
  grad = c.createLinearGradient(0, 0, 0, canvas.height),
  asteroids = [],
  trail = 0.85;
  

grad.addColorStop(0, 'hsla(240,80%,2%,' + trail + ')');
grad.addColorStop(1, 'hsla(240,100%,15%,' + trail + ')');

timer = setInterval(draw, 1000/35); 

for (var i = 0; i < (touch ? 5 : 10); i++) {
  asteroids.push(new Asteroid(random(0, canvas.width), random(0, canvas.height), 50));
  asteroids[i].vel.reset(1,0).rotate(random(0,360));
}


function draw() {
  c.fillStyle = '#000'; //grad;
  c.fillRect(0,0,canvas.width, canvas.height); 
  
  var bullet;
  for (var i=0; i<bullets.length; i++) {
    bullet = bullets[i];
    if (bullet.enabled) {
      bullet.update();
      bullet.draw();
    }
  }

  for (i = 0; i < asteroids.length; i++) {  
    var asteroid = asteroids[i], 
        hit = false;
    
    if (!ship.invulnerable && !ship.isdead() && asteroid.hitTest(ship.pos.x, ship.pos.y)) {
      // you lose!
      ship.hit();
    }
    
    if(!asteroid.enabled) continue; 
    
    if (!ship.isdead()) {
      for (var j = 0; j < bullets.length; j++) {
        if (bullets[j].enabled) {
          hit = asteroid.hitTest(bullets[j].pos.x, bullets[j].pos.y);
          if (hit) {
            bullets[j].enabled = false;
            break;
          }        
        }
      }      
    }
    
    if (hit) {
      if (asteroid.radius < 15) {
        asteroid.enabled = false; 
      } else {
        asteroid.reset(asteroid.radius/2);
        asteroid.vel.reset(random(-5,5),random(-5,5));
      
        makeNewAsteroid(asteroid.pos.x, asteroid.pos.y, asteroid.radius).vel.reset(random(-5,5),random(-5,5));
        makeNewAsteroid(asteroid.pos.x, asteroid.pos.y, asteroid.radius).vel.reset(random(-5,5),random(-5,5));
      }
    } else {
      asteroid.update(canvas);
      asteroid.draw(c); 
    }
  }

  if (ship.thrusting) ship.thrust(); 
  if (rotateLeft) ship.rotateLeft(); 
  if (rotateRight) ship.rotateRight(); 

  ship.update(); 

  if (ship.pos.x<0) ship.pos.x = canvas.width; 
  else if (ship.pos.x>canvas.width) ship.pos.x = 0;

  if (ship.pos.y<0) ship.pos.y = canvas.height; 
  else if (ship.pos.y>canvas.height) ship.pos.y = 0; 

  ship.draw(c);
}

function makeNewAsteroid(x, y, radius) {
  var newasteroid; 
  
  if (spareAsteroids.length > 0) {
    newasteroid = spareAsteroids.pop(); 
    newasteroid.pos.set(x, y); 
    newasteroid.radius = radius;   
  } else {
    newasteroid = new Asteroid(x, y, radius); 
    asteroids.push(newasteroid); 
  }
  
  return newasteroid;
}

function fire() {
  if (ship.isdead()) {
    return;
  }
  
  // only allow n bullets
  var limit = 5,
      i = bullets.length;
  
  while (i--) {
    if (bullets[i].enabled) {
      limit--;
    }
  }
  
  if (limit !== 0) {
    var bullet = Bullet(c, ship.pos.x, ship.pos.y, ship.angle);
    if (bullet.fresh) bullets.push(bullet);    
  }  
}

canvas.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );

document.addEventListener( 'touchstart', onTouchStart, false );
document.addEventListener( 'touchmove', onTouchMove, false );
document.addEventListener( 'touchend', onTouchEnd, false );

var swipe = [];

if (touch) {
  ship.thrustPower = 0.5;
}

function onTouchStart(e) {
  swipe = [];
  
  if (e.touches.length == 1) {
    // rotate & fire
    var v = new Vector2(e.touches[0].pageX-canvas.width/2, e.touches[0].pageY-canvas.height/2);
    ship.angle = v.angle();
    fire();
  } else if (e.touches.length == 2) {
    ship.thrusting = true;
    ship.thrust();
  } else if (e.touches.length == 3) {
    ship.invulnerable = true;
  }
}

function onTouchMove(e) {
  e.preventDefault();
} 

// window.addEventListener('devicemotion', function(event) {
//   var v = new Vector2(event.accelerationIncludingGravity.x, event.accelerationIncludingGravity.y);
//   ship.angle += v.angle() * 0.05;
// }, false);


function onTouchEnd(e) { 
  ship.thrusting = false;
  ship.invulnerable = false;
} 

function onKeyDown(e) {  
  if(e.keyCode == 38) ship.thrusting = true;
  else if (e.keyCode == 40) ship.invulnerable = true;
  else if(e.keyCode == 37) rotateLeft = true; 
  else if (e.keyCode == 39) rotateRight = true;
  else if (e.which == 32) fire();
}
function onKeyUp(e) {
  if (e.keyCode == 38) ship.thrusting = false;
  else if (e.keyCode == 40) ship.invulnerable = false;
  else if(e.keyCode == 37) rotateLeft = false; 
  else if (e.keyCode == 39) rotateRight = false;
}

function onMouseMove(event) {
  mouseX = event.offsetX;
  mouseY = event.offsetY;
}

function random(v1, v2){
  return ((Math.random()*(v2-v1))+v1);  
}

setTimeout(function () {
  window.scrollTo(1, 0);
}, 1000);
</script>

Copy All x2

<canvas height="609" width="1139"></canvas>

Commentaire (2)
Écrire

par iPhone development, 21/01/2013 05:01 PM
Réponse

WOw this is a great game HTML 5 has powered the basic html and given it new heights along with javascript html 5 can be used to create and do more complex tasks than before.

par Mobile app development, 17/05/2013 06:05 PM
HTML5 Réponse

Really HTML5 is playing key role in typical task.

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
~~Votre site~~

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

Sent (0)
Nouveau

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

ChainTutor.com YeuNu.com war.money index.services pornID.net choose.exchange CreditCard.rip XMQV.com Card.rip ApexBTC.com CTRCoin.com CryptoKD.com choose.works ABP3.com eChainBank.com ChatTotal.com ZWVQ.com system.money CoinHolo.com this.bid

Déposer jours:
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:

27/05/2011
Remy Sharp [more]
10,029
2
1
0
0.06 KBytes

Creative HTML5 et JavaScript jeu Asteroid - Langue: Française

5/5 1 votes / 10,029 previews / 2 commentaire 27/05/2011 Aujourd'hui, dans ce message , ACC @ nk veux vous pr?senter un simple ...Creative HTML5 et JavaScript jeu Asteroid - Creative HTML5 et JavaScript jeu Asteroid - Langue: Française

thebartstop[3] Cao Phong babe1907

Soyons premier membre de le faire

thebartstop