YitongHe yitonghe00

## Eloquent JavaScript 1603.html
<link rel="stylesheet" href="css/game.css">
<style>.monster { background: purple }</style>

<body>
  <script>
    // Complete the constructor, update, and collide methods
    class Monster {
      constructor(pos, speed) {
        this.pos = pos;
        this.speed = speed;

## Eloquent JavaScript 1602 Pausing the game.html
<link rel="stylesheet" href="css/game.css">

<body>
<script>
  // The old runLevel function. Modify this...
  function runLevel(level, Display) {
    let display = new Display(document.body, level);
    let state = State.start(level);
    let ending = 1;


## Eloquent JavaScript 1601 Game over.html
<link rel="stylesheet" href="css/game.css">

<body>
<script>
  // The old runGame function. Modify it...
  async function runGame(plans, Display, lives) {
    for (let level = 0; level < plans.length && lives > 0;) {
      console.log(`You have ${lives} lives`);
      let status = await runLevel(new Level(plans[level]),
                                  Display);

## Eloquent JavaScript 1503 Tabs.html
<tab-panel>
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</tab-panel>
<script>
  function asTabs(node) {

    const tabList = document.createElement('div');
    const tabs = Array.from(node.children).map((child) => {

## Eloquent JavaScript 1502 Mouse trail.html
<style>
  .trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: teal;
  }
  body {
    height: 300px;
  }

## Eloquent JavaScript 1501 Balloon.html
<p style="font-size: 16px;">🎈</p>

<script>
  const p = document.querySelector('p');
  const inflate = (event) => {
    event.preventDefault();
    const size = Number(p.style.fontSize.slice(0, -2));
    if (size > 100) {
      p.textContent = '💥';
      window.removeEventListener('keydown', keydownHandler);

## Eloquent JavaScript 1403 The cat’s hat.html
<style>body { min-height: 200px }</style>
<img src="img/cat.png" id="cat" style="position: absolute">
<img src="img/hat.png" id="hat" style="position: absolute">

<script>
  let cat = document.querySelector("#cat");
  let hat = document.querySelector("#hat");

  let angle = 0;
  let lastTime = null;

## Eloquent JavaScript 1402 Elements by tag name.html
<h1>Heading with a <span>span</span> element.</h1>
<p>A paragraph with <span>one</span>, <span>two</span>
  spans.</p>

<script>
  function byTagName(node, tagName) {
    const arr = [];
    Array.from(node.children).forEach((child) => {
      if (child.nodeName.toLowerCase() === tagName) {
      	arr.push(child);

## Eloquent JavaScript 1401 Build a table.html
<h1>Mountains</h1>

<div id="mountains"></div>

<script>
  const MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
    {name: "Everest", height: 8848, place: "Nepal"},
    {name: "Mount Fuji", height: 3776, place: "Japan"},
    {name: "Vaalserberg", height: 323, place: "Netherlands"},

## Eloquent JavaScript 1204 Fixing scope.js
specialForms.set = (args, scope) => {
  if (args.length !== 2 || args[0].type !== "word") {
  	throw new Error("Incorrect use of set.");
  }

  const value = evaluate(args[1], scope);


  for(let outerScope = scope; scope; outerScope = Object.getPrototypeOf(outerScope)) {
    if (Object.prototype.hasOwnProperty.call(outerScope, args[0].name)) {
	<link rel="stylesheet" href="css/game.css">
	<style>.monster { background: purple }</style>

	<body>
	<script>
	// Complete the constructor, update, and collide methods
	class Monster {
	constructor(pos, speed) {
	this.pos = pos;
	this.speed = speed;
	<tab-panel>
	<div data-tabname="one">Tab one</div>
	<div data-tabname="two">Tab two</div>
	<div data-tabname="three">Tab three</div>
	</tab-panel>
	<script>
	function asTabs(node) {

	const tabList = document.createElement('div');
	const tabs = Array.from(node.children).map((child) => {
	<style>
	.trail { /* className for the trail elements */
	position: absolute;
	height: 6px; width: 6px;
	border-radius: 3px;
	background: teal;
	}
	body {
	height: 300px;
	}
	<p style="font-size: 16px;">🎈</p>

	<script>
	const p = document.querySelector('p');
	const inflate = (event) => {
	event.preventDefault();
	const size = Number(p.style.fontSize.slice(0, -2));
	if (size > 100) {
	p.textContent = '💥';
	window.removeEventListener('keydown', keydownHandler);
	<style>body { min-height: 200px }</style>
	<img src="img/cat.png" id="cat" style="position: absolute">
	<img src="img/hat.png" id="hat" style="position: absolute">

	<script>
	let cat = document.querySelector("#cat");
	let hat = document.querySelector("#hat");

	let angle = 0;
	let lastTime = null;
	<h1>Heading with a <span>span</span> element.</h1>
	<p>A paragraph with <span>one</span>, <span>two</span>
	spans.</p>

	<script>
	function byTagName(node, tagName) {
	const arr = [];
	Array.from(node.children).forEach((child) => {
	if (child.nodeName.toLowerCase() === tagName) {
	arr.push(child);
	<h1>Mountains</h1>

	<div id="mountains"></div>

	<script>
	const MOUNTAINS = [
	{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
	{name: "Everest", height: 8848, place: "Nepal"},
	{name: "Mount Fuji", height: 3776, place: "Japan"},
	{name: "Vaalserberg", height: 323, place: "Netherlands"},
	specialForms.set = (args, scope) => {
	if (args.length !== 2 \|\| args[0].type !== "word") {
	throw new Error("Incorrect use of set.");
	}

	const value = evaluate(args[1], scope);


	for(let outerScope = scope; scope; outerScope = Object.getPrototypeOf(outerScope)) {
	if (Object.prototype.hasOwnProperty.call(outerScope, args[0].name)) {