自制一个贪吃蛇小游戏
2016-09-14 10:55
387 查看
//直接上代码啦 <!doctype html> <html> <head> <meta charset="utf-8"> <title> 贪吃蛇 </title> <script></script> <style> #div{ width:300px;height:300px;background:lightgray;margin:0 auto; position:relative; } .game{ width:100px;height:50px;background:gray;border:1px solid #ddd; border-radius:5px;line-height:50px;text-align:center;color:lightblue; font-weight:bold;position:absolute;top:120px;left:100px;display:none; cursor:pointer; } </style> </head> <body> <div id =div> <canvas id="canvas" width="300px" height="300px"></canvas> <div id="start" class="game" onclick="run()">开始游戏</div> <div id="over" class="game">GAME OVER</div> </div> </body> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle="gray"; var start = document.getElementById("start"); var over = document.getElementById("over"); var state = 0; var direction = "right"; const WIDTH = canvas.width; const HEIGHT = canvas.height; const FW = 10; //游戏开始 function paint_start(){ if(state==0){ start.style.display="block"; } } function run(){ state=1; start.style.display="none"; } //游戏结束 function paint_over(){ if(state==2){ over.style.display="block"; } } //游戏运行 var snake=[]; snake[0] = { x:Math.floor(Math.random()*(WIDTH/10-1))*10, y:Math.floor(Math.random()*(HEIGHT/10-1))*10 } snake[1]={ x:snake[0].x-FW, y:snake[0].y } snake[2]={ x:snake[1].x-FW, y:snake[1].y } function sNake(){ this.x = snake[snake.length-1].x; this.y = snake[snake.length-1].y; } function paint(snake){ for (var i=0;i<snake.length ;i++ ){ context.fillRect(snake[i].x,snake[i].y,FW,FW); } } function clear(){ context.clearRect(0,0,400,400); } function step(snake){ if(state==1){ if(direction=="left"){ snake[snake.length-1].x=snake[0].x-10; snake[snake.length-1].y=snake[0].y; }else if(direction=="right"){ snake[snake.length-1].x=snake[0].x+10; snake[snake.length-1].y=snake[0].y; }else if(direction=="up"){ snake[snake.length-1].y=snake[0].y-10; snake[snake.length-1].x=snake[0].x; }else{ snake[snake.length-1].y=snake[0].y+10; snake[snake.length-1].x=snake[0].x; } snake.unshift(snake[snake.length-1]); snake.pop(); } } function eat(){ if(checkEat(snake[0])){ snake[snake.length] = new sNake(); return true; }else{ return false; } } function checkEat(snake){//测试是否吃掉食物 return (direction=="up"&&snake.x==food.x&&snake.y==food.y-FW)|| (direction=="down"&&snake.x==food.x&&snake.y==food.y+FW)|| (direction=="right"&&snake.y==food.y&&snake.x==food.x+FW)|| (direction=="left"&&snake.y==food.y&&snake.x==food.x-FW); } var food = { x:Math.floor(Math.random()*(WIDTH/10-1))*10, y:Math.floor(Math.random()*(HEIGHT/10-1))*10 } function paintFood(){ if(eat()){ food.x=Math.floor(Math.random()*(WIDTH/10-1))*10; food.y=Math.floor(Math.random()*(HEIGHT/10-1))*10; context.fillRect(food.x,food.y,10,10); }else{ context.fillRect(food.x,food.y,10,10); } } //测试是否撞击到墙壁 function check_hit(snake){ if((snake[0].x==-FW)||(snake[0].x==WIDTH)||(snake[0].y==-FW)||(snake[0].y==HEIGHT)){ state=2; console.log(snake[0].x); } } //测试是否撞到自己 function hitSelf(snake){ if(snake.length>4){ if(direction=="right"){ for(var i=3;i<snake.length;i++){ if(snake[0].y==snake[i].y&&snake[0].x==snake[i].x-FW){ state=2; } } } if(direction=="left"){ for(var i=3;i<snake.length;i++){ if(snake[0].y==snake[i].y&&snake[0].x==snake[i].x+FW){ state=2; } } } if(direction=="up"){ for(var i=3;i<snake.length;i++){ if(snake[0].y==snake[i].y+FW&&snake[0].x==snake[i].x){ state=2; } } } if(direction=="down"){ for(var i=3;i<snake.length;i++){ if(snake[0].y==snake[i].y-FW&&snake[0].x==snake[i].x){ state=2; } } } } } //控制方向 function left(){ if(direction!=="right"){ direction="left"; } } function right(){ if(direction!=="left"){ direction="right"; } } function up(){ if(direction!=="down"){ direction="up"; } } function down(){ if(direction!=="up"){ direction="down"; } } document.onkeydown = function(e){ var e =e||window.event; switch(e.keyCode){ case 37: left(); break; case 38: up(); break; case 39: right(); break; case 40: down(); break; } } setInterval(function(){ clear(); check_hit(snake); hitSelf(snake); paint_start(); paint_over(); paint(snake); eat(); step(snake); paintFood(food); },200); </script> </html>
相关文章推荐
- 用JS做了一个贪吃蛇小游戏,求顶贴..
- 怎样实现一个图层的运动(可实现贪吃蛇小游戏,代码现不完善,请关注本人,今日完善)
- 一个贪吃蛇小游戏 用 C WINAPI 写的
- 一个unix的贪吃蛇小游戏
- 如何做一个贪吃蛇的小游戏
- js实现一个贪吃蛇的小游戏(已经没有Bug了,已经完善)
- [Py]一个贪吃蛇小游戏的雏形
- 大大维的游戏机计划2--一个自制的类似2048的小游戏
- 用JS做了一个贪吃蛇小游戏,求顶贴..
- 一个控制台贪吃蛇小游戏(wsad控制移动)
- 一个简单的“贪吃蛇”小游戏
- 先码一个贪吃蛇小游戏,有空在改进
- 糊糊的前端学习笔记——25行代码实现一个贪吃蛇小游戏【Day06】
- limej 写一个HTML5的贪吃蛇小游戏
- 大大维的游戏机计划2--一个自制的类似2048的小游戏
- 帮CSDN网友写的CPL扩展范例,一个贪吃蛇小游戏
- 一个贪吃蛇小游戏(17行代码)
- c语言控制台的一个贪吃蛇小游戏
- 写了一个苹果机的小游戏,请大家指点!