文档章节

自动弹弹球

jiejiegao
 jiejiegao
发布于 2016/04/20 20:44
字数 304
阅读 7
收藏 0
<!DOCTYPE html>
<html>
 <head>
    <title>HTML5 datalist tag</title>
    <meta charset="utf-8">
   <style type=text/css>
   body{
   	text-align:center;
   }
  canvas{
   border:1px solid blue;
}
</style>
 </head>
<body onload="init()">
  <canvas id="canvas" width="400" height="300">doesn't support canvas</canvas>
  <br/>  
   VX:1<input id="vx" type=range min=1 value=4 max=50 step=2>50<br/>
   VY:1<input id="vy" type=range min=1 value=8 max=50 step=2>50<br/>
   <input type=button id=change value=change onclick="changeV()">
 </body>
<script type=text/javascript>
    var boxx=20;
    var boxy=30;
    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 it=null;
function init(){
ctx=document.getElementById("canvas").getContext("2d");
moveball();
setInterval(moveball,500);
//setInterval只执行了一
}

function moveball(){
ctx.clearRect(boxx,boxy,boxwidth,boxheight);
movechek();
ctx.fillStyle="rgb(200,0,50)";
ctx.beginPath();
ctx.arc(ballx,bally,ballrad,0,2*Math.PI,true);
ctx.fill();
}

function movechek(){

var nballx=ballx+ballvx;
var nbally=bally+ballvy;
if(nballx>boxboundx){
  ballvx=-ballvx;
  nballx=boxboundx;
  ctx.fillStyle="red";
  ctx.beginPath();
  ctx.linewidth=40;
  ctx.moveTo(boxboundx+ballrad,inboxboundy-ballrad);
  ctx.lineTo(boxboundx+ballrad,boxboundy+ballrad);
  ctx.stroke();
}
if(nbally>boxboundy){
  ballvy=-ballvy;
 nbally=boxboundy;
   ctx.fillStyle="red";
  ctx.beginPath();
  ctx.linewidth=40;
  ctx.moveTo(boxboundx+ballrad,boxboundy+ballrad);
  ctx.lineTo(inboxboundx-ballrad,boxboundy+ballrad);
  ctx.stroke();
}
if(nballx<inboxboundx){
  ballvx=-ballvx;
  nballx=inboxboundx;
  ctx.beginPath();
  ctx.linewidth=40;
  ctx.moveTo(inboxboundx-ballrad,inboxboundy-ballrad);
  ctx.lineTo(inboxboundx-ballrad,boxboundy+ballrad);
  ctx.stroke();
}
if(nbally<inboxboundy){
  ballvy=-ballvy;
  nbally=inboxboundy;
  ctx.beginPath();
  ctx.linewidth=40;
  ctx.moveTo(inboxboundx-ballrad,inboxboundy-ballrad);
  ctx.lineTo(boxboundx+ballrad,inboxboundy-ballrad);
  ctx.stroke();
}
ballx=nballx;
bally=nbally;
}
function changeV(){
  ballvx=Number(document.getElementById("vx").value);
  ballvy=Number(document.getElementById("vy").value);
}
</script>
</html>


本文转载自:

上一篇: localStorage的应用
下一篇: 广告自动播放
jiejiegao
粉丝 0
博文 9
码字总数 2321
作品 0
昌平
私信 提问
关于弹球游戏,弹球的运行和重力影响

要写一个弹球游戏,可不太明白弹球的运行算法包括重力影响和遇墙壁反弹等。希望各位大神给点思路

裴俊枫
2013/04/08
144
3
FlingAnimation/SpringAnimation实现弹球动画

You have to believe in yourself. That's the secret of success. 之前的QQ版本里面有个大表情的动画很炫酷,之前就想着怎么实现的。最近看了DynamicAnimation,发现利用它很容易实现类似效...

小草凡
08/19
0
0
python学习笔记--趣学Python编程第十三章的例子

弹球 由反弹球和球拍构成的游戏。球会在屏幕上飞过来,玩家要用球拍把它弹回去 画布和画弹球 引入模块 创建窗体 创建Ball类 创建Ball类,它有两个参数,一个是画布,另一个是球的颜色 把画布...

cysky
2018/06/28
0
0
弹球游戏--Linball

Linball,全称 Linux Pinball,它是一款开源的弹球游戏,支持 Windows 和 Linux 系统。具有音效,缺憾是画面效果稍微有点粗糙。 玩法很简单,相信玩过 Windows 弹球的朋友都很熟悉。这里只简...

匿名
2008/11/30
926
0
做游戏,学编程(C语言) 网易云课堂MOOC视频

应一些同学的要求,把这学期上C语言编程课的讲课视频录制剪辑,上传到网易云课堂,感兴趣的朋友可以在线观看,欢迎多提宝贵意见。 MOOC视频链接:http://study.163.com/course/introduction....

童晶
2017/11/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部