Chen kiloc

Basic Missile Command HTML and JavaScript Game

This is a basic implementation of the Atari Missile Command game, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

Score
When a missile explodes (not a counter-missile), the score should increase by 25

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	/*
	* Handling Errors using async/await
	* Has to be used inside an async function
	*/
	try {
	const response = await axios.get('https://your.site/api/v1/bla/ble/bli');
	// Success 🎉
	console.log(response);
	} catch (error) {
	// Error 😨

	<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
	<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
	<head>
	<!-- 声明文档使用的字符编码 -->
	<meta charset='utf-8'>
	<!-- 优先使用 IE 最新版本和 Chrome -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<!-- 页面描述 -->
	<meta name="description" content="不超过150个字符"/>
	<!-- 页面关键词 -->

	/**
	* converts a XYZ vector3 to longitude latitude (Direct Polar)
	* @param lng longitude
	* @param lat latitude
	* @param vector3 optional output vector3
	* @returns a unit vector of the 3d position
	*/
	function lonLatToVector3( lng, lat, out )
	{
	out = out \|\| new THREE.Vector3();

	// Listen for orientation changes
	window.addEventListener("orientationchange", function() {
	// Announce the new orientation number
	alert(window.orientation);
	}, false);

	// Listen for resize changes
	window.addEventListener("resize", function() {
	// Get screen size (inner/outerWidth, inner/outerHeight)


	/**
	* Sort array of objects based on another array
	*/

	function mapOrder (array, order, key) {

	array.sort( function (a, b) {
	var A = a[key], B = b[key];