html5 js贪吃蛇,html5+js 贪吃蛇
body{background:#c7e2e7;}
.box{
width:450px;
height:450px;
margin:0px auto;
pandding:1px auto;
box-shadow:2px 2px 5px 1px #000;
color:#252b34;
}
var direction=0;//方向
var speed=500;//初始速度500ms
//拿到画板
var canvas = document.getElementById("mycanvas");
//拿到画图工具
var ctx = canvas.getContext("2d");
//假定格子 15*15 450/15=30个
//for
ctx.strokeStyle="white";//颜色
for(var i=0;i<30;i++){
//开始路径
ctx.beginPath();
ctx.moveTo(0,i*15);//移动到哪里
ctx.lineTo(450,i*15)
ctx.moveTo(i*15,0);//移动到哪里
ctx.lineTo(i*15,450)
ctx.closePath();
ctx.stroke();//画线
}
//蛇 节点 x-x坐标,y-y坐标,f-方向
//上1 下 -1 左 2 右-2
function Cell(x,y,f){
//this 当前对象
this.x=x;
this.y=y;
this.f=f;
}
//食物
function Food(x,y){
this.x=x;
this.y=y;
}
//蛇对象数组
var snake = [];
var width = 15;
var head;//头
var food =new Food(15,15)
for(var i=0;i<5;i++){
//初始化蛇的身体
snake[i] =new Cell(i,0,-2);
}
//画蛇
function drawSnake(){
ctx.clearRect(0,0,450,450);
//填充颜色
for(var i=0;i
ctx.fillStyle="black";
if(i==snake.length-1){
ctx.fillStyle="red";
}
ctx.beginPath();
ctx.rect(snake[i].x*15,snake[i].y*15,width,width);//矩形
ctx.closePath();
ctx.fill();
}
head = snake[snake.length-1];
//是否吃到食物
if(head.x==food.x&&head.y==food.y){
var newCell=new Cell(head.x,head.y,head.f);
switch(head.f){
case 1:newCell.y--;break;
case 2:newCell.x--;break;
case -1:newCell.y++;break;
case -2:newCell.x++;break;
}
snake[snake.length]=newCell;
//重新生成食物
initFood();
}
//取出蛇的头
drawFood();
}
//食物
function drawFood(){
ctx.fillStyle="red";
ctx.beginPath();
ctx.rect(food.x*15,food.y*15,width,width);//矩形
ctx.closePath();
ctx.fill();
}
drawSnake();
//生成随机食物
function initFood(){
var x= Math.ceil(Math.random()*28)+1;
var y= Math.ceil(Math.random()*28)+1;
food.x=x;
food.y=y;
for(var i=0;i
//食物与身体重合
if(snake[i].x==x&& snake[i].y==y){
initFood();
}
}
}
//监听键盘事件
document.οnkeydοwn=function(e){
//左 37 右 39
var cade=e.keyCode;
var dir=0;//方向
//上1 下 -1 左 2 右-2
switch(cade){
case 38:dir=1;break;
case 39:dir=-2;break;
case 40:dir=-1;break;
case 37:dir=2;break;
}
//当方向确定了,做移动
if(dir!=0){
if(parseInt(head.f)+dir!=0){//不准上走时下走
//移动蛇
//moveSnake();
direction=dir;
//按键方向相同,每次加速100ms
if(speed>100&&head.f==dir){
speed-=100;
window.clearInterval(timer);
timer=window.setInterval(autoMove,speed);
}
}else{
direction=0;
}
}
}
//移动蛇
function moveSnake(){
var newCell=new Cell(head.x,head.y,head.f);//新蛇
newCell.f=direction;
//循环蛇的身体 蛇的单元格往前动 把下标为0的丢弃
var newSnake=[];
for(var i=1;i
newSnake[i-1]=snake[i];
}
newSnake[snake.length-1]=newCell;
switch(direction){
case 1:newCell.y--;break;
case 2:newCell.x--;break;
case -1:newCell.y++;break;
case -2:newCell.x++;break;
}
snake=newSnake;
head=snake[snake.length-1];
if(head.x>30||head.x<0||head.y>30||head.y<0){
alert("游戏结束");
//刷新页面
window.location.reload();
}
drawSnake();
}
//自动移动蛇
function autoMove(){
if(direction!=0){
moveSnake();
}
}
//定时自动移动
var timer=window.setInterval(autoMove,500);
html5 js贪吃蛇,html5+js 贪吃蛇相关推荐
- HarmonyOS实战 | 贪吃蛇游戏 | JS全注释
来源:https://harmonyos.51cto.com/user/posts/15053213 关注回复"教程" 获得最新鸿蒙开发者教程 前言 本人之前是Java后端开发 ...
- 程序员式贪吃蛇,URL贪吃蛇和源码贪吃蛇你值得一玩
点击上方"业余草",选择"置顶公众号" 第一时间获取技术干货和业界资讯! 贪吃蛇可以说是一款非常火爆且经典的老游戏了.在现实生活中我们可能还时不时的玩上两把,但 ...
- 贪吃蛇大作战代码java,贪吃蛇游戏,贪吃蛇java游戏代码讲解
贪吃蛇游戏,贪吃蛇java游戏代码讲解 来源:互联网 作者:佚名 时间:2020-06-06 贪吃蛇源代码.txt这世界上除了我谁都没资格陪在你身边. 听着,我允许你喜欢我.除了白头偕老,我们... ...
- html5支持原生js,HTML5怎么学原生的js?让你对前端有了新的认识
原标题:HTML5怎么学原生的js?让你对前端有了新的认识 已经学习了HTML5两个月,第一个月主要学习HTML和CSS,第二个月学完了原生的js,学完原生的js后对前端有了新的认识,了解了前端并不是 ...
- js,jquery,css,html5特效
js,jquery,css,html5特效 包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
- 征服大前端视频教程第一季(jQuery、HTML5、CSS3、Node.js)
征服大前端视频教程第一季(jQuery.HTML5.CSS3.Node.js.AngularJS.MongoDB) 网盘地址:https://pan.baidu.com/s/1-dbJMOa1RrQz ...
- LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
- html5 复制到剪贴板 兼容,js/jQuery实现复制到剪贴板功能,兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
- 贪吃蛇游戏 c++代码 ↑,↓,→,←分别控制蛇的方向 增加蛇长 随机生成食物 吃食物 吃撞墙 撞到自己
贪吃蛇游戏 c++代码 ↑,↓,→,←分别控制蛇的方向 增加蛇长 随机生成食物 吃食物 吃撞墙 撞到自己 Snake.h文件 #pragma once #include <stdio.h> ...
- html 在线播放器,HTML5 Web播放器-Video.js
原标题:HTML5 Web播放器-Video.js Video.js是一款优秀的HTML5 Web视频播放器.它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大 ...
最新文章
- Python源码剖析学习二
- RHEL6网络相关配置
- app怎么嵌套vue页面_PHP抖音点赞APP【开发】HTML5
- GVIM工具之gvim的配色方式
- 跨sql server查询mysql_SQL Server 跨数据库查询数据的方法
- 当我们谈游戏优化时,我们谈些什么
- JavaScript数据结构与算法——栈详解
- linux 文件 加密传输,服务端和客户端之文件加密传输
- mybatis之动态SQL操作之查询
- Error: Java heap space
- Flutter 系列文章:Flutter Text 控件介绍
- c语言编译器代码及翻译,在线C语言编译器/解释器
- 【论文阅读笔记】《Simple, Accurate, and Robust Projector-Camera Calibration》
- SAP 采购订单入库——移动类型
- progisp下载错误-error:could not find USBASP device
- 交互设计师修炼指南!教你从零开始成为优秀交互设计师
- ue编辑C语言灰色,UltraEdit如何实行列模式编辑
- 关于Abaqus图片输出的总结
- 智能手机战火连连,多年的纷争将何时终结?
- 图纸加密彰显企业的产权意识
热门文章
- 简述ajax的优缺点
- 错误代码大全【100(临时响应)】【200(成功)】【300(已重定向)】【400(请求错误)】【500(服务器错误)】(HTTP协议版本)
- ASP.NET Core微服务(一)——【完整API搭建及访问过程】
- sys.dbms_transaction.local_transaction_id出现的问题
- Oracle 11g 新特性简介
- /dev/mapper/VolGroup00-LogVol00 100% 如何处理
- Oracle truncate table 与 delete tabel的区别(转)
- STM32使用FatFs
- X509证书认证流程介绍
- List的remove(对象)操作有时候会报ConcurrentModificationException异常