2020-10-13 用JavaScript做的贪吃蛇小游戏

用JavaScript做的贪吃蛇小游戏

<!doctype html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}#main{margin: 100px;}.btn{width: 100px;height: 40px;}.aaa{position: relative;top: 40px;border: solid 1px darkred;background-color: #fafafa;}</style></head><body><div id="main"><button type="button" class="btn" id="begin">开始游戏</button><button type="button" class="btn" id="pause">暂停游戏</button><span class="gtitle">第一关 分数：<span id="fs">0</span></span></div></body><script type="text/javascript">var tase=0;console.time(tase);var fs =document.getElementById('fs');var main = document.getElementById('main');var showcanvas = true; //是否开启画布格子function Map(atom,xnum,ynum){this.atom = atom;  //原子大小宽和高一样 10this.xnum = xnum;  //横向原子数量this.ynum = ynum;  //纵向原子数量this.canvas = null;//创建画布方法this.create = function(){this.canvas = document.createElement('div');this.canvas.style.cssText="position: relative;top: 40px;border: solid 2px darkred;background: black"this.canvas.style.width = this.atom * this.xnum +'px'; //画布的宽this.canvas.style.height = this.atom * this.ynum +'px'; //画布的高main.appendChild(this.canvas);if(showcanvas){for(var y=0;y<ynum;y++){for(var x=0;x<xnum;x++){var a =document.createElement('div');a.style.cssText='border: 1px solid yellow;';a.style.width = this.atom +'px';a.style.height = this.atom +'px';a.style.background='#61ffb8';this.canvas.appendChild(a);a.style.position='absolute';a.style.left=x*this.atom+'px'a.style.top =y*this.ynum+'px'}}}}}// 食物function Food(map){this.width = map.atom;this.height = map.atom;//随机颜色this.bgcolor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";// this.bgcolor='pink'this.x = Math.floor(Math.random()*map.xnum);this.y = Math.floor(Math.random()*map.ynum);this.flag = document.createElement('div');this.flag.style.width = this.width +'px';this.flag.style.height = this.height +'px';this.flag.style.backgroundColor = this.bgcolor;this.flag.borderRadius='50%';this.flag.style.position='absolute';this.flag.style.left = this.x * this.width +'px';this.flag.style.top = this.y * this.height +'px';map.canvas.appendChild(this.flag);}function Snake(map){//设置宽，高this.width = map.atom;this.height = map.atom;//默走的方向this.direction = "right";this.body=[{x:2,y:0}, //蛇头 1{x:1,y:0}, //蛇身 2{x:0,y:0}, //蛇尾 3];//显示蛇this.display = function(){for(var i=0;i<this.body.length;i++){if(this.body[i].x !=null){ //当吃到食物时x=null,不能新建,不然会在0，0处理新建一个var s =document.createElement('div');//将节点保存到一个状态变量中this.body[i].flag = s;//设置蛇的样式；s.style.width = this.width +'px';s.style.height = this.height +'px';// s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";s.style.backgroundColor='pink'//设置位置s.style.position = 'absolute's.style.left = this.body[i].x *this.width +'px';s.style.top =this.body[i].y *this.height +'px'map.canvas.appendChild(s)}}}//蛇运动this.run = function(event){for(var i=this.body.length-1;i>0;i--){this.body[i].x = this.body[i-1].x;this.body[i].y = this.body[i-1].y;}//根据方向梳理蛇头switch(this.direction){case "left":this.body[0].x -=1;break;case "right":this.body[0].x +=1;break;case "up":this.body[0].y -=1;break;case "down":this.body[0].y +=1;break;}//判断蛇头吃到食物if(this.body[0].x == food.x && this.body[0].y == food.y){//蛇加一节，根据最后节点定this.body.push({x:null,y:null,flag:null});map.canvas.removeChild(food.flag);//查看长度fs.innerHTML = this.body.length-3;food = new Food(map)}//判断是否出界if(this.body[0].x<0 || this.body[0].x>map.xnum-1 || this.body[0].y<0 || this.body[0].y>map.ynum-1 ){clearInterval(timer);alert('游戏失败');//重新开始游戏restart(map,snake)return false;}//判断是否和自己重和for(var i=4;i<this.body.length;i++){if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){clearInterval(timer);alert('游戏失败');//重新开始游戏restart(map,snake)return false;}}for(var i=0; i<this.body.length;i++){if(this.body[i].flag !=null) {  //map.canvas.removeChild(this.body[i].flag)}}this.display();}}//重新开始游戏function restart(map,snake){for(var i=0;i<snake.body.length;i++){map.canvas.removeChild(snake.body[i].flag);}snake.body =[{x:2,y:0}, //蛇头 1{x:1,y:0}, //蛇身 2{x:0,y:0}, //蛇尾 3];snake.direction = 'right';snake.display();map.canvas.removeChild(food.flag);food = new Food(map); fs.innerHTML=0;}//地图var map = new Map(20,40,20);//画布map.create();//食物var food = new Food(map);//蛇var snake = new Snake(map);snake.display();//给body加方向事件window.onkeydown = function(e){var event = e || window.event;switch(event.keyCode){case 38:if(snake.direction !="down"){snake.direction = "up";}break;case 40:if(snake.direction !="up"){snake.direction = "down";}break;case 37:if(snake.direction !="right"){snake.direction = "left";}break;case 39:if(snake.direction !="left"){snake.direction = "right";}break;}}var timer //变量提升var shudu=180;       document.getElementById('begin').onclick = function (){clearInterval(timer);timer = setInterval(function(){snake.run()},shudu)}document.getElementById('pause').onclick = function (){clearInterval(timer);}     console.timeEnd(tase)</script>
</html>

