js乒乓球

来源：互联网发布：周晨曦开的淘宝店编辑：程序博客网时间：2024/06/11 00:41

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
canvas{
   border:1px solid green;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="500"></canvas>
<script type="text/javascript">
//BEGIN LIBRARY CODE
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var WIDTH;
var HEIGHT;
var ctx;
var intervalId;
function init() {
    ctx = $('#canvas')[0].getContext("2d");
    WIDTH = $("#canvas").width();
    HEIGHT = $("#canvas").height();
    intervalId= setInterval(draw, 10);
}

function circle(x,y,r) {
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

function rect(x,y,w,h) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.closePath();
    ctx.fill();
}

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

//END LIBRARY CODE
var paddlex;
var paddleh;
var paddlew;

function init_paddle() {
paddlex = WIDTH / 2;
paddleh = 10;
paddlew = 75;
}
rightDown = false;
leftDown = false;

//set rightDown or leftDown if the right or left keys are down
function onKeyDown(evt) {
if (evt.keyCode == 39) rightDown = true;
else if (evt.keyCode == 37) leftDown = true;
}

//and unset them when the right or left key is released
function onKeyUp(evt) {
if (evt.keyCode == 39) rightDown = false;
else if (evt.keyCode == 37) leftDown = false;
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

var canvasMinX;
var canvasMaxX;

function init_mouse() {
canvasMinX = $("#canvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;
}

function onMouseMove(evt) {
if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
paddlex = evt.pageX - canvasMinX;
}
}

$(document).mousemove(onMouseMove);

var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;

function initbricks() {
NROWS = 5;
NCOLS = 5;
BRICKWIDTH = (WIDTH/NCOLS) - 1;
BRICKHEIGHT = 15;
PADDING = 1;

bricks = new Array(NROWS);
for (i=0; i < NROWS; i++) {
    bricks[i] = new Array(NCOLS);
    for (j=0; j < NCOLS; j++) {
      bricks[i][j] = 1;
    }
}
}

function draw() {
clear();

circle(x, y, 10);

if (rightDown) paddlex += 5;
else if (leftDown) paddlex -= 5;
rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);

//draw bricks
for (i=0; i < NROWS; i++) {
    for (j=0; j < NCOLS; j++) {
      if (bricks[i][j] == 1) {
    ctx.fillStyle = "green";
        rect((j * (BRICKWIDTH + PADDING)) + PADDING,
             (i * (BRICKHEIGHT + PADDING)) + PADDING,
             BRICKWIDTH, BRICKHEIGHT);
      }
    }
}

//have we hit a brick?
rowheight = BRICKHEIGHT + PADDING;
colwidth = BRICKWIDTH + PADDING;
row = Math.floor(y/rowheight);
col = Math.floor(x/colwidth);
//if so, reverse the ball and mark the brick as broken
if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
dy = -dy;
bricks[row][col] = 0;
}

if (x + dx > WIDTH || x + dx < 0)
dx = -dx;

if (y + dy < 0)
    dy = -dy;
else if (y + dy > HEIGHT) {
    if (x > paddlex && x < paddlex + paddlew)
      dy = -dy;
    else
      clearInterval(intervalId);
}

x += dx;
y += dy;
}

init();
init_paddle();
init_mouse();
initbricks();
</script>

</body>
</html>

0 0