js1024 2022

by Noncho Savov

HTML

<head>
    <title>demo ~ js1024</title>
    <meta name="author" content="author">
    <meta name="description" content="short_description">
    <meta name="title" content="demo">
    <meta charset=utf-8>
</head>
<body id=b>
<canvas id=a></canvas>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#a { position: relative; display: block; }
.play { position: fixed; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); font-size: 30px; font-family: arial, sans-serif; background: #f3f4f5; padding: 15px; border: 2px solid #ddd; border-radius: 5px; }
</style>

<script>

// Entry configuration
// ===================

var title = "title";

// Shim setup and polyfills (do not edit)
// ======================================

a.width = innerWidth; a.height = innerHeight;

c = a.getContext("2d");

d = document;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
a.requestPointerLock = a.requestPointerLock || a.mozRequestPointerLock || a.webkitRequestPointerLock;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (typeof OscillatorNode !== 'undefined' && OscillatorNode.prototype) {
    OscillatorNode.prototype.start = OscillatorNode.prototype.start || OscillatorNode.prototype.noteOn;
    OscillatorNode.prototype.stop = OscillatorNode.prototype.stop || OscillatorNode.prototype.noteOff;
}

// Add a start button if sound is present in the code
onload = () => {
    var entry_code = entry.innerText;
    var has_sound = false;
    if(entry_code.includes('eval')) {
        try {
            eval(entry_code.replace(/eval\(/g, 'throw(').replace(/eval\`/g, 'throw`'));
        }
        catch(e){
            entry_code = e;
        }
    }
   ...

JavaScript

w = a.width;
h = a.height;
s = h / 960;

a.width = h * 0.5625;
o = (w - a.width) / 2;
a.style.left = o + 'px';
w = a.width;

maxHealth = 10;
health = 10;
ammo = 100;

clicked = false;
shotX = 0;
shotY = 0;
shotBaseY = 0;
shotSize = 0;

destroyed = 0;

a.onmousedown = click;
a.onmouseup = release;

generateShip();

setInterval(loop, 16);

function random(max = 1) {
	return Math.random() * max;
}

function generateShip() {
	z = random() < 0.5;
	x = ((z ? 40 : 500) + random() * (z ? 160 : -160)) * s;
  y = (80 + random() * 280) * s;
  r = 20 + 20 * random();
  x1 = (x / s - 270) / -500;
  y1 = (y / s - 200) / -1000;
  r1 = 0;
}

function drawShip(x, y, r, p1 = 0, p2 = 7) {
	c.beginPath();
  c.arc(x, y, r * s, p1, p2);
  c.fill();
  c.closePath();
}

function fill(_color, _w, _h, _y = 0, _x = 0) {
	c.fillStyle = _color;
  c.fillRect(_x, _y, _w, _h);
}

function loop() {
	//c.width=c.width;
	//c.clearRect(0, 0, w, h);
  if (r1 < r) r1 ++;
  if (x < -r*s || x > (540+r)*s || y < -r*s) {
  	generateShip();
  }
  c.beginPath();
  fill('aqua', w, h / 2);
  fill('teal', w, h / 2, h / 2);
  fill('red', w, h / 20, h * 0.95);
  drawShip(x, y, r1 + 5);
  if (clicked) {
  	shotSize ++;
    if (shotSize > 20) shot();
  } else if (shotSize) {
  	shotY -= (22 - shotSize);
    if (shotY < shotBaseY) {
    	if (ptInCircle(shotX, shotY, x, y, (r + shotSize) * s)) {
      	destroyed ++;
        generateShip();
      }
    	// blow
    	shotSize = 0;
    } else {
    	drawShip(shotX, shotY, shotSize + 2);
    }
  }
  fill('gold', w / maxHealth * health, h / 30, h * 0.96);
  drawShip(x, y, r1);
  x += x1;
  y += y1; 
  c.font = 40 * s + "px Arial";
  c.fillText("Ammo: " + ammo + "  Hits: " + destroyed, 8, 900 * s);
}

function click(e) {
  clicked = true;
  shotSize = 0;
  shotX = e.clientX - o;
  shotY = e.clientY;
  shotBaseY = 480 * s - (shotY - 480 * s);
}

function release() {
	if (clicked) shot();
}

function shot() {
	clicked = false;
	ammo -= 1 + shotSize / 5 | 0;
}

function...