<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#btn{

width: 200px;

height: 300px;

position: absolute;

left: 620px;top: 10px;

}

[type=button]{

width: 70px;

height: 50px;

margin-left: 20px;

margin-top: 20px;

background: lawngreen;

outline: none;

}

#score{

width: 50px;

height: 50px;

margin: 10px auto;

line-height: 50px;

font-size: 40px;

text-align: center;

}

</style>

</head>

<body>

<canvas id="board" width="601" height="601" style="background: #ccc;display: block;"></canvas>

<div id="btn">

<input type="button" name="start" id="start" value="开始" onclick="startBtn()"/>

<input type="button" name="end" id="end" value="暂停" onclick="endBtn()"/>

<br /><br /><br />

<p><center>得分:</center></p>

<div id="score"></div>

</div>

</body>

</html>

<script type="text/javascript">

var board = document.getElementById('board');

var score = document.getElementById('score');

var context = board.getContext('2d');

//主要类

var num = 0;

score.innerHTML = num;//定义一个分数记录器

var snakeArray = [];//定义一个存储每一节身体的数组;

var aSnake = new Snake(20,0,'yellow')//游戏开始一节身体;

snakeArray.push(aSnake)

aSnake.drwaSnake(context);

var aFood = new Food(200,400)//定义一个食物

var aboard = new canvasBoard();//定义一个画布

aboard.drwaCanvas();

aFood.drawFood();//定义一个食物;

//控制方向和前进像素个数

var speedX = 20;

var speedY = 0;

var x = 0;

var y = 0;

var timer = null;

var lock = false;

//游戏开始函数

function startGame(t){

var t = t;

timer = setInterval(function(){

context.clearRect(0,0,board.width,board.height);//清除画布

var aboard = new canvasBoard();//定义一个画布

aboard.drwaCanvas();

aFood.drawFood();//定义一个食物;

var FoodHit = FoodHitCheck(snakeArray[0],aFood);//检测和食物碰撞

if(FoodHit){

clearInterval(timer);

timer = null;

num++;

score.innerHTML = num;//分数;

aFood.x = randPlace();//改变随机位置

aFood.y = randPlace();

aFood.drawFood();

addSnake(snakeArray);

t -=10

if(t <= 100){

t=100;

}

startGame(t);

}

//操作上下左右

document.onkeydown = function(event){

var ev = event || window.event;

Handle(ev);

}

var len = snakeArray.length;//缓存数组的长度

snakeArray[len-1].x = snakeArray[0].x+speedX;

snakeArray[len-1].y = snakeArray[0].y+speedY;

var a = snakeArray.pop();

snakeArray.unshift(a);

for(var i = 0;i < snakeArray.length;i++){

snakeArray[i].drwaSnake(context)

}

//判断和墙壁碰撞

var isHit = HitCheck(snakeArray[0],board);

if(isHit){

clearInterval(timer)

timer = null;

alert('GAMEOVER');

}

//判断和身体相撞;

for(var i = 2;i < snakeArray.length;i++){

var selfHit = FoodHitCheck(snakeArray[0],snakeArray[i]);

if(selfHit){

clearInterval(timer)

timer = null;

alert('GAMEOVER');

}

}

},t)

}

//开始按钮

function startBtn(){

if(!lock){

startGame(200);

lock = true;

}

}

function endBtn(){

clearInterval(timer);

lock = false;

}

//操作类

function Handle(ev){

var evKeyCode = ev.keyCode;

switch(evKeyCode){

case 65:{

if(speedX <= 0){speedX = -20;speedY = 0;}

break;

}

case 87:{

if(speedY <= 0){speedX = 0;speedY = -20;}

break;

}

case 68:{

if(speedX >= 0){speedX = 20;speedY = 0;}

break;

}

case 83:{

if(speedY >= 0){speedX = 0;speedY = 20;}

break;

}

}

}

//加长身体;

function addSnake(snakeArray){

var l = snakeArray.length;

var sX = snakeArray[l-1].x;

var sY = snakeArray[l-1].y;

var snake = new Snake(sX,sY,'red');

snakeArray.push(snake);

}

//检测碰撞墙壁

function HitCheck(snake,board){

if(snake.x < 0 || snake.x > board.width || snake.y < 0 || snake.y > board.height){

return true

}

return false;

}

//检测碰撞食物

function FoodHitCheck(snake,food){

if(!(snake.x < food.x || snake.x > food.x+18 || snake.y < food.y || snake.y > food.y+18)){

return true

}

return false;

}

//随机位置

function randPlace(){

return (parseInt(Math.random()*30))*20;

}

//画布类

function canvasBoard(){

this.x = 20;//间距

this.y = 20;//

this.drwaCanvas = function(){

context.beginPath();

context.strokeStyle = '#ddd';

context.lineWidth = 1;

for(var i = 0;i < board.width/this.x;i++){

context.moveTo(i*this.x+0.5,0);

context.lineTo(i*this.x+0.5,board.height);

}

for(var i = 0;i < board.height/this.y;i++){

context.moveTo(0,i*this.y+0.5);

context.lineTo(board.width,i*this.y+0.5);

}

context.stroke();

}

}

