<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball With inputs</title>
<style type="text/css">
form {
width: 330px;
margin: 20px;
background-color: brown;
padding: 20px;
}
</style>
<script type="text/javascript">
var boxx = 0;
var boxy = 0;
var boxwidth = 350;
var boxheight = 250;
var ballrad = 10;
var boxboundx = boxwidth + boxx - ballrad;
var boxboundy = boxheight + boxy - ballrad;
var inboxboundx = boxx + ballrad;
var inboxboundy = boxy + ballrad;
var ballx = 50;
var bally = 60;
var ctx;
var ballvx = 4;
var ballvy = 8;
var step = 10;
var isRight = false;
var pai = {
width: 2,
height: 80,
position: {
x: 60,
y: 80
}
}
var inter;
function init() {
ctx = document.getElementById("canvas").getContext("2d");
document.body.onkeydown = function (e) {
var up = 38;
var down = 40;
if (e.keyCode == up) {
if (pai.position.y > 0) {
pai.position.y -= step;
}
} else if (e.keyCode == down) {
if (pai.position.y < boxheight - pai.height) {
pai.position.y += step;
}
}
}
ctx.lineWidth = ballrad;
ctx.fillStyle = "rgb(200,0,50)";
moveball();
inter = setInterval(moveball, 100);
}
function moveball() {
ctx.clearRect(boxx, boxy, boxwidth, boxheight);
moveandcheck();
ctx.beginPath();
ctx.arc(ballx, bally, ballrad, 0, Math.PI * 2, true);
if (ballx > (pai.position.x + pai.width)) {
isRight = true;
} else if (ballx < (pai.position.x - pai.width)) {
isRight = false;
}
console.log(isRight);
ctx.rect(pai.position.x, pai.position.y, pai.width, pai.height);
ctx.fill();
ctx.strokeRect(boxx, boxy, boxwidth, boxheight);
}
function moveandcheck() {
var nballx = ballx + ballvx;
var nbally = bally + ballvy;
if (nballx > boxboundx) {//碰到右边的墙
ballvx = -ballvx;
nballx = boxboundx;
}
if (nballx < inboxboundx) {//碰到左边的墙
nballx = inboxboundx;
ballvx = -ballvx;
}
if (nbally > boxboundy) {//碰到下面的墙
nbally = boxboundy;
ballvy = -ballvy;
}
if (nbally < inboxboundy) {//碰到上面的墙
nbally = inboxboundy;
ballvy = -ballvy;
}
if ((isRight && (nballx < pai.position.x + ballrad) && (nbally < pai.position.y || nbally > pai.position.y + pai.height))) {
clearInterval(inter);
alert('游戏结束l');
}
//右边过来
if (isRight && (nballx < pai.position.x + ballrad) && (nbally > (pai.position.y) && nbally < pai.position.y + pai.height)) {
ballvx = -ballvx;
}
//左边过来
else if (!isRight && (nballx > pai.position.x - ballrad) && (nbally > pai.position.y && nbally < pai.position.y + pai.height)) {
ballvx = -ballvx;
nballx = pai.position.x - ballrad;
}
ballx = nballx;
bally = nbally;
}
function change() {
ballvx = Number(f.hv.value);
ballvy = Number(f.vv.value);
return false;
}
</script>
</head>
<body onload="init()">
<td>
<table align=center background="a.jpg">
<td>
<canvas id="canvas" width="400" height="300">不支持canvas</canvas>
<br/>
<form name="f" id="f" onsubmit="return change();">
Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10" max="10"/><br/>
Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10"/>
<input type="submit" value="Change"/>
</form>
</body>
</html>
