canvas贪吃蛇游戏
用canvas做了一个贪吃蛇小游戏



- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>贪吃蛇</title>
- <style>
- body{background: #666;text-align: center;}
- canvas{margin: 50px auto 0;/*border: 2px solid green;*/}
- </style>
- </head>
- <body>
- <canvas id="snake" width="800" height="500"></canvas>
- <script>
- /**
- * Created by linyufeng on 2017/7/26.
- */
- var width = 800;//游戏宽度
- var height = 500;//游戏高度
- var flag = false;//控制游戏是否结束
- var snakeArr;//存放身体坐标
- var food;//指定食物
- var direction;//运动方向
- var snakeMove;//自动运动(定时器)
- var size = 20;//食物和蛇大小
- var speed = 1000;//运动速度
- var highScore = 0;//最高分数
- var snake = document.getElementById('snake').getContext('2d');//获取canvas对象
- //重置游戏
- function reset(){
- flag = true;//开始游戏
- snakeArr = [{x:size*10,y:size*10},{x:size*10,y:size*10+size},{x:size*10,y:size*10+2*size}];//生成身体
- food = createFood();//随机食物
- direction = 39;//指定默认运动方向: 37左 38上 39右 40下
- }
- //开始游戏
- function start(){
- drawRect({x:0,y:0,w:width,h:width});
- drawText({text:'贪 吃 蛇',x:width/2,y:150,font:'64px 微软雅黑'});
- drawText({text:'开 始 游 戏',x:width/2,y:250,font:'34px 微软雅黑'});
- drawText({text:'最高分数: '+highScore,x:width/2,y:350,font:'24px 微软雅黑'});
- drawText({text:'按Enter键开始游戏',x:width/2,y:width/2,font:'24px 微软雅黑'});
- }
- //结束游戏
- function end(){
- clearInterval(snakeMove);
- flag = false;
- var score = snakeArr.length-3;
- highScore = highScore<score?score:highScore;
- drawText({text:'游 戏 结 束',x:width/2,y:150,font:'64px 微软雅黑'});
- drawText({text:'游戏分数: '+score,x:width/2,y:250,font:'34px 微软雅黑'});
- drawText({text:'最高分数: '+highScore,x:width/2,y:350,font:'24px 微软雅黑'});
- drawText({text:'按Enter键开始游戏',x:width/2,y:width/2,font:'24px 微软雅黑'});
- }
- //初始化游戏
- function init(){
- reset();
- draw();
- snakeMove = setInterval(function(){
- update(direction);
- },speed);
- }
- //画游戏界面
- function draw(){
- snake.clearRect(0,0,width,height);//清屏
- drawRect({x:0,y:0,w:width,h:width});//画背景
- drawSnake(snakeArr);//画蛇
- drawCircle(food.x,food.y);//画食物
- drawText({text:'分数: '+(snakeArr.length-3),x:10,y:10,font:'24px 微软雅黑',baseline:'top',align:'left'});//画分数
- }
- //随机产生食物
- function createFood(){
- var x = parseInt(Math.random()*(width/size))*size;
- var y = parseInt(Math.random()*(height/size))*size;
- return {x:x, y:y};
- }
- //身体运动和碰撞检测
- function update(direction){
- var head = snakeArr[0];
- if(!flag){
- return;//结束游戏
- }
- var newHead = {};
- if(direction == 37){//左
- newHead = {x:head.x-size,y:head.y};
- }else if(direction == 38){//上
- newHead = {x:head.x,y:head.y-size};
- }else if(direction == 39){//右
- newHead = {x:head.x+size,y:head.y};
- }else if(direction == 40){//下
- newHead = {x:head.x,y:head.y+size};
- }
- //身体自身碰撞检测
- for (var i = 0; i < snakeArr.length; i++) {
- var snake = snakeArr[i];
- if(snake.x==newHead.x && snake.y==newHead.y){
- end();
- return;
- }
- }
- //墙壁碰撞检测
- if(head.x<=0 || head.x>=width || head.y<=0 || head.y>=height){
- end();
- return;
- }else{
- //食物碰撞检测
- if(newHead.x==food.x && newHead.y==food.y){
- snakeArr.unshift(food);//添身体
- food = createFood();
- }else{
- snakeArr.unshift(newHead);//添头
- snakeArr.pop();//去尾
- }
- draw();
- }
- }
- //游戏开始画面
- start();
- //绑定鼠标控制事件
- document.addEventListener('keydown',function(e){
- e.preventDefault();
- /*******************************************
- * 37 Left(左箭头)
- * 38 Up(上箭头)
- * 39 Right(右箭头)
- * 40 Down(下箭头)
- * ******************************************/
- var code = e.keyCode || e.which;
- /***************************************
- * 只对上下左右键和Enter键生效,屏蔽其他键!
- * *************************************/
- if(code==37 || code==38 || code==39 || code==40 || code==13){
- /********************************************
- * 如果游戏未开始或者已结束,此时按下Enter键开始游戏
- * ******************************************/
- if(code==13){
- if(flag==false){
- init();
- }
- }else{
- /******************************************
- * 如果蛇的运动方向是上,那么不能向下运动
- * 如果蛇的运动方向是下,那么不能向上运动
- * 如果蛇的运动方向是左,那么不能向右运动
- * 如果蛇的运动方向是右,那么不能向左运动
- * ****************************************/
- if(Math.abs(code-direction)==2){
- return;//不允许这种移动方式
- }
- direction = code;
- update(direction);
- }
- }
- });
- /******************************************************************
- * 封装公共方法:
- * 1. 画矩形
- * 2. 写文字
- * 3. 画小方块
- * ****************************************************************/
- /**
- * @func: 画矩形
- * @params: {x} x坐标
- * @params: {y} y坐标
- * @params: {w} 宽度
- * @params: {h} 高度
- * @color: {color} 颜色
- * */
- function drawRect(option){
- /**************************************************************
- * 说明:canvas对象应该从外部传入,但是为了避免每次调用方法时都要传入,就固定写死了!
- * ************************************************************/
- snake.beginPath();
- snake.fillStyle = option.color || '#000';
- snake.fillRect(option.x,option.y,option.w,option.h);
- snake.closePath();
- }
- /**
- * @func: 写文字
- * @params: {x} x坐标
- * @params: {y} y坐标
- * @params: {w} 宽度
- * @params: {h} 高度
- * @params: {color} 颜色
- * @params: {baseline} 文字上下对齐方式
- * @params: {align} 文字左右对齐方式
- * */
- function drawText(option){
- snake.beginPath();
- snake.fillStyle = option.color || '#fff';
- snake.fontFamily = '微软雅黑';
- snake.font = option.font;
- snake.textBaseline = option.baseline || 'middle';
- snake.textAlign = option.align || 'center';
- snake.fillText(option.text,option.x,option.y);
- snake.closePath();
- }
- /**
- * @func: 画小方块
- * @params: {x} x坐标
- * @params: {y} y坐标
- * */
- function drawSquare(x,y){
- snake.beginPath();
- snake.fillStyle = '#fff';
- snake.fillRect(x+1,y+1,size-2,size-2);
- snake.closePath();
- }
- /**
- * @func: 画食物
- * @params: {x} x坐标
- * @params: {y} y坐标
- * */
- function drawCircle(x,y){
- snake.beginPath();
- snake.arc(x+size/2, y+size/2, size/2, 0, Math.PI*2,true);
- snake.fillStyle = '#0f0';
- snake.fill();
- snake.closePath();
- }
- /**
- * @func: 画蛇
- * @params: {arr} 蛇身体坐标
- * */
- function drawSnake(arr){
- for (var i = 0; i < arr.length; i++) {
- var snake = arr[i];
- drawSquare(snake.x,snake.y)
- }
- }
- </script>
- </body>
- </html>
canvas贪吃蛇游戏的更多相关文章
- H5实现的可自定义贪吃蛇游戏
原创游戏,使用lufylegend.js开发 用canvas实现的贪吃蛇游戏,与一般的贪吃蛇游戏不同,图片经过美工设计,代码设计支持扩展和自定义. 游戏元素丰富,包括障碍物(仙人掌),金币(奖励),苹 ...
- 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏
回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...
- 使用electron为贪吃蛇游戏创建全局快捷键
上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...
- 贪吃蛇游戏(printf输出C语言版本)
这一次我们应用printf输出实现一个经典的小游戏—贪吃蛇,主要难点是小蛇数据如何存储.如何实现转弯的效果.吃到食物后如何增加长度. 1 构造小蛇 首先,在画面中显示一条静止的小蛇.二维数组canva ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- 用C++实现的贪吃蛇游戏
我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 你一直在找的 Mac 系统优化工具,可能就是这一款!
文章来源:知乎 文章收录于:风云社区 www.scoee.com,提供上千款各类mac软件下载 尽管 Mac 上的维护工具总会被人诟病(通常是那些极客),但对于普通用户来说,像 CleanMyMac. ...
- Redis作为lru缓存作用
当 Redis 作为缓存使用时,当你添加新的数据时,有时候很方便使 Redis 自动回收老的数据.LRU 实际上是被唯一支持的数据移除方法.Redis 的 maxmemory 指令,用于限制内存使用到 ...
- BZOJ4627 前缀和 + 权值线段树
https://www.lydsy.com/JudgeOnline/problem.php?id=4627 题意:求序列中和在L到R之间的字串种数. 要求的是和的范围,我们可以考虑先求一个前缀和pre ...
- python OrderDict
# encoding: utf-8 import csv import collections d = {'banana':3,'apple':4,'pear':1,'orange':2} print ...
- MyBatis-SqlSessionFactory的创建
Main 方法,mybatis 版本为 3.5.0 解析配置文件的所有信息,保存在 Configuration 中,返回包含 Configuration 的 DefaultSqlSession Map ...
- JAVA核心技术I---JAVA基础知识(数字相关类)
一:相关数字类 –整数 Short, Int, Long –浮点数 Float, Double –大数类 BigInteger(大整数), BigDecimal(大浮点数) –随机数类 Random ...
- nginx的rewrite指令
需求:我们在接收到一个/api/upload 开头的url的时候 要转发到另外一个地址.但是又不想追加/api/upload 只想追加/upload 地址. Nginx提供了rewrite指令,用于 ...
- 163邮箱SMTP设置
如题要设置系统邮件自动发送 首先注册的网易邮箱要去开通SMTP服务,然后就是端口的设置 授权码 端口
- Java SSM框架之MyBatis3(十)MyBatis批量插入数据(MySql)
插入成功后返回自增主键 <insert id="insertRole" parameterType="role" useGeneratedKeys=&qu ...
- Jquery触发Change事件
Jquery直接使用val的话不会触发Change事件需要做如下处理$("#"+p_id).val(p_time); $("#"+p_id).change();