<!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. sqlalchemy 中的get_or_404

  2. 关于order_by

  3. 2017 CVTE Windows开发一面 3.7

    下午3点接到了个广州打过来的电话,电话面试总体时间比较短,35分钟. 考察内容: 1.讲实习: 因人而异,将了之前公司做的项目,刚好和面的岗位匹配,面试官听完之后还不忘垂壁一下他们的产品. 2.C#事 ...

  4. XML的树结构与语法规则

    ㈠概念 什么是 XML? ⑴XML 指可扩展标记语言(EXtensible Markup Language) ⑵XML 是一种标记语言,很类似 HTML ⑶XML 的设计宗旨是传输数据,而非显示数据 ...

  5. python基础--几个特性

    1.helloword程序的解释 #!/usr/bin/python3 print("Hello, World!") 关于脚本第一行的 #!/usr/bin/python 的解释, ...

  6. Linux 下的tmpfs文件系统(/dev/shm)

    介绍 /dev/shm/是一个使用就是tmpfs文件系统的设备,其实就是一个特殊的文件系统.redhat中默认大小为物理内存的一半,使用时不用mkfs格式化. tmpfs是Linux/Unix系统上的 ...

  7. javascript中继承方式及优缺点(一)

    分别介绍原型链继承.call/apply继承(借用构造函数继承).组合继承.原型式继承.寄生式继承.寄生组合式继承 1. 原型链继承 核心:将父类的实例作为子类的原型 function SuperTy ...

  8. Haystack全文检索框架

    一.什么是Haystack Haystack是django的开源全文搜索框架(全文检索不同于特定字段的模糊查询,使用全文检索的效率更高 ),该框架支持Solr,Elasticsearch,Whoosh ...

  9. 在Windows QT下使用ZeroMQ

    zeroMQ作为一个嵌入式消息队列系统,以其轻便灵活的使用方式,极为适合应用程序分布式通讯处理, 或者是一种有效的代替常规saocket通讯的方法. 1)下载地址:http://zeromq.org/ ...

  10. AtCoder AGC036C GP 2 (组合计数)

    题目链接 https://atcoder.jp/contests/agc036/tasks/agc036_c 题解 终于有时间补agc036的题了. 这题其实不难的来着--我太菜了考场上没想出来 首先 ...