简易祖玛--canvas
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
width: 600px;
height: 600px;
background: #f7fcfc;
margin: 20px auto;
}
</style>
</head> <body>
<div class="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("c1");
var ctx = canvas.getContext('2d');
var yImg = new Image();
yImg.src = 'img/siteRotate.png';
yImg.onload = function() {
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath();
ctx.arc(300, 200, 200, -90 * Math.PI / 180, 180 * Math.PI / 180, false);
ctx.stroke(); ctx.beginPath();
ctx.arc(250, 200, 150, 180 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.stroke(); ctx.beginPath();
ctx.arc(400, 200, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.stroke(); for(var i = 0; i < ball.length; i++) {
ctx.beginPath();
ctx.moveTo(ball[i].x, ball[i].y);
ctx.arc(ball[i].x, ball[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.fill();
} ctx.save();
ctx.translate(300,200);
ctx.rotate(iRotate);
ctx.translate(-50,-50);
ctx.drawImage(yImg,0,0);
ctx.restore(); for(var i = 0; i < bullet.length; i++) {
ctx.save();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(bullet[i].x, bullet[i].y);
ctx.arc(bullet[i].x, bullet[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.fill();
ctx.restore();
} // ctx.save();
// ctx.font = '60px impact';
// ctx.textBaseline = 'top';
// ctx.fillStyle = 'red';
// ctx.shadowOffsetX = 10;
// ctx.shadowOffsetY = 10;
// ctx.shadowColor = 'green';
// ctx.shadowBlur = 5;
// var w = ctx.measureText('简易祖玛').width;
// var h = 60;
// ctx.fillText('简易祖玛',(canvas.width - w)/2 , 450);
// ctx.restore(); }, 1000 / 60); setInterval(function() {
for(var i = 0; i < ball.length; i++) {
ball[i].angle++;
if(ball[i].angle == 270) {
ball[i].r = 150;
ball[i].startX = 250;
ball[i].startY = 50;
}
if(ball[i].angle == 450) {
alert('游戏结束');
window.location.reload();
}
ball[i].x = Math.sin(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startX;
ball[i].y = ball[i].r - Math.cos(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startY;
} for( var i = 0; i < bullet.length; i++){
bullet[i].x = bullet[i].x + bullet[i].sX;
bullet[i].y = bullet[i].y + bullet[i].sY;
} for( var i = 0; i < bullet.length; i++){ for(var j = 0; j < ball.length; j++){ if( knock(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){
bullet.splice(i,1);
ball.splice(j,1);
break;
}
}
}
}, 30); var ball = []; //小球进洞
setInterval(function() {
ball.push({
x: 300,
y: 0,
r: 200,
startX: 300,
startY: 0,
angle: 0
})
}, 500) var iRotate = 0; //中心旋转
canvas.onmousemove = function (ev){
var ev = ev || window.event;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b); if( a>0 && b>0){ //第二象限
iRotate = Math.asin(b/c) + 90*Math.PI/180;
}else if(a>0){ //第一象限
iRotate = Math.asin(a/c);
}
if( a<0 && b>0){ //第三象限
iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
}else if(a<0){ //第四象限
iRotate = Math.asin(a/c);
}
} var bullet = []; //子弹发射
canvas.onmousedown = function (ev){
var ev = ev || window.event;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b); var speed = 5;
var sX = speed * a/c;
var sY = speed * b/c;
bullet.push({
x: 300,
y: 200,
sX: sX,
sY: sY
}) } function knock(x1,y1,x2,y2){ //碰撞检测
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt(a*a + b*b);
if( c < 36){
return true;
}else{
return false;
}
} }
</script>
</body> </html>
简易祖玛--canvas的更多相关文章
- h5-10 canvas 简易祖玛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html 5 cavans 简易祖玛
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 简易的canvas画板
没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...
- canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- canvas简易画板。
在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById(' ...
- canvas简易画板
代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
随机推荐
- Java基础实训2
1. 一维数组的创建和遍历. 声明并创建存放4个人考试成绩的一维数组,并使用for循环遍历数组并打印分数.要求: (1) 首先按“顺序”遍历,即打印顺序为:从第一个人到第四个人: (2) ...
- Navicat Premium 12
1.win 客户端软件下载: https://www.navicat.com.cn/download/navicat-premium 2.安装 双击安装--点击下一步 我同意--下一步 选择安装路径- ...
- Cent OS6下SS+BBR+改SSH端口
SS+BBR+改SSH端口 (一)搭建SS wget --no-check-certificate -O shadowsocks-libev.sh https://raw.githubusercont ...
- Deep Learning--week1~week3
week1 一张图片,设像素为64*64, 颜色通道为红蓝绿三通道,则对应3个64*64实数矩阵 为了用向量表示这些矩阵,将这些矩阵的像素值展开为一个向量x作为算法的输入 从红色到绿色再到蓝色,依次按 ...
- HttpClient throws TaskCanceledException on timeout
error msg: HttpClient throws TaskCanceledException on timeout HttpClient is throwing a TaskCanceledE ...
- matlab从曲线图提取数据
同学用肉体一顿饭让我帮他做下这个DDL 样图是一张非常扭曲的三虚线图他甚至想OCR识别x轴y轴坐标单位 上谷歌查了查,对于曲线图提取数据基本上是手动在曲线上取几个点,然后由这个几个点开始遍历领域点,判 ...
- .NET in Browser - Blazor
什么是Blazor Blazor 是一个实验性的. NET web 框架, 使用 C# 和 HTML 在任何浏览器中不需要插件即可运行 WebAssembly 程序集. 什么是WebAssembly ...
- Lintcode489-Convert Array List to Linked List-Easy
489. Convert Array List to Linked List Convert an array list to a linked list. Example Example 1: In ...
- react+es6+webpack环境搭建以及项目入门
前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...
- poi 导入Excle
一,AOP 是什么 Apache POI 提供java 程序对Microsoft Office格式文档的读写功能操作 二,所需要的jar包 三,实现代码 1, 读取Excle 返回Workbook格式 ...