html 5 cavans 简易祖玛
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*margin{padding:0;margin:0;}
body{background:black;}
#box1{width:600px;height:600px;background:white; margin:20px auto;}
span{background:white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('cl');
var oGc = oC.getContext('2d');
var yImage = new Image();
yImage.src = 'person.png';
var iRotate = 0;
yImage.onload = function(){
setInterval(function(){
oGc.clearRect(0,0,oC.width,oC.height);
oGc.beginPath();
oGc.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
oGc.stroke(); oGc.beginPath();
oGc.arc(250,200,150,180*Math.PI/180,0,false);
oGc.stroke(); oGc.beginPath();
oGc.arc(400,200,20,0,360*Math.PI/180,false);
oGc.closePath();
oGc.stroke(); for(var i=0;i<ball.length;i++){
oGc.beginPath();
//oGc.moveTo(ball[i].x,ball[i].y);
oGc.arc(ball[i].x,ball[i].y,20,0,360*Math.PI/180,false);
oGc.closePath();
oGc.fill();
}
oGc.save();
oGc.translate(300,200);
oGc.rotate(180*Math.PI/180);
oGc.rotate(iRotate);
oGc.translate(-40,-40);
oGc.drawImage(yImage,0,0);
oGc.restore(); for(var i=0;i<bullet.length;i++){
oGc.save();
oGc.beginPath();
oGc.fillStyle = 'red';
oGc.moveTo(bullet[i].x,bullet[i].y);
oGc.arc(bullet[i].x,bullet[i].y,20,0,360*Math.PI/180,false);
oGc.closePath();
oGc.fill();
oGc.restore();
} oGc.save();
oGc.font = '60px impact';
oGc.textBaseline = 'top';
oGc.fillStyle = 'red';
oGc.shadowOffsetX = 10;
oGc.shadowOffsetY = 10;
oGc.shadowColor = 'green';
oGc.shadowBlur = 5;
var w = oGc.measureText('简易祖玛').width;
oGc.fillText('简易祖玛',(oC.width-w)/2,450);
oGc.restore();
},1000/60); //这个刷新1000/60最好
} var ball = [];
setInterval(function(){
var ballData = {
x:300,
y:0,
r:200,
startX:300,
startY:0,
num:0
};
ball.push(ballData);
},500); setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++;
if(ball[i].num == 270){
ball[i].r = 150;
ball[i].startX = 250;
ball[i].startY = 50;
}
if(ball[i].num == 270+180){
alert("游戏结束！");
window.location.reload();
}
ball[i].x = Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startX;
ball[i].y = ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startY;
} for(var i=0;i<bullet.length;i++){
bullet[i].x += bullet[i].sX;
bullet[i].y += bullet[i].sY;
} for(var i=0;i<ball.length;i++){
for(var j=0;j<bullet.length;j++){
if(crash(ball[i].x,ball[i].y,bullet[j].x,bullet[j].y)){
ball.splice(i,1);
bullet.splice(j,1);
break;
}
}
}
},30);
oC.onmousemove = function(ev){
var ev = ev || event;
var disX = ev.clientX - oC.offsetLeft;
var disY = ev.clientY - oC.offsetTop;
var a = disX-300;
var b = disY-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 = [];
oC.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - oC.offsetLeft;
var disY = ev.clientY - oC.offsetTop;
var a = disX-300;
var b = disY-200;
var c = Math.sqrt(a*a+b*b);
var speed = 5;
var spX = speed*a/c;
var spY = speed*b/c;
bullet.push({
x:300,
y:200,
sX:spX,
sY:spY
}); }; function crash(x1,y1,x2,y2){
var x = x1-x2;
var y = y1-y2; var c = Math.sqrt(x*x+y*y);
if(c <40){
return true;
}else{
return false;
}
} };
</script>
</head> <body>
<div id="box1">
<canvas id="cl" width="600" height="600">
<span>浏览器不支持canvas</span>
</canvas>
</div>
</body>
</html>
html 5 cavans 简易祖玛的更多相关文章
- 简易祖玛--canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- h5-10 canvas 简易祖玛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- .NET里简易实现AOP
.NET里简易实现AOP 前言 在MVC的过滤器章节中对于过滤器的使用就是AOP的一个实现了吧,时常在工作学习中遇到AOP对于它的运用可以说是很熟练了,就是没想过如果自己来实现的话是怎么实现的,性子比 ...
- 在.Net中实现自己的简易AOP
RealProxy基本代理类 RealProxy类提供代理的基本功能.这个类中有一个GetTransparentProxy方法,此方法返回当前代理实例的透明代理.这是我们AOP实现的主要依赖. 新建一 ...
- .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”
FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...
- 自己来实现一个简易的OCR
来做个简易的字符识别 ,既然是简易的 那么我们就不能用任何的第三方库 .啥谷歌的 tesseract-ocr, opencv 之类的 那些玩意是叼 至少图像处理 机器视觉这类课题对我这种高中没毕业的人 ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- 用Go实现的简易TCP通信框架
接触到GO之后,GO的网络支持非常令人喜欢.GO实现了在语法层面上可以保持同步语义,但是却又没有牺牲太多性能,底层一样使用了IO路径复用,比如在LINUX下用了EPOLL,在WINDOWS下用了IOC ...
- .NET里简易实现IoC
.NET里简易实现IoC 前言 在前面的篇幅中对依赖倒置原则和IoC框架的使用只是做了个简单的介绍,并没有很详细的去演示,可能有的朋友还是区分不了依赖倒置.依赖注入.控制反转这几个名词,或许知道的也只 ...
随机推荐
- spring security梳理
核心服务:AuthenticationManager,UserDetailsService和AccessDecisionManager The AuthenticationManager, Provi ...
- OpenCV 输入输出XML和YAML文件
#include <opencv2/core/core.hpp> #include <iostream> #include <string> using names ...
- XP停止更新不用愁 瑞星XP护盾给你持续保护
4月8日,微软正式结束了Windows XP的支持,所有XP系统将不会再收到来自微软提供的补丁和安全更新等服务,叱咤OS江湖十几年的一代操作系统终于完美谢幕.但谢幕不等于消失,据相关机构统计,虽然微软 ...
- css - inline-block 盒子下的内容文字错位问题
参考资料: “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落.错位”的原因及解决方法: 正文: 场景:两个 div 排在一行上,各有固定宽高, ...
- REVIT 卸载工具，完美彻底卸载清除干净revit各种残留注册表和文件
一些同学安装revit出错了,也有时候想重新安装revit的时候会出现这种本电脑windows系统已安装revit,你要是不留意直接安装,只会安装revit的附件,revit是不会安装上的.这种原因呢 ...
- 3DMAX 卸载工具，完美彻底卸载清除干净3dmax各种残留注册表和文件
一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑windows系统已安装3dmax,你要是不留意直接安装,只会安装3dmax的附件,3dmax是不会安装上的.这种原因呢 ...
- 【Linux_Shell 脚本编程学习笔记一、条件表达式】
条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] 比较符 整数比较 -eq:比较两个整数是否相等,$A -eq $B -ne:测试两个整数是否不等,不等则为真 ...
- ffmpeg android移植
CMake语法简介(androidstudio中利用CMake开发NDK): http://blog.csdn.net/u013718120/article/details/62883711FFmpe ...
- java 项目乱码解决（web.xml全局配置编码格式）
<!-- 乱码解决 --> <filter> <filter-name>encodingFilter</filter-name> //过滤器名称 < ...
- LeetCode43(字符串相乘)
题目: 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2", ...