//蛇类

function Snake(x,y,color){

this.x = x;

this.y = y;

this.width = 20;

this.height = 20;

this.color = color;

this.drwaSnake = function(context){

context.beginPath();

context.strokeStyle = "#ccc";

context.strokeRect(this.x,this.y,this.width,this.height);

context.fillStyle = this.color;

context.fillRect(this.x,this.y,this.width,this.height)

context.save();

}

}

//食物类

function Food(x,y){

this.x = x;

this.y = y;

this.w = 20;

this.h = 20;

this.color = 'green';

this.drawFood = function(){

context.beginPath();

context.fillStyle = this.color;

context.fillRect(this.x,this.y,this.w,this.h)

context.save();

}

}

</script>

效果如下图

原理是将每一节身体视为一个对象,将对象放入一个数组里,用定时器每次改变最后一节身体的位置放在最前面,同时改变数组里对象的位置,从而实现向前走的动画

自己用canvas写的贪吃蛇代码的更多相关文章

  1. 以前写的canvas 小游戏 贪吃蛇代码

    效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...

  2. 一步一步用Canvas写一个贪吃蛇

    之前在慕课网看了几集Canvas的视频,一直想着写点东西练练手.感觉贪吃蛇算是比较简单的了,当年大学的时候还写过C语言字符版的,没想到还是遇到了很多问题. 最终效果如下(图太大的话 时间太长 录制gi ...

  3. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  4. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  5. 使用Python写一个贪吃蛇

    参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的 ...

  6. Python写的贪吃蛇游戏例子

    第一次用Python写这种比较实用且好玩的东西,权当练手吧 游戏说明: * P键控制“暂停/开始”* 方向键控制贪吃蛇的方向 源代码如下: 复制代码代码如下: from Tkinter import ...

  7. 如何用Python写一个贪吃蛇AI

    前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...

  8. 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）

    C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...

  9. html 贪吃蛇代码

    最近在搞自己的网站,维护的时候准备放个贪吃蛇上去,顶一下原有的页面. 这个贪吃蛇有一点毒.原来设定了100级:100级刚开局就挂了.后来改掉了选项菜单,修复了. 还有什么bug,欢迎点击侧边的QQ按钮 ...

随机推荐

  1. GO （待更新）

    日期20190531,GO AND TOOLS FOR HOME 0  环境搭建 https://golang.org/dl/ Install the Go tools If you are upgr ...

  2. java获取音频文件播放时长

    方法一: 在项目开发过程中,需要获取音视频文件时长.查询资料后发现 JAVE能够完美得到想要的结果,JAVE项目简介如下: The JAVE (Java Audio Video Encoder) li ...

  3. IPC 进程间通信方式——消息队列

    消息队列 消息队列是内核中的一个链表 用户进程将数据传输到内核后,内核重新添加一些如用户ID.组ID.读写进程的ID和优先级等相关信息后并打包成一个数据包称为消息 允许一个或多个进程往消息队列中读写消 ...

  4. 快速排序java代码

    法一: //快速排序 通过测试 public class QuickSortTest2 { public static void quickSort(int[] data,int low,int hi ...

  5. 学习springboot（三）——springboot+mybatis出现org.apache.ibatis.binding.BindingException: Invalid bound state

    有段时间没搭建过了生疏了,记录下出现此情况且你能通过注解的方式正常进行数据库操作,只是通过mapper.xml不行就可以看看这个了.主要问题应该是配置上,不要太自信自己,再仔细找找.1.查看xml是否 ...

  6. BZOJ 4386 Luogu P3597 [POI2015]Wycieczki (矩阵乘法)

    题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=4386 (luogu) https://www.luogu.org/pro ...

  7. sublime text 3插件---File Header配置

    今天趁着有点闲工夫,准备好好配置一下sublime环境,毕竟天天见面. 首当其冲的就是FileHeader插件了,安装它之后就懒得配置过.(方便起见,以下简称FH) FH是一个为文件自动添加前缀字段的 ...

  8. 第九周课程总结 & 实验报告（七）

    第九周课程总结 一.多线程 1.线程的状态 2.线程操作的相关方法 二.Java IO 1.操作文件的类---File ()基本介绍 ()使用File类操作文件 .RandomAccessFile类 ...

  9. 数据框架对比：Hadoop、Storm、Samza、Spark和Flink——flink支持SQL，待看

    简介 大数据是收集.整理.处理大容量数据集,并从中获得见解所需的非传统战略和技术的总称.虽然处理数据所需的计算能力或存储容量早已超过一台计算机的上限,但这种计算类型的普遍性.规模,以及价值在最近几年才 ...

  10. [Java]算术表达式求值之一（中序表达式转后序表达式方案）

    第二版请见:https://www.cnblogs.com/xiandedanteng/p/11451359.html 入口类,这个类的主要用途是粗筛用户输入的算术表达式: package com.h ...