Skip to content

Instantly share code, notes, and snippets.

@Announcement

Announcement/planegame.html

Last active December 28, 2015 01:59
Show Gist options
  • Save Announcement/7424758 to your computer and use it in GitHub Desktop.
Save Announcement/7424758 to your computer and use it in GitHub Desktop.
Download ZIP
Plane game compiles and runs, throws errors no shooting down, need to add grid clicks
Raw
planegame.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Anonymous"/>
<meta name="keywords" content="javascript canvas resizeable plane game 1948"/>
<meta name="description" content="just another javascript canvas game"/>
<title>The Plane Game</title>
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; }
@media screen and (max-width: 641px) and (orientation: landscape) {
}
@media screen and (max-width: 461px) and (orientation: portrait) {
}
@media screen and (min-width: 461px) and (max-width: 1024px) {
body { background: #eee;}
canvas { background: #fff;}
}
@media screen and (min-width: 1024px) {
body { background: #eee;}
canvas { background: #fff;}
}
</style>
<!--link rel="stylesheet" href="alternate.css" media="print, projector"-->
</head>
<body>
<h1>A Plane Game</h1>
<canvas id="a">No canvas, no art.</canvas>
<h2>Controls</h2>
<p>
A, D: Left, Right<br/>
Q, E: Shoot, Explode<br/>
W, S: Time Warp, Pause<br/>
</p>
<script type="text/javascript">
<!--
var a = document.getElementById("a");
var b = a.getContext("2d");
//settings
var m = 50; // resolution multiplier, 50 = 800x450, 80 = 1280x720, 120 = 1920x1080
var BULLET_RATE = 8;
var FRAME_RATE = 30;
//var PLAYER_SPEED = 100;
var BULLET_SPEED = 392;
//don't touch
a.width=m*16;
a.height=m*9;
var d = 8;
var h = a.height/(d*9);
var w = a.width/(d*16);
var k = a.width/PLAYER_SPEED;
var xdim = 24;
var ydim = 32;
var xmul = a.width /xdim;
var ymul = a.height/ydim;
var LeaderBoards = [];
function map(){
var c = [];
var tricks = {};
function reg(x,y,z){//z is data btw
var i=0;
while(i<=c.length){
i++;
if (!c[i]){
c[i]=[x,y,z];
break;
}
}
return i;
}
function mov(id,x,y){
var z= c[id];
z[0] = x;
z[1] = y;
c[id]= z;
}
function kno(trick){
for (var tk in tricks)
if (tk.match(trick))
tricks[tk](tk.match(trick));
}
function rem(id){
console.log(c[id]);
//kno(c.slice(id,1));
c[id] = null;
}
function chk(x,y){
var i = c.length;
var c_tmp = [];
while (i-->0)
if (!!c[i]&&c[i][0]==x&&c[i][1]==y)
c_tmp.push(i);
return c_tmp;
}
function git(id){
return c[id].slice(0,3);
}
function tch(reg,func){
tricks[reg]=func;
}
function dox(){
return {'children':c,'tricks':tricks};
}
this.reg=reg;
this.mov=mov;
this.rem=rem;
this.git=git;
this.tch=tch;
this.chk=chk;
this.dox=dox;
return this;
}
var world1 = new map();
function Bullets(){
var list = [];
function shot(x,y){var i=0;
list.push([x,y,world1.reg(x,y,"BULLET-"+list.length)]);
}
function step(){
var i = list.length;
while (i-->0){
if (list[i][1]<-m){
world1.rem(list[i][2]);
list.splice(i,1);
continue;
}
list[i][1]-=ymul;
world1.mov(list[i][2],list[i][0],list[i][1]);
console.log(Math.round(list[i][0]/PLAYER_SPEED));
var tid = world1.chk(Math.round(Math.round(list[i][0]/PLAYER_SPEED)*PLAYER_SPEED),Math.ceil(list[i][1]/h)*h);
if (tid.length>0){
console.log("HIT!");
world1.rem(list[i][2]);
list.splice(i,1);
for (var n = 0; n <= tid.length; n++){
if (world1.git(n)[2].indexOf("ENEMY")!=-1)
world1.rem(tid[n]);
}
}
}
}
function draw(){
var i = list.length;
var size = m / 3;
while (i-->0){
b.beginPath();
b.fillStyle="#995";
b.strokeStyle="#000";
//b.arc(list[i][0],list[i][1],10,0,Math.PI*2,false);
b.moveTo(list[i][0],list[i][1]-size);
b.lineTo(list[i][0]-size,list[i][1]+size);
b.lineTo(list[i][0]+size,list[i][1]+size);
b.lineTo(list[i][0],list[i][1]-size);
b.stroke();
b.fill();
b.closePath();
}
}
this.shot=shot;
this.step=step;
this.draw=draw;
return this;
}
var gun = new Bullets();
function Airplane(){
var x=xdim/2*xmul;
var y=ydim*xmul;
var life
var oid = world1.reg(x,y,"PLAYER");
var lastShot = new Date();
var mLife = 100; //MaxLife
var rLife = mLife;//RelativeLife
var eLife = 3; //ExtraLives
var Score = 0;
var lastMove = new Date();
function ForceL(){
x-=xmul;
world1.mov(oid,x,y);
}
function ForceR(){
x+=xmul;
world1.mov(oid,x,y);
}
function Right(){
var now = new Date();
if (now-lastMove>1000/PLAYER_SPEED&&x<a.width-PLAYER_SPEED){
lastMove=now;
ForceR();
}
}
function Left(){
var now = new Date();
if (now-lastMove>1000/PLAYER_SPEED&&x>PLAYER_SPEED){
lastMove=now;
ForceL();
}
}
function Shoot(){
var now = new Date();
if (now-lastShot>1000/BULLET_RATE){
lastShot=now;
gun.shot(x,y);
}
}
function ForceS(){
gun.shot(x,y);
}
function draw(){
b.beginPath();
b.strokeStyle="#000";
b.fillStyle="#456";
b.arc(x,y,(m/2)+10,0,Math.PI*2,false);
b.fill();
b.stroke();
b.closePath();
b.beginPath();
b.strokeStyle="#000";
b.fillStyle="#fff";
b.rect(10,a.height-(m/2)-10,m*4,m/2);
b.fill();
b.stroke();
b.closePath();
b.beginPath();
b.strokeStyle="#000";
b.fillStyle="#f00";
b.rect(10,a.height-(m/2)-10,(m*4)*(rLife/mLife),m/2);
b.fill();
b.stroke();
b.closePath();
}
var kd = {'left':false,'right':false,'shoot':false};
function sndKey(key, enable){
kd[key]=enable;
}
function keys(){
for (var ki in kd)if(kd[ki]) console.log(ki);
if (kd['left']) Left();
if(kd['right'])Right();
if(kd['shoot'])Shoot();
}
function lu(){sndKey('left', false);}
function ld(){sndKey('left', true); }
function ru(){sndKey('right',false);}
function rd(){sndKey('right',true); }
function su(){sndKey('shoot',false);}
function sd(){sndKey('shoot',true); }
this.id=function(){return oid;};
this.lu=lu;
this.ld=ld;
this.ru=ru;
this.rd=rd;
this.su=su;
this.sd=sd;
this.rg=ForceR;
this.lg=ForceL;
this.sg=ForceS;
this.keys=keys;
this.draw=draw;
return this;
}
var player = new Airplane();
function Enemy(){
var list = [];
var lvl = 1;
function addEnemy(x,z){//x snap, y snap, plane type(lvl#)
console.log(x);
list.push([x*PLAYER_SPEED,0,world1.reg(x*PLAYER_SPEED,0,"ENEMY-"+list.length),0]);
}
addEnemy(Math.floor(Math.random()*(k-2))+1,0);
var pco = world1.git(player.id());
var moves = 4;
while(pco[0]!=list[0][0]&&--moves>0){
if (pco[0]<list[0][0]) player.rg();
else if (pco[0]>list[0][0]) player.lg();
else break;
pco = world1.git(player.id());
}
if (moves==0)console.log("Moves exhausted");else console.log("Moves: "+moves);
player.sg();
function remEnemy(id){
list.splice(id,1);
}
function step(){
var i = list.length;
while (i-->0){
list[i][1]+=h;
world1.mov(list[i][2],list[i][0],list[i][1]);
if (list[i][1]>a.height){
world1.rem(list[i][2]);
list.splice(i,1);
}
}
if (list.length>0)player.sg();
}
function draw(){
var i = list.length;
while (i-->0){
b.beginPath();
b.fillStyle="#f00";
b.strokeStyle="#000";
b.arc(list[i][0],list[i][1],m/2,0,Math.PI*2,false);
b.fill();
b.stroke();
b.closePath();
}
}
this.draw=draw;
this.step=step;
return this;
}
function Background(){
var bga=[];
var y = (d*9);
while (y-->0){
var x = (d*16);
bga[y]=[];
while (x-->0)
bga[y][x]=Math.random();
}
var step = function(){
var clouds = Math.floor(Math.random()*4);
bga.unshift(bga.pop());
}
var draw=function(){
for (y=0;y<d*9;y++){
for (x=0;x<d*16;x++){
b.beginPath();
b.fillStyle="rgba(160,170,180,"+bga[y][x]+")";
b.rect(x*w,y*h,w,h);
b.fill();
b.closePath();
}
}
y = (d*9)
b.beginPath();
b.strokeStyle="#000";
b.rect(1,1,a.width-2,a.height-2);
b.stroke();
b.closePath();
}
this.step=step;
this.draw=draw;
return this;
}
var bg = new Background();
var hostile = new Enemy();
var step=[];
var draw=[];
var keys=[];
step.push(gun.step);
step.push(hostile.step);
draw.push(gun.draw);
draw.push(player.draw);
draw.push(hostile.draw);
keys.push(player.keys);
function Render(){
b.clearRect(0,0,a.width,a.height);
bg.step();
bg.draw();
for (var i = 0; i<keys.length;i++){
keys[i]();
}
for (var i = 0; i<step.length;i++){
step[i]();
}
for (var i = 0; i<draw.length;i++){
draw[i]();
}
}
setInterval(Render,1000/FRAME_RATE);
document.body.onkeydown=function(e){
var kc = e.keyCode;
switch(kc){
case(65): //a
player.ld();
break;
case(68)://d
player.rd();
break;
case(81)://q
player.sd();
break;
case(69)://e
break;
case(87)://w
break;
case(83)://s
break;
default:
console.log(kc);
}
if (kc!=116)
e.preventDefault();
}
document.body.onkeyup=function(e){
var kc = e.keyCode;
switch(kc){
case(65): //a
player.lu();
break;
case(68)://d
player.ru();
break;
case(81)://q
player.su();
break;
case(69)://e
break;
case(87)://w
break;
case(83)://s
break;
default:
console.log(kc);
}
if (kc!=116)
e.preventDefault();
}
//-->
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment