简易祖玛--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.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
随机推荐
- android开发_文本按钮 与 输入框
1 TextView: 属性与值 android:text="文本" android:textSize="20sp" //sp为 ...
- Java基础学习-关键字的概述和特点以及常量的概述和分类
1.关键字概述 -被Java语言赋予特定含义的单词 2.关键字的特点 -组成关键字的字母全部小写 -常用的代码编辑器,针对关键字有特殊的颜色标记,非常直观,所以我们不需要死记硬 ...
- Java面向对象内存分析
title: Java面向对象内存分析 date: 2018-07-28 11:12:50 tags: JavaSE categories: - Java - JavaSE 一.Java虚拟机的内存区 ...
- AI illustrator 如何裁剪图片（扣取局部区域）
AI如何裁剪图片 在使用illustrator的过程中,很多亲想要AI的裁剪功能与ps一样强大,但是AI常用的裁剪图片方法如下. 工具/原料 illustrator cs6 应用剪切蒙版剪切图片 ...
- Spark机器学习基础一
特征工程 对连续值处理 0.binarizer/二值化 from __future__ import print_function from pyspark.sql import SparkSessi ...
- windows命令行经ss代理
set http_proxy=http://127.0.0.1:port set https_proxy=http://127.0.0.1:port ss设置,启用系统代理,pac模式
- python正则表达式 - re
1,匹配符号 任意字符 . : 任意字符,除了\n,flags设置为DOTALL(S)可以让.匹配\n []字符集合,字符组:规范/元字符不同于正则式主体 [0-9] : 数字 [A-Z] : 大写字 ...
- OO第二单元作业总结【自我反思与审视】
第二单元作业的完成史,就是一部心酸的血泪史…… 多线程的出现为我(们)打开一片广阔的天地,我也在这方天地摸爬滚打,不断成长!如果说第一单元之前还对Java语法有所了解的话,那么这单元学习多线程则完全是 ...
- MVC架构模式详细说明
一.简介: 架构模式是一个通用的.可重用的解决方案,用于在给定上下文中的软件体系结构中经常出现的问题.架构模式与软件设计模式类似,但具有更广泛的范围. 模型-视图-控制器模式,也称为MVC模式(Mod ...
- MPI编程——分块矩阵乘法(cannon算法)
https://blog.csdn.net/a429367172/article/details/88933877