JavaScript Canvas 乒乓球游戏

本文深入探讨了游戏开发领域的关键技术,包括Unity3D和Cocos2dX引擎的应用,以及AI音视频处理在游戏中的创新实践,如AR特效、语音识别和视频分析等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值