文档章节

Canvas 逐帧贪吃蛇小游戏

昙花一现
 昙花一现
发布于 2017/08/30 16:36
字数 717
阅读 23
收藏 0
点赞 0
评论 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>

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

© 著作权归作者所有

共有 人打赏支持
昙花一现

昙花一现

粉丝 2
博文 27
码字总数 6601
作品 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
android图形系统详解一:Canvas

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

hejunbinlan
2016/10/27
29
0
Make Games with Python & Pygame (4)

从现在开始,就是具体游戏的制作了。作者是每章一个游戏,有些游戏我不是很感兴趣,只对其中有兴趣,所以就只讲这一些。 第一个游戏就是贪吃蛇游戏,说起这个游戏,这可能是我玩的最早的游戏...

NightCode
2015/04/13
0
0
用Canvas画一只会跟着鼠标走的小狗

以前经常看到这种效果:在网页右下角放一个人,然后他的眼珠会跟着鼠标转,效果如下: 这个例子来自于CodePen,它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果。 这种跟着鼠...

人人网FED
03/01
0
0
2017 年 CodePen 优秀作品盘点

时光荏苒,白驹过隙!又是一年将要结束,崭新的 2018 即将到来。每到年底,各大资讯网站的专题盘点让我们应接不暇,这当然少不了 CodePen 。作为知名的前端交流社区,CodePen 上的技术高手们...

IT程序狮
2017/12/31
0
0
HTML 5 Canvas vs. SVG(摘抄)

摘抄自:http://www.w3school.com.cn/html5/html5canvasvssvg.asp如果之前知道的话,理解起来就不会那么困难了,就能很快看懂代码,然后从模仿到创新。虽然技术的确需要脑力,但是积累多了也...

小敏virgo
2014/09/01
0
0
Android 动画:这是一份详细 & 清晰的 动画学习指南

前言 动画的使用 是 开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现 复杂的动画效果时,很多开发者就显得束手无策 本文将献上一份动画的全面介绍攻略,包括动...

Carson_Ho
05/03
0
0
IOS-SpriteKit 播放序列帧-改变每帧位置问题

最近在尝试使用 IOS- SpriteKit 来开发一款2D游戏, 遇到了一个播放序列帧的问题无法解决.来此寻求帮助,麻烦大家了. [1] 首先我采用 atlas图集的方式,将一套动作的所有序列帧放入一个 folder...

DioCC
2014/02/18
486
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
6
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部