Skip to content

Instantly share code, notes, and snippets.

💭
merging your prs

Tom MacWright tmcw

💭
merging your prs
Block or report user

Report or block tmcw

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View counties.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View m2.html
<html>
<head>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
</head>
<body>
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A Simple Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A Simple Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
View editors.md

Context: a class of 10 9th-12th graders doing a week-long class on HTML, CSS, and JavaScript.

The question of an editor. While we stay in guided environments like jsbin & mistakes.io for the first two days of class, in order to save to files and tinker, we eventually need to ‘save to disk’ to view things as real websites and understand how code works.

I use vim personally, but know very well that it’s a tough place to start for students, and would be a dangerous distraction from the topics.

What really matters for an editor in this setting:

  1. It should be simple to use. This means keystrokes do what they do in other programs, like Word.
  2. It should not crash.
View index.html
# Mission: Losing the Game
Let's figure out how to lose the game. Right now you can see what happens
when you collide with something: something like
```js
collision: function(other) {
other.center.y = this.center.y; // follow the player
other.center.x = this.center.x; // follow the player
}
View index.md

Mission: Losing the Game

Let's figure out how to lose the game. Right now you can see what happens when you collide with something: something like

collision: function(other) {
  other.center.y = this.center.y; // follow the player
  other.center.x = this.center.x; // follow the player
}
View images.md

Next Challenge: Making things look awesome

Let's draw some sprites: these are the images that show when you see characters and other stuff in levels. They'll give this more personality than rectangles.

First: sprites are images. Let's draw our first sprite: open up http://pixelartor.com/ and create a new 64x64 image. Draw what you want, like a person or an obstacle or something else.

Save your image to the same directory as your game, and name it something you'll remember, like player.png

Next:

View gravity.md

Gravity!

Okay, a function for gravity. let's look at it piece by piece then throw it in:

update: function() {

  // this is where the ground is on your level. adjust to fit.
  var ground = 300;
@tmcw
tmcw / index.js
Created Mar 10, 2014
Gist from mistakes.io
You can’t perform that action at this time.