2020-10-13 用JavaScript做的贪吃蛇小游戏相关推荐

用 typescript 做一个贪吃蛇小游戏
typescript 做一个贪吃蛇小游戏搭建环境创建 tscofig.json 文件配置如下 {"compilerOptions": {"target": ...
Easyx图形库+C++做一个贪吃蛇小游戏数据结构课程设计
Easyx图形库+C++做一个贪吃蛇小游戏数据结构课程设计程序界面 ① 游戏开始界面(如下图): 显示游戏标题,提供"开始游戏"."游戏模式"和" ...
10分钟用Python编写一个贪吃蛇小游戏
贪吃蛇,大家应该都玩过.当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路所有的游戏最主要 ...
python编程小游戏-10分钟用Python编写一个贪吃蛇小游戏，简单
贪吃蛇,大家应该都玩过.小编当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路所有的游戏最 ...
10分钟用python编写贪吃蛇小游戏_牛得一批！10分钟用Python编写一个贪吃蛇小游戏...
贪吃蛇,大家应该都玩过.当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路所有的游戏最主要 ...
10分钟python游戏_牛得一批！10分钟用Python编写一个贪吃蛇小游戏
贪吃蛇,大家应该都玩过.当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路所有的游戏最主要 ...
10 分钟用 Python 编写一个贪吃蛇小游戏
贪吃蛇,大家应该都玩过.当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路所有的游戏最主要 ...
如何用python做一个贪吃蛇小游戏并给游戏加上背景音乐（pygame的应用）
导入模块 import pygame import sys import time import random from pygame.locals import * 定义颜色变量 redColour ...
JavaScript-一个贪吃蛇小游戏
JavaScript做的贪吃蛇小游戏,有点长. 三个对象:地图对象,食物对象,蛇对象. 注意事项:见注释. 还没有设置关卡,失败重新开始.
手把手教你做一个Java贪吃蛇小游戏
大家好,我是孙不坚1208,这篇博客给大家分享一下:如何做一个贪吃蛇小游戏(Java版)的exe应用程序,希望能给需要帮助的朋友带来方便. 手把手教你做一个Java贪吃蛇小游戏的exe应用程序一.J ...

2020-10-13 用JavaScript做的贪吃蛇小游戏

用JavaScript做的贪吃蛇小游戏

2020-10-13 用JavaScript做的贪吃蛇小游戏相关推荐

最新文章

热门文章