canvas游戏之贪食蛇
直接上效果图：
这个贪食蛇关键地方在于数组，它的长度增加其实是数组的增长，就是数组的向前追加等操作，核心就是数组的操作。
完整代码：
<!DOCTYPE html>
<html> <body>
<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
//r数组表示蛇 ； co表示蛇前进的方向，默认向下 ； e表示食物
var ctx = document.getElementById("myCanvas").getContext("2d"),
r = [{
x: 10,
y: 9
}, {
x: 10,
y: 8
}],
co = 40,
e = null;
/*为了避免按键太快，使定时器没有反应过来，出现bug*/
var offOn=true;
/*这是关卡的开关*/
var offOn01=true;
/*关卡倒计开始值*/
var num=3;
//循环，间隔为200毫秒
var timer=setInterval(doMove, 200); function doMove() { //给蛇加上阴影效果
ctx.shadowBlur = 20, ctx.shadowColor = "black"; //游戏是否已经结束
if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24) return; //如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部
e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||
(co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||
(co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||
(co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?
(r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop())); //根据方向，重新设定蛇数组首元素的坐标，从而进行移动
(co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y); //清空屏幕
ctx.clearRect(0, 0, 240, 240); //如果有食物，则绘制食物
if (e) ctx.fillRect(e.x * 10, e.y * 10, 10, 10); //绘制蛇
for (var i = 0; i < r.length; i++) ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10); //如果没有食物，则在随机位置上加入一粒食物
while (e == null || check(e)) e = {
y: (Math.floor(Math.random() * 24)),
x: (Math.floor(Math.random() * 24))
}; /*分数*/
ctx.shadowBlur=0;
ctx.font="12px Arial";
ctx.fillText("分数:"+(r.length - 2),10,10);
ctx.textBaseline="top"; //判断游戏是否结束
if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)
alert("game over\n你获得：" + (r.length - 2) + "分"); /*设置一个关卡，就是分数到10分后进入下一关，只设置一个关卡*/
if((r.length-2)==10){
if(offOn01){
clearInterval(timer);
offOn01=false;
var timer0=setInterval(function(){
if(num<=0){
clearInterval(timer0);
}
ctx.clearRect(0, 0, 240, 240);
ctx.font="20px Arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("下一关:"+num,120,120);
num=--num<0?0:num;
},1000);
setTimeout(function(){
timer=setInterval(doMove, 100);
},4000);
}
} offOn=true;
} //加入键盘事件，用方向键来控制蛇前进的方向
/*(Math.abs(event.keyCode - co) != 2判断不能向后走
left:37,top:38,right:39,bottom:40
反方向刚刚好是相差2
*/ document.onkeydown = function(event) {
if(offOn){
offOn=false;
co = event.keyCode >= 37 &&
event.keyCode <= 40 &&
(Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;
}
}
//判断指定位置是否与蛇重叠
/*这是为了检测自己撞到自己或检测食物在贪食蛇里面的*/
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;
}</script>
</body> </html>
可以直接复制上面代码看效果；
上面的核心代码：
//如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部
e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||
(co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||
(co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||
(co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?
(r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop())); //根据方向，重新设定蛇数组首元素的坐标，从而进行移动
(co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);
这是贪食蛇的核心代码，就是数组长度添加，和数组里的值怎么改变。
canvas游戏之贪食蛇的更多相关文章
- Javascript贪食蛇小游戏
试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...
- JavaScript贪食蛇游戏制作详解
之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...
- 基于javaSwing的贪食蛇游戏
这个项目时,是我好几年前写的了.但对刚入门,或者想瞧瞧java的图形的界面swing的同学,还是有点用处的. 在这推荐给你. 涉及技术点 swing,多线程,文件读写,多媒体文件播放等 游戏简介 该游 ...
- 教你如何用python和pygame制作一个简单的贪食蛇游戏，可自定义
1.效果图 2.完整的代码 #第1步:导出模块 import pygame, sys, random from pygame.locals import * # 第2步:定义颜色变量,在pygame中 ...
- 一起来做webgame，《Javascript贪食蛇》
2019-09-22更新: 使用canvas实现:https://github.com/onlyfu/SnakeSir-Javascript 以下为HTML4实现: 今天来个略有意思的,<贪食蛇 ...
- OS X下开发！ios系统贪食蛇！——from cocos2d-x 3.0
前几天用cocos2d-x写了个贪食蛇!这次是全然在osx下开发的.基本的思路是这种我建立了一个Snake类,当中有两个构造函数一个是用于存放蛇身体sprite的图片和Snake的X坐标和Y坐标.另外 ...
- 【原创】只学到二维数组和结构体，不用链表也能写一个C贪食蛇？（四）
全系列Index: [原创]只学到二维数组和结构体,不用链表也能写一个C贪食蛇?(一) [原创]只学到二维数组和结构体,不用链表也能写一个C贪食蛇?(二) [原创]只学到二维数组和结构体,不用链表也能 ...
- Cocos2dx 3.0 过渡篇（二十五）死不了的贪食蛇(触摸版)
上一篇写的贪食蛇的重力感应控制版,这一篇就讲下触摸控制版吧.额,也不知道写了那个贪食蛇教程究竟有没有获得沈老师的书,假设没有的话,看我不拿西瓜刀砍掉 偶尔E往事 的那啥! 重力版链接:http://b ...
- js贪食蛇
<!DOCTYPE html><head><title>canvas贪食蛇</title><style>.canvas{ backgr ...
随机推荐
- iOS进阶_FMDB的简单使用
先引入FMDB第三方,点击查看方法 一.创建表 1.创建sql语句 NSString *createSql = @"create table if not exists t_stude ...
- 网页播放器（jsp、js）
jsp对控件显示 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...
- DSO动态加载PHP模块到Apache服务器
PHP在Linux/Unix平台上经常与Apache搭配使用,在安装PHP时,有三种安装方式可供选择:静态模式.动态模式(DSO).CGI二进制模式. 由于易于维护和升级,我强烈建议以DSO方式安装P ...
- linux之LVM
一.简介 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵 ...
- 你好，欢迎来到我的博客，我是博主royalmice
你好,欢迎来到我的博客,我是博主royalmice
- STM32的DMA
什么是DMA?其全称是:Direct Memory Access:根据ST公司提供的相关信息,DMA是STM32中一个独立与Cortex-M3内核的模块,有点类似与ADC.PWM.TIMER等模块:主 ...
- .Net mvc 后台传单引号错误'
今天调试半天程序 结果出现JS 无法eval() 网上找个半天解决办法无果 最后 是因为后台输出单引号’ 到前台为' 解决办法 给一个隐藏文本框或者标签赋值 再取出来就能显示单引号了
- 【Bugly干货分享】iOS内存管理：从MRC到ARC实践
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 对于iOS程序员来说,内存管理是入门的 ...
- Nginx + CGI/FastCGI + C/Cpp
接着上篇<Nginx安装与使用>,本篇介绍CGI/FASTCGI的原理.及如何使用C/C++编写简单的CGI/FastCGI,最后将CGI/FASTCGI部署到nginx.内容大纲如下: ...
- 浅谈Excel开发：十 Excel 开发中与线程相关的若干问题
采用VSTO或者Shared Add-in等技术开发Excel插件,其实是在与Excel提供的API在打交道,Excel本身的组件大多数都是COM组件,也就是说通过Excel PIA来与COM进行交互 ...