HTML5（三）canvas（3）

最新推荐文章于 2021-08-19 17:14:50 发布
最新推荐文章于 2021-08-19 17:14:50 发布
阅读量138 收藏 1
点赞数
分类专栏： HTML/CSS/JavaScrript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangwei234/article/details/84202221
版权

简易祖玛游戏

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
</head>
<style>
*{margin: 0;padding: 0;}
body{ background:black;}
#div1{ background:white;width: 600px;margin: 20px auto; }
</style>
<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var yImg = new Image();
        yImg.src = 'person.png';
        yImg.onload = function(){
                var i = 0;
                // 重新绘制路径和小球运动位置
                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, 360*Math.PI/180, false);
                        oGC.stroke();
                        // 第三段圆弧
                        oGC.beginPath();
                        oGC.arc(400, 200, 20, 0*Math.PI/180, 360*Math.PI/180, false);
                        oGC.stroke();

                        // 绘制球
                        for(var i=0; i<balls.length; i++){
                                oGC.beginPath();
                                var x = balls[i].x;
                                var y = balls[i].y;
                                oGC.moveTo(x, y);
                                oGC.arc(x, y, 20, 0*Math.PI/180, 360*Math.PI/180, false)
                                oGC.fill();
                        }
                        oGC.save();
                        oGC.translate(300, 200);
                        oGC.rotate(iRotate);
                        oGC.translate(-40, -40);
                        oGC.drawImage(yImg, 0, 0);
                        oGC.restore();

                        // 绘制子弹
                        for(var i=0; i<bullets.length; i++){
                                oGC.save();
                                oGC.fillStyle = 'red';
                                oGC.beginPath();
                                var x = bullets[i].x;
                                var y = bullets[i].y;
                                oGC.moveTo(x, y);
                                oGC.arc(x, y, 20, 0*Math.PI/180, 360*Math.PI/180, false)
                                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;
                        var h = 60;
                        oGC.fillText('简易祖玛', (oC.width - w)/2 , 450 );
                        oGC.restore();
                }, 1000/60);
                // 绘制小球位置 && 更新子弹
                setInterval(function(){
                        // 绘制小球位置
                        for(var i=0; i<balls.length; i++){
                                balls[i].num++;

                                if(balls[i].num === 270){
                                        balls[i].r = 150;
                                        balls[i].startX = 250;
                                        balls[i].startY = 50;
                                }
                                if(balls[i].num === 270 + 180){
                                        alert('Game over !!!');
                                        window.location.reload();
                                }

                                var r = balls[i].r
                                balls[i].x = Math.sin(balls[i].num*Math.PI/180)*r + balls[i].startX;
                                balls[i].y = balls[i].r - Math.cos(balls[i].num*Math.PI/180)*r + balls[i].startY;
                        }

                        for(var i=0; i<bullets.length; i++){
                                bullets[i].x =  bullets[i].x + bullets[i].xSpeed;
                                bullets[i].y =  bullets[i].y + bullets[i].ySpeed;
                        }

                        for(var i=0; i<bullets.length; i++){
                                for(var j=0; i<balls.length; j++){
                                        if(collision(bullets[i].x, bullets[i].y, balls[j].x, balls[j].y)){
                                                bullets.splice(i, 1);
                                                balls.splice(j, 1);
                                                break;
                                        }
                                }
                        }
                }, 30);
                // 创建小球
                var balls = [];
                setInterval(function(){
                        balls.push({
                                x: 300,
                                y: 0,
                                r: 200,
                                num: 0,
                                startX: 300,
                                startY: 0
                        })
                }, 350);
                // 鼠标移动的位置控制祖玛旋转位置
                var iRotate = 0;
                oC.onmousemove = function(ev){
                        var ev = ev || window.event;
                        var x = ev.clientX - oC.offsetLeft;
                        var y = ev.clientY - oC.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 bullets = [];
                oC.onmousedown = function(ev){
                        var ev = ev || window.event;
                        var x = ev.clientX - oC.offsetLeft;
                        var y = ev.clientY - oC.offsetTop;

                        var a = x - 300;
                        var b = y - 200;
                        var c = Math.sqrt(a*a + b*b);

                        var speed = 5;
                        var xSpeed = speed * a/c;
                        var ySpeed = speed * b/c;

                        bullets.push({
                                x: 300,
                                y: 200,
                                xSpeed: xSpeed,
                                ySpeed: ySpeed
                        });
                }
        }

        // 碰撞
        function collision(x1, y1, x2, y2){
                var a = x1 - x2;
                var b = y1 - y2;
                var c = Math.sqrt(a*a + b*b);

                if(c < 40){
                        return true;
                }else{
                        return false;
                }
        }
};
</script>
</head>

<body>
        <div id="div1">
                <canvas id="c1" width="600" height="600"></canvas>
        </div>
</body>
</html>

