ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

{
	"frames": {

		"chaingun.png": {
			"frame": {
				"x": 1766,
				"y": 202,
				"w": 42,
				"h": 34
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 38,
				"y": 32,
				"w": 42,
				"h": 34
			},
			"sourceSize": {
				"w": 128,
				"h": 128
			}
		},
		"chaingun_impact.png": {
			"frame": {
				"x": 1162,
				"y": 322,
				"w": 38,
				"h": 34
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 110,
				"y": 111,
				"w": 38,
				"h": 34
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0000.png": {
			"frame": {
				"x": 494,
				"y": 260,
				"w": 22,
				"h": 22
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 113,
				"y": 108,
				"w": 22,
				"h": 22
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0001.png": {
			"frame": {
				"x": 1500,
				"y": 1904,
				"w": 34,
				"h": 30
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 104,
				"y": 104,
				"w": 34,
				"h": 30
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0002.png": {
			"frame": {
				"x": 888,
				"y": 366,
				"w": 38,
				"h": 32
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 106,
				"y": 105,
				"w": 38,
				"h": 32
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0003.png": {
			"frame": {
				"x": 990,
				"y": 84,
				"w": 32,
				"h": 28
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 113,
				"y": 109,
				"w": 32,
				"h": 28
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		}
	},
	"meta": {
		"app": "http://www.texturepacker.com",
		"version": "1.0",
		"image": "assets/grits_effects.png",
		"format": "RGBA8888",
		"size": {
			"w": 2048,
			"h": 2048
		},
		"scale": "1",
		"smartupdate": "$TexturePacker:SmartUpdate:a5e0b1932a348d048c58a625408c4276$"
	}
}

parseAtlasDefinition: function (atlasJSON){
	var parsed = JSON.parse(atlasJSON);

	for(var key in parsed.frames){
	var sprite = parsed.frames[key];

	var cx = -sprite.frame.w * 0.5;
	var cy = -sprite.frame.h * 0.5;

	// Define the sprite for this sheet.
	this.defSprite(key, sprite.frame.x, sprite.frame.y, sprite.frame.z)
	}
}
});

function drawSprite(spritename, posX, posY){
	
}

function __drawSpriteInternal(spt, sheet, posX, posY){
	
}

var gSpriteSheets = {};

SpriteSheetClass = Class.exnted({
	
});

function drawSprite(spritename, posX, posY){
	for(var sheetName in gSpriteSheets){
		var sheet = gSpriteSheetsd[sheetName];
		var sprite = sheet.getStats(spritename);
		if(sprite == null) continue;

		__drawSpriteInternal(sprite, sheet, posX, posY);

		return;
	}
}

at least n characters
combination of upper- and lower-case characters
one or more digits
not related to other user data (name, address, username, …)
not a dictionary word

<script type="text/javascript">

	function checkForm(form)
	{
		if(form.username.value == ""){
			alert("Error: Username cannot be blank!");
			form.username.focus();
			return false;
		}
		re = /^\w+$/;
		if(!re.test(form.username.value)){
			alert("Error: Username must only letters, numbers and undersocres!");
			form.username.focus();
			return false;
		}

		if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value){
			if(form.pwd1.value.length < 6){
				alert("Error: Password must contain at least six characters!");
				form.pwd1.focus();
				return false;
			}
			if(form.pwd1.value == form.username.value){
				alert("Error: Password must be different from Username!");
				form.pwd1.focus();
				return false;
			}
			re = /&#91;0-9&#93;/;
			if(!re.test(form.pwd1.value)){
				alert("Error: password must contain at least one number(0-9)!");
				form.pwd1.focus();
				return false;
			}
			re = /&#91;a-z&#93;/;
			if(!re.test(form.pwd1.value)){
				alert("Error: password must contain at least one lowercase letter(a-z"!);
				form.pwd1.focus();
				return false;
			}
			re = /&#91;A-Z&#93;/;
			if(!re.test(form.pwd1.value)){
				alert("Error: password must contain at least one uppercase letter(A-Z");
				form.pwd1.focus();
				return false;
			}
		} else {
			alert("Error: Please check that you've entered and confirmed your password!");
			form.pwd1.focus();
			return false;
		}
		alert("You entered a valid password: " + form.pwd1.value);
		return true;
	}
</script>
<form ... onsubmit="return checkForm(this);">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="pwd1"></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quiz - Placeholder</title>
</head>
<body>
    <form action="#">
        <label for="event-name">
            <span>Enter the name of your event:</span>
            <input type="text" id="event-name" placeholder="Event Name">
        </label>
    </form>
</body>
</html>

autocomplete
The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quiz - Autocomplete</title>
</head>
<body>
    <form action="#">
        <label for="email">
            <span>Email:</span>
            <input type="email" id="email" placeholder="example@gmail.com" autocomplete="email">
        </label>
    </form>
</body>
</html>

Check input type with mozilla.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<form class="date-and-time-picker">
	<label for="date">
		<span>what day do you want to leave?</span>
		<input id="date" type="date">
	</label>
	<label for="time">
		<span>What time do you want to leave?</span>
		<input id="time" type="date-time">
	</label>
</form>

data list

<input list="nano">
<datalist id="nano">
	<option value="Android"></option>
	<option value="Data Analyst"></option>
	<option value="Front End"></option>
	<option value="Full Stack"></option>
	<option value="Intro to Programming"></option>
	<option value="iOS"></option>
	<option value="Tech Entrepreneur"></option>
</datalist>

Another datalist

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quiz - Datalists</title>
</head>
<body>
    <p>What kind of event are you hosting?</p>
    <input list="event">
    <datalist id="event">
        <option>Party</option>
        <option>Meeting</option>
        <option>Conference Talk</option>
        <option>Sports Game</option>
    </datalist>
</body>
</html>

<form>
	<label for="use-billing">
		<span>Same as billing address</span>
	</label>
	<input type="checkbox" id="use-billing">

	<br>

	<label for="tel-number">
		<span>Telephone Number</span>
		<input type="tel" id="tel-number">
	</label>
</form>