简易祖玛--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）》第十一周学习总结
第一部分:理论知识学习部分 第十一章理论知识主要为集合类的介绍,在实验中都有所体现且本周主要复习回顾上周的泛型程序设计 第二部分:实验部分 ——集合 1.实验目的与要求 (1) 掌握Vetor.Sta ...
- 【新特性】JDK1.7
一.switch中可以使用字串 String s = "test";switch (s) { case "test" : System.out.printl ...
- [java]第一个程序
HelloWorld 主函数 学习一门语言第一部分就是学习主函数,Java的主函数是main函数有如下形式: public class HelloWorld{ public static void m ...
- Uniprot数据库
Uniprot数据库是Universal Protein的英文缩写,是信息最丰富.资源最广的蛋白质数据库. UniprotKB由两部分组成: UniProtKB/Swiss-Prot 高质量的.手工注 ...
- Django project troubleshootings
1. 当django project文件夹放到cgi-bin目录下面时会出现下面的错误: [Wed Jan 09 01:52:52.611690 2019] [core:notice] [pid 15 ...
- laravel框架——验证码（第二种方法）
开发环境: laravel5.5 php7.1.11 mysql 一.安装扩展包 ,安装前确认当前环境支持composer(出现如下图所示则安装成功) $ composer require " ...
- Premiere Pro 中的键盘快捷键
官网地址:https://helpx.adobe.com/cn/premiere-pro/using/default-keyboard-shortcuts-cc.html?mv=product& ...
- rxjs2学习
学习一个东西,一定不要管他怎么实现的,先详细的了解他的使用方法. 这篇博客的作用是都点到,书越读越薄,但是不详细阐述.为了记忆.如果想知道更详细,只能看相关的博客. 也是把以前看到的东西能串连起来. ...
- 第 10 章 容器监控 - 078 - Docker 最常用的监控方案
Docker 最常用的监控方案 当 Docker 部署规模逐步变大后,可视化监控容器环境的性能和健康状态将会变得越来越重要. Docker 自带的几个监控子命令: ps .top .stats 功能更 ...
- spring boot中利用mybatis-generator插件生成代码
使用Idea在spring boot中集成mybatis-generator,自动生成mapper.xml model dao 文件 一.配置 pom.xml 在pom.xml的<plugi ...