<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px}
canvas{background: #eee;display: block;margin: 0,auto;}
</style>
</head>
<body>
<canvas width="800" height="320" id="myCanvas">
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var width=10
var height=80
var rectX=[100,300,500]
var radius=10
var dx=2
var ballX=10
var ballY=canvas.height-radius
var dy=200
function drawall(){
for(var a=0;a<10;a++){
ctx.beginPath();
ctx.rect(rectX[a],canvas.height-height,width,height);
ctx.fillStyle='blue'
ctx.fill();
ctx.closePath();
}
}
function drawBall(){
ctx.beginPath();
ctx.arc(ballX,ballY,radius,0,Math.PI*2)
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawall();
drawBall();
//此处未成功,一开始就跳出
if(100<ballX+radius<100+width){
alert(you loase)
}
ballX=ballX+dx
}
document.addEventListener('keydown',keydownHandler,false)
document.addEventListener('keyup',keyupHandler,false)
function keydownHandler(e){
if(e.keyCode==32){
ballY-=dy
}
}
function keyupHandler(e){
if(e.keyCode==32){
ballY+=dy;
}
}
setInterval(draw,10);
</script>
</body>
</html>
你这里写错了,写区间不能这样写的
要表示大于什么并且小于什么,应该这样写