/asteroids.html
HTML | 336 lines | 306 code | 30 blank | 0 comment | 0 complexity | 8670191dcfad96a4a52917b342c434ae MD5 | raw file
- <html>
- <head>
- <script type="application/javascript" src="jgame.js?sa=fdsjkb"></script>
- <script type="application/javascript">
- onload = function() {
- function collision(p1, r1, p2, r2){
- var a = r1 + r2;
- var dx = p1.x - p2.x;
- var dy = p1.y - p2.y;
- return a * a > (dx * dx + dy * dy);
- }
- var Shot = new jgame.Class({
- $init: function(){
- this.x = 0;
- this.y = 0;
- this.width = 4;
- this.height = 4;
- this.show = true;
- this.dx = 0;
- this.dy = 0;
- this.speed = 6;
- },
- update: function(c, ts){
- if (!this.show) return;
- this.x += this.dx * this.speed;
- this.y += this.dy * this.speed;
-
- // replace at screens edge
- if (this.x + this.width > WIDTH) {
- this.x = -this.width;
- } else if (this.x + this.width < 0) {
- this.x = WIDTH - this.width;
- }
- if (this.y + this.height > HEIGHT) {
- this.y = -this.height;
- } else if (this.y + this.height < 0) {
- this.y = HEIGHT - this.height;
- }
- c.beginPath();
- c.strokeStyle = "#0000C8";
- c.arc(this.x, this.y, 5, 0, Math.PI*2, true);
- c.closePath();
- c.stroke();
- }
- });
-
- var Explosion = new jgame.Class({
- $init: function(){
- this.x = 0;
- this.y = 0;
- this.width = 80;
- this.height = 80;
- this.show = true;
- this.frameDelay = 2;
- this.frames = [];
- this.frameIndex = 0;
- },
- update: function(c, ts){
- if (!this.show) return;
- if (ts % this.frameDelay == 0) {
- ++this.frameIndex
- if (this.frameIndex >= this.frames.length) {
- this.show = false;
- return;
- }
- }
- var img = this.frames[this.frameIndex];
- c.drawImage(img, this.x, this.y, this.width, this.height);
- }
- });
- var Asteroid = new jgame.Class({
- $init: function(){
- this.x = Math.random() * WIDTH;
- this.y = Math.random() * HEIGHT;
- this.width = 64;
- this.height = 64;
- this.show = true;
- var rand = Math.random()*360;
- this.dx=Math.cos(2.0*Math.PI*(rand-90)/360.0);
- this.dy=Math.sin(2.0*Math.PI*(rand-90)/360.0);
- this.speed = Math.random()*1+1;
- this.frameDelay = 2;
- this.frames = [];
- this.frameIndex = Math.floor(Math.random()*16);
- },
- update: function(c, ts){
- this.x += this.dx + this.speed;
- this.y += this.dy + this.speed;
-
- // replace at screens edge
- if (this.x + this.width > WIDTH) {
- this.x = -this.width;
- } else if (this.x + this.width < 0) {
- this.x = WIDTH - this.width;
- }
- if (this.y + this.height > HEIGHT) {
- this.y = -this.height;
- } else if (this.y + this.height < 0) {
- this.y = HEIGHT - this.height;
- }
- if (ts % this.frameDelay == 0) {
- if (++this.frameIndex > this.frames.length - 1) {
- this.frameIndex = 0;
- }
- }
- var img = this.frames[this.frameIndex];
- c.drawImage(img, this.x, this.y, this.width, this.height);
-
- }
- });
- var Ship = new jgame.Class({
- $init: function(){
- this.x = 200;
- this.y = 200;
- this.width = 64;
- this.height = 64;
- this.show = true;
- this.angle = 0;
- this.tangle = 0;
- this.dx = 0;
- this.dy = 0;
- this.movex = 0;
- this.movey = 0;
- this.acceleration = .3;
- this.friction = .01;
- this.maxVelocity = 8;
- this.frames = [];
- this.force = 0;
- },
- update: function (c) {
- if (!this.show) return;
- //angle
- this.angle += this.tangle;
- if (this.angle >= 360) {
- this.angle -= 360;
- } else if (this.angle < 0) {
- this.angle += 360;
- }
- // friction
- if (this.movex > 0) {
- this.movex -= this.friction;
- } else if (this.movex < 0) {
- this.movex += this.friction;
- }
- if (this.movey > 0) {
- this.movey -= this.friction;
- } else if (this.movey < 0) {
- this.movey += this.friction;
- }
-
- if (this.force) {
- this.dx=Math.cos(2.0*Math.PI*(this.angle-90)/360.0);
- this.dy=Math.sin(2.0*Math.PI*(this.angle-90)/360.0);
-
- var mxn = this.movex + this.acceleration * this.dx;
- var myn = this.movey + this.acceleration * this.dy;
- var currentSpeed = Math.sqrt(mxn*mxn + myn*myn);
- if (currentSpeed < this.maxVelocity) {
- this.movex=mxn;
- this.movey=myn;
- }
- }
-
- // replace at screens edge
- if (this.x + this.width > WIDTH) {
- this.x = -this.width;
- } else if (this.x + this.width < 0) {
- this.x = WIDTH - this.width;
- }
- if (this.y + this.height > HEIGHT) {
- this.y = -this.height;
- } else if (this.y + this.height < 0) {
- this.y = HEIGHT - this.height;
- }
-
- this.x += this.movex;
- this.y += this.movey;
-
- var img = this.frames[this.angle/10];
- c.drawImage(img, this.x, this.y, this.width, this.height);
- }
- });
-
- var loop = new jgame.Loop(24, "canvas");
- var WIDTH = loop.width;
- var HEIGHT = loop.height;
- var c = loop.context;
-
- function loadImages(file, start, end){
- var fileParts = file.split('%d');
- var images = [];
- for (var i = 0; i <= end; i++) {
- var currentFile = fileParts[0] + i + fileParts[1];
- var img = new Image();
- img.src = currentFile;
- images[i] = img;
- }
- return images;
- }
- var bgImage = new Image(640, 480);
- bgImage.src = 'img/space.png';
-
- var explo = new Explosion();
- explo.show = false;
- explo.frames = loadImages("img/explosion/aexplosion_fr_%d.png", 0, 14);
-
- var ship = new Ship();
- ship.frames = loadImages("img/ship/aship_fr_%d.png", 0, 35);
-
- var shot = new Shot();
- shot.show = false;
- ship.frames = loadImages("img/ship/aship_fr_%d.png", 0, 35);
-
- var asteroidFrames = loadImages("img/asteroid/aasteroid_fr_%d.png", 0, 15);
- var asteroids = [];
- for (var i = 0; i < 8; i++) {
- asteroids[i] = new Asteroid();
- asteroids[i].frames = asteroidFrames;
- }
-
- // bg
- c.fillStyle = "#000000";
- //c.fillRect(0, 0, WIDTH, HEIGHT);
- var fps = 0;
- loop.loop = function(){
- fps = fps >= this.fps ? 0 : fps + 1
- c.drawImage(bgImage, 0, 0, WIDTH, HEIGHT);
- // c.fillRect(0, 0, WIDTH, HEIGHT);
- shot.update(c);
- ship.update(c);
- explo.update(c, fps);
- for (var i in asteroids) {
- if (ship.show) {
- if (collision(ship, ship.width/3, asteroids[i], asteroids[i].width/3)) {
- explo.x = ship.x
- explo.y = ship.y
- explo.frameIndex = 0;
- explo.show = true;
- ship.show = false;
- }
- }
- if (shot.show) {
- if (collision(shot, 5, asteroids[i], asteroids[i].width/3)) {
- delete asteroids[i];
- continue;
- }
- }
- asteroids[i].update(c, fps);
- }
- }
- loop.start();
-
-
-
- window.document.onkeypress = function(e){
- //log(e.keyCode);
- if (e.keyCode == '0' && !shot.show && ship.show) { // space
- shot.dx = Math.cos(2.0*Math.PI*(ship.angle-90)/360.0)
- shot.dy = Math.sin(2.0*Math.PI*(ship.angle-90)/360.0)
- shot.x = ship.x + ship.width / 2
- shot.y = ship.y + ship.height / 2
- shot.show = true;
- setTimeout(function(){
- shot.show = false;
- }, 2000);
- }
- }
-
- window.document.onkeydown = function(e){
- // turn left/right
- if (e.keyCode == '37') { // left
- ship.angle -= 10;
- } else if (e.keyCode == '39') { // right
- ship.angle += 10;
- }
-
- // angle
- if (e.keyCode == '37') { // left
- ship.tangle -= 10;
- } else if (e.keyCode == '39') { // right
- ship.tangle += 10;
- }
- // movement
- if (e.keyCode == '38') { // up
- ship.force = 1;
- }
- };
-
- window.document.onkeyup = function(e){
- //angle
- if (e.keyCode == '37' || e.keyCode == '39') { // left/right
- ship.tangle = 0;
- }
- // movement
- if (e.keyCode == '38') { // up
- ship.force = 0;
- }
- };
- if (showControls)
- showControls(loop);
- }
- </script>
- </head>
- <body >
- <canvas id="canvas" style="border: 1px solid black; padding 10px;"
- width="640" height="480"></canvas>
- <script>
- function showControls(loop){
- var e = document.getElementById('ctrl_pause');
- function pauseLoop(e){
- loop.pause();
- }
- e.onclick = pauseLoop;
- var e = document.getElementById('ctrl_fps');
- e.value = loop.fps;
- e.onchange = function(e){
- loop.fps = e.currentTarget.value;
- loop.restart();
- }
- }
- </script>
- <div id="controls">
- <input type="button" id="ctrl_pause" value="pause" />
- |
- FPS:<input type="text" id="ctrl_fps" size="2" />
- </div>
- </body>
-
- </html>