用js写一个贪吃蛇小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
body{
margin: 0px;
padding: 0px;
}
#main{
margin: 100px;
}
.btn{
width: 100px;
height: 40px;
}
.gtitle{
font-size: 25px;
font-width: bold;
}
#guan{
color: red;
}
</style>
</head>
<body> <div id="main">
<h1>贪吃蛇</h1>
<input type="button" value="开始游戏" class="btn" id="begin">
<input type="button" value="暂停游戏" class="btn" id="pause">
<span class="gtitle">第<span id="guan">1</span>关</span>
<script>
var main = document.getElementById('main');
var show_canvas = true;//是否开启画布格子
/*
地图对象的构造方法
atom 原子大小宽高是 10px
xnum 水平原子的数量
ynum 竖直方向原子数量
*/
function Map(atom, xnum, ynum) {
this.atom = atom;
this.xnum = xnum;
this.ynum = ynum;
this.canvas = null;
//创建画布
this.create = function () {
this.canvas = document.createElement('div');
this.canvas.style.cssText="position:relative;left:300px;top:40px;" +
"border:1px solid darkred;background:#FAFAFA";
this.canvas.style.width = this.atom * this.xnum + 'px';
this.canvas.style.height = this.atom * this.ynum + 'px';
main.appendChild(this.canvas);
if(show_canvas){
for(var x = 0; x < xnum; x++) {
for(var y = 0; y < ynum; y++) {
var a = document.createElement('div');
a.style.cssText = "position:absolute;border:1px solid yellow;";
a.style.width = this.atom + "px";
a.style.height = this.atom + "px";
a.style.backgroundColor = "green";
a.style.left = x * this.atom +"px";
a.style.top = y * this.atom +"px";
this.canvas.appendChild(a);
}
}
}
}
}
/*
*创建食物的构造方法
*
*/
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.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.style.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}, //蛇头
{x:1, y:0}, //蛇身
{x:0, y:0}, //蛇尾
];
//显示蛇
this.display = function () {
for(let i =0;i < this.body.length; i++){
if(this.body[i].x !=null) {
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 = "red";
//设置位置rang
s.style.position = "absolute";
s.style.border = "1px solid yellow";
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 () {
/*
{x:2,y:0}, //蛇头
{x:1,y:0}, //蛇身
{x:0,y:0} //蛇尾
*/
//alert(this.body.length);
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; }
//默认是right left up down
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);//删除食物
food = new Food(map);//再随机产生一个食物 //设置级别
if(this.body.length > L.slength){
L.set();
}
} //判断是否出界
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("GAME OVER");
restart(map, this);
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("GAME OVER");
restart(map, this);
return false;
}
} //删除节点
for(let i = 0; i < this.body.length; i++){
if(this.body[i].flag!=null) {//当吃到食物，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}, //蛇头
{x:1, y:0}, //蛇身
{x:0, y:0}, //蛇尾
];
snake.direction = "right";//初始化方向
map.canvas.removeChild(food.flag);
snake.display();
food = new Food(map);
}
//设置级别对象
function Level() {
this.num = 1;//级别数;
this.speek = 100;
this.slength = 5;// this.set = function () {
this.num++;
if(this.speek <= 50){
this.speek=50;
}else{
this.speek -= 50;
}
this.slength+=1;
start();
this.display();
};
this.display = function (){
document.getElementById('guan').innerHTML = this.num;
}
}
var L = new Level();
L.display();
//创建地图对象;
var map = new Map(20, 40, 20);
map.create();//显示画布
// 创建食物对象
var food = new Food(map); //创建蛇对象
var snake = new Snake(map);
snake.display(); //添加键盘事件，上下左右
window.onkeydown = function (e) {
var event = e || window.event;
// alert(event.keyCode);
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;//变量可以提升； function start(){
clearInterval(timer);
timer = setInterval(function () {
snake.run();
},L.speek);
}
document.getElementById('begin').onclick=function () {
start();
};
document.getElementById('pause').onclick = function () {
clearInterval(timer);
}
</script>
</div>
</body>
</html>
用js写一个贪吃蛇小游戏的更多相关文章
- Java 用java GUI写一个贪吃蛇小游戏
目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...
- html5面向对象做一个贪吃蛇小游戏
canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）
C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
随机推荐
- 详解 Set接口
(请关注 本人"集合"总集篇博文--<详解 Collection接口>) 在Collection接口的子接口中,最重要的,也是最常见的两个-- List接口 和 Set ...
- SpringBoot集成Shiro实现权限控制
Shiro简介 Apache Shiro是一个功能强大且易于使用的Java安全框架,用于执行身份验证,授权,加密和会话管理.使用Shiro易于理解的API,您可以快速轻松地保护任何应用程序-从最小的移 ...
- shiro：加密及密码比对器（三）
基于[自定义remle(二)]项目增加加密功能 1:数据库t_user表增加一列(盐) 增加字段:salt CREATE TABLE `t_user` ( `id` int(11) NOT NULL ...
- Linux 高 wio 分析
High IO wait Table of Contents 1. 现象 2. 分析 2.1. iotop或者pidstat 2.1.1. iotop 2.1.2. pidstat 2.2. 脚本 2 ...
- DMTF 关于 CIM-XML 的幻灯片介绍
https://members.dmtf.org/data/presentations/devcon02/JimDavis-IntroductiontoCIM-XML.pdf
- 设置共享内存大小 【windows】
hMapFile = CreateFileMapping( INVALID_HANDLE_VALUE, // use paging file NULL, // default security PAG ...
- Node 接入阿里云实现短信验证码
本文介绍在案例云开通短信服务的流程以及在Node项目中使用的方法. 一.开通阿里云短信服务 登陆阿里云,然后进入 https://dysms.console.aliyun.com/dysms.htm ...
- Scala教程之:Either
在之前的文章中我们提到了Option,scala中Option表示存在0或者1个元素,如果在处理异常的时候Option就会有很大的限制,因为Option如果返回None,那么我并不知道具体的异常到底是 ...
- 【Linux常见命令】tr命令
tr - translate or delete characters tr 命令用于转换或删除文件中的字符. tr 指令从标准输入设备读取数据,经过字符串转译后,将结果输出到标准输出设备. 语法: ...
- Nest.js 6.0.0 正式版发布，基于 TypeScript 的 Node.js 框架
开发四年只会写业务代码,分布式高并发都不会还做程序员? Nest.js 6.0.0 正式版发布了.Nest 是构建高效.可扩展的 Node.js Web 应用程序的框架.它使用现代的 JavaSc ...