<!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. static成员变量

    可以创建一个由同一个类的所有对象共享的成员变量.要创建这样的成员,只需将关键字 static 放在变量声明的前面,如下面的类所示: class StatDemo { private: static i ...

  2. WebService帮助类改良版，支持多webservice

    帮助类代码 using System; using System.CodeDom; using System.CodeDom.Compiler; using System.Collections.Ge ...

  3. 自定义 Swiper 的pageControl

    .part5-bg .swiper2 .swiper-pagination2{ bottom: 0.4rem; } /*未选中的小圆点样式*/ .part5-bg .swiper2 .swiper-p ...

  4. Invalid [xxx] in servlet mapping 、 <url-pattern>的匹配规则 、 DefaultServlet介绍

    真的是很容易被忽视的错误,servlet 配置url的时候遇到问题,这个之前确实没有详细了解过. 出现这个错误的时候往往伴随着一系列高大上的错误,比如会出现类似[StandardEngine[Cata ...

  5. Linux不同机器文件挂载

    由于此前发布项目应用时,需要对两台文件服务器进行文件挂载,所以才实际第一次接触到这个名词,但由于一直以来自己没有真正的去操作过,只是停留在一些理论层次,所以今天记录一下这个实现过程,以备后用. 使用设 ...

  6. JAVA记录 Spring 两大特性

    1.IOC控制反转 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...

  7. hash索引

    hash算法 哈希表(hash table ,也叫散列表),是根据关键码值(key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个 ...

  8. Spark译文(三)

    Structured Streaming Programming Guide(结构化流编程指南) Overview(概貌) ·Structured Streaming是一种基于Spark SQL引擎的 ...

  9. HDU 4738--Caocao's Bridges(重边无向图求桥)

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. git梳理

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 本地库管理命令 git init ...