Learning Canvas: Making a Snake Game
canvas
element. How to draw to it, create loops which redraw it allowing animation, and in the end, wind up with a basic playable "Snake" game. Founder, writer, designer, spam-deleter, email personality
canvas
element. How to draw to it, create loops which redraw it allowing animation, and in the end, wind up with a basic playable "Snake" game. Making a really good CSS sprite image usually isn’t trivial work. There are all kinds of tools to help with it. My favorite of them has been SpriteMe. I describe my typical workflow for using that here. Sprite …
HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it …
Let’s say you have a link to show more options which expands a list of options. It’s says “more options”. It’s easy to toggle those options with .toggle()
or .slideToggle()
, but the text remains the same. To toggle the …
<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL
// Check tagslug.png exists and display it
if ($posttags) {
foreach($posttags as $tag) {
$image = "/images/tag-images/$tag->slug.png";
if (file_exists("images/tag-images/$tag->slug.png")) {
echo '<a href="' . $home
… (function() {
var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element,
… <div class="hexagon"><span></span></div>
.hexagon {
width: 100px;
height: 55px;
position: relative;
}
.hexagon,
.hexagon:before,
.hexagon:after {
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
left: 22px;
width: 57px;
height: 57px;
transform: rotate(145deg) skew(22.5deg);
}
… #example-gradient {
height: 200px;
margin: 0 0 20px 0;
background-color: #eaeaea;
background-size: 20px 20px;
background-image:
-webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
-webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent
… My buddies at Sense Labs just released a really cool iPhone app called Dropp. Allows you to leave location-based messages anywhere on Earth that people receive when they visit that location. Leave them privately for your friends, or publicly. Such …