怎么去做一个好玩的弹弹球

本文介绍如何利用HTML5的canvas元素和JavaScript实现一个简单的弹弹球游戏。首先设置画布并绘制背景,然后画出物体并定义其初始位置。通过定时器实现物体的动态移动,当物体触碰边界时改变移动方向。
摘要由CSDN通过智能技术生成

首先我们需要在网页上绘制一块画布,并且做出画笔,给出画布的大小

<canvas width="600" height="500"></canvas>

  var canvas = document.getElementsByTagName('canvas')[0]

  var ctx = canvas.getContext('2d');

给我们的画布加上背景颜色

 canvas{

            background-color: #d55555;

        }

再画出我们的物体

 ctx.strokeRect(100,100,100,100);

在代码中找到物体宽高 

var y=100

var x=100

物体的移动我们需要一个值进行移动

var k=true;

var o=true;

然后给我们的物体加入移动的函数代码

 setInterval(function(){

            ctx.clearRect(0,0,600,500)

            // y += 5;

            ctx.strokeRect(x,y,100,100);

            if((y+5+100)>=500) {

              k=false  

            }else if(y-4<=0){

                k=true

            }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值