讲文明的喜羊羊拒绝pua
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas 三
ly479488874的博客
04-01 246
关于canvas中的beginPath和endPath 在windows中除了区域这个概念，还增加了一个新的GDI对象：也就是路径 一开始图形的形状，内部的填充都是局限性的，但是路径的出现大大丰富了关于图形的设计 关于路径的API参数 BeginPath ： 路径开始 EndPath ： 路径结束 StrokePath ： 绘制路径 FillPath ： 填充路径 对于路径的调节有moveTo lineTo moveto是移动
Canvas3 汉化补丁发布
热门推荐
大师的资源
07-17 1万+
Canvas3 汉化补丁发布 此次汉化经历了一年零一个月
祖玛完全版（zuma）
11-15
祖玛休闲小游戏，提神健脑，办公休闲时间自娱自乐
Canvas3 绘图和重叠
张晨光老师的播客
12-05 4209
组合图形  绘制阴影 function draw(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.fillStyle="yellow"; ctx.strokeStyle="yellow"; var centerX=100;
html5之canvas（三）
marslover521的博客
12-26 133
HTML5 canvas的 图像绘制，转换，其他 方法 img图像下载完毕事件onload img.onload =function() { } 图像绘制方法 HTML5 canvas drawImage() 方法 图像绘制 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;body&gt; &lt;img id="pic" class="g...
html5使用canvas画三角形
09-28
主要介绍了html5使用canvas画三角形,需要的朋友可以参考下
H5 Canvas三角形图案动画特效
06-24
H5 Canvas三角形图案动画特效是一款基于HTML5 Canvas绘制的三角形花纹旋转变形图案动画特效。
HTML5 Canvas 3D螺旋线条动画
04-16
今天我们分享另外一个螺旋线条动画，它是基于HTML5 Canvas的，与之前不同的是，它有3D的视觉效果，并且更强大的地方是可以动态修改一些参数来改变螺旋线条的形状。同时，螺旋线条的颜色还会根据鼠标移动的不同角度而...
Canvas 3 着色
weixin_44317648的博客
05-08 432
上色 fillStyle:設定圖形填充色 fillStyle = color strokeStyle:設定圖形邊框顏色 strokeStyle = color color:可以是 css 顏色的字符串，也可以是漸變對象或者是圖案對象 canvas 默認顏色是黑色 每次改變顏色都需要重新設定，因爲之前的設定都會成爲默認值。 CSS 顏色標準包括 “orange” 顏...
HTML5之canvas3
努力，追梦的博客
06-27 437
body{ background:black;} #c1{ background:white;} window.onload = function(){   var oC =document.getElementById('c1');   var oGC = oC.getContext('2d');   var yImg = new Image();   yImg.onload
canvas3:绘制感叹号
张晨光老师的播客
12-08 1150
使用Canvas按照代码会出现如下图形显示： function draw(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); var width=120; var height=110; var padding=5
canvas读取图片，输入文字，调整文字属性，拖拽文字位置，并保存图片
雨果的博客
08-19 4991
我不是专业的前端哦，可能写的不太好，见谅。 整体思路： 共有5层，除了背景颜色的div没什么用之外，canvas1用来读取图片作为背景，canvas2把文字展示出来，canvas3用来展示拖拽的文字，canvas4用来把canvas1背景图片和canvas3拖拽后的文字给画到一个canvas上，实现保存图片的目的。 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
d3 canvas_D3和Canvas分3个步骤
cumi6497的博客
07-14 1328
d3 canvasby lars verspohl 由拉斯·韦斯波尔 D3和Canvas分3个步骤 (D3 and Canvas in 3 steps) 绑定，平局和互​​动 (The bind, the draw and the interactivity) Let’s say you’re building a data visualization using D3 and SVG. Y...
Canvas3——绘制渐变图形与绘制变形图形
小狼驿站
05-10 1638
1、Canvas绘制渐变图形 （1）绘制线性渐变 createLinearGradient() **CanvasRenderingContext2D**.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象。 CanvasGradient _ctx_.createLinearGradient(x
Canvas(3)
qq_37956730的博客
06-28 243
12 , canvas中的贝塞尔曲线 (1):二阶贝塞尔曲线 ctx.quadraticCurveTo(cpx,cpy,x,y); &lt;!-- cpx 贝塞尔控制点的 x 坐标 cpy 贝塞尔控制点的 y 坐标 x 结束点的 x 坐标 y 结束点的 y 坐标 ...
canvasapi及实现简易祖玛
miyacnn的专栏
02-09 311
一，canvas简介 1，我们说canvas，是一个html5的一种元素，通过使用javascript，可用于绘制图形，动画，图表，照片构图，或在飞行的任何其他可视化对象。 2，支持的浏览器， Internet Explorer (9.0+) Safari (3.0+) Firefox (3.0+) Chrome (3.0+) Opera (10.0+) iOS (1.0+) ...
【HTML】Canvas(3)-绘制图片
LZGS_4的专栏
03-30 1655
开发的游戏的时候，游戏中的地图、背景、任务、物品等都是由图片组成的，本节我们来谈谈在canvas中如何操作图片吧。        canvas中提供了drawImage函数和putImageData函数来绘制图片。        drawImage()函数有3种函数原型，语法如下：        drawImage(image,dx,dy);        drawImage(image,
Canvas（三）：画各种线
香蕉你个芭呐呐的博客
05-11 2253
canvas
Html5 canvas
最新发布
09-15
HTML5 canvas是一个矩形区域，用于绘制图形、文字、处理图片和视频等多种功能。通过获取canvas标签，并获取绘制上下文对象，可以在JavaScript中完成所有的绘制工作。使用canvas可以实现绘制基础图形、绘制文字、图形...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

讲文明的喜羊羊拒绝pua

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值