html5 简单的弹弹球制作
就是利用canvas画圆和擦除，利用setInterval
<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">
<html xmlns="http;//www.w3.org/1999/xhtml">
<head>
<title>啊干牌弹弹球</title>
<meta http--equiv="Content--Type" content="text/html;charset=gb2312">
<script language = "JavaScript">
<!--
var ballr = 15; //球的半径
var recwidth = 400;
var recheight = 400;
var ballx = 600; //球心的横坐标
var bally = 235; //球心的纵坐标
var ballvx = 20; //水平速度
var ballvy = 5; //垂直速度
function myinit()
{
var context = document.getElementById('mycanvas').getContext('2d');
context.linewidth = 5;
context.strokeRect(400,50,recwidth,recheight);
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.fill();
setInterval(moveball,50);
}
function moveball()
{
var context = document.getElementById('mycanvas').getContext('2d');
context.clearRect(390,40,recwidth+20,recheight+20);
var temp = check();
ballx = ballx + 0.1*ballvx;
bally = bally + 0.1*ballvy;
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.strokeRect(400,50,recwidth,recheight);
context.closePath();
context.fill();
}
function check()
{
if(ballx - ballr <= 400)ballvx = -ballvx;
if(ballx + ballr >= 800)ballvx = -ballvx;
if(bally - ballr <= 50)ballvy = -ballvy;
if(bally + ballr >= 450)ballvy = -ballvy;
}
function change()
{
var x = Number(document.form1.xspeed.value);
var y = Number(document.form1.yspeed.value);
if(x>=-50 && x<=50)ballvx = x;
else alert("速度不能超50！");
if(y>=-50 && y<=50)ballvy = y;
else alert("速度不能超50！");
return false;
}
//-->
</script>
<body onload = "myinit();">
<canvas id = "mycanvas" name = "mycanvas" width = "1000" height = "500">
</canvas>
<form id = "form1" name = "form1" onSubmit ="return change();">
水平速度:<input type = "number" id = "xspeed" name = "xspeed" value = "" min = "-50" max = "50"/>
竖直速度:<input type = "number" id = "yspeed" name = "yspeed" value = "" min = "-50" max = "50"/>
<input type = "submit" value = "CHANGE"/>
</form>
</body>
</html>
html5 简单的弹弹球制作相关推荐
- html自动弹出提示对话框代码,html5简单的手机端弹出对话框确认代码
特效描述:html5手机端 弹出对话框确认.html5手机端弹出对话框 代码结构 1. 引入JS 2. HTML代码 没有传递任何参数(需手动关闭) 弹出一个不带任何按钮,且是警告的框,并且两秒后自动 ...
- 【实战HTML5与CSS3】免费制作威客页面啦（附源码）
[实战HTML5与CSS3]免费制作威客页面啦(附源码) 原文 http://www.cnblogs.com/yexiaochai/archive/2013/05/05/3060770.html 前言 ...
- 关于processing弹弹球
这些是关于弹弹球的过程,而制作弹弹球我们肯定首先要画一个圆,接着还要设置碰到边框就反弹等程序,还可以加上背景颜色和球的颜色,更好看 转载于:https://www.cnblogs.com/wanyue ...
- 3d弹弹球(加强版)
上篇文章带读者完成了一个3d弹弹球,本文我们来继续看看这个3d弹弹球的一个增强版,即给弹弹球添加上光线和阴影. 本文是threejs系列的第四篇,阅读前面的文章有助于更好的理解本文: 1.一个简单的案 ...
- 网页设计与制作html5教学目标,HTML5+CSS3网页设计与制作—教学大纲（10页）-原创力文档...
博学谷--让IT 教学更简单,让IT 学习更有效 <HTML5+CSS3 网页设计与制作>课程教学大纲 (课程英文名称) 课程编号: 学 分:5 学分 学 时:74 学时 (其中:讲课学时 ...
- java代码弹弹球_java_Java实力弹弹球实现代码，先看看效果图：直接上代码 - phpStudy...
Java实力弹弹球实现代码 先看看效果图: 直接上代码了. 微调按钮加画布画几个圆,再实现监听... package cn.hncu.threadDemo.thread2; import java.a ...
- html5 表单for,HTML5 for(网页表单制作)(姬岚洋).doc
HTML5 for(网页表单制作)(姬岚洋) HTML5 Form (网页表单制作) 作者:姬岚洋 说明:本文致力于制作一个简单的网页表单制作方法,向大家展现最简单的表单入门制作方法.实现截图: 源代 ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 3
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- android 弹窗有边框_Android 多种简单的弹出框样式设置代码
简介 这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 特性 1.使用链式开发代码简洁明了 2.所有的弹出框样 ...
最新文章
- jQuery $.post()返回类型为json时不进入回调函数的原因及解决方法
- linux非lvm分区在线扩容,怎么给不是LVM的根分区扩容
- python哪一版好用-python IDE有哪些？哪个好用？
- return view前端怎么获取_前端判断上传图片格式
- Golang协程案例：并行计算指定数的阶乘（未使用管道）
- 浏览器插件-- Browser Helper Object（BHO） 一
- Hash(LCP) || 后缀数组 LA 4513 Stammering Aliens
- 数据仓库之电商数仓-- 4、可视化报表Superset
- 浏览器字体大小设置_max浏览器app-max浏览器安卓版
- 解决 ImportError: No module named ‘pip._internal‘问题
- 【echarts 中国地图】vue实现中国地图，省份居中china.json文件下载
- ajax 上传文件实例,Ajax 之文件上传
- 读《About Face 4 交互设计精髓》2
- word中 插入公式及交叉引用
- 【数据结构 课程设计】识别结点(node) 故障和边缘(edge)故障中的网络断层扫描
- Linux 创建oracle数据库
- iOS日历攻略：提醒调休并过滤法定节假日
- 带你学微信小程序开发
- [教程资源] HTC Vive UI Guideline
- 小米运动同步到Google Fit健身, 解决睡眠和体重不同步的情况
热门文章
- 三菱FX1s与3台台达MS300变频器通讯程序
- android 8.0 nexus7,Android 7.0系统更新将在8月22日推送，谷歌Nexus将获更新
- 北邮毕业计算机年薪多少,“两电一邮”到底有多牛? 这4大专业: 一毕业年薪几十万!...
- Montinz Word-2-CHM
- 北大青鸟的班主任好当吗_身为北大青鸟职英班主任是一种怎样的体验
- css 动画 飞机,利用CSS3实现炫酷的飞机起飞的动画
- abaqus高版本的cae文件无法在低版本运行怎么办？别急，两种方法帮你解决问题！
- Android 相册图库功能，按时间排序
- Vue + EChart4.0 从0到1打造商业级数据报表项目
- Linux 中 make 命令用法示例