A#9 Dealing & Dragging

Shows how to create an array of playing cards and deal randomly from the array.

by Shawn Lackey

HTML

<script src="jquery-ui.js"></script>
<canvas id="myCanvas" width="300" height="300"></canvas>
</br>Open in Google Chrome for the ultimate experience....
<button onclick="myFunction()">Click me!</button>
<p id="color"></p>

CSS

body {
    background-color: #808080;
    font-family: Arial, Helvetica, sans-serif
}
.drop {
    float: inherit;
    width: 600px;
    height: 200px;
    background-color: #494775;
    image-orientation: initial;
}
img {
    width: 80px;
    height: 120px;
}
p {
    text-indent: 0.0em
}
#imgcntr {
    text-align: center;
    padding: 16px;
    border-image-source: url(./Cards);
}
body {
    background-color:#ededed;
    font:normal 12px/18px Arial, Helvetica, sans-serif;
}
h1 {
    display:block;
    width:600px;
    margin:20px auto;
    padding-bottom:20px;
    font:normal 24px/30px Georgia, "Times New Roman", Times, serif;
    color:#333;
    text-shadow: 1px 2px 3px #ccc;
    border-bottom:1px solid #cbcbcb;
    -moz-animation:"draw"
}
#container {
    width:600px;
    margin:0 auto;
}
#myCanvas {
    background:#333;
    border:1px solid #2e2e2e;
}
#nav {
    display:block;
    width:100%;
    text-align:center;
}
#nav li {
    display:block;
    font-weight:bold;
    line-height:21px;
    text-shadow:1px 1px 1px #fff;
    width:100px;
    height:21px;
    padding:5px;
    margin:0 10px;
    background:#e0e0e0;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    float:left;
}
#nav li a {
    color:#000;
    display:block;
    text-decoration:none;
    width:100%;
    height:100%;

JavaScript

$("#color").click(function () {
    getElementByID(myFunction);
});

var context;
var dx = 2;
var dy = 4;
var y = 200;
var x = 100;

function myFunction() {
    addEventListener(onclick);
    document.getElementById("color");

}

function draw() {
    context = myCanvas.getContext('2d');
    context.clearRect(0, 0, 400, 400);
    context.beginPath();
    context.fillStyle = "#00FF00";
    context.arc(x, y, 5, 5, Math.PI * 2, true);
    context.closePath();
    context.fill();
    if (x < 0 || x > 300) dx = -dx;
    if (y < 0 || y > 300) dy = -dy;
    x += dx;
    y += dy;
}
setInterval(draw, 1);

function color() {
    
    context.fillStyle = "#3300FF";
 
}