Canvas 逐帧贪吃蛇小游戏
Canvas 逐帧贪吃蛇小游戏
昙花一现 发表于2个月前
Canvas 逐帧贪吃蛇小游戏
  • 发表于 2个月前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: canvas 逐帧 游戏

简介: 很喜欢研究小游戏,因为算法的研究让我感到很有成就感,就从比较基础开始学起。这是一个以javascript+H5的canvas小游戏。以像素点在canvas画布上画出每一个动作,以每秒24个像素点的速度来模拟逐帧动画,让它不再是跳动移动。这个代码直接复制粘贴为html文件即可运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snake</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="title"><label id='title'></label></div>
<canvas id="myCanvas" width="1080" height="720" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
    var ctx=document.getElementById("myCanvas").getContext("2d");
    var title = $('#title');
    var r = [{x:100,y:30}];//竖的坐标
    var co=40;
    var speed = 24;//初始化速度
    var e=null;
    var l=null;//鼠标方位
    var s1;
    var s2;
    ctx.fillStyle='blue';
    $(document).ready(function(){
    	int();//初始化数据
    	s1 = setInterval(start,speed);//定时器
    	$('body').mousemove(function(e) { 
			var x = e.originalEvent.x || e.originalEvent.layerX || 0; 
			var y = e.originalEvent.y || e.originalEvent.layerY || 0; 
			l = {y:y,x:x};
		}); 
    });
    document.onkeyup = function(event){
    	clearTimeout(s2);
    	speed = 24;
    };
    document.onkeydown = function(){
    	if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){
            co = event.keyCode;
        }
    	s2 = setTimeout(fly, 2000);
    }
    function start(){
        stop();//结束
        eat();//吃果实
        r.unshift(r.pop());//尾接到头
        keyboard();//键盘控制
        clear();
        fruit();//画果实
        snake();//画蛇
    }
    //初始化数据
    function int(){
    	for(var i=1; i<20; i++){
    		var temp = {x:100,y:r[0].y+1};
    		r.unshift(temp);
    	}
    }
    //吃到果实,增加身体长度
    function add(){
    	for(var i=0; i<5; i++){
    		var temp1;
    		switch(co){
            case 37:
                temp1 = {x:r[0].x-1,y:r[0].y};
                break;
            case 38:
                temp1 = {x:r[0].x,y:r[0].y-1};
                break;
            case 39:
                temp1 = {x:r[0].x+1,y:r[0].y};
                break;
            case 40:
                temp1 = {x:r[0].x,y:r[0].y+1};
                break;
            }
    	    r.unshift(temp1);
    	}
    }
    //头吃到身
    function check(e,j){
        for(var i=0;i<r.length;i++){
            if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
        }
        return false;
    }
    //停止
    function stop(){
    	if( r[0].x < 0 || r[0].x >= 1080 || r[0].y < 0 || r[0].y >= 720){
            alert("game over\nYou get ["+(r.length-2)+"]");
            clearInterval(s1);
            return false;
        }//咬到自己或碰到墙壁,不再执行
    }
    //键盘控制
    function keyboard(){
    	 r[0].x = r[1].x;
    	 r[0].y = r[1].y;
    	 switch(co){
            case 37:
                r[0].x = r[1].x - 1;
                break;
            case 38:
                r[0].y = r[1].y - 1;
                break;
            case 39:
                r[0].x = r[1].x + 1;
                break;
            case 40:
                r[0].y = r[1].y + 1;
                break;
        }
    }
    //加速
    function fly(){
    	speed=speed-0.1;//加速
    }
    //吃果实
    function eat(){
    	if(e){
    		title.text('果实横坐标:'+e.x+'果实纵坐标:'+e.y+'蛇横坐标:'+r[0].x+'蛇纵坐标:'+r[0].y+'蛇的长度'+r.length+'速度'+speed);
            if(r[0].y>=e.y-10&&r[0].y<=e.y+10&&r[0].x<=e.x+10&&r[0].x>=e.x-10){
                add();//碰到果实加到蛇身长度
                e=null;//把果实清空
            }
        }
    }
    //画果实
    function fruit(){
    	if(e)ctx.fillRect(e.x,e.y,10,10);
    	while(e==null || check(e)){
            e={y:(Math.random()*710 >>>0),x:(Math.random()*1070 >>>0)};
        }
    }
    //画蛇
    function snake(){
	    for(var i=0;i<r.length;i++){
	        ctx.fillRect(r[i].x,r[i].y,10,10);
	    }
    }
    //清理画布
    function clear(){
    	ctx.clearRect(0,0,1080,720);//清空画布
    }
</script>
</body>
</html>

希望有喜欢的或志同道合的朋友一起交流。关注我

标签: Canvas HTML5 jQuery
共有 人打赏支持
昙花一现
粉丝 3
博文 18
码字总数 4965
×
昙花一现
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: