简易祖玛--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.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
随机推荐
- Windows环境下最新OpenCV和Contribute代码的联合编译【20180926更新红字】
解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 因为这篇博客经过多次修改,所以里面的内容和配图可能有不是完全比对的地方,但是只 ...
- 第一次远程ubuntu用c写Hello Word出现的问题
2019-03-26 21:48:48 之前已经学过c语言,但是一直是在win10上用VC++6.0来写代码的,现在想尝试在linux下用c语言 其实主要目的是来学习linux 1.问题: 在ubun ...
- L1,L2正则化代码
# L1正则 import numpy as np from sklearn.linear_model import Lasso from sklearn.linear_model import SG ...
- 【JavaScript】标准日期、中国标准时间、时间戳、毫秒数互转
转载自:https://blog.csdn.net/IT429/article/details/78341847 看到的一篇比较有用的前端js时间转换方法,留个备份 首先要明确这三种格式是什么样子的: ...
- 【Python】函数总结
以下为自学笔记内容,仅供参考. 转发请保留原文链接https://www.cnblogs.com/it-dennis/p/10516688.html python中的函数 最近看了python中关于函 ...
- 【HNOI 2016】网络
Problem Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做一条树边.两个服务器进行数据的交互时,数据会经过连接这两个服务器 ...
- mac 安装2019Adobe全家桶
链接:https://pan.baidu.com/s/1UrAnB5fmHKmYPESvqkU3Rg 密码:803f 下载大师版, 进入解压后的文件夹,双击安装程序 打开了安装界面,进入下图中的安装 ...
- 数据拆分之 垂直拆分 and 水平拆分
https://mp.weixin.qq.com/s?__biz=MzI1NDQ3MjQxNA==&mid=2247488833&idx=1&sn=4f5fe577521431 ...
- DAY 24继承与组合
一.继承 继承就是子类与父类形成的一种关系,可以让子类能直接从父类中获取属性与方法 优点:减少了类与类之间的代码冗余 语法: class 父类: # 父类是多个有共同点的普通类抽离共有属性与方法形成的 ...
- 环境准备—之—linux下安装svn--开机自启--及format权限问题
借鉴自 http://www.cnblogs.com/liuxianan/p/linux_install_svn_server.html 这个很详细,但不是我的风格 https://blog.csdn ...