文档章节

Canvas 逐帧贪吃蛇小游戏

昙花一现
 昙花一现
发布于 2017/08/30 16:36
字数 717
阅读 36
收藏 0

简介: 很喜欢研究小游戏,因为算法的研究让我感到很有成就感,就从比较基础开始学起。这是一个以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>

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

© 著作权归作者所有

共有 人打赏支持
昙花一现

昙花一现

粉丝 3
博文 30
码字总数 8176
作品 0
广州
程序员
做游戏,学编程(C语言) 22 贪吃蛇(printf输出版本)

这一次我们应用printf输出实现一个经典的小游戏—贪吃蛇,主要难点是小蛇数据如何存储、如何实现转弯的效果、吃到食物后如何增加长度。更多内容可参看《C语言课程设计与游戏开发实践教程》第...

童晶
2017/09/06
0
0
做游戏,学编程(C语言) 9 贪吃蛇

这个案例给出了14级同学大一时实现的贪吃蛇小游戏,分步骤代码、游戏素材可以从百度云盘下载:http://pan.baidu.com/s/1c1lYKQ 首先可以打开Exefinal目录下的Exefinal.dsw工程文件,编译运行...

童晶
2017/02/03
0
0
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0
【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能(附源代码详解和下载)

C++编写贪吃蛇小游戏快速入门 刚学完C++。一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能。希望大家Enjoy It. 效果图示 AI模式演示 整体规划+原理 大体上可以...

短短的路走走停停
07/29
0
0
android图形系统详解一:Canvas

概述   当写一个应用时,恰当的决定你的图形需求是很重要的.不同的图形任务对应不同的技术.例如,一个静态应用的图形和动画的实现肯定与一个交互式游戏非常不同.这里,我们将讨论一些在...

hejunbinlan
2016/10/27
29
0

没有更多内容

加载失败,请刷新页面

加载更多

使用Newtonsoft将DataTable转Json

使用Newtonsoft将DataTable转Json Newtonsoft提供的将DataTable转成Json: /// <summary> /// DataTable转Json /// </summary> /// <param name="dt"></param> /// <ret......

DemonsI
23分钟前
1
0
centos7安装zookeeper3.4.6

注:zookeeper充当注册中心 下载地址 http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.4.6/ 单机 下载完成后,将安装包上传值服务器,解压 tar xvzf zookeeper-3.4.6.tar.gz 进入解...

码代码的小司机
24分钟前
1
0
136. Single Number

136. Single Number 题意:一个数组中所有数字都是两两相同,只有一个数字是单独的,求出这个数字的值。 很简单的题,使用异或就能处理。 异或介绍:bit位上的值不同,异或后,值为1.否则为0...

117
26分钟前
1
0
Hash和HashCode深入理解

目录介绍 1.Hash的作用介绍 1.1 Hash的定义 1.2 Hash函数特性 1.3 Hash的使用场景 2.如何判断两个对象相等 2.1 判断两个字符串 2.2 判断两个int数值 2.3 其他基本类型 3.HashCode深入分析 3....

潇湘剑雨
32分钟前
1
0
ecshop 漏洞如何修复 补丁升级与安全修复详情

目前ecshop漏洞大面积爆发,包括最新版的ecshop 3.0,ecshop 4.0,ecshop2.7.3全系列版本都存在着高危网站漏洞,导致网站被黑,被篡改,被挂马,许多商城系统深受其漏洞的攻击,给商城的运营者...

网站安全
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部