【实例简介】自定义 蛇的图片和食物的图片大小 canvas 画图

【实例截图】

【核心代码】

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext('2d');

var gridWidth=20;

var score=0;

var foods=new Array(),snakes=new Array();

var bgIamge =new Image();

bgIamge.src = 'images/head.jpg';

var partten;

var foodIamge =new Image();

foodIamge.src = 'images/food.jpg';

var parttenFood;

function gameStart(){

var farm=new Farm();

food_interval=setInterval(farm.addfood,2000);

}

gameStart();

function gameover(){

var judge=confirm("游戏结束，是否重新开始");

score=0;

textmsg.innerHTML=score "分";

clearInterval(snake_interval);

clearInterval(food_interval);

if(!judge){

return false;

}

gameStart();

}

function Food(x,y,w){

var t=this;

t.x=x;

t.y=y;

t.w=w;

t.foodInit=function(){

parttenFood= ctx.createPattern(foodIamge, 'repeat');

ctx.beginPath();

ctx.arc(x w/2,y w/2,w/2,0,360,false);

debugger;

ctx.fillStyle=parttenFood;

ctx.fill();

ctx.closePath();

}

t.equal=function(node){

if(this.x==node.x && this.y==node.y){

return true;

}else{

return false;

}

}

}

function Block(x,y,w){

var t=this;

t.x=x;

t.y=y;

t.w=w;

t.drawBlock=function(){

partten= ctx.createPattern(bgIamge, 'repeat')

ctx.beginPath();

ctx.arc(x w/2,y w/2,w/2,0,360,false);

ctx.fillStyle= partten;

ctx.fill();

}

t.clear=function(){

ctx.fillStyle='white';

ctx.strokeStyle='white';

ctx.fillRect(x,y,w,w);

ctx.strokeRect(x,y,w,w);

}

t.equal=function(node){

if(this.x==node.x && this.y==node.y){

return true;

}else{

return false;

}

}

}

function Snake(x,y,len,speed){

var t=this;

t.x=x;

t.y=y;

t.dir='R';

t.len=len;

var nx=x;ny=y;

t.init=function(){

for(var i=0;i

var tempBlock=new Block(nx,ny,gridWidth);

tempBlock.drawBlock();

nx-=gridWidth;

snakes.push(tempBlock);

}

snake_interval=setInterval(t.move,speed);

}

document.οnkeydοwn=function(e){

var code=e.keyCode;

t.odir=t.dir;

switch(code){

case 37:

t.dir='L';

break;

case 38:

t.dir='U';

break;

case 39:

t.dir='R';

break;

case 40:

t.dir='D';

break;

}

}

t.move=function(){

var newHead;

if(snakes[0].x snakes[0].w >=canvas.width || snakes[0].x-snakes[0].w<0 ||

snakes[0].y-snakes[0].w<0 || snakes[0].y snakes[0].w>canvas.height){

gameover();

}else{

if(t.dir=='R'){

newHead=new Block(snakes[0].x gridWidth,snakes[0].y,gridWidth);

}else if(t.dir=='L'){

newHead=new Block(snakes[0].x-gridWidth,snakes[0].y,gridWidth);

}else if(t.dir=='D'){

newHead=new Block(snakes[0].x,snakes[0].y gridWidth,gridWidth);

}else if(t.dir=='U'){

newHead=new Block(snakes[0].x,snakes[0].y-gridWidth,gridWidth);

}

}

if(newHead.x==snakes[1].x && newHead.y==snakes[1].y){

t.dir=t.odir;

return;

}

newHead.drawBlock();

snakes.unshift(newHead);

snakes[snakes.length-1].clear();

snakes.pop();

for(var i=0;i

if(foods[i].equal(snakes[0])){

t.growth();

score=score 10;

textmsg.innerHTML=score "分";

t.len=t.len 1;

clearInterval(snake_interval);

speed=speed<20?speed:speed-10;

snake_interval=setInterval(t.move,speed);

}

}

for(var i=1;i

if(snakes[i].equal(snakes[0])){

gameover();

}

}

}

t.growth=function(){

var tail1=snakes[snakes.length-1];

var tail2=snakes[snakes.length-2];

var addBlock;

if(tail1.x==tail2.x){

if(tail1.y>tail2.y)

addBlock=new Block(tail1.x,tail1.y gridWidth,gridWidth);

else

addBlock=new Block(tail1.x,tail1.y-gridWidth,gridWidth);

}else{

if(tail1.x>tail2.x)

addBlock=new Block(tail1.x gridWidth,tail1.y,gridWidth);

else

addBlock=new Block(tail1.x-gridWidth,tail1.y,gridWidth);

}

snakes.push(addBlock);

addBlock.drawBlock();

}

}

function Farm(){

var t=this;

ctx.fillStyle='white';

ctx.fillRect(0,0,canvas.width,canvas.height);

foods=[];

t.addfood=function(){

var x=parseInt(canvas.width/gridWidth*Math.random())* gridWidth;

var y=parseInt(canvas.height/gridWidth*Math.random())* gridWidth;

var food=new Food(x,y,gridWidth);

food.foodInit();

foods.push(food);

}

snakes=[];

t.snake=new Snake(100,100,5,500);

t.snake.init();

}

1.[图片] E6~0%QPA46ER843UQJ$0Z`H.jpg

​2. [文件] snake.html

The snake game

function log(msg) {

console.log(msg);

}

Your browser cannot support html5.

this.onkeydown = function(e) {

var code = e.keyCode;

if (code == 37)

changeMove(3);

if (code == 38)

changeMove(0);

if (code == 39)

changeMove(1);

if (code == 40)

changeMove(2);

}

function changeMove(val) {

if ((move == 0 || move == 2) && (val == 2 || val == 0))

return;http://www.huiyi8.com/hunsha/chuangyi/​

if ((move == 3 || move == 1) && (val == 1 || val == 3))

return;创意婚纱照片

move = val;

}

function dead(snake) {

// 撞墙壁

switch (move) {

case 0:

if (snake[0] < 0) {

log('up:' + snake[0]);

return true;

}

break;

case 1:

if (snake[0] % 20 == 0) {

log('right:' + snake[0]);

return true;

}

break;

case 2:

if (snake[0] >= 400) {

log('down:' + snake[0]);

return true;

}

break;

case 3:

if ((snake[0] + 1) % 20 == 0) {

log('left:' + snake[0]);

return true;

}

break;

default:

break;

}

// 咬自己

for(var i = 1; i < snake.length ; i ++) {

if(snake[0] == snake[i]) {

log('self:' + snake[0]);

return true;

}

}

return false;

}

// rand=-1表示食物被吃，要求重新生成食物

function run(rand) {

//ctx.fillStyle = '#000000';

ctx.clearRect(100, 100, 300, 300);

// 画布容器

var container = new Array(400);

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

container[i] = 0;

}

for ( var i in snake) {

container[snake[i]] = 1;

}

// 生成食物

if(rand == -1) {

var rands = [];

for ( var i in container) {

if (container[i] == 0)

rands.push(i);

}

rand = rands[parseInt(Math.random() * rands.length)];

}

// 放入画布容器

container[rand] = 1;

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

if (container[i] == 0) {

ctx.fillRect(100 + sw * (i % 20),

100 + sw * parseInt((i / 20)), sw, sw);

ctx.strokeRect(100 + sw * (i % 20),

100 + sw * parseInt((i / 20)), 10, sw);

} else {

ctx.strokeRect(100 + sw * (i % 20),

100 + sw * parseInt((i / 20)), sw, sw);

}

}

var slen = snake.length;

var shead = snake[0], send = snake[slen - 1];

ctx.fillStyle = '#000000';

ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);

//ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);

ctx.fillStyle = '#ff0000';

ctx.beginPath();

ctx.arc((100 + sw * (shead % 20)) + sw / 2, (100 + sw * parseInt((shead / 20))) + sw / 2, sw / 2, 0, Math.PI * 2, false);

//不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果

ctx.closePath();

ctx.fill();

ctx.fillStyle = '#000000';

//ctx.strokeRect(100 + sw * (shead % 20), 100 + sw

//      * parseInt((shead / 20)), sw, sw);

for ( var i = slen - 1; i > 0; i--) {

snake[i] = snake[i - 1];

}

switch (move) {

case 0:

snake[0] = shead - 20;

break;

case 1:

snake[0] = shead + 1;

break;

case 2:

snake[0] = shead + 20;

break;

case 3:

snake[0] = shead - 1;

break;

default:

break;

}

// 死亡

if (dead(snake)) {

alert('game over');

return false;

}

// 蛇吃到食物，增加移动次数，到达蛇尾，把食物放到蛇数组

if (eat && ms++ == slen) {

ms = 0;

snake.push(send);

eat = false;

}

// 吃到食物，重新生成食物

if (snake[0] == rand) {

eat = true;

rand = -1;

}

setTimeout('run(' + rand + ')', speed);

}

//log(snake);

//for(var i = 0; i < 300; i ++)

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

canvas.width = 400;

canvas.height = 400;

var ctx = canvas.getContext('2d');

var snake = []; // 蛇对象

snake.push(205);

snake.push(204);

snake.push(203);

snake.push(202);

snake.push(201);

// move：移动方式[0, 1, 2, 3] = [up, right, down, left]

// ms：当蛇吃到食物后的移动次数，以此来判断增加蛇数组长度

// eat：蛇是否吃到食物

// sw：蛇方块宽度

// speed：速度ms

var move = 1, ms = 0, eat = false, sw = 10, speed = 50;

run(-1);

log(canvas);

WebGL实现HTML5贪吃蛇3D游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

&lbrack;置顶&rsqb; 63行代码完美实现html5 贪吃蛇游戏

以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

使用TypeScript实现简单的HTML5贪吃蛇游戏

TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

Javascript基础示例：用JS写简易版贪吃蛇(面向对象)

废话不多说,代码如下:

& ...

HTML5贪吃蛇源代码

显示效果例如以下:点击这里!       代码下载:点击这里!

python贪吃蛇

代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

WebGL实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

&lbrack;原创&rsqb;html5游戏&lowbar;贪吃蛇

代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...

100行JS实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

随机推荐

Java数据结构——有序链表

//================================================= // File Name : SortedList_demo //--------------- ...

【xml】利用OpenCV解析

看到一篇讲的很清楚的博客:http://blog.csdn.net/jarvischu/article/details/8481510

win2003 服务器安全设置详细介绍

第一步:一.先关闭不需要的端口  我比较小心,先关了端口.只开了3389 21 80 1433(MYSQL)有些人一直说什么默认的3389不安全,对此我不否认,但是利用的途径也只能一个一个的穷举爆破, ...

HTML第一部分

HTML      内容(hyper text  markup language,超文本标记语言) CSS        网页美化 Javacript 脚本语言 第一部分 HTML

Send User to a Portal Folder

Sometimes you would want to give users the option to click a button on the page and send them back t ...

JavaScript高级程序设计11&period;pdf

与操作字符串有关的最后一个方法是localeCompare(),这个方法比较两个字符串,按照字符串的字母表中的位置分别返回-1,0,1 var stringValue="yellow&quo ...

一键安装IIS的点点滴滴——For所有Microsoft的操作系统(下)

原文 http://www.cnblogs.com/cdts_change/archive/2010/03/09/1681392.html 接着上一篇的讲,下面我们将讨论Windows7.Window ...

python生成器之斐波切纳数列

面试的时候遇到过这样的一个题目: 斐波切纳数列1,2,3,5,8,13,21.........根据这样的规律,编程求出400万以内最大的斐波切纳数,并求出是第几个斐波切纳数. 方法一: 方法二:这个方 ...

ios常见加密解密方法

在其他平台中经常会计算MD5值,在iOS平台中也提供了该方法,首先需要导入头文件 #import  方法CC_MD5可以获取MD5 ...

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();