Initial commit
This commit is contained in:
commit
77ec28e7a9
40
canvas1.html
Executable file
40
canvas1.html
Executable file
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Canvas 1</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description"
|
||||||
|
content="THIS IS A TEMPLATE FOR SINGLE-PAGE APP FILES.">
|
||||||
|
|
||||||
|
<!-- [STYLE] ======================================================= -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #009000 ;
|
||||||
|
background-color: black ;
|
||||||
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
||||||
|
"Lucida Console", "MS Gothic" ;
|
||||||
|
}
|
||||||
|
canvas { border:1px solid #009000; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- [CONTENT] ===================================================== -->
|
||||||
|
|
||||||
|
<h1>Canvas 1</h1>
|
||||||
|
|
||||||
|
<canvas id="canvas1" width="600" height="600"></canvas>
|
||||||
|
|
||||||
|
<!-- [SCRIPT] ====================================================== -->
|
||||||
|
<script>
|
||||||
|
var canvas = document.getElementById("canvas1");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.fillStyle = "#909090";
|
||||||
|
ctx.fillRect(10, 10, 580, 580);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
156
coords.html
Executable file
156
coords.html
Executable file
@ -0,0 +1,156 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>coords</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description"
|
||||||
|
content="experiment with canvas coordinates">
|
||||||
|
|
||||||
|
<!-- [STYLE] ======================================================= -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #009000 ;
|
||||||
|
background-color: black ;
|
||||||
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
||||||
|
"Lucida Console", "MS Gothic" ;
|
||||||
|
}
|
||||||
|
canvas { border:1px solid #909090; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- [CONTENT] ===================================================== -->
|
||||||
|
|
||||||
|
<h1>coords</h1>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="600" height="600"></canvas>
|
||||||
|
|
||||||
|
<!-- [SCRIPT] ====================================================== -->
|
||||||
|
<script>
|
||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
ctx.translate (300, 300);
|
||||||
|
|
||||||
|
ctx.strokeStyle = "#00ff00";
|
||||||
|
|
||||||
|
ctx.beginPath ();
|
||||||
|
ctx.moveTo (0, -300);
|
||||||
|
ctx.lineTo (0, 300);
|
||||||
|
ctx.stroke ();
|
||||||
|
|
||||||
|
ctx.beginPath ();
|
||||||
|
ctx.moveTo (-300, 0);
|
||||||
|
ctx.lineTo (300, 0);
|
||||||
|
ctx.stroke ();
|
||||||
|
|
||||||
|
// Quadrant I
|
||||||
|
ctx.strokeStyle = "#ffffff";
|
||||||
|
|
||||||
|
ctx.beginPath ()
|
||||||
|
ctx.moveTo (145, 150);
|
||||||
|
ctx.lineTo (155, 150);
|
||||||
|
ctx.moveTo (150, 145);
|
||||||
|
ctx.lineTo (150, 155);
|
||||||
|
ctx.stroke ();
|
||||||
|
|
||||||
|
// Quadrant II
|
||||||
|
ctx.strokeStyle = "#ff0000";
|
||||||
|
|
||||||
|
ctx.beginPath ()
|
||||||
|
ctx.moveTo (-145, 150);
|
||||||
|
ctx.lineTo (-155, 150);
|
||||||
|
ctx.moveTo (-150, 145);
|
||||||
|
ctx.lineTo (-150, 155);
|
||||||
|
ctx.stroke ();
|
||||||
|
|
||||||
|
// Quadrant III
|
||||||
|
ctx.strokeStyle = "#0000ff";
|
||||||
|
|
||||||
|
ctx.beginPath ()
|
||||||
|
ctx.moveTo (-145, -150);
|
||||||
|
ctx.lineTo (-155, -150);
|
||||||
|
ctx.moveTo (-150, -145);
|
||||||
|
ctx.lineTo (-150, -155);
|
||||||
|
ctx.stroke ();
|
||||||
|
|
||||||
|
// Quadrant IV
|
||||||
|
ctx.strokeStyle = "#00ff00";
|
||||||
|
|
||||||
|
ctx.beginPath ()
|
||||||
|
ctx.moveTo (145, -150);
|
||||||
|
ctx.lineTo (155, -150);
|
||||||
|
ctx.moveTo (150, -145);
|
||||||
|
ctx.lineTo (150, -155);
|
||||||
|
ctx.stroke ();
|
||||||
|
|
||||||
|
/*
|
||||||
|
var fgColor = "#009000", bgColor = "#000000";
|
||||||
|
var colorR = 0, colorG = 144, colorB = 0;
|
||||||
|
|
||||||
|
var aX = 290, aY = 310;
|
||||||
|
var bDx = 20, bDy = 0;
|
||||||
|
var cDx = 10, cDy = -17;
|
||||||
|
|
||||||
|
function draw ()
|
||||||
|
{
|
||||||
|
var color = "#";
|
||||||
|
var hex = colorR.toString (16);
|
||||||
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
||||||
|
hex = colorG.toString (16);
|
||||||
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
||||||
|
hex = colorB.toString (16);
|
||||||
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
||||||
|
ctx.beginPath ();
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.moveTo (aX, aY);
|
||||||
|
ctx.lineTo (aX+bDx, aY+bDy);
|
||||||
|
ctx.lineTo (aX+cDx, aY+cDy);
|
||||||
|
ctx.closePath ();
|
||||||
|
ctx.stroke ();
|
||||||
|
ctx.fill ();
|
||||||
|
}
|
||||||
|
|
||||||
|
function update ()
|
||||||
|
{
|
||||||
|
r = Math.random ();
|
||||||
|
if (aX > 0 && r <= (1/3)) aX --;
|
||||||
|
else if (aX < 600 && r > (2/3)) aX ++;
|
||||||
|
r = Math.random ();
|
||||||
|
if (aY > 0 && r <= (1/3)) aY --;
|
||||||
|
else if (aY < 600 && r > (2/3)) aY ++;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- bDx;
|
||||||
|
else if (r > (2/3)) ++ bDx;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- bDy;
|
||||||
|
else if (r > (2/3)) ++ bDy;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- cDx;
|
||||||
|
else if (r > (2/3)) ++ cDx;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- cDy;
|
||||||
|
else if (r > (2/3)) ++ cDy;
|
||||||
|
r = Math.random ();
|
||||||
|
if (colorR > 9 && r <= (1/3)) colorR -= 10;
|
||||||
|
else if (colorR < 246 && r > (2/3)) colorR += 10;
|
||||||
|
r = Math.random ();
|
||||||
|
if (colorG > 9 && r <= (1/3)) colorG -= 10;
|
||||||
|
else if (colorG < 246 && r > (2/3)) colorG += 10;
|
||||||
|
r = Math.random ();
|
||||||
|
if (colorB > 9 && r <= (1/3)) colorB -= 10;
|
||||||
|
else if (colorB < 246 && r > (2/3)) colorB += 10;
|
||||||
|
ctx.clearRect (0, 0, 600, 600);
|
||||||
|
draw ();
|
||||||
|
}
|
||||||
|
|
||||||
|
draw ();
|
||||||
|
setInterval (update, 10);
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
132
keyin.html
Executable file
132
keyin.html
Executable file
@ -0,0 +1,132 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>keyin</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description"
|
||||||
|
content="THIS IS A TEMPLATE FOR SINGLE-PAGE APP FILES.">
|
||||||
|
|
||||||
|
<!-- [STYLE] ======================================================= -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #009000 ;
|
||||||
|
background-color: black ;
|
||||||
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
||||||
|
"Lucida Console", "MS Gothic" ;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- [CONTENT] ===================================================== -->
|
||||||
|
|
||||||
|
<h1>keyin</h1>
|
||||||
|
|
||||||
|
Press Arrow Key or Any Other Key:<br><br>
|
||||||
|
<div id="info"></div>
|
||||||
|
|
||||||
|
<!-- [SCRIPT] ====================================================== -->
|
||||||
|
<script>
|
||||||
|
var Key = {
|
||||||
|
LEFT: 37,
|
||||||
|
UP: 38,
|
||||||
|
RIGHT: 39,
|
||||||
|
DOWN: 40,
|
||||||
|
P: 80,
|
||||||
|
R: 82,
|
||||||
|
X: 88,
|
||||||
|
Z: 90
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* old IE: attachEvent
|
||||||
|
* Firefox, Chrome, or modern browsers: addEventListener
|
||||||
|
*/
|
||||||
|
function _addEventListener(evt, element, fn) {
|
||||||
|
if (window.addEventListener) {
|
||||||
|
element.addEventListener(evt, fn, false);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element.attachEvent('on'+evt, fn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeyDown(evt) {
|
||||||
|
if (!evt) {evt = window.event;} // for old IE compatible
|
||||||
|
var keycode = evt.keyCode || evt.which; // also for cross-browser compatible
|
||||||
|
|
||||||
|
var info = document.getElementById("info");
|
||||||
|
switch (keycode) {
|
||||||
|
case Key.LEFT:
|
||||||
|
info.innerHTML += (" ← down ");
|
||||||
|
break;
|
||||||
|
case Key.UP:
|
||||||
|
info.innerHTML += (" ↑ down ");
|
||||||
|
break;
|
||||||
|
case Key.RIGHT:
|
||||||
|
info.innerHTML += (" → down ");
|
||||||
|
break;
|
||||||
|
case Key.DOWN:
|
||||||
|
info.innerHTML += (" ↓ down ");
|
||||||
|
break;
|
||||||
|
case Key.P:
|
||||||
|
info.innerHTML += (" P down ");
|
||||||
|
break;
|
||||||
|
case Key.R:
|
||||||
|
info.innerHTML += (" R down ");
|
||||||
|
break;
|
||||||
|
case Key.X:
|
||||||
|
info.innerHTML += (" X down ");
|
||||||
|
break;
|
||||||
|
case Key.Z:
|
||||||
|
info.innerHTML += (" Z down ");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
info.innerHTML += (" SOMEKEY " + keycode + " down ");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeyUp(evt) {
|
||||||
|
if (!evt) {evt = window.event;} // for old IE compatible
|
||||||
|
var keycode = evt.keyCode || evt.which; // also for cross-browser compatible
|
||||||
|
|
||||||
|
var info = document.getElementById("info");
|
||||||
|
switch (keycode) {
|
||||||
|
case Key.LEFT:
|
||||||
|
info.innerHTML += (" ← up ");
|
||||||
|
break;
|
||||||
|
case Key.UP:
|
||||||
|
info.innerHTML += (" ↑ up ");
|
||||||
|
break;
|
||||||
|
case Key.RIGHT:
|
||||||
|
info.innerHTML += (" → up ");
|
||||||
|
break;
|
||||||
|
case Key.DOWN:
|
||||||
|
info.innerHTML += (" ↓ up ");
|
||||||
|
break;
|
||||||
|
case Key.P:
|
||||||
|
info.innerHTML += (" P up ");
|
||||||
|
break;
|
||||||
|
case Key.R:
|
||||||
|
info.innerHTML += (" R up ");
|
||||||
|
break;
|
||||||
|
case Key.X:
|
||||||
|
info.innerHTML += (" X up ");
|
||||||
|
break;
|
||||||
|
case Key.Z:
|
||||||
|
info.innerHTML += (" Z up ");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
info.innerHTML += (" SOMEKEY " + keycode + " up ");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_addEventListener('keydown', document, handleKeyDown);
|
||||||
|
_addEventListener('keyup', document, handleKeyUp);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
282
spctrvl.html
Executable file
282
spctrvl.html
Executable file
@ -0,0 +1,282 @@
|
|||||||
|
<!-- spctrvl.html - Space Travel video game -->
|
||||||
|
<!--
|
||||||
|
Programming Notes
|
||||||
|
|
||||||
|
Next tasks:
|
||||||
|
- calibrate thrust velocity change with tick length
|
||||||
|
- scale acceleration to zoom level
|
||||||
|
- gravity
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Space Travel</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description"
|
||||||
|
content="Space Travel video game">
|
||||||
|
|
||||||
|
<!-- [STYLE] ======================================================= -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #009000 ;
|
||||||
|
background-color: black ;
|
||||||
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
||||||
|
"Lucida Console", "MS Gothic" ;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
border: 1px solid #909090;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- [CONTENT] ===================================================== -->
|
||||||
|
|
||||||
|
<h1>Space Travel</h1>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="600" height="600"></canvas>
|
||||||
|
|
||||||
|
<div id="controls">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><button onmousedown="zoom(1)" onmouseup="zoom(0)"
|
||||||
|
ontouchstart="zoom(1)">ZOOM +<br>Z</button></td>
|
||||||
|
<td><button onmousedown="reset()"
|
||||||
|
ontouchstart="reset()">RESET<br>R</button></td>
|
||||||
|
<td></td>
|
||||||
|
<td><button onmousedown="thrust(1)" onmouseup="thrust(0)"
|
||||||
|
ontouchstart="thrust(1)">↑<br>THRUST</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><button onmousedown="zoom(-1)" onmouseup="zoom(0)"
|
||||||
|
ontouchstart="zoom(-1)">ZOOM -<br>X</button></td>
|
||||||
|
<td><button onmousedown="pause()"
|
||||||
|
ontouchstart="pause()">PAUSE<br>P</button></td>
|
||||||
|
<td><button onmousedown="rotate(1)" onmouseup="rotate(0)"
|
||||||
|
ontouchstart="rotate(1)">ROT. L.<br>←</button></td>
|
||||||
|
<td><button onmousedown="thrust(-1)" onmouseup="thrust(0)"
|
||||||
|
ontouchstart="thrust(-1)">RETRO<br>↓</button></td>
|
||||||
|
<td><button onmousedown="rotate(-1)" onmouseup="rotate(0)"
|
||||||
|
ontouchstart="rotate(-1)">ROT. R.<br>→</button></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- [SCRIPT] ====================================================== -->
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// Earth data
|
||||||
|
var EARTHX = 0, // x position (km)
|
||||||
|
EARTHY = 0, // y position (km)
|
||||||
|
EARTHRADIUS = 6378, // radius (km)
|
||||||
|
EARTHMASS = 5.97, // mass (* 10^24 kg)
|
||||||
|
EARTHCOLOR = "#009000";
|
||||||
|
|
||||||
|
// Key codes
|
||||||
|
var KEYLARR = 37,
|
||||||
|
KEYUARR = 38,
|
||||||
|
KEYRARR = 39,
|
||||||
|
KEYDARR = 40,
|
||||||
|
KEYP = 80,
|
||||||
|
KEYR = 82,
|
||||||
|
KEYX = 88,
|
||||||
|
KEYZ = 90;
|
||||||
|
|
||||||
|
// Other constants
|
||||||
|
var PI2 = 2 * Math.PI,
|
||||||
|
TICK = 10; // ms
|
||||||
|
|
||||||
|
// Ship initial status
|
||||||
|
var SHIPX0 = EARTHRADIUS, // km - On X-axis at Earth's surface
|
||||||
|
SHIPY0 = 0,
|
||||||
|
SHIPVX0 = 0,
|
||||||
|
SHIPVY0 = 0,
|
||||||
|
SHIPHEAD0 = 0;
|
||||||
|
|
||||||
|
// Other initial values
|
||||||
|
var SCALE0 = 1000;
|
||||||
|
|
||||||
|
var CANVAS = document.getElementById("canvas");
|
||||||
|
var CTX = CANVAS.getContext("2d");
|
||||||
|
var ZOOM = 0;
|
||||||
|
var HEADINCR = Math.PI / 200;
|
||||||
|
|
||||||
|
// Ship status
|
||||||
|
var shipX = 6378, // x position (km)
|
||||||
|
shipY = 0, // y position (km)
|
||||||
|
shipVx = 0, // x velocity (km/s)
|
||||||
|
shipVy = 0, // y velocity (km/s)
|
||||||
|
shipHead = 0, // heading (radian)
|
||||||
|
shipColor = "#00ff00",
|
||||||
|
shipThrust = 0,
|
||||||
|
shipRotate = 0;
|
||||||
|
|
||||||
|
// Other status
|
||||||
|
var keyin = false,
|
||||||
|
paused = false,
|
||||||
|
scale = 1000, // canvas width in km
|
||||||
|
timer;
|
||||||
|
|
||||||
|
function xformPx (x, y) {
|
||||||
|
var d = Math.sqrt (Math.pow (x - shipX, 2) +
|
||||||
|
Math.pow (y - shipY, 2));
|
||||||
|
var phi = shipHead + Math.atan ((y - shipY) / (x - shipX));
|
||||||
|
var dPx = scalePx (d);
|
||||||
|
var xC = -1 * dPx * Math.sin (phi);
|
||||||
|
var yC = dPx * Math.cos (phi);
|
||||||
|
return [xC, yC];
|
||||||
|
}
|
||||||
|
|
||||||
|
function pause () {
|
||||||
|
if (paused) {
|
||||||
|
timer = setInterval (update, TICK);
|
||||||
|
paused = false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
clearInterval (timer);
|
||||||
|
paused = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset () {
|
||||||
|
shipX = SHIPX0;
|
||||||
|
shipY = SHIPY0;
|
||||||
|
shipVx = SHIPVX0;
|
||||||
|
shipVy = SHIPVY0;
|
||||||
|
shipHead = SHIPHEAD0;
|
||||||
|
scale = SCALE0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function scalePx (km) {
|
||||||
|
return km * CANVAS.width / scale;
|
||||||
|
}
|
||||||
|
|
||||||
|
function thrust (dir) {
|
||||||
|
shipThrust = dir;
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotate (dir) {
|
||||||
|
shipRotate = dir;
|
||||||
|
}
|
||||||
|
|
||||||
|
function zoom (dir) {
|
||||||
|
ZOOM = dir;
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeHead (dir) {
|
||||||
|
shipHead += (dir * HEADINCR);
|
||||||
|
if (shipHead >= PI2) shipHead -= PI2;
|
||||||
|
else if (shipHead < 0) shipHead += PI2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawShip () {
|
||||||
|
CTX.beginPath ();
|
||||||
|
CTX.moveTo (-5, 0);
|
||||||
|
CTX.lineTo (5, 0);
|
||||||
|
CTX.lineTo (0, -10);
|
||||||
|
CTX.closePath ();
|
||||||
|
CTX.fillStyle = shipColor;
|
||||||
|
CTX.fill ();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawBody (x, y, r, color) {
|
||||||
|
var cXY = xformPx (x, y);
|
||||||
|
CTX.beginPath ();
|
||||||
|
CTX.arc (cXY[0], cXY[1], scalePx (r), 0, 2*Math.PI);
|
||||||
|
CTX.strokeStyle = color;
|
||||||
|
CTX.stroke ();
|
||||||
|
}
|
||||||
|
1
|
||||||
|
function handleKeyDown (event) {
|
||||||
|
// alert ("handleKeyDown ");
|
||||||
|
if (!event) { event = window.event; }
|
||||||
|
var keycode = event.keyCode || event.which;
|
||||||
|
// alert ("handleKeyDown " + keycode);
|
||||||
|
switch (keycode) {
|
||||||
|
case KEYLARR:
|
||||||
|
rotate (1);
|
||||||
|
break;
|
||||||
|
case KEYUARR:
|
||||||
|
thrust (1);
|
||||||
|
break;
|
||||||
|
case KEYRARR:
|
||||||
|
rotate (-1);
|
||||||
|
break;
|
||||||
|
case KEYDARR:
|
||||||
|
thrust (-1);
|
||||||
|
break;
|
||||||
|
case KEYP:
|
||||||
|
pause ();
|
||||||
|
break;
|
||||||
|
case KEYR:
|
||||||
|
reset ();
|
||||||
|
break;
|
||||||
|
case KEYX:
|
||||||
|
zoom (-1);
|
||||||
|
break;
|
||||||
|
case KEYZ:
|
||||||
|
zoom (1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeyUp (event) {
|
||||||
|
// alert ("handleKeyUp ");
|
||||||
|
if (!event) { event = window.event; }
|
||||||
|
var keycode = event.keyCode || event.which;
|
||||||
|
// alert ("handleKeyUp " + keycode);
|
||||||
|
switch (keycode) {
|
||||||
|
case KEYLARR:
|
||||||
|
case KEYRARR:
|
||||||
|
rotate (0);
|
||||||
|
break;
|
||||||
|
case KEYUARR:
|
||||||
|
case KEYDARR:
|
||||||
|
thrust (0);
|
||||||
|
break;
|
||||||
|
case KEYX:
|
||||||
|
case KEYZ:
|
||||||
|
zoom (0);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function update () {
|
||||||
|
// if (keyin) alert ("keyin " + keyin);
|
||||||
|
if (ZOOM > 0) scale *= 0.99;
|
||||||
|
if (ZOOM < 0) scale *= 1.01;
|
||||||
|
changeHead (shipRotate);
|
||||||
|
shipVx += shipThrust * Math.cos (shipHead);
|
||||||
|
shipVy += -1 * shipThrust * Math.sin (shipHead);
|
||||||
|
shipX += shipVx;
|
||||||
|
shipY += shipVy;
|
||||||
|
CTX.clearRect (-1 * CANVAS.width / 2, -1 * CANVAS.height / 2,
|
||||||
|
CANVAS.width, CANVAS.height);
|
||||||
|
drawBody (EARTHX, EARTHY, EARTHRADIUS, EARTHCOLOR);
|
||||||
|
drawShip ();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main process
|
||||||
|
|
||||||
|
CTX.translate (CANVAS.width/2, CANVAS.height/2);
|
||||||
|
|
||||||
|
if (window.addEventListener) {
|
||||||
|
document.addEventListener("keydown", handleKeyDown, false);
|
||||||
|
document.addEventListener("keyup", handleKeyUp, false);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.attachEvent("onkeydown", handleKeyDown);
|
||||||
|
document.attachEvent("onkeyup", handleKeyUp);
|
||||||
|
}
|
||||||
|
timer = setInterval (update, TICK);
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
template-spa.html
Executable file
36
template-spa.html
Executable file
@ -0,0 +1,36 @@
|
|||||||
|
<!-- Single-Page Application Template -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>SPA TEMPLATE</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description"
|
||||||
|
content="THIS IS A TEMPLATE FOR SINGLE-PAGE APP FILES.">
|
||||||
|
|
||||||
|
<!-- [STYLE] ======================================================= -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #009000 ;
|
||||||
|
background-color: black ;
|
||||||
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
||||||
|
"Lucida Console", "MS Gothic" ;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- [CONTENT] ===================================================== -->
|
||||||
|
|
||||||
|
<h1>SPA TEMPLATE</h1>
|
||||||
|
|
||||||
|
<p>CONTENT HERE …</p>
|
||||||
|
|
||||||
|
<!-- [SCRIPT] ====================================================== -->
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
101
triangle.html
Executable file
101
triangle.html
Executable file
@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Triangle</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description"
|
||||||
|
content="Display green triangle on black background.">
|
||||||
|
|
||||||
|
<!-- [STYLE] ======================================================= -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #009000 ;
|
||||||
|
background-color: black ;
|
||||||
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
||||||
|
"Lucida Console", "MS Gothic" ;
|
||||||
|
}
|
||||||
|
canvas { border:1px solid #909090; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- [CONTENT] ===================================================== -->
|
||||||
|
|
||||||
|
<h1>Triangle</h1>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="600" height="600"></canvas>
|
||||||
|
|
||||||
|
<!-- [SCRIPT] ====================================================== -->
|
||||||
|
<script>
|
||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
var fgColor = "#009000", bgColor = "#000000";
|
||||||
|
var colorR = 0, colorG = 144, colorB = 0;
|
||||||
|
|
||||||
|
var aX = 290, aY = 310;
|
||||||
|
var bDx = 20, bDy = 0;
|
||||||
|
var cDx = 10, cDy = -17;
|
||||||
|
|
||||||
|
function draw ()
|
||||||
|
{
|
||||||
|
var color = "#";
|
||||||
|
var hex = colorR.toString (16);
|
||||||
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
||||||
|
hex = colorG.toString (16);
|
||||||
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
||||||
|
hex = colorB.toString (16);
|
||||||
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
||||||
|
ctx.beginPath ();
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.moveTo (aX, aY);
|
||||||
|
ctx.lineTo (aX+bDx, aY+bDy);
|
||||||
|
ctx.lineTo (aX+cDx, aY+cDy);
|
||||||
|
ctx.closePath ();
|
||||||
|
ctx.stroke ();
|
||||||
|
ctx.fill ();
|
||||||
|
}
|
||||||
|
|
||||||
|
function update ()
|
||||||
|
{
|
||||||
|
r = Math.random ();
|
||||||
|
if (aX > 0 && r <= (1/3)) aX --;
|
||||||
|
else if (aX < 600 && r > (2/3)) aX ++;
|
||||||
|
r = Math.random ();
|
||||||
|
if (aY > 0 && r <= (1/3)) aY --;
|
||||||
|
else if (aY < 600 && r > (2/3)) aY ++;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- bDx;
|
||||||
|
else if (r > (2/3)) ++ bDx;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- bDy;
|
||||||
|
else if (r > (2/3)) ++ bDy;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- cDx;
|
||||||
|
else if (r > (2/3)) ++ cDx;
|
||||||
|
r = Math.random ();
|
||||||
|
if (r <= (1/3)) -- cDy;
|
||||||
|
else if (r > (2/3)) ++ cDy;
|
||||||
|
r = Math.random ();
|
||||||
|
if (colorR > 9 && r <= (1/3)) colorR -= 10;
|
||||||
|
else if (colorR < 246 && r > (2/3)) colorR += 10;
|
||||||
|
r = Math.random ();
|
||||||
|
if (colorG > 9 && r <= (1/3)) colorG -= 10;
|
||||||
|
else if (colorG < 246 && r > (2/3)) colorG += 10;
|
||||||
|
r = Math.random ();
|
||||||
|
if (colorB > 9 && r <= (1/3)) colorB -= 10;
|
||||||
|
else if (colorB < 246 && r > (2/3)) colorB += 10;
|
||||||
|
ctx.clearRect (0, 0, 600, 600);
|
||||||
|
draw ();
|
||||||
|
}
|
||||||
|
|
||||||
|
draw ();
|
||||||
|
setInterval (update, 10);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
w3sjs1.html
Executable file
10
w3sjs1.html
Executable file
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<h2>My First JavaScript</h2>
|
||||||
|
<button type="button"
|
||||||
|
onclick="document.getElementById('demo').innerHTML = Date()">
|
||||||
|
Click me to display Date and Time.</button>
|
||||||
|
<p id="demo"></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user