-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
25 lines (24 loc) · 9.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html style="background-color: #10161A">
<head>
<title>Dodger</title>
</head>
<body>
<canvas id="mycanvas" height="600" width="900"></canvas>
</body>
</html>
<style>
body {
text-align: center;
background-color: #10161A;
padding-top: 20px;
}
#mycanvas {
/* border: 2px solid white; */
background-color: rgb(250, 250, 200);
margin: auto;
}
</style>
<script>
window.onload=start_app;
function start_app(){initialize(),loop()}function game_screen(){clear_canvas(),update(),draw(),button.is_set.esc&&(_.collided=3)}function loop(){get_screen[_.collided](),queue()}function queue(){window.requestAnimFrame(loop)}function Vector(a,b){this.x=a,this.y=b}function Ball(a,b,c,d,e,f,g,h,i){this.radius=a,this.grow=e||0,this.mass=i,console.log(this.mass),this.r=Math.floor(f)||0,this.g=Math.floor(g)||0,this.b=Math.floor(h)||0,this.pos=b||new Vector(0,0),this.vel=c||new Vector(0,0),this.acc=d||new Vector(0,0)}function clear_canvas(){_.canvas.ctx.fillStyle="rgba(0, 0, 0, 0.2)",_.canvas.ctx.fillRect(0,0,_.canvas.c.width,_.canvas.c.height)}function initialize(){_.you=new Ball(_.yradius,new Vector(200,200),new Vector(0,0),new Vector(0,0),1,200,100,210),_.canvas.c=document.getElementById("mycanvas"),_.canvas.ctx=_.canvas.c.getContext("2d"),_.height=_.canvas.c.height,_.width=_.canvas.c.width,_.enemies=new LinkedList,draw_score.timer=(new Date).getTime(),_.time=0,_.kills=0}function update(){update_you.update(),update_enemies(),check_ball_collisions(),check_enemies_collisions()}function check_enemies_collisions(){for(var b,c,d,a=_.enemies.first,e=!1;null!=a;){for(c=a.data,b=a.next;null!=b;){if(d=b.data,Math.pow(c.pos.x-d.pos.x,2)+Math.pow(c.pos.y-d.pos.y,2)<=Math.pow(c.radius+d.radius,2)){_.kills+=2,explosion.create(c.pos.x,c.pos.y),_.enemies.remove(b),null!=a.next?(a=a.next,e=!0,_.enemies.remove(a.previous)):(_.enemies.remove(a),a=null);break}b=b.next}null==a||e||(a=a.next),e=!1}check_enemies_boundary_conditions()}function check_ball_collisions(){for(var b,a=_.enemies.first;a;){if(b=a.data,Math.pow(b.pos.x-_.you.pos.x,2)+Math.pow(b.pos.y-_.you.pos.y,2)<=Math.pow(b.radius+_.you.radius,2)&&b.grow>=1)return explosion.create(_.you.pos.x,_.you.pos.y,20,50,200,5,20),end_screen.timer=(new Date).getTime(),end_screen.score=_.time*_.kills,_.collided=1,void 0;a=a.next}(_.you.pos.x<=_.you.radius||_.you.pos.x+_.you.radius>=_.width||_.you.pos.y<=_.you.radius||_.you.pos.y+_.you.radius>=_.height)&&(explosion.create(_.you.pos.x,_.you.pos.y,20,50,200,5,20),end_screen.timer=(new Date).getTime(),end_screen.score=_.time*_.kills,_.collided=1)}function update_enemies(){add_new_enemy();for(var c,d,e,a=_.enemies.first,b=0;null!=a;)e=a.data,e.grow>=1&&e.mass?(e.grow=1,c=_.you.pos.x-e.pos.x,d=_.you.pos.y-e.pos.y,b=Math.sqrt(c*c+d*d),e.acc.x=.3*(c/b)-e.vel.x/20,e.acc.y=.3*(d/b)-e.vel.y/20,e.move()):e.grow+=1/120,e.grow>1&&!e.mass&&(e.grow=1),a=a.next}function add_new_enemy(){var a,b;((new Date).getTime()-add_new_enemy.timer)*_.time/5>_.rate&&(b=Math.round(Math.random()),a=new Ball(_.eradius,new Vector(Math.random()*_.canvas.c.width,Math.random()*_.canvas.c.height),null,null,0,200*Math.random()+55,200*Math.random()+55,200*Math.random()+55,b),_.enemies.append(a),add_new_enemy.timer=(new Date).getTime())}function check_enemies_boundary_conditions(){for(var b,a=_.enemies.first;null!=a;){if(b=a.data,b.pos.x<=b.radius||b.pos.x+b.radius>=_.width||b.pos.y<=b.radius||b.pos.y+b.radius>=_.height){if(_.kills++,explosion.create(b.pos.x,b.pos.y),null!=a.next){a=a.next,_.enemies.remove(a.previous);continue}_.enemies.remove(a);break}a=a.next}}function draw(){_.you.draw(),draw_enemies(),explosion.draw(),draw_score()}function draw_enemies(){for(var a=_.enemies.first;null!=a;)a.data.draw(),a=a.next}function draw_score(){(new Date).getTime()-draw_score.timer>1e3&&(_.time++,draw_score.timer=(new Date).getTime());var a=_.canvas.ctx;a.fillStyle="rgba( 200, 150, 250, 0.5 )",_.canvas.ctx.fillText("Time: "+_.time,300,50),_.canvas.ctx.fillText("Kills: "+_.kills,550,50)}function setter(a){button.hasOwnProperty(a.keyCode)&&(button.is_set[button[a.keyCode]]=!0)}function unsetter(a){button.hasOwnProperty(a.keyCode)&&(button.is_set[button[a.keyCode]]=!1)}function end_screen(){if((new Date).getTime()-end_screen.timer<1e3)return clear_canvas(),explosion.draw(),void 0;var a=_.canvas.ctx;a.fillStyle="rgba(0, 0, 0, 0.8)",a.fillRect(0,0,_.canvas.c.width,_.canvas.c.height),a.fillStyle="rgba(250, 250, 250, 1)",a.fillText("you scored = Kills * Time",150,100),a.font="Italic 100px Happy Monkey, Calibri",a.fillText(end_screen.score,340,220),a.font="Italic 50px Happy Monkey, Calibri",a.fillText("press 'ENTER' to play again",150,400),a.fillText("or 'ESC' to go home",150,500),initialize(),button.is_set.enter?_.collided=0:button.is_set.esc&&(_.collided=2)}function home_screen(){var a=_.canvas.ctx,b="DODGE",c="Dodge the enemies.",d="Beware, some of them can even stalk you.",e="Use Arrow Keys to move in",f="8 different directions.",g="let's see how good are your reflexes.";rule6="Happy Dodging",rule7="press 'ENTER' to play",a.fillStyle="rgba( 0, 0, 0, 0.8 )",a.fillRect(0,0,_.canvas.c.width,_.canvas.c.height),a.fillStyle="rgba(255,255,255,0.8)",a.font="Italic 50px Happy Monkey, Calibri",a.fillText(b,_.width/2-100,50),a.font="Italic 30px Happy Monkey, Calibri",a.fillText(c,50,120),a.fillText(d,50,180),a.fillText(e,50,240),a.fillText(f,50,300),a.fillText(g,50,360),a.fillText(rule6,_.width/2-150,410),a.font="Italic 50px Happy Monkey, Calibri",a.fillText(rule7,_.width/2-300,510),button.is_set.enter&&(_.collided=0)}function paused_screen(){var a=_.canvas.ctx;a.fillStyle="rgba( 0, 0, 0, 0.1)",a.fillRect(0,0,_.canvas.c.width,_.canvas.c.height),a.fillStyle="rgba(255,255,255,0.8)",a.fillText("paused",200,200),a.fillText("press 'ENTER' to continue",200,260),button.is_set.enter&&(_.collided=0)}window.onload=start_app,game_data={canvas:{c:null,ctx:null},height:0,width:0,yradius:25,eradius:8,you:null,enemies:null,v:6,frame_rate:0,rate:2e3,collided:2,time:0,kills:0};var _=game_data,get_screen={2:home_screen,0:game_screen,1:end_screen,3:paused_screen};Vector.prototype.add=function(a){this.x+=a.x,this.y+=a.y},Ball.prototype={draw:function(){var a=_.canvas.ctx;a.save(),a.beginPath(),a.arc(this.pos.x,this.pos.y,this.radius*this.grow,0,2*Math.PI),a.fillStyle="rgba( "+this.r+", "+this.g+", "+this.b+", 0.5 )",a.fill(),a.restore()},move:function(){this.vel.add(this.acc),this.pos.add(this.vel)}};var update_you={previous_value:0,update:function(){var a=button.is_set,b=1*a.up+2*a.down+4*a.left+8*a.right;a.up+a.down+a.left+a.right>=3||((this.previous_value!=b||0==b)&&this[b](),_.you.move())},0:function(){_.you.vel.x=0,_.you.vel.y=0},1:function(){_.you.vel.x=0,_.you.vel.y=-_.v},2:function(){_.you.vel.x=0,_.you.vel.y=_.v},4:function(){_.you.vel.x=-_.v,_.you.vel.y=0},8:function(){_.you.vel.x=_.v,_.you.vel.y=0},3:function(){_.you.vel.x=0,_.you.vel.y=0},5:function(){_.you.vel.x=-_.v/1.414,_.you.vel.y=-_.v/1.414},9:function(){_.you.vel.x=_.v/1.414,_.you.vel.y=-_.v/1.414},6:function(){_.you.vel.x=-_.v/1.414,_.you.vel.y=_.v/1.414},10:function(){_.you.vel.x=_.v/1.414,_.you.vel.y=_.v/1.414},12:function(){_.you.vel.x=0,_.you.vel.y=0}};add_new_enemy.timer=0;var button={38:"up",40:"down",37:"left",39:"right",13:"enter",27:"esc",is_set:{up:!1,down:!1,left:!1,right:!1,enter:!1,esc:!1}};document.addEventListener("keydown",setter,!1),document.addEventListener("keyup",unsetter,!1);var Node=function(a){this.data=a,this.next=null,this.previous=null},LinkedList=function(){this.first=null,this.last=null,this.length=0};LinkedList.prototype={append:function(a){var b=new Node(a);null!=this.first?(this.last.next=b,b.previous=this.last,this.last=b):(this.first=b,this.last=b),this.length++},remove:function(a){var b=a.previous,c=a.next;null!==b&&null!==c?(b.next=c,c.previous=b):null===b&&null!==c?(this.first=c,c.previous=null):null!==b&&null===c?(this.last=b,b.next=null):(this.first=null,this.last=null),this.length--}},end_screen.timer=0;var explosion={particles:[],flag:!0,particle:function(){this.scale=1,this.x=0,this.y=0,this.radius=20,this.color="#000",this.velocityX=0,this.velocityY=0,this.scaleSpeed=.5,this.update=function(a){a=a||16.67,this.scale-=this.scaleSpeed*a/1e3,this.scale<=0&&(this.scale=0),this.x+=this.velocityX*a/1e3,this.y+=this.velocityY*a/1e3},this.draw=function(){var a=_.canvas.ctx;a.save(),a.translate(this.x,this.y),a.scale(this.scale,this.scale),a.beginPath(),a.arc(0,0,this.radius,0,2*Math.PI,!0),a.closePath(),a.fillStyle=this.color,a.fill(),a.restore()}},create_one:function(a,b,c,d,e,f,g,h,i){for(var h=h||5,i=i||15,e=e||6,f=f||20,g=g||60,j=1,k=4,l=0;360>l;l+=Math.round(360/e)){var m=new this.particle;m.x=a,m.y=b,m.radius=this.randomFloat(h,i),m.color=c,m.scaleSpeed=this.randomFloat(j,k);var n=this.randomFloat(f,g);m.velocityX=n*Math.cos(l*Math.PI/180),m.velocityY=n*Math.sin(l*Math.PI/180),this.particles[d]=m,d++}},create:function(a,b,c,d,e,f,g){this.create_one(a,b,"rgba(165,42,42,1)",0,c,d,e,f,g),this.create_one(a,b,"rgba(255, 163, 24,1)",5,c,d,e,f,g)},draw:function(){_.canvas.ctx;for(var b=0;b<this.particles.length;b++){var c=this.particles[b];c.update(),c.draw()}},randomFloat:function(a,b){return a+Math.random()*(b-a)}};window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}();
</script>