对决模拟游戏编程

对决模拟游戏编程

有人可以做一下这道题目吗?实在是做不出来了

动画循环

动画的绘制就是一个重复的过程,其原理就是重复的绘制和清除,就如同下面这张图形

澳门新葡亰8455下载app 1

image.png

——————————– 作者在 2018-06-19 23:19:00 补充以下内容

QQ图片20180619231330.png (上传于2018-06-19
23:19:00)
澳门新葡亰8455下载app 2

QQ图片20180619231422.png (上传于2018-06-19
23:19:00)
澳门新葡亰8455下载app 3

QQ图片20180619231443.png (上传于2018-06-19
23:19:00)
澳门新葡亰8455下载app 4

Duel_Game.c

1、循环的方式

主要有三种:

  1. setTimeout 定时器
  2. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
  3. requestAnimationFrame() 开始一个动画 和 cancelAnimationFrame()
    取消动画

2、直线运动

[图片上传中…(QQ20171228-194308-HD.gif-2daec8-1514461554620-0)]
[澳门新葡亰8455下载app,图片上传中…(QQ20171228-194308-HD.gif-9c4529-1514461563882-0)]

我们在进行绘图时需要给定图形的位置和宽高.在进行直线运动的时候,我们更改横向或纵向的位置即可

下面我们来写一个直线运动的动画,当方块触碰到边框时,运动方向改变,简称碰壁反弹

html
<canvas id="mycanvas" width="600" height="600"></canvas>
css
canvas{
    border:1px solid #000000;
}
js
var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");

        //绘制图形
        function draw(x){
            context.beginPath();
            context.fillStyle="red";
            context.fillRect(x,0,50,50);
        }
        var x=0;
        var speedx = 2;
        draw(x)
        function act(){
            //清除画布
            context.clearRect(0,0,canvas.width,canvas.height);
            //更新位置
            x +=speedx;
            // 重绘
            draw(x);
            //当x位置小于等于0或大于等于canvas画布的宽度减去方块的宽度
            if(x<=0 ||x>canvas.width-50){
                speedx *=-1;
            }
            window.requestAnimationFrame(act);
        }
        //执行动画
        act();

最后显示:

澳门新葡亰8455下载app 5

QQ20171228-194308-HD.gif

网站地图xml地图