弹球游戏

☻☞

注意体会里面所包含的游戏开发的思想：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>弹球效果</title>

</head>

<body>

<canvas id="canvas" width="300" height="300"></canvas>

<br>

<input type="button" id="startbtn" value="开始">

<input type="button" id="stopbtn" value="停止">

<script type="text/javascript">

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var startbtn = document.getElementById("startbtn");

var stopbtn = document.getElementById("stopbtn");

var dir = 100;

var exe = -1; //变量增量，这个变量在游戏开发中用的多

function drawBall(){

context.clearRect(0,0,300,300);

context.fillStyle = "red";

context.beginPath();

context.arc(200,dir,20,0,Math.PI*2,true);

context.closePath();

context.fill();

dir = dir+exe; //

if(dir ==0 || dir ==300) //判断当前线的位置，控制在区域内

{

exe = exe*(-1); //当在边界时候就掉头的控制变量,乘以负一用来调整线路的方向，这个在游戏开发中用的多。

}                

}

var timeid;

startbtn.addEventListener("click",function(){ //给开始按钮添加单击事件

timeid = window.setInterval("drawBall()",10); //按照指定的周期来调用函数，返回值是定时器的ID值，注意此ID要定义成全局的，就能被清除掉。

},false);

stopbtn.addEventListener("click",function(){

window.clearInterval(timeid);

},false);

</script>

</body>

</html>

posted @ 2013-11-27 23:05  weifb  阅读(136)  评论(0)    收藏  举报