html5实现贪吃蛇,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下
Snake
//内置大量BUG,I'm sorry.
var lev=100; //定时器间隔时间
var num=30; //网格大小,现在是30x30
var direction=3; //0:up 1:down 2:left 3:right
var handle; //用于管理定时器
var score=0; //分数
var pause=true; //暂停使用
var canvas = document.getElementById('plank');
var context = canvas.getContext('2d');
var snakex=new Array(); //存储蛇身x坐标,下同
var snakey=new Array();
var prize=new Array(-1,-1); //食物的位置
function rand(){ //产生随机数
return parseInt(Math.random()*num);
}
function chk(x,y){ //检查是否结束,包括越界
if(x<0||y<0) return false;
if(x>num-1||y>num-1) return false;
for (var i=0; i!=snakex.length-1;i++) {
if(snakex[i]==x&&snakey[i]==y) {return false;}
};
return true;
}
function drawScore(text){ //打印分数
context.clearRect(0,0,300,25);
context.fillText("Score:"+text,5,5);
}
function makeprize(){ //产生食物的位置
var flag=false;
var prizepre=new Array(2); //使用链表会更好
while(!flag){ //食物位置不能在蛇体内
flag=true;
prizepre[0]=rand();prizepre[1]=rand();
for (var i=0; i!=snakex.length;i++) {
if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;}
}
}
prize=prizepre;
}
function runscore(x,y){ //判断是否吃到食物,并做处理
if(prize[0]==x&&prize[1]==y){
score=score+1;
drawScore(score);
snakex[snakex.length]=prize[0];
snakey[snakey.length]=prize[1];
makeprize();
drawNode(prize[0],prize[1]);
return true;
}
return false;
}
function run(){ //定时器用来判断snake行进方向等等
switch(direction){ //方向
case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break;
case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]+1;break;
case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break;
case 3: snakex[snakex.length]=snakex[snakex.length-1]+1;snakey[snakey.length]=snakey[snakey.length-1];break;
}
if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){
if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) {
clearInterval(handle);
drawScore('\\tGame over');
return;
}
drawNode(snakex[snakex.length-1],snakey[snakey.length-1]);
}
clearNode(snakex[0],snakey[0]);
snakex.shift();
snakey.shift();
}
function drawNode(x,y){ //画点,共30X30个点(10*10像素算1个点)
context.fillRect(x*10+1,y*10+31,10,10);
}
function clearNode(x,y){
context.clearRect(x*10+1,y*10+31,10,10);
}
function init(){ //初始化,设置画布大小,启动定时器等等
canvas.width = 510;
canvas.height = 600;
context.font = "normal 20px Airl";
context.textBaseline = "top";
context.fillText('P键开始/暂停,方向键控制',0,350);
drawScore('');
context.strokeRect(0,30,302,302);
makeprize();
drawNode(prize[0],prize[1]);
snakex[0]=0;snakex[1]=1;snakex[2]=2;
snakey[0]=0;snakey[1]=0;snakey[2]=0;
drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]);
}
document.οnkeydοwn=function(event){ //注册键盘事件,up,down,left,right,暂停键p
var e = event || window.event;
if(e&&e.keyCode==38){
direction=0;
}
if(e&&e.keyCode==40){
direction=1;
}
if(e&&e.keyCode==37){
direction=2;
}
if(e&&e.keyCode==39){
direction=3;
}
if(e&&e.keyCode==80){
if(pause) {pause=false;handle=setInterval(run,lev);}
else {pause=true;clearInterval(handle);}
}
}
init();
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. php.cn原创html5视频教程
html5实现贪吃蛇,分享一个用html5实现的贪吃蛇特效代码相关推荐
- html5简单制作效果,分享一个利用HTML5制作的海浪效果代码-H5教程
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了"海浪效果"(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif动画分析 ...
- html贪吃蛇自动走,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
- 砸地鼠 php源码,分享一个html+js实现打地鼠游戏的实例代码
本文主要分享了js实现打地鼠小游戏的示例代码.具有很好的参考价值,下面跟着小编一起来看下吧 话不多说,请看代码: 打地鼠 #content { width:960px; margin:0 auto; ...
- html5播放器android,分享一个Html5+video 基于mui 5+的视频播放器
一直没有找到一款适合在MUI上的播放器,网上很多都是基于JQ的播放,样式不好看,也难修改,不好用难于兼职安卓和苹果手机, 实在没办法,只能亲自操刀,自己写一个播放器了,给遇到我一样情况的朋友们,封装起 ...
- html5 海浪,分享一个利用HTML5制作的海浪效果代码
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了"海浪效果"(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif动画分析 ...
- HTML5文本框右侧加一个放大镜,html5图像局部放大镜(可调节)
下面继续介绍基于html5画布canvas的放大镜效果: 主要步骤: 1)图像的加载,上篇blog里有http://www.cnblogs.com/blue-lg/archive/2011/12/23 ...
- 支持m3u8的php视频cms,分享一个苹果CMS可用P2P的M3U8解析代码
苹果CMS可用P2P的M3U8解析代码,非CDNbye的P2P.<?php /** * @代码开源,透明,请勿用于商业用途,完全开源模式,供大家一起探讨研究 * @支持全网(支持跨域)的M3U8 ...
- android 蓝牙打印代码,分享一个b4a下安卓操作蓝牙打印机的代码
b4a的 用到 Serial的库 实测过能用 另外:有人有 zxing_b4a_1.3plus_lib_demo.zip 的库没有? 关键代码 Sub Process_Globals Dim ...
- 分享一个爱心的特效代码
给大家分享一个用html+js写的爱心特效代码,打开你的dw或者vscode编辑器,将代码丢进去运行就行,小白请参考第二点 目录 一.有代码基础的同学看这儿 效果: 源码: 有些新入门的铁子可能不知道 ...
最新文章
- 停止Password Manager Agent服务导致应用程序启动缓慢
- 从eclipse中下载到手机的android程序总是旧的版本
- WebQQ hash加密算法PHP版
- cookie保存用户的登陆状态-草案
- Cocos2d-JS项目之三:使用合图
- 进来看下你的工资水平
- 四种方法实现两个等大数组之间内容交换
- error LNK2005: 已经在 app_launcher.obj 中定义
- Javascript飘窗代码
- 发布Flask项目到服务器
- 新媒体运营与营销秘笈
- python获取图像灰度极值点_opencv-python读取tiff影像上任意点的灰度值和RBG值
- mysql 8.0 用户修改为简单密码
- Windows10专业版系统镜镜像
- JavaWeb笔记:第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx
- Buct oj 1018
- 科学计算基础软件包NumPy入门讲座(4):操作数组
- opencv h264压缩视频
- 百度Apollo计划跟踪:感知与预测中神经网络的分析
- DSP期末复习核心考点
热门文章
- Open Source: 开源软件许可的选择
- oracle mysql sql serve where in 语句的不同
- 关于C++中的条件编译
- 【Vegas原创】获取远程数据库到本地
- 锐捷网络GSN全局安全政府行业解决方案
- Infragistics NetAdvantage控件的使用:该关系不是此 DataView 指向的表的父关系
- SAP 凭证冲销可以使用BAPI_ACC_DOCUMENT_REV_POST或者BDC录制FB08来做
- SAP - 银企直联
- 会计记忆总结之三:会计等式与复式记账
- table control 光标定位控制