html5 游戏背景切换

最新推荐文章于 2021-06-04 00:50:02 发布

阅读量1k

点赞数

分类专栏： html5 文章标签： html5 游戏 image function html

本文链接：https://blog.csdn.net/bcmissrain/article/details/7421683

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

游戏的背景图可以是只有一个（很长很长），也可以是分开有几个相同大小的小图。

这里写两个小例子，第一个是单次移动一张很长很长的背景图：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
     var w = 900;
     var h = 400;
     var x0 = 0;
     var y0 = 0;
	 var ctx0;
     var image0= new Image();
     image0.src ="background.jpg";

     function init()
        {
            ctx0 =  document.getElementById('canvas').getContext('2d');
			setInterval(paintback,50);
        }

        function paintback()
        {
			x0 +=10;
            ctx0.clearRect(0,0,w,h);
            ctx0.drawImage(image0,x0,y0,w,h,0,0,w,h);
        }
    </script>
</head>
<body οnlοad="init();">
<canvas id="canvas" width="900" height="600">I am sorry that YOU CAN'T USE the html5</canvas>
</body>
</html>

另一个是循环场景的切换：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
     var w = 900;
     var h = 600;
     var x0 = 0;
     var y0 = 0;
     var x1 = w;
     var y1 = 0;
     var x2 = 2*w;
     var y2 = 0;
	 var move = 100;
	 var ctx0;
     var image0= new Image();
     image0.src ="0.jpg";
     var image1 =  new Image();
     image1.src = "0.jpg"
     var image2 =  new Image();
     image2.src = "0.jpg"

     function init()
        {
             ctx0 =  document.getElementById('canvas').getContext('2d');
			setInterval(paintback,100);
        }

        function paintback()
        {
            ctx0.clearRect(0,0,w,h);
			
            x0 +=move;
            x1 +=move;
            x2 +=move;
            if(x0>=2*w)
            {
                x0=move-w;
            }
            if(x1>=2*w)
            {
                x1=move-w;
            }
            if(x2>=2*w)
            {
                x2=move-w;
            }
            ctx0.drawImage(image0,x0,y0,w,h);
            ctx0.drawImage(image1,x1,y1,w,h);
            ctx0.drawImage(image2,x2,y2,w,h);
        }
    </script>
</head>
<body οnlοad="init();">
<canvas id="canvas" width="900" height="600">I am sorry that YOU CAN'T USE the html5</canvas>
</body>
</html>

当然了，如果添加逻辑的话，setInterval果断改成事件触发就好了。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 游戏背景切换

游戏的背景图可以是只有一个（很长很长），也可以是分开有几个相同大小的小图。这里写两个小例子，第一个是单次移动一张很长很长的背景图：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> var
复制链接

扫